O365 MS Teams MessageCard img alignment issue in markdown text

132 Views Asked by At

I'm using a legacy MessageCard type to send to a Microsoft Teams channel connector. This card is used to accept user-supplied markdown as the text:

{
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "title": "title",
    "summary": "summary",
    "markdown": true,
    "text": user_markdown,
}

A common source for the markdown is to be provided something like a changelog, using list items, images, and text:

# Release Notes

What's new:

* <img style="width:16px; height:16px; vertical-align:middle;" src="data:image/svg+xml;base64,..." /> Issue 1
* <img style="width:16px; height:16px; vertical-align:middle;" src="data:image/svg+xml;base64,..." /> Issue 2

This works great and the markdown is rendered perfectly on desktop and web Teams clients.

good layout in desktop and web

But I have found that on the Teams mobile app there is some kind of different layout being applied to the markdown when displaying the same card that looks fine in other clients.

bad layout in mobile

Per this example you can see that it ignores the fixed image size and seems to enlarge it to the equivalent of "1.5em", and aligns it before the list item. I've been trying to fix this with various style settings to the img tag (float, display, ...), or wrapping the content in each list item to control the layout as a whole. But it seems the mobile client is applying some extra style to the img to make it display as "block" or similar.

Is it possible to correct the way images are aligned in this case?

Update:

Here is a complete repro for testing purposes:

teams_card.json

{
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "title": "title",
    "summary": "summary",
    "markdown": true,
    "text": "# Release Notes\n\nWhat's new:\n\n* <img style=\"width:16px; height:16px; vertical-align:middle;\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld2JveD0iMCAwIDE2IDE2Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0wIDEuNzc3QzAgLjc5Ni43OTYgMCAxLjc3NyAwaDEyLjQ0NkMxNS4yMDQgMCAxNiAuNzk2IDE2IDEuNzc3djEyLjQ0NmMwIC45ODEtLjc5NiAxLjc3Ny0xLjc3NyAxLjc3N0gxLjc3N0ExLjc3OCAxLjc3OCAwIDAgMSAwIDE0LjIyM1YxLjc3N3oiIGZpbGw9IiNGRjU2MzAiLz48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSI4IiBjeT0iOCIgcj0iNCIvPjwvZz48L3N2Zz4=\" /> Issue 1\n"
}

Sending to an existing MS Teams channel connector:

curl -H 'Content-Type: application/json' -d "@teams_card.json" https://<company>.webhook.office.com/webhookb2/<id path>
0

There are 0 best solutions below