[Rendering] Text block, Image and Action is not aligning text perfectly.

Target Platforms

NodeJS

SDK Version

2.7.1

Application Name

Outlook, Adaptive Card Designer

Problem Description

One of our partners is trying to use the below JSON payload and they are getting the text alignment. This occurs in Outlook; my assumption is that it would occur in all the products which use NodeJS version of SDK. Even I checked in the Adaptive cards designer and I am getting the same result. Below screen shot is taken from designer rendering. This actually clearly visible in compact theme that we have in Outlook. Attached screenshot from Outlook as well.

Screenshots

From Designer:

From Outlook Compact theme:

Card JSON

{
    "type": "AdaptiveCard",
    "version": "1.4",
    "theme": "compact",
    "body": [
        {
            "columns": [
                {
                    "width": "auto",
                    "items": [
                        {
                            "pixelWidth": 16,
                            "width": "16px",
                            "url": "https://creospark.com/wp-content/uploads/2021/12/VivaTopics.png",
                            "horizontalAlignment": "Center",
                            "type": "Image"
                        }
                    ],
                    "verticalContentAlignment": "Center",
                    "type": "Column"
                },
                {
                    "width": "auto",
                    "items": [
                        {
                            "text": "Viva Topics found topic(s) in this message.",
                            "wrap": true,
                            "type": "TextBlock"
                        }
                    ],
                    "verticalContentAlignment": "Center",
                    "spacing": "Small",
                    "type": "Column"
                },
                {
                    "width": "stretch",
                    "items": [
                        {
                            "actions": [
                                {
                                    "url": "https://microsoft.com",
                                    "title": "Learn about Ministry of Home Affairs",
                                    "type": "Action.OpenUrl"
                                }
                            ],
                            "spacing": "None",
                            "type": "ActionSet"
                        }
                    ],
                    "verticalContentAlignment": "Center",
                    "spacing": "Small",
                    "type": "Column"
                }
            ],
            "type": "ColumnSet"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

Sample Code Language

No response

Sample Code

No response