Adjust the grid width calculation for scrollbars (#18292) (#18299)

* Adjust the grid width calculation for scrollbars * Cleanup lint errors
microsoft · Oct 22, 2024 · 8151a80 · 8151a80
1 parent b190f5a
commit 8151a80
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/src/reactviews/pages/QueryResult/queryResultPane.tsx b/src/reactviews/pages/QueryResult/queryResultPane.tsx
@@ -29,7 +29,11 @@ import { useVscodeWebview } from "../../common/vscodeWebviewProvider";
 import ResultGrid, { ResultGridHandle } from "./resultGrid";
 import CommandBar from "./commandBar";
 import { locConstants } from "../../common/locConstants";
-import { ACTIONBAR_WIDTH_PX, TABLE_ALIGN_PX } from "./table/table";
+import {
+    ACTIONBAR_WIDTH_PX,
+    SCROLLBAR_PX,
+    TABLE_ALIGN_PX,
+} from "./table/table";
 import { ExecutionPlanPage } from "../ExecutionPlan/executionPlanPage";
 import { ExecutionPlanStateProvider } from "../ExecutionPlan/executionPlanStateProvider";
 import { hasResultsOrMessages } from "./queryResultUtils";
@@ -156,6 +160,11 @@ export const QueryResultPane = () => {
 
             if (gridParent.clientWidth && availableHeight) {
                 if (gridCount > 1) {
+                    let scrollbarAdjustment =
+                        gridCount * MIN_GRID_HEIGHT >= availableHeight
+                            ? SCROLLBAR_PX
+                            : 0;
+
                     // Calculate the grid height, ensuring it's not smaller than the minimum height
                     const gridHeight = Math.max(
                         (availableHeight - gridCount * TABLE_ALIGN_PX) /
@@ -165,19 +174,16 @@ export const QueryResultPane = () => {
 
                     gridRefs.current.forEach((gridRef) => {
                         gridRef?.resizeGrid(
-                            gridParent.clientWidth - ACTIONBAR_WIDTH_PX,
+                            gridParent.clientWidth -
+                                ACTIONBAR_WIDTH_PX -
+                                scrollbarAdjustment,
                             gridHeight,
                         );
                     });
                 } else if (gridCount === 1) {
-                    const singleGridHeight = Math.max(
-                        availableHeight - TABLE_ALIGN_PX,
-                        MIN_GRID_HEIGHT,
-                    );
-
                     gridRefs.current[0]?.resizeGrid(
                         gridParent.clientWidth - ACTIONBAR_WIDTH_PX,
-                        singleGridHeight,
+                        availableHeight - TABLE_ALIGN_PX,
                     );
                 }
             }

diff --git a/src/reactviews/pages/QueryResult/table/table.ts b/src/reactviews/pages/QueryResult/table/table.ts
@@ -34,7 +34,8 @@ function getDefaultOptions<T extends Slick.SlickData>(): Slick.GridOptions<T> {
 }
 
 export const ACTIONBAR_WIDTH_PX = 36;
-export const TABLE_ALIGN_PX = 5;
+export const TABLE_ALIGN_PX = 7;
+export const SCROLLBAR_PX = 15;
 
 export class Table<T extends Slick.SlickData> implements IThemable {
     protected styleElement: HTMLStyleElement;