fix(Cluster): layout for tabs content

Author: Raubzeug

src/containers/Cluster/Cluster.scss

@@ -32,12 +32,7 @@
     &__tabs-sticky-wrapper {
         z-index: 3;
 
-        margin-top: 20px;
-        margin-right: -40px;
-        padding-right: 40px;
-        padding-left: 20px;
-
-        transform: translateX(-20px);
+        @include mixins.cluster-full-width-area();
         @include mixins.sticky-top();
     }
     &__tabs {

src/containers/Storage/Storage.scss

@@ -21,11 +21,6 @@
     }
 
     &__controls {
-        width: unset;
-        margin-right: -40px;
-        padding-right: 40px;
-        padding-left: 20px;
-
-        transform: translateX(-20px);
+        @include mixins.cluster-full-width-area();
     }
 }

src/containers/Tablets/TabletsTable.scss

@@ -0,0 +1,7 @@
+@use '../../styles/mixins.scss';
+
+.ydb-tablets-table {
+    &__controls {
+        @include mixins.cluster-full-width-area();
+    }
+}

src/containers/Tablets/TabletsTable.tsx

@@ -19,12 +19,17 @@ import {TabletUptime} from '../../components/UptimeViewer/UptimeViewer';
 import {tabletApi} from '../../store/reducers/tablet';
 import {ETabletState} from '../../types/api/tablet';
 import type {TTabletStateInfo} from '../../types/api/tablet';
+import {cn} from '../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {getDefaultNodePath} from '../Node/NodePages';
 
 import i18n from './i18n';
 
+import './TabletsTable.scss';
+
+const b = cn('ydb-tablets-table');
+
 function getColumns({database}: {database?: string}) {
     const columns: DataTableColumn<TTabletStateInfo & {fqdn?: string}>[] = [
         {
@@ -189,8 +194,8 @@ export function TabletsTable({database, tablets, loading, error}: TabletsTablePr
     };
 
     return (
-        <TableWithControlsLayout>
-            <TableWithControlsLayout.Controls>
+        <React.Fragment>
+            <TableWithControlsLayout.Controls wrapperClassName={b('controls')}>
                 <Search
                     placeholder={i18n('controls.search-placeholder')}
                     onChange={handleSearchQueryChange}
@@ -204,15 +209,17 @@ export function TabletsTable({database, tablets, loading, error}: TabletsTablePr
                     current={filteredTablets.length}
                 />
             </TableWithControlsLayout.Controls>
-            {error ? <ResponseError error={error} /> : null}
-            <TableWithControlsLayout.Table loading={loading}>
-                <ResizeableDataTable
-                    columns={columns}
-                    data={filteredTablets}
-                    settings={DEFAULT_TABLE_SETTINGS}
-                    emptyDataMessage={i18n('noTabletsData')}
-                />
-            </TableWithControlsLayout.Table>
-        </TableWithControlsLayout>
+            <TableWithControlsLayout>
+                {error ? <ResponseError error={error} /> : null}
+                <TableWithControlsLayout.Table loading={loading}>
+                    <ResizeableDataTable
+                        columns={columns}
+                        data={filteredTablets}
+                        settings={DEFAULT_TABLE_SETTINGS}
+                        emptyDataMessage={i18n('noTabletsData')}
+                    />
+                </TableWithControlsLayout.Table>
+            </TableWithControlsLayout>
+        </React.Fragment>
     );
 }

src/containers/Tenants/Tenants.scss

@@ -54,11 +54,7 @@
     }
 
     &__controls {
-        width: 100%;
-    }
-
-    &__table-wrapper {
-        width: max-content;
+        @include mixins.cluster-full-width-area();
     }
 
     &__create-database {

src/containers/Tenants/Tenants.tsx

@@ -301,16 +301,16 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
     };
 
     return (
-        <div className={b('table-wrapper')}>
+        <React.Fragment>
+            <TableWithControlsLayout.Controls wrapperClassName={b('controls')}>
+                {renderControls()}
+            </TableWithControlsLayout.Controls>
             <TableWithControlsLayout>
-                <TableWithControlsLayout.Controls className={b('controls')}>
-                    {renderControls()}
-                </TableWithControlsLayout.Controls>
                 {error ? <ResponseError error={error} /> : null}
                 <TableWithControlsLayout.Table loading={loading}>
                     {currentData ? renderTable() : null}
                 </TableWithControlsLayout.Table>
             </TableWithControlsLayout>
-        </div>
+        </React.Fragment>
     );
 };

src/styles/mixins.scss

@@ -1,5 +1,14 @@
 @forward '@gravity-ui/uikit/styles/mixins.scss';
 
+@mixin cluster-full-width-area() {
+    width: unset;
+    margin-right: -40px;
+    padding-right: 40px;
+    padding-left: 20px;
+
+    transform: translateX(-20px);
+}
+
 @mixin container() {
     max-width: 1170px;
     margin: 0 auto;