fix vision data explorer elements truncated in smaller screen

microsoft · Jan 2, 2024 · a761762 · a761762
1 parent be00e9a
commit a761762
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/.../interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboard.styles.ts b/.../interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboard.styles.ts
@@ -7,6 +7,7 @@ import {
   IProcessedStyleSet,
   getTheme
 } from "@fluentui/react";
+import { flexMdDown } from "@responsible-ai/core-ui";
 export interface IVisionExplanationDashboardStyles {
   cohortDropdown: IStyle;
   cohortPickerLabel: IStyle;
@@ -17,6 +18,7 @@ export interface IVisionExplanationDashboardStyles {
   toolBarContainer: IStyle;
   itemsSelectedContainer: IStyle;
   legendIndicator: IStyle;
+  lowerToolbarContainer: IStyle;
   mainContainer: IStyle;
   mainImageContainer: IStyle;
   halfContainer: IStyle;
@@ -67,6 +69,7 @@ export const visionExplanationDashboardStyles: () => IProcessedStyleSet<IVisionE
         paddingRight: 20,
         paddingTop: 2
       },
+      lowerToolbarContainer: flexMdDown,
       mainContainer: {
         alignItems: "center",
         justifyContent: "space-between",
@@ -103,6 +106,7 @@ export const visionExplanationDashboardStyles: () => IProcessedStyleSet<IVisionE
         position: "relative"
       },
       toolBarContainer: {
+        ...flexMdDown,
         width: "100%"
       }
     });

diff --git a/.../interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboardHeader.tsx b/.../interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboardHeader.tsx
@@ -87,6 +87,7 @@ export class VisionExplanationDashboardHeader extends React.Component<
             horizontal
             horizontalAlign="space-between"
             verticalAlign="start"
+            className={this.props.classNames.lowerToolbarContainer}
           >
             <Stack.Item>
               <Slider