Skip to content

Commit eecb95f

Browse files
authored
Adjust the grid width calculation for scrollbars (#18292)
* Adjust the grid width calculation for scrollbars * Cleanup lint errors
1 parent ef872de commit eecb95f

File tree

2 files changed

+16
-9
lines changed

2 files changed

+16
-9
lines changed

src/reactviews/pages/QueryResult/queryResultPane.tsx

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,11 @@ import { useVscodeWebview } from "../../common/vscodeWebviewProvider";
2929
import ResultGrid, { ResultGridHandle } from "./resultGrid";
3030
import CommandBar from "./commandBar";
3131
import { locConstants } from "../../common/locConstants";
32-
import { ACTIONBAR_WIDTH_PX, TABLE_ALIGN_PX } from "./table/table";
32+
import {
33+
ACTIONBAR_WIDTH_PX,
34+
SCROLLBAR_PX,
35+
TABLE_ALIGN_PX,
36+
} from "./table/table";
3337
import { ExecutionPlanPage } from "../ExecutionPlan/executionPlanPage";
3438
import { ExecutionPlanStateProvider } from "../ExecutionPlan/executionPlanStateProvider";
3539
import { hasResultsOrMessages } from "./queryResultUtils";
@@ -156,6 +160,11 @@ export const QueryResultPane = () => {
156160

157161
if (gridParent.clientWidth && availableHeight) {
158162
if (gridCount > 1) {
163+
let scrollbarAdjustment =
164+
gridCount * MIN_GRID_HEIGHT >= availableHeight
165+
? SCROLLBAR_PX
166+
: 0;
167+
159168
// Calculate the grid height, ensuring it's not smaller than the minimum height
160169
const gridHeight = Math.max(
161170
(availableHeight - gridCount * TABLE_ALIGN_PX) /
@@ -165,19 +174,16 @@ export const QueryResultPane = () => {
165174

166175
gridRefs.current.forEach((gridRef) => {
167176
gridRef?.resizeGrid(
168-
gridParent.clientWidth - ACTIONBAR_WIDTH_PX,
177+
gridParent.clientWidth -
178+
ACTIONBAR_WIDTH_PX -
179+
scrollbarAdjustment,
169180
gridHeight,
170181
);
171182
});
172183
} else if (gridCount === 1) {
173-
const singleGridHeight = Math.max(
174-
availableHeight - TABLE_ALIGN_PX,
175-
MIN_GRID_HEIGHT,
176-
);
177-
178184
gridRefs.current[0]?.resizeGrid(
179185
gridParent.clientWidth - ACTIONBAR_WIDTH_PX,
180-
singleGridHeight,
186+
availableHeight - TABLE_ALIGN_PX,
181187
);
182188
}
183189
}

src/reactviews/pages/QueryResult/table/table.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ function getDefaultOptions<T extends Slick.SlickData>(): Slick.GridOptions<T> {
3434
}
3535

3636
export const ACTIONBAR_WIDTH_PX = 36;
37-
export const TABLE_ALIGN_PX = 5;
37+
export const TABLE_ALIGN_PX = 7;
38+
export const SCROLLBAR_PX = 15;
3839

3940
export class Table<T extends Slick.SlickData> implements IThemable {
4041
protected styleElement: HTMLStyleElement;

0 commit comments

Comments
 (0)