fix: query tables styles (#2815)

Author: astandrik

src/components/Fullscreen/Fullscreen.tsx

@@ -61,6 +61,11 @@ function Fullscreen({children, className}: FullscreenProps) {
             } else {
                 ref.current?.appendChild(container);
             }
+            // Trigger recalculation for components relying on window resize
+            // Dispatch after DOM repaint to ensure correct measurements
+            requestAnimationFrame(() => {
+                window.dispatchEvent(new Event('resize'));
+            });
         }
     }, [container, isFullscreen]);
 

src/components/QueryResultTable/QueryResultTable.tsx

@@ -105,16 +105,14 @@ export const QueryResultTable = (props: QueryResultTableProps) => {
     }
 
     return (
-        <div style={{display: 'flex', flexGrow: 1}}>
-            <ResizeableDataTable
-                data={data}
-                columns={preparedColumns}
-                settings={settings}
-                // prevent accessing row.id in case it is present but is not the PK (i.e. may repeat)
-                rowKey={getRowIndex}
-                visibleRowIndex={getVisibleRowIndex}
-                wrapperClassName={b('table-wrapper')}
-            />
-        </div>
+        <ResizeableDataTable
+            data={data}
+            columns={preparedColumns}
+            settings={settings}
+            // prevent accessing row.id in case it is present but is not the PK (i.e. may repeat)
+            rowKey={getRowIndex}
+            visibleRowIndex={getVisibleRowIndex}
+            wrapperClassName={b('table-wrapper')}
+        />
     );
 };

src/components/ResizeableDataTable/ResizeableDataTable.scss

@@ -1,6 +1,4 @@
 .ydb-resizeable-data-table {
-    display: flex;
-
     width: max-content;
 
     // padding for easier resize of the last column

src/containers/Tenant/Query/QueryResult/components/ResultSetsViewer/ResultSetsViewer.tsx

@@ -6,7 +6,6 @@ import {Flex, Tab, TabList, TabProvider, Text} from '@gravity-ui/uikit';
 import {QueryResultTable} from '../../../../../../components/QueryResultTable';
 import type {ParsedResultSet} from '../../../../../../types/store/query';
 import {cn} from '../../../../../../utils/cn';
-import {useTypedSelector} from '../../../../../../utils/hooks';
 import {QueryResultError} from '../QueryResultError/QueryResultError';
 
 import './ResultSetsViewer.scss';
@@ -23,20 +22,11 @@ interface ResultSetsViewerProps {
 
 export function ResultSetsViewer(props: ResultSetsViewerProps) {
     const {selectedResultSet, setSelectedResultSet, resultSets, error} = props;
-    const isFullscreen = useTypedSelector((state) => state.fullscreen);
 
     const scrollRef = React.useRef<HTMLDivElement>(null);
 
     const currentResult = resultSets?.[selectedResultSet];
 
-    React.useEffect(() => {
-        //this is needed to trigger data-table recount visible rows
-        if (isFullscreen) {
-            const resizeEvent = new Event('resize');
-            scrollRef.current?.dispatchEvent(resizeEvent);
-        }
-    }, [isFullscreen]);
-
     const renderTabs = () => {
         return (
             <TabProvider value={String(selectedResultSet)}>