From c27ba73117f0ac25528277fd0c4361126d015d15 Mon Sep 17 00:00:00 2001
From: Vinutha Karanth <vinutha.karanth@gmail.com>
Date: Wed, 13 Apr 2022 17:26:34 -0700
Subject: [PATCH]  All component title and descriptions should be aligned
 (#1346)

* update

Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com>

* lintfix

Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com>
---
 .../describer/modelAssessment/Constants.ts    |  2 +-
 .../CausalInsights.styles.ts                  |  2 +-
 .../CausalAggregateView.tsx                   |  6 ++++-
 .../CausalIndividualView.tsx                  |  6 ++++-
 .../TreatmentBarChartSection.tsx              |  2 +-
 .../TreatmentView/TreatmentListSection.tsx    |  4 +--
 .../TreatmentView/TreatmentStyles.ts          |  1 -
 .../TreatmentView/TreatmentTable.styles.ts    |  1 -
 .../TreatmentView/TreatmentTableSection.tsx   |  2 +-
 .../TreatmentView/TreatmentView.tsx           |  7 ++++-
 .../src/lib/LocalImportanceChart.tsx          |  2 +-
 .../src/lib/DatasetExplorerTab.styles.ts      |  6 ++---
 .../src/lib/DatasetExplorerTab.tsx            | 26 ++++++++++---------
 .../ErrorAnalysisView/ErrorAnalysis.styles.ts |  2 ++
 .../ErrorAnalysisViewTab.tsx                  |  2 +-
 .../GlobalExplanationTab.styles.ts            |  2 ++
 .../WhatIfTab/LocalImportancePlots.tsx        |  2 +-
 .../Controls/WhatIfTab/WhatIfTab.styles.ts    |  2 ++
 .../IndividualFeatureImportanceView.styles.ts |  7 +++--
 .../IndividualFeatureImportanceView.tsx       |  2 +-
 20 files changed, 53 insertions(+), 33 deletions(-)

diff --git a/apps/widget-e2e/src/describer/modelAssessment/Constants.ts b/apps/widget-e2e/src/describer/modelAssessment/Constants.ts
index 8af1a25d33..555265d38c 100644
--- a/apps/widget-e2e/src/describer/modelAssessment/Constants.ts
+++ b/apps/widget-e2e/src/describer/modelAssessment/Constants.ts
@@ -11,7 +11,7 @@ export enum Locators {
   IFIExpandCollapseButton = "[aria-label='expand collapse group']",
   IFITableRowSelected = 'div[class^="ms-List-page"] div[class^="ms-DetailsRow"] div[class^="ms-Check is-checked"]',
   IFIDropdownSelectedOption = "div[class^='featureImportanceChartAndLegend']",
-  IFIScrollableTable = "div.tabularDataView div.ms-ScrollablePane div.ms-ScrollablePane--contentContainer",
+  IFIScrollableTable = "div[class*='tabularDataView'] div.ms-ScrollablePane div.ms-ScrollablePane--contentContainer",
   IFINumberOfBars = "#FeatureImportanceBar svg g.highcharts-series-group rect",
   IFIYAxisValue = '#FeatureImportanceBar div[class^="rotatedVerticalBox-"]',
   IFIXAxisValue = "#FeatureImportanceBar g.highcharts-xaxis-labels text",
diff --git a/libs/causality/src/lib/CausalAnalysisDashboard/CausalInsights.styles.ts b/libs/causality/src/lib/CausalAnalysisDashboard/CausalInsights.styles.ts
index cca90386f9..1ee3b3121e 100644
--- a/libs/causality/src/lib/CausalAnalysisDashboard/CausalInsights.styles.ts
+++ b/libs/causality/src/lib/CausalAnalysisDashboard/CausalInsights.styles.ts
@@ -18,7 +18,7 @@ export const causalInsightsStyles: () => IProcessedStyleSet<ICausalInsightsStyle
     return mergeStyleSets<ICausalInsightsStyles>({
       container: {
         color: theme.semanticColors.bodyText,
-        padding: "0 40px 10px 20px"
+        padding: "0 40px 10px 40px"
       }
     });
   };
diff --git a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/CausalAggregateView/CausalAggregateView.tsx b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/CausalAggregateView/CausalAggregateView.tsx
index 5ea40dfccc..484a343d00 100644
--- a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/CausalAggregateView/CausalAggregateView.tsx
+++ b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/CausalAggregateView/CausalAggregateView.tsx
@@ -30,7 +30,11 @@ export class CausalAggregateView extends React.PureComponent<ICausalAggregateVie
     const styles = CausalAggregateStyles();
     this.props.data.global_effects.sort((d1, d2) => d2.point - d1.point);
     return (
-      <Stack id="causalAggregateView" grow tokens={{ padding: "l1" }}>
+      <Stack
+        id="causalAggregateView"
+        grow
+        tokens={{ childrenGap: "l1", padding: "8px" }}
+      >
         <Stack horizontal={false}>
           <Stack.Item>
             <Text variant={"medium"} className={styles.label}>
diff --git a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/CausalIndividualView/CausalIndividualView.tsx b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/CausalIndividualView/CausalIndividualView.tsx
index c3fb353e35..ea72efa648 100644
--- a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/CausalIndividualView/CausalIndividualView.tsx
+++ b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/CausalIndividualView/CausalIndividualView.tsx
@@ -44,7 +44,11 @@ export class CausalIndividualView extends React.PureComponent<
   public render(): React.ReactNode {
     const styles = CausalIndividualStyles();
     return (
-      <Stack id="causalIndividualView" grow tokens={{ padding: "l1" }}>
+      <Stack
+        id="causalIndividualView"
+        grow
+        tokens={{ childrenGap: "l1", padding: "8px" }}
+      >
         <Stack.Item>
           <Text variant={"medium"} className={styles.description}>
             {localization.CausalAnalysis.IndividualView.description}
diff --git a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentBarChartSection.tsx b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentBarChartSection.tsx
index 6b6ea727a9..16c812499b 100644
--- a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentBarChartSection.tsx
+++ b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentBarChartSection.tsx
@@ -29,7 +29,7 @@ export class TreatmentBarChartSection extends React.PureComponent<ITreatmentBarC
       this.props.data.treatment_feature
     );
     return (
-      <Stack horizontal grow tokens={{ padding: "16px 8px" }}>
+      <Stack horizontal grow>
         <Stack.Item className={styles.treatmentBarContainer}>
           {this.props.data?.policy_gains ? (
             <BasicHighChart
diff --git a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentListSection.tsx b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentListSection.tsx
index d705f2551a..b8f3ca7225 100644
--- a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentListSection.tsx
+++ b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentListSection.tsx
@@ -39,12 +39,12 @@ export class TreatmentListSection extends React.Component<
   public render(): React.ReactNode {
     const styles = TreatmentTableStyles();
     return (
-      <Stack horizontal={false} grow tokens={{ padding: "l1" }}>
+      <Stack horizontal={false} grow tokens={{ childrenGap: "l1" }}>
         <Stack.Item>
           <Label>{localization.Counterfactuals.individualTreatment}</Label>
         </Stack.Item>
         <Stack.Item>
-          <Stack horizontal grow tokens={{ padding: "l1" }}>
+          <Stack horizontal grow tokens={{ childrenGap: "l1" }}>
             <Stack.Item className={styles.detailsList}>
               <Stack horizontal>
                 <Stack.Item className={styles.spinButtonText}>
diff --git a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentStyles.ts b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentStyles.ts
index 7621d3567d..f82f24a14a 100644
--- a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentStyles.ts
+++ b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentStyles.ts
@@ -41,7 +41,6 @@ export const TreatmentStyles: () => IProcessedStyleSet<ITreatmentStyles> =
       },
       header: {
         fontSize: 14,
-        margin: "20px",
         maxWidth: descriptionMaxWidth,
         textAlign: "left"
       },
diff --git a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentTable.styles.ts b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentTable.styles.ts
index 1b199481ee..c5a72a9298 100644
--- a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentTable.styles.ts
+++ b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentTable.styles.ts
@@ -36,7 +36,6 @@ export const TreatmentTableStyles: () => IProcessedStyleSet<ITreatmentTableStyle
         paddingTop: "50px"
       },
       dropdown: {
-        paddingLeft: "20px",
         width: "220px"
       },
       label: {
diff --git a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentTableSection.tsx b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentTableSection.tsx
index c045c7e806..4c1880d3a0 100644
--- a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentTableSection.tsx
+++ b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentTableSection.tsx
@@ -28,7 +28,7 @@ export class TreatmentTableSection extends React.Component<ITreatmentTableSectio
       return <div>{localization.CausalAnalysis.TreatmentPolicy.noData}</div>;
     }
     return (
-      <Stack horizontal={false} grow tokens={{ padding: "l1" }}>
+      <Stack horizontal={false} grow tokens={{ childrenGap: "l1" }}>
         <Stack.Item>
           <Label>
             {localization.formatString(
diff --git a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentView.tsx b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentView.tsx
index 30d10f63d2..3b2fc3f00c 100644
--- a/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentView.tsx
+++ b/libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentView.tsx
@@ -32,7 +32,12 @@ export class TreatmentView extends React.Component<
   public render(): React.ReactNode {
     const styles = TreatmentStyles();
     return this.state.selectedPolicy ? (
-      <Stack id="treatmentView" horizontal={false} grow>
+      <Stack
+        id="treatmentView"
+        horizontal={false}
+        grow
+        tokens={{ childrenGap: "l1", padding: "8px" }}
+      >
         <Stack.Item className={styles.header}>
           <Text variant={"medium"}>
             {localization.CausalAnalysis.TreatmentPolicy.header}
diff --git a/libs/counterfactuals/src/lib/LocalImportanceChart.tsx b/libs/counterfactuals/src/lib/LocalImportanceChart.tsx
index be39efbf7c..329588bc1b 100644
--- a/libs/counterfactuals/src/lib/LocalImportanceChart.tsx
+++ b/libs/counterfactuals/src/lib/LocalImportanceChart.tsx
@@ -39,7 +39,7 @@ export class LocalImportanceChart extends React.PureComponent<ILocalImportanceCh
       );
     }
     return (
-      <Stack horizontal={false} grow tokens={{ padding: "l1" }}>
+      <Stack horizontal={false} grow tokens={{ childrenGap: "l1" }}>
         <Stack.Item>
           <Text variant={"medium"} id="LocalImportanceDescription">
             {localization.formatString(
diff --git a/libs/dataset-explorer/src/lib/DatasetExplorerTab.styles.ts b/libs/dataset-explorer/src/lib/DatasetExplorerTab.styles.ts
index eed857ed11..7e2cd21d10 100644
--- a/libs/dataset-explorer/src/lib/DatasetExplorerTab.styles.ts
+++ b/libs/dataset-explorer/src/lib/DatasetExplorerTab.styles.ts
@@ -80,8 +80,7 @@ export const datasetExplorerTabStyles: () => IProcessedStyleSet<IDatasetExplorer
       },
       cohortPickerWrapper: {
         alignItems: "center",
-        height: "32px",
-        padding: "0 0 0 33px"
+        height: "32px"
       },
       colorBox: {
         borderRadius: "6px",
@@ -111,7 +110,6 @@ export const datasetExplorerTabStyles: () => IProcessedStyleSet<IDatasetExplorer
       },
       infoWithText: {
         maxWidth: descriptionMaxWidth,
-        paddingLeft: "33px",
         width: "100%"
       },
       legendAndText: {
@@ -135,7 +133,7 @@ export const datasetExplorerTabStyles: () => IProcessedStyleSet<IDatasetExplorer
       page: {
         color: theme.semanticColors.bodyText,
         height: "100%",
-        padding: "16px 40px 0 14px",
+        padding: "0 40px 10px 40px",
         width: "100%"
       },
       rotatedVerticalBox: {
diff --git a/libs/dataset-explorer/src/lib/DatasetExplorerTab.tsx b/libs/dataset-explorer/src/lib/DatasetExplorerTab.tsx
index 7852d8fcfd..f11afc09f8 100644
--- a/libs/dataset-explorer/src/lib/DatasetExplorerTab.tsx
+++ b/libs/dataset-explorer/src/lib/DatasetExplorerTab.tsx
@@ -142,18 +142,20 @@ export class DatasetExplorerTab extends React.Component<
           </Text>
         </Stack.Item>
         <Stack.Item className={classNames.cohortPickerWrapper}>
-          <Text variant="mediumPlus" className={classNames.cohortPickerLabel}>
-            {localization.Interpret.ModelPerformance.cohortPickerLabel}
-          </Text>
-          {cohortOptions && (
-            <Dropdown
-              className={classNames.cohortDropdown}
-              id="dataExplorerCohortDropdown"
-              options={cohortOptions}
-              selectedKey={this.state.selectedCohortIndex}
-              onChange={this.setSelectedCohort}
-            />
-          )}
+          <Stack horizontal grow>
+            <Text variant="mediumPlus" className={classNames.cohortPickerLabel}>
+              {localization.Interpret.ModelPerformance.cohortPickerLabel}
+            </Text>
+            {cohortOptions && (
+              <Dropdown
+                className={classNames.cohortDropdown}
+                id="dataExplorerCohortDropdown"
+                options={cohortOptions}
+                selectedKey={this.state.selectedCohortIndex}
+                onChange={this.setSelectedCohort}
+              />
+            )}
+          </Stack>
         </Stack.Item>
         <Stack.Item>
           {this.state.yDialogOpen && (
diff --git a/libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysis.styles.ts b/libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysis.styles.ts
index 79d6a99c39..e163f22738 100644
--- a/libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysis.styles.ts
+++ b/libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysis.styles.ts
@@ -12,6 +12,7 @@ export interface IErrorAnalysisStyles {
   errorAnalysis: IStyle;
   cohortInfo: IStyle;
   featureList: IStyle;
+  errorAnalysisWrapper: IStyle;
 }
 
 export const errorAnalysisStyles: () => IProcessedStyleSet<IErrorAnalysisStyles> =
@@ -27,6 +28,7 @@ export const errorAnalysisStyles: () => IProcessedStyleSet<IErrorAnalysisStyles>
         overflow: "auto",
         width: "100%"
       },
+      errorAnalysisWrapper: { paddingLeft: "15px" },
       featureList: {
         padding: "16px 0 10px 0"
       }
diff --git a/libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysisViewTab.tsx b/libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysisViewTab.tsx
index a67ec591ec..993b1c7668 100644
--- a/libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysisViewTab.tsx
+++ b/libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysisViewTab.tsx
@@ -72,7 +72,7 @@ export class ErrorAnalysisViewTab extends React.Component<
           tokens={{ padding: "l1" }}
           className={classNames.errorAnalysis}
         >
-          <Stack horizontal>
+          <Stack horizontal className={classNames.errorAnalysisWrapper}>
             <Stack.Item>
               <Pivot
                 onLinkClick={this.handleTabClick}
diff --git a/libs/interpret/src/lib/MLIDashboard/Controls/GlobalExplanationTab/GlobalExplanationTab.styles.ts b/libs/interpret/src/lib/MLIDashboard/Controls/GlobalExplanationTab/GlobalExplanationTab.styles.ts
index d7f5af8e73..677b4b3a7e 100644
--- a/libs/interpret/src/lib/MLIDashboard/Controls/GlobalExplanationTab/GlobalExplanationTab.styles.ts
+++ b/libs/interpret/src/lib/MLIDashboard/Controls/GlobalExplanationTab/GlobalExplanationTab.styles.ts
@@ -40,6 +40,7 @@ export const globalTabStyles: () => IProcessedStyleSet<IGlobalTabStyles> =
         width: "80%"
       },
       chartContainer: {
+        paddingLeft: "25px",
         width: "100%"
       },
       chartLeftPart: {
@@ -99,6 +100,7 @@ export const globalTabStyles: () => IProcessedStyleSet<IGlobalTabStyles> =
         display: "flex",
         flexDirection: "row",
         height: "100%",
+        paddingLeft: "25px",
         width: "100%"
       },
       sliderLabel: {
diff --git a/libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/LocalImportancePlots.tsx b/libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/LocalImportancePlots.tsx
index dea0114234..fedafa7b5e 100644
--- a/libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/LocalImportancePlots.tsx
+++ b/libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/LocalImportancePlots.tsx
@@ -402,7 +402,7 @@ export class LocalImportancePlots extends React.Component<
       }
     ];
     return (
-      <div id="subPlotContainer">
+      <div id="subPlotContainer" className={classNames.subPlotContainer}>
         {this.props.invokeModel ? (
           <div className={classNames.choiceBoxArea} id="subPlotChoice">
             <Text variant="medium" className={classNames.boldText}>
diff --git a/libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/WhatIfTab.styles.ts b/libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/WhatIfTab.styles.ts
index 0bd3895c2e..6b32562f47 100644
--- a/libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/WhatIfTab.styles.ts
+++ b/libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/WhatIfTab.styles.ts
@@ -75,6 +75,7 @@ export interface IWhatIfTabStyles {
   infoButton: IStyle;
   rightJustifiedContainer: IStyle;
   notAvailable: IStyle;
+  subPlotContainer: IStyle;
 }
 
 export const whatIfTabStyles: () => IProcessedStyleSet<IWhatIfTabStyles> =
@@ -342,6 +343,7 @@ export const whatIfTabStyles: () => IProcessedStyleSet<IWhatIfTabStyles> =
         flex: 1,
         paddingRight: legendWidth
       },
+      subPlotContainer: { paddingLeft: 25 },
       tooltipColumn: {
         alignItems: "flex-start",
         boxSizing: "border-box",
diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView.styles.ts b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView.styles.ts
index 0781849ecd..d6e366cace 100644
--- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView.styles.ts
+++ b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView.styles.ts
@@ -16,6 +16,7 @@ export interface IFeatureImportanceStyles {
   headerTitle: IStyle;
   infoWithText: IStyle;
   selectionCounter: IStyle;
+  tabularDataView: IStyle;
 }
 
 export const individualFeatureImportanceViewStyles: () => IProcessedStyleSet<IFeatureImportanceStyles> =
@@ -47,9 +48,11 @@ export const individualFeatureImportanceViewStyles: () => IProcessedStyleSet<IFe
           paddingTop: 4
         }
       ],
-      infoWithText: { maxWidth: descriptionMaxWidth },
+      infoWithText: { maxWidth: descriptionMaxWidth, paddingLeft: 25 },
       selectionCounter: {
+        paddingLeft: 25,
         paddingTop: 12
-      }
+      },
+      tabularDataView: { paddingLeft: 25 }
     });
   };
diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView.tsx
index cc94e489de..0372cdefa9 100644
--- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView.tsx
+++ b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView.tsx
@@ -183,7 +183,7 @@ export class IndividualFeatureImportanceView extends React.Component<
             </Text>
           </LabelWithCallout>
         </Stack.Item>
-        <Stack.Item className="tabularDataView">
+        <Stack.Item className={classNames.tabularDataView}>
           <div style={{ height: "500px", position: "relative" }}>
             <Fabric>
               <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>