Adaptive Card - Host Config for card width control

Question

I am trying to generate an image from the card. Webex has a narrow card width support and the card image I am generating with the following code without host config generates a wider image (similar to "Cortana Option") which gets resize on the Webex side (similar to bot framework) resized.

I am hoping to generate HTML with a smaller width similar to bot framework webchat so that resizing has a lesser impact on the overall card layout.

Webex has similar card width has a Bot framework webchat option on the designer. Which host does config control the width of the card? and What is the width option set for the "Bot Framework Webchat" option on the designer?

function cardToImage(card) {
    setupNodeAdaptiveCards();
    let adaptiveCard = new AdaptiveCards.AdaptiveCard();

    AdaptiveCards.AdaptiveCard.onProcessMarkdown = function (text, result) {
        result.outputHtml = markdownit().render(text);
        result.didProcess = true;
    };
    adaptiveCard.parse(card);
    // console.log(JSON.stringify(adaptiveCard))
    let cardElement = adaptiveCard.render();
    console.log(cardElement.outerHTML);
    elementToImage(cardElement.outerHTML);
}

Wider image:

Narrow Card:

Answer 1

You can find the default adaptiveCardHostConfig that Web Chat uses here. I don't know if it perfectly aligns with what the Adaptive Cards Designer uses, but it should get you in the ballpark.

It does pass in values taken from adjacent files, so you may need to roam in search of those.

{
  containerStyles: {
    default: {
      foregroundColors: {
        default: {
          default: bubbleTextColor,
          subtle
        },
        accent: {
          default: accent,
          subtle: accent
        }
      }
    },
    emphasis: {
      backgroundColor: cardEmphasisBackgroundColor,
      foregroundColors: {
        default: {
          default: bubbleTextColor,
          subtle
        }
      }
    },
    accent: {
      backgroundColor: '#C7DEF9',
      foregroundColors: {
        default: {
          default: '#333333',
          subtle: '#EE333333'
        }
      }
    },
    good: {
      backgroundColor: '#CCFFCC',
      foregroundColors: {
        default: {
          default: '#333333',
          subtle: '#EE333333'
        }
      }
    },
    attention: {
      backgroundColor: '#FFC5B2',
      foregroundColors: {
        default: {
          default: '#333333',
          subtle: '#EE333333'
        }
      }
    },
    warning: {
      backgroundColor: '#FFE2B2',
      foregroundColors: {
        default: {
          default: '#333333',
          subtle: '#EE333333'
        }
      }
    }
  },
  supportsInteractivity: true,
  fontFamily: primaryFont,
  imageSizes: {
    small: 40,
    medium: 80,
    large: 160
  },
  actions: {
    actionAlignment: 'stretch',
    actionsOrientation: 'vertical',
    buttonSpacing: 8,
    maxActions: 100,
    showCard: {
      actionMode: 'inline',
      inlineTopMargin: 8
    },
    spacing: 'default'
  },
  adaptiveCard: {
    allowCustomStyle: false
  },
  imageSet: {
    imageSize: 'medium',
    maxImageHeight: 100
  },
  factSet: {
    title: {
      color: 'default',
      size: 'default',
      isSubtle: false,
      weight: 'bolder',
      wrap: true,
      maxWidth: 150
    },
    value: {
      color: 'default',
      size: 'default',
      isSubtle: false,
      weight: 'default',
      wrap: true
    },
    spacing: 8
  }
}

Hope of help!