{Linked:Bug1560956; Linked:Bug9980658} [Adaptive Cards > Designer]: In 400% zoom mode, Content of the success dialog is getting truncated.

Target Platforms

Other

SDK Version

1.5

Application Name

Adaptive Cards

Problem Description

Test Environment: URL: https://adaptivecards.io/designer/ OS Version: 22H2(OS Build 25290.1010) Browser Version: Version 111.0.1660.12 (Official build) dev (64-bit) Screen Reader: Narrator Pre-Requisites: Step 1 : Enable the Display resolution to 1280*1024. Step 2 : Enable Scale and layout to 100%. Step 3 : Enable the browser setting to 400% zoom mode and reload the page.

Repro Steps:

Open the above URL in edge dev browser.
Navigate to 'Card Payload Editor' button and press enter key to activate it.
Paste the attached JSON and navigate to the 'Preview' button and press enter key to activate it.
Navigate the success dialog and observe the issue.

Actual Result:
In 400% zoom mode, content of the success dialog is truncated.

Expected Result: In 400% zoom mode, the content of the success dialog should be clearly visible.

PWD Impact: Users who rely on the large text for navigation through the page are getting impacted, as after resizing the page to 400% zoom mode, content of the success dialog and back button getting truncated.

MAS Reference: https://microsoft.sharepoint.com/:w:/r/sites/accessibility/_layouts/15/Doc.aspx?sourcedoc=%7B2ECDA461-6B98-45C8-8FB1-A9399A72DA17%7D&file=MAS%201.4.10%20%E2%80%93%20Reflow.docx&action=default&mobileredirect=true

Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com)"

Screenshots

MAS1 4 10- In 400% resize mode, elements under success dialog is getting cropped

Card JSON

{
    "schema": "http=//adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.2",
    "body": [
        {
            "id": "",
            "isVisible": true,
            "separator": false,
            "spacing": "default",
            "type": "Container",
            "bleed": false,
            "items": [
                {
                    "id": "",
                    "isVisible": true,
                    "separator": false,
                    "spacing": "none",
                    "width": "stretch",
                    "type": "Container",
                    "bleed": true,
                    "items": [],
                    "verticalContentAlignment": "center"
                },
                null
            ],
            "verticalContentAlignment": "center",
            "headerType": "empty"
        },
        {
            "id": "",
            "isVisible": true,
            "separator": false,
            "spacing": "default",
            "type": "Container",
            "bleed": false,
            "items": [
                {
                    "id": "",
                    "isVisible": true,
                    "separator": false,
                    "spacing": "padding",
                    "type": "Container",
                    "bleed": false,
                    "items": [
                        {
                            "id": "",
                            "isVisible": true,
                            "separator": false,
                            "spacing": "default",
                            "type": "Image",
                            "height": "auto",
                            "horizontalAlignment": "center",
                            "size": "auto",
                            "style": "default",
                            "url": "https://microsoft.sharepoint.com/sites/catalog/ClientSideAssets/12345678-9f17-4b50-8e1f-ea3145d8e95f/ThankYouImage_b45620fcdc4805f0f8e8d664d942eca1.png",
                            "altText": "Trophy Image"
                        },
                        {
                            "id": "",
                            "isVisible": true,
                            "separator": false,
                            "spacing": "large",
                            "type": "TextBlock",
                            "textStyle": "default",
                            "wrap": true,
                            "text": "Thank you!",
                            "size": "large",
                            "weight": "bolder",
                            "horizontalAlignment": "center"
                        },
                        {
                            "id": "",
                            "isVisible": true,
                            "separator": false,
                            "spacing": "default",
                            "type": "TextBlock",
                            "textStyle": "default",
                            "wrap": true,
                            "text": "You've successfully identified a phishing email. Your actions are helping keep everyone safe.",
                            "size": "default",
                            "color": "dark",
                            "horizontalAlignment": "center"
                        }
                    ],
                    "verticalContentAlignment": "center"
                },
                {
                    "id": "",
                    "isVisible": true,
                    "separator": false,
                    "spacing": "large",
                    "type": "ActionSet",
                    "actions": [
                        {
                            "style": "default",
                            "id": "HomeView",
                            "title": "Submit another issue",
                            "altText": "Submit another issue",
                            "type": "Action.Submit",
                            "associatedInputs": "auto",
                            "data": { "id": "HomeView" }
                        }
                    ]
                }
            ],
            "verticalContentAlignment": "center"
        }
    ],
    "actions": [],
    "refresh": null
}

Sample Code Language

No response

Sample Code

No response

microsoft / AdaptiveCards