fix vision dashboard flyout accessibility on smaller screen size

microsoft · Nov 27, 2023 · d0ff1a8 · d0ff1a8
1 parent e12a9f7
commit d0ff1a8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git 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
@@ -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