fix: paginated container and extra pixels

Author: astandrik

src/components/PaginatedTable/PaginatedTableWithLayout.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
+import type {TableProps} from '../TableWithControlsLayout/TableWithControlsLayout';
+
+import {PaginatedTableProvider} from './PaginatedTableContext';
+import type {PaginatedTableState} from './types';
+
+export interface PaginatedTableWithLayoutProps {
+    controls: React.ReactNode;
+    table: React.ReactNode;
+    tableProps?: TableProps;
+    error?: React.ReactNode;
+    initialState?: Partial<PaginatedTableState>;
+    fullHeight?: boolean;
+}
+
+export const PaginatedTableWithLayout = ({
+    controls,
+    table,
+    tableProps,
+    error,
+    initialState,
+    fullHeight = true,
+}: PaginatedTableWithLayoutProps) => (
+    <PaginatedTableProvider initialState={initialState}>
+        <TableWithControlsLayout fullHeight={fullHeight}>
+            <TableWithControlsLayout.Controls>{controls}</TableWithControlsLayout.Controls>
+            {error}
+            <TableWithControlsLayout.Table {...(tableProps || {})}>
+                {table}
+            </TableWithControlsLayout.Table>
+        </TableWithControlsLayout>
+    </PaginatedTableProvider>
+);

src/components/TableWithControlsLayout/TableWithControlsLayout.scss

@@ -1,15 +1,18 @@
 @use '../../styles/mixins.scss';
 
 .ydb-table-with-controls-layout {
-    --data-table-sticky-top-offset: 62px;
+    // Height of visible area above table for min-height calculation (e.g., tabs)
+    --data-table-min-height-offset: 62px;
+    // Total height of all fixed elements above table for sticky header positioning
+    --data-table-sticky-header-offset: 62px;
 
     display: inline-block;
 
     box-sizing: border-box;
     min-width: 100%;
 
     &_fullHeight {
-        min-height: calc(100vh - var(--data-table-sticky-top-offset));
+        min-height: calc(100vh - var(--data-table-min-height-offset));
     }
 
     &__controls-wrapper {
@@ -34,18 +37,14 @@
     &__table {
         position: relative;
         z-index: 2;
-
-        &_fullHeight {
-            min-height: calc(100vh - var(--data-table-sticky-top-offset));
-        }
     }
 
     .ydb-paginated-table__head {
-        top: var(--data-table-sticky-top-offset, 62px);
+        top: var(--data-table-sticky-header-offset, 62px);
     }
 
     .data-table__sticky_moving {
         // Place table head right after controls
-        top: var(--data-table-sticky-top-offset, 62px) !important;
+        top: var(--data-table-sticky-header-offset, 62px) !important;
     }
 }

src/components/TableWithControlsLayout/TableWithControlsLayout.tsx

@@ -10,12 +10,12 @@ import './TableWithControlsLayout.scss';
 const b = cn('ydb-table-with-controls-layout');
 
 interface TableWithControlsLayoutItemProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     className?: string;
     fullHeight?: boolean;
 }
 
-interface TableProps extends TableWithControlsLayoutItemProps {
+export interface TableProps extends TableWithControlsLayoutItemProps {
     loading?: boolean;
     scrollContainerRef?: React.RefObject<HTMLElement>;
     scrollDependencies?: any[];
@@ -44,7 +44,6 @@ TableWithControlsLayout.Table = function Table({
     children,
     loading,
     className,
-    fullHeight,
     scrollContainerRef,
     scrollDependencies = [],
 }: TableProps) {
@@ -63,7 +62,7 @@ TableWithControlsLayout.Table = function Table({
     }
 
     return (
-        <div ref={tableContainerRef} className={b('table', {fullHeight}, className)}>
+        <div ref={tableContainerRef} className={b('table', className)}>
             {children}
         </div>
     );

src/components/TableWithControlsLayout/useTableScroll.ts

@@ -16,8 +16,9 @@ export const useTableScroll = ({
         // Try to get the variable from parent elements
         if (tableContainerRef?.current) {
             const computedStyle = window.getComputedStyle(tableContainerRef.current);
+            // Read the sticky header offset variable for correct scroll positioning
             const stickyTopOffset = computedStyle.getPropertyValue(
-                '--data-table-sticky-top-offset',
+                '--data-table-sticky-header-offset',
             );
 
             return stickyTopOffset ? parseInt(stickyTopOffset, 10) : 0;
@@ -37,7 +38,7 @@ export const useTableScroll = ({
             const scrollContainerRect = scrollContainerRef.current.getBoundingClientRect();
             const scrollTop =
                 tableRect.top - scrollContainerRect.top + scrollContainerRef.current.scrollTop;
-            if (tableRect.top < scrollContainerRect.top) {
+            if (tableRect.top - stickyTopOffset < scrollContainerRect.top) {
                 // Adjust scroll position to account for sticky offset
                 scrollContainerRef.current.scrollTo(0, scrollTop - stickyTopOffset);
             }

src/containers/Cluster/Cluster.scss

@@ -63,6 +63,9 @@
     }
 
     .ydb-table-with-controls-layout {
-        --data-table-sticky-top-offset: 102px;
+        // Height of visible tabs area above table for min-height calculation
+        --data-table-min-height-offset: 62px;
+        // Total height of all fixed elements above table for sticky header positioning
+        --data-table-sticky-header-offset: 102px;
     }
 }

src/containers/Cluster/Cluster.tsx

@@ -159,14 +159,21 @@ export function Cluster({
                         getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets)).pathname
                     }
                 >
-                    <TabletsTable loading={infoLoading} tablets={clusterTablets} />
+                    <TabletsTable
+                        loading={infoLoading}
+                        tablets={clusterTablets}
+                        scrollContainerRef={container}
+                    />
                 </Route>
                 <Route
                     path={
                         getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants)).pathname
                     }
                 >
-                    <Tenants additionalTenantsProps={additionalTenantsProps} />
+                    <Tenants
+                        scrollContainerRef={container}
+                        additionalTenantsProps={additionalTenantsProps}
+                    />
                 </Route>
                 <Route
                     path={getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname}

src/containers/Node/Node.tsx

@@ -234,7 +234,14 @@ function NodePageContent({
                 );
             }
             case 'tablets': {
-                return <Tablets nodeId={nodeId} database={tenantName} onlyActive />;
+                return (
+                    <Tablets
+                        scrollContainerRef={parentContainer}
+                        nodeId={nodeId}
+                        database={tenantName}
+                        onlyActive
+                    />
+                );
             }
 
             case 'structure': {

src/containers/Nodes/Nodes.tsx

@@ -5,11 +5,8 @@ import type {TableColumnSetupItem} from '@gravity-ui/uikit';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {LoaderWrapper} from '../../components/LoaderWrapper/LoaderWrapper';
 import type {Column} from '../../components/PaginatedTable';
-import {
-    PaginatedTableProvider,
-    usePaginatedTableState,
-} from '../../components/PaginatedTable/PaginatedTableContext';
-import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import {usePaginatedTableState} from '../../components/PaginatedTable/PaginatedTableContext';
+import {PaginatedTableWithLayout} from '../../components/PaginatedTable/PaginatedTableWithLayout';
 import {
     NODES_COLUMNS_TITLES,
     isMonitoringUserNodesColumn,
@@ -179,34 +176,34 @@ function NodesComponent({
     );
 
     return (
-        <PaginatedTableProvider>
-            <TableWithControlsLayout fullHeight>
-                <TableWithControlsLayout.Controls>
-                    <NodesControlsWithTableState
-                        withGroupBySelect={viewerNodesHandlerHasGrouping}
-                        groupByParams={groupByParams}
-                        withPeerRoleFilter={withPeerRoleFilter}
-                        columnsToSelect={columnsToSelect}
-                        handleSelectedColumnsUpdate={setColumns}
-                    />
-                </TableWithControlsLayout.Controls>
-                <TableWithControlsLayout.Table
+        <PaginatedTableWithLayout
+            controls={
+                <NodesControlsWithTableState
+                    withGroupBySelect={viewerNodesHandlerHasGrouping}
+                    groupByParams={groupByParams}
+                    withPeerRoleFilter={withPeerRoleFilter}
+                    columnsToSelect={columnsToSelect}
+                    handleSelectedColumnsUpdate={setColumns}
+                />
+            }
+            table={
+                <NodesTable
+                    path={path}
+                    database={database}
+                    searchValue={searchValue}
+                    problemFilter={problemFilter}
+                    uptimeFilter={uptimeFilter}
+                    peerRoleFilter={peerRoleFilter}
+                    columns={columnsToShow}
                     scrollContainerRef={scrollContainerRef}
-                    scrollDependencies={[searchValue, problemFilter, uptimeFilter, peerRoleFilter]}
-                >
-                    <NodesTable
-                        path={path}
-                        database={database}
-                        searchValue={searchValue}
-                        problemFilter={problemFilter}
-                        uptimeFilter={uptimeFilter}
-                        peerRoleFilter={peerRoleFilter}
-                        columns={columnsToShow}
-                        scrollContainerRef={scrollContainerRef}
-                    />
-                </TableWithControlsLayout.Table>
-            </TableWithControlsLayout>
-        </PaginatedTableProvider>
+                />
+            }
+            tableProps={{
+                scrollContainerRef,
+                scrollDependencies: [searchValue, problemFilter, uptimeFilter, peerRoleFilter],
+            }}
+            fullHeight
+        />
     );
 }
 
@@ -377,27 +374,26 @@ function GroupedNodesComponent({
     };
 
     return (
-        <PaginatedTableProvider initialState={initialState}>
-            <TableWithControlsLayout>
-                <TableWithControlsLayout.Controls>
-                    <NodesControlsWithTableState
-                        withGroupBySelect={true}
-                        groupByParams={groupByParams}
-                        withPeerRoleFilter={withPeerRoleFilter}
-                        columnsToSelect={columnsToSelect}
-                        handleSelectedColumnsUpdate={setColumns}
-                    />
-                </TableWithControlsLayout.Controls>
-                {error ? <ResponseError error={error} /> : null}
-                <TableWithControlsLayout.Table
-                    scrollContainerRef={scrollContainerRef}
-                    scrollDependencies={[searchValue, groupByParam]}
-                    loading={isLoading}
-                    className={b('groups-wrapper')}
-                >
-                    {renderGroups()}
-                </TableWithControlsLayout.Table>
-            </TableWithControlsLayout>
-        </PaginatedTableProvider>
+        <PaginatedTableWithLayout
+            initialState={initialState}
+            controls={
+                <NodesControlsWithTableState
+                    withGroupBySelect={true}
+                    groupByParams={groupByParams}
+                    withPeerRoleFilter={withPeerRoleFilter}
+                    columnsToSelect={columnsToSelect}
+                    handleSelectedColumnsUpdate={setColumns}
+                />
+            }
+            error={error ? <ResponseError error={error} /> : null}
+            table={renderGroups()}
+            tableProps={{
+                scrollContainerRef,
+                scrollDependencies: [searchValue, groupByParam],
+                loading: isLoading,
+                className: b('groups-wrapper'),
+            }}
+            fullHeight
+        />
     );
 }