fix: better scrolling

Author: astandrik

src/components/PaginatedTable/useTableScroll.ts

@@ -27,6 +27,7 @@ export const useTableScroll = ({
 
     // Handle table scrolling function
     const handleTableScroll = React.useCallback(() => {
+        console.log('teteteteeetete');
         if (tableContainerRef.current && scrollContainerRef.current) {
             // Get the sticky top offset value
             const stickyTopOffset = getStickyTopOffset();

src/components/TableWithControlsLayout/TableWithControlsLayout.scss

@@ -8,6 +8,10 @@
     box-sizing: border-box;
     min-width: 100%;
 
+    &_fullHeight {
+        min-height: calc(100vh - var(--data-table-sticky-top-offset));
+    }
+
     &__controls-wrapper {
         z-index: 3;
 
@@ -30,6 +34,10 @@
     &__table {
         position: relative;
         z-index: 2;
+
+        &_fullHeight {
+            min-height: calc(100vh - var(--data-table-sticky-top-offset));
+        }
     }
 
     .ydb-paginated-table__head {

src/components/TableWithControlsLayout/TableWithControlsLayout.tsx

@@ -10,6 +10,7 @@ const b = cn('ydb-table-with-controls-layout');
 interface TableWithControlsLayoutItemProps {
     children: React.ReactNode;
     className?: string;
+    fullHeight?: boolean;
 }
 
 interface TableProps extends TableWithControlsLayoutItemProps {
@@ -19,8 +20,9 @@ interface TableProps extends TableWithControlsLayoutItemProps {
 export const TableWithControlsLayout = ({
     children,
     className,
+    fullHeight,
 }: TableWithControlsLayoutItemProps) => {
-    return <div className={b(null, className)}>{children}</div>;
+    return <div className={b({fullHeight}, className)}>{children}</div>;
 };
 
 TableWithControlsLayout.Controls = function TableControls({
@@ -35,15 +37,15 @@ TableWithControlsLayout.Controls = function TableControls({
 };
 
 TableWithControlsLayout.Table = React.forwardRef<HTMLDivElement, TableProps>(function Table(
-    {children, loading, className},
+    {children, loading, className, fullHeight},
     ref,
 ) {
     if (loading) {
         return <TableSkeleton className={b('loader')} />;
     }
 
     return (
-        <div ref={ref} className={b('table', className)}>
+        <div ref={ref} className={b('table', {fullHeight}, className)}>
             {children}
         </div>
     );

src/containers/Cluster/Cluster.scss

@@ -61,4 +61,8 @@
     .ydb-table-with-controls-layout__controls-wrapper {
         top: 40px;
     }
+
+    .ydb-table-with-controls-layout {
+        --data-table-sticky-top-offset: 102px;
+    }
 }

src/containers/Nodes/Nodes.tsx

@@ -181,7 +181,7 @@ function NodesComponent({
 
     return (
         <PaginatedTableProvider>
-            <TableWithControlsLayout>
+            <TableWithControlsLayout fullHeight>
                 <TableWithControlsLayout.Controls>
                     <NodesControlsWithTableState
                         withGroupBySelect={viewerNodesHandlerHasGrouping}

src/containers/Storage/PaginatedStorageGroups.tsx

@@ -166,7 +166,7 @@ function StorageGroupsComponent({
 
     return (
         <PaginatedTableProvider>
-            <TableWithControlsLayout>
+            <TableWithControlsLayout fullHeight>
                 <TableWithControlsLayout.Controls>
                     <StorageGroupsControlsWithTableState
                         withTypeSelector
@@ -279,7 +279,7 @@ function GroupedStorageGroupsComponent({
     };
 
     return (
-        <TableWithControlsLayout>
+        <TableWithControlsLayout fullHeight>
             <TableWithControlsLayout.Controls>
                 <StorageGroupsControlsWithTableState
                     withTypeSelector

src/containers/Storage/PaginatedStorageNodes.tsx

@@ -177,7 +177,7 @@ function StorageNodesComponent({
 
     return (
         <PaginatedTableProvider>
-            <TableWithControlsLayout>
+            <TableWithControlsLayout fullHeight>
                 <TableWithControlsLayout.Controls>
                     <StorageNodesControlsWithTableState
                         withTypeSelector
@@ -290,7 +290,7 @@ function GroupedStorageNodesComponent({
     };
 
     return (
-        <TableWithControlsLayout>
+        <TableWithControlsLayout fullHeight>
             <TableWithControlsLayout.Controls>
                 <StorageNodesControlsWithTableState
                     withTypeSelector

src/containers/Tablets/TabletsTable.tsx

@@ -189,7 +189,7 @@ export function TabletsTable({database, tablets, loading, error}: TabletsTablePr
     };
 
     return (
-        <TableWithControlsLayout>
+        <TableWithControlsLayout fullHeight>
             <TableWithControlsLayout.Controls>
                 <Search
                     placeholder={i18n('controls.search-placeholder')}