From d0ff1a887bbf4591503fbb3c60e109c3c26529ed Mon Sep 17 00:00:00 2001
From: Ilya Matiach <ilmat@microsoft.com>
Date: Mon, 27 Nov 2023 17:48:18 -0500
Subject: [PATCH] fix vision dashboard flyout accessibility on smaller screen
 size

---
 .../VisionExplanationDashboard/Controls/Flyout.styles.ts | 9 +++++++++
 .../lib/VisionExplanationDashboard/Controls/Flyout.tsx   | 1 +
 2 files changed, 10 insertions(+)

diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/Flyout.styles.ts b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/Flyout.styles.ts
index caa9896aa5..2a607c6cd0 100644
--- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/Flyout.styles.ts
+++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/Flyout.styles.ts
@@ -25,6 +25,7 @@ export interface IFlyoutStyles {
   successIcon: IStyle;
   sectionIndent: IStyle;
   separator: IStyle;
+  stackDynamicScreenSize: IStyle;
   title: IStyle;
 }
 
@@ -90,6 +91,14 @@ export const flyoutStyles: () => IProcessedStyleSet<IFlyoutStyles> = () => {
     separator: {
       width: "100%"
     },
+    stackDynamicScreenSize: {
+      selectors: {
+        "@media (max-width: 740px)": {
+          alignItems: "flex-start",
+          flexFlow: "column"
+        }
+      }
+    },
     successIcon: {
       color: theme.semanticColors.successIcon,
       fontSize: "large",
diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/Flyout.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/Flyout.tsx
index 9b342dced5..74ce7acd85 100644
--- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/Flyout.tsx
+++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/Flyout.tsx
@@ -124,6 +124,7 @@ export class Flyout extends React.Component<IFlyoutProps, IFlyoutState> {
                 tokens={stackTokens.medium}
                 horizontalAlign="space-around"
                 verticalAlign="center"
+                className={classNames.stackDynamicScreenSize}
               >
                 <Stack.Item>
                   <Stack