From 8d1349ed5e91cc2b37a14ad20b0d5d65cbe8fd8c Mon Sep 17 00:00:00 2001
From: Elena Makarova <el-makarova@yandex-team.ru>
Date: Tue, 29 Apr 2025 16:57:18 +0300
Subject: [PATCH] fix(Cluster): tune layout to handle properly sticky elements

---
 .../TableWithControlsLayout.tsx                |  4 +---
 src/containers/Cluster/Cluster.scss            | 15 +++++++--------
 .../Storage/PaginatedStorageGroups.tsx         | 18 +++++++-----------
 .../Storage/PaginatedStorageNodes.tsx          | 18 +++++++-----------
 src/containers/Storage/Storage.scss            |  9 ---------
 src/containers/Tenants/Tenants.scss            |  4 ----
 src/containers/Tenants/Tenants.tsx             |  2 +-
 7 files changed, 23 insertions(+), 47 deletions(-)

diff --git a/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx b/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx
index 7e99aed39b..16a74fc4e3 100644
--- a/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx
+++ b/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>
     );
diff --git a/src/containers/Cluster/Cluster.scss b/src/containers/Cluster/Cluster.scss
index 862cd48487..e2df00d8ba 100644
--- a/src/containers/Cluster/Cluster.scss
+++ b/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 {
diff --git a/src/containers/Storage/PaginatedStorageGroups.tsx b/src/containers/Storage/PaginatedStorageGroups.tsx
index e9628cc927..b4dc1048ca 100644
--- a/src/containers/Storage/PaginatedStorageGroups.tsx
+++ b/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>
     );
 }
diff --git a/src/containers/Storage/PaginatedStorageNodes.tsx b/src/containers/Storage/PaginatedStorageNodes.tsx
index b3f6345f67..b35ae94c5f 100644
--- a/src/containers/Storage/PaginatedStorageNodes.tsx
+++ b/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>
     );
 }
 
diff --git a/src/containers/Storage/Storage.scss b/src/containers/Storage/Storage.scss
index 1b53c15aa6..d52695d7e2 100644
--- a/src/containers/Storage/Storage.scss
+++ b/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);
-    }
 }
diff --git a/src/containers/Tenants/Tenants.scss b/src/containers/Tenants/Tenants.scss
index 21992b8fd2..f5316e41ef 100644
--- a/src/containers/Tenants/Tenants.scss
+++ b/src/containers/Tenants/Tenants.scss
@@ -53,10 +53,6 @@
         overflow: hidden;
     }
 
-    &__controls {
-        width: 100%;
-    }
-
     &__table-wrapper {
         width: max-content;
     }
diff --git a/src/containers/Tenants/Tenants.tsx b/src/containers/Tenants/Tenants.tsx
index ca59294c01..51fa180fdd 100644
--- a/src/containers/Tenants/Tenants.tsx
+++ b/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}