#RI-3688 - fix widths for sections

Author: rsergeenko

redisinsight/ui/src/pages/databaseAnalysis/components/analysis-ttl-view/ExpirationGroupsView.tsx

@@ -106,7 +106,7 @@ const ExpirationGroupsView = (props: Props) => {
           data-testid="show-no-expiry-switch"
         />
       </div>
-      <div className={styles.content}>
+      <div className={cx('section-content', styles.content)}>
         <div className={styles.chart}>
           <AutoSizer>
             {({ width, height }) => (

redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.tsx

@@ -138,7 +138,7 @@ const SummaryPerData = ({ data, loading, extrapolation, onSwitchExtrapolation }:
           />
         )}
       </div>
-      <div className={styles.chartsWrapper} data-testid="summary-per-data-charts">
+      <div className={cx('section-content', styles.chartsWrapper)} data-testid="summary-per-data-charts">
         <DonutChart
           name="memory"
           data={memoryData}

redisinsight/ui/src/pages/databaseAnalysis/components/top-keys/TopKeys.tsx

@@ -60,22 +60,24 @@ const TopKeys = ({ data, loading }: Props) => {
           by Length
         </EuiButton>
       </div>
-      {tableView === TableView.MEMORY && (
-        <Table
-          data={topKeysMemory}
-          defaultSortField="memory"
-          delimiter={delimiter}
-          dataTestid="top-keys-table-memory"
-        />
-      )}
-      {tableView === TableView.KEYS && (
-        <Table
-          data={topKeysLength}
-          defaultSortField="length"
-          delimiter={delimiter}
-          dataTestid="top-keys-table-length"
-        />
-      )}
+      <div className="section-content">
+        {tableView === TableView.MEMORY && (
+          <Table
+            data={topKeysMemory}
+            defaultSortField="memory"
+            delimiter={delimiter}
+            dataTestid="top-keys-table-memory"
+          />
+        )}
+        {tableView === TableView.KEYS && (
+          <Table
+            data={topKeysLength}
+            defaultSortField="length"
+            delimiter={delimiter}
+            dataTestid="top-keys-table-length"
+          />
+        )}
+      </div>
     </div>
   )
 }

redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/TopNamespace.tsx

@@ -76,26 +76,28 @@ const TopNamespace = (props: Props) => {
           />
         )}
       </div>
-      {tableView === TableView.MEMORY && (
-      <Table
-        data={data?.topMemoryNsp ?? []}
-        defaultSortField="memory"
-        delimiter={data?.delimiter ?? ''}
-        isExtrapolated={isExtrapolated}
-        extrapolation={extrapolation}
-        dataTestid="nsp-table-memory"
-      />
-      )}
-      {tableView === TableView.KEYS && (
-        <Table
-          data={data?.topKeysNsp ?? []}
-          defaultSortField="keys"
-          delimiter={data?.delimiter ?? ''}
-          isExtrapolated={isExtrapolated}
-          extrapolation={extrapolation}
-          dataTestid="nsp-table-keys"
-        />
-      )}
+      <div className="section-content">
+        {tableView === TableView.MEMORY && (
+          <Table
+            data={data?.topMemoryNsp ?? []}
+            defaultSortField="memory"
+            delimiter={data?.delimiter ?? ''}
+            isExtrapolated={isExtrapolated}
+            extrapolation={extrapolation}
+            dataTestid="nsp-table-memory"
+          />
+        )}
+        {tableView === TableView.KEYS && (
+          <Table
+            data={data?.topKeysNsp ?? []}
+            defaultSortField="keys"
+            delimiter={data?.delimiter ?? ''}
+            isExtrapolated={isExtrapolated}
+            extrapolation={extrapolation}
+            dataTestid="nsp-table-keys"
+          />
+        )}
+      </div>
     </div>
   )
 }

redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/styles.module.scss

@@ -38,7 +38,6 @@
 }
 
 .wrapper {
-  max-width: 1920px;
 
   .wrapper .link {
     width: max-content;

redisinsight/ui/src/pages/databaseAnalysis/styles.module.scss

@@ -15,6 +15,11 @@
     }
   }
 
+  .section-content {
+    max-width: 1720px;
+    margin: 0 auto;
+  }
+
   .section-title-wrapper {
     display: flex;
     align-items: center;