All component title and descriptions should be aligned

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",

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"
       }
     });
   };

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}>

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}

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

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}>

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"
       },

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: {

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(

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}

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(

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: {

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 && (

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"
       }

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}

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: {

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}>

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",

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 }
     });
   };

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}>