fix(Cluster): tune layout to handle properly sticky elements

Author: Raubzeug

src/components/TableWithControlsLayout/TableWithControlsLayout.tsx

@@ -8,7 +8,6 @@ const b = cn('ydb-table-with-controls-layout');
 interface TableWithControlsLayoutItemProps {
     children: React.ReactNode;
     className?: string;
-    wrapperClassName?: string;
 }
 
 interface TableProps extends TableWithControlsLayoutItemProps {
@@ -25,10 +24,9 @@ export const TableWithControlsLayout = ({
 TableWithControlsLayout.Controls = function TableControls({
     children,
     className,
-    wrapperClassName,
 }: TableWithControlsLayoutItemProps) {
     return (
-        <div className={b('controls-wrapper', wrapperClassName)}>
+        <div className={b('controls-wrapper')}>
             <div className={b('controls', className)}>{children}</div>
         </div>
     );

src/containers/Cluster/Cluster.scss

@@ -1,15 +1,14 @@
 @use '../../styles/mixins.scss';
 
 .ydb-cluster {
+    --cluster-side-padding: var(--g-spacing-5);
     position: relative;
 
-    display: flex;
     overflow: auto;
-    flex-grow: 1;
-    flex-direction: column;
 
+    width: 100%;
     height: 100%;
-    padding: 0 20px;
+    padding: 0 var(--cluster-side-padding);
 
     &__header {
         position: sticky;
@@ -33,11 +32,11 @@
         z-index: 3;
 
         margin-top: 20px;
-        margin-right: -40px;
-        padding-right: 40px;
-        padding-left: 20px;
+        margin-right: calc(var(--cluster-side-padding) * -2);
+        padding-right: calc(var(--cluster-side-padding) * 2);
+        padding-left: var(--cluster-side-padding);
 
-        transform: translateX(-20px);
+        transform: translateX(calc(var(--cluster-side-padding) * -1));
         @include mixins.sticky-top();
     }
     &__tabs {

src/containers/Storage/PaginatedStorageGroups.tsx

@@ -189,16 +189,12 @@ function GroupedStorageGroupsComponent({
     };
 
     return (
-        <React.Fragment>
-            <TableWithControlsLayout.Controls wrapperClassName={b('controls')}>
-                {renderControls()}
-            </TableWithControlsLayout.Controls>
-            <TableWithControlsLayout>
-                {error ? <ResponseError error={error} /> : null}
-                <TableWithControlsLayout.Table loading={isLoading} className={b('groups-wrapper')}>
-                    {renderGroups()}
-                </TableWithControlsLayout.Table>
-            </TableWithControlsLayout>
-        </React.Fragment>
+        <TableWithControlsLayout>
+            <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
+            {error ? <ResponseError error={error} /> : null}
+            <TableWithControlsLayout.Table loading={isLoading} className={b('groups-wrapper')}>
+                {renderGroups()}
+            </TableWithControlsLayout.Table>
+        </TableWithControlsLayout>
     );
 }

src/containers/Storage/PaginatedStorageNodes.tsx

@@ -195,17 +195,13 @@ function GroupedStorageNodesComponent({
     };
 
     return (
-        <React.Fragment>
-            <TableWithControlsLayout.Controls wrapperClassName={b('controls')}>
-                {renderControls()}
-            </TableWithControlsLayout.Controls>
-            <TableWithControlsLayout>
-                {error ? <ResponseError error={error} /> : null}
-                <TableWithControlsLayout.Table loading={isLoading} className={b('groups-wrapper')}>
-                    {renderGroups()}
-                </TableWithControlsLayout.Table>
-            </TableWithControlsLayout>
-        </React.Fragment>
+        <TableWithControlsLayout>
+            <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
+            {error ? <ResponseError error={error} /> : null}
+            <TableWithControlsLayout.Table loading={isLoading} className={b('groups-wrapper')}>
+                {renderGroups()}
+            </TableWithControlsLayout.Table>
+        </TableWithControlsLayout>
     );
 }
 

src/containers/Storage/Storage.scss

@@ -19,13 +19,4 @@
     &__groups-wrapper {
         padding-right: 20px;
     }
-
-    &__controls {
-        width: unset;
-        margin-right: -40px;
-        padding-right: 40px;
-        padding-left: 20px;
-
-        transform: translateX(-20px);
-    }
 }

src/containers/Tenants/Tenants.scss

@@ -53,10 +53,6 @@
         overflow: hidden;
     }
 
-    &__controls {
-        width: 100%;
-    }
-
     &__table-wrapper {
         width: max-content;
     }

src/containers/Tenants/Tenants.tsx

@@ -303,7 +303,7 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
     return (
         <div className={b('table-wrapper')}>
             <TableWithControlsLayout>
-                <TableWithControlsLayout.Controls className={b('controls')}>
+                <TableWithControlsLayout.Controls>
                     {renderControls()}
                 </TableWithControlsLayout.Controls>
                 {error ? <ResponseError error={error} /> : null}