From 5ff1a5eff9ca5a4dc4d1a26d2bbb97ce233d7bc4 Mon Sep 17 00:00:00 2001 From: pFornagiel Date: Tue, 26 Aug 2025 10:20:40 +0200 Subject: [PATCH 1/2] feat: add VscodeTableInternal component to fix column resizing behavior --- .../network/components/NetworkRequestLog.tsx | 4 +- .../components/VscodeTableInternal.tsx | 95 +++++++++++++++++++ 2 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 packages/vscode-extension/src/network/components/VscodeTableInternal.tsx diff --git a/packages/vscode-extension/src/network/components/NetworkRequestLog.tsx b/packages/vscode-extension/src/network/components/NetworkRequestLog.tsx index 21b146f8ee..1e8d5c2425 100644 --- a/packages/vscode-extension/src/network/components/NetworkRequestLog.tsx +++ b/packages/vscode-extension/src/network/components/NetworkRequestLog.tsx @@ -2,10 +2,9 @@ import classNames from "classnames"; import { useRef, useState, useEffect, useLayoutEffect, useMemo } from "react"; import { useVirtualizer } from "@tanstack/react-virtual"; import { capitalize } from "lodash"; -import type { VscodeTable as VscodeTableElement } from "@vscode-elements/elements/dist/vscode-table/vscode-table.js"; +import { VscodeTable as VscodeTableElement } from "@vscode-elements/elements/dist/vscode-table/vscode-table.js"; import type { VscodeTableRow as VscodeTableRowElement } from "@vscode-elements/elements/dist/vscode-table-row/vscode-table-row"; import { - VscodeTable, VscodeTableBody, VscodeTableCell, VscodeTableHeader, @@ -13,6 +12,7 @@ import { VscodeTableRow, } from "@vscode-elements/react-elements"; import IconButton from "../../webview/components/shared/IconButton"; +import VscodeTable from "./VscodeTableInternal"; import { getNetworkLogValue, sortNetworkLogs } from "../utils/networkLogUtils"; import { NetworkLogColumn } from "../types/network"; import { useNetworkFilter } from "../providers/NetworkFilterProvider"; diff --git a/packages/vscode-extension/src/network/components/VscodeTableInternal.tsx b/packages/vscode-extension/src/network/components/VscodeTableInternal.tsx new file mode 100644 index 0000000000..1bdbc1c776 --- /dev/null +++ b/packages/vscode-extension/src/network/components/VscodeTableInternal.tsx @@ -0,0 +1,95 @@ +import { useEffect } from "react"; +import { VscodeTable } from "@vscode-elements/react-elements"; +import { VscodeTable as VscodeTableElement } from "@vscode-elements/elements/dist/vscode-table/vscode-table.js"; + +interface VscodeTableInternalFixElement { + _resizeColumns: (resizeBodyCells?: boolean) => void; + _getSashPositions: () => { sashPos: number; prevSashPos: number; nextSashPos: number }; + _headerCellsToResize: HTMLElement[]; + _cellsToResize: HTMLElement[]; +} + +interface VscodeTableInternalFixProps extends React.ComponentProps { + ref: React.RefObject; + children?: React.ReactNode; +} + +/** + * VscodeTableInternalFix - A wrapper around VscodeTable that applies a fix for column resizing behavior. + * + * The component overwrites the original VscodeTable _resizeColumns method implementation + * to properly handle column width updates. It includes runtime checks to ensure compatibility + * with the internal VscodeTable API. + * + * Usage of this component may be dropped when the fix is applied in the library. + */ +export default function VscodeTableInternalFix({ + children, + ref, + ...props +}: VscodeTableInternalFixProps) { + useEffect(() => { + const table = ref.current as unknown as VscodeTableInternalFixElement; + if (!table) { + return; + } + + // Runtime checks to ensure the VscodeTable API is available + const hasRequiredMethods = + typeof table._resizeColumns === "function" && typeof table._getSashPositions === "function"; + + if (!hasRequiredMethods) { + console.warn( + "VscodeTableInternal: VscodeTable internal API has changed or is not available. Fallback to the original implementation." + ); + return; + } + + const original_resizeColumns = table._resizeColumns; + + // Overwrite the _resizeColumns method to fix issues with resizing when no rows are present + // Original implementation: https://github.com/vscode-elements/elements/blob/main/src/vscode-table/vscode-table.ts + table._resizeColumns = (resizeBodyCells = true) => { + try { + const { sashPos, prevSashPos, nextSashPos } = table._getSashPositions(); + + const prevColW = sashPos - prevSashPos; + const nextColW = nextSashPos - sashPos; + const prevColCss = `${prevColW}%`; + const nextColCss = `${nextColW}%`; + + table._headerCellsToResize[0].style.width = prevColCss; + + if (table._headerCellsToResize[1]) { + table._headerCellsToResize[1].style.width = nextColCss; + } + + //add additional guard here to prevent error when table._cellsToResize[0] is undefined + if (resizeBodyCells && table._cellsToResize[0]) { + table._cellsToResize[0].style.width = prevColCss; + + if (table._cellsToResize[1]) { + table._cellsToResize[1].style.width = nextColCss; + } + } + } catch (error) { + console.error("VscodeTableInternal: Error in _resizeColumns implementation:", error); + // Fallback to original implementation on error + original_resizeColumns?.call(table, resizeBodyCells); + } + }; + + // restore original method if needed + return () => { + if (table && original_resizeColumns) { + table._resizeColumns = original_resizeColumns; + } + }; + }, []); + + return ( + + {children} + + ); +} From 066c5594cb4e45715db2c1e663c07a362015d4af Mon Sep 17 00:00:00 2001 From: pFornagiel Date: Tue, 26 Aug 2025 10:31:56 +0200 Subject: [PATCH 2/2] feat: rename VscodeTableInternal to VscodeTableInternalFix --- .../src/network/components/NetworkRequestLog.tsx | 2 +- .../{VscodeTableInternal.tsx => VscodeTableInternalFix.tsx} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/vscode-extension/src/network/components/{VscodeTableInternal.tsx => VscodeTableInternalFix.tsx} (100%) diff --git a/packages/vscode-extension/src/network/components/NetworkRequestLog.tsx b/packages/vscode-extension/src/network/components/NetworkRequestLog.tsx index 1e8d5c2425..b8569cfaa6 100644 --- a/packages/vscode-extension/src/network/components/NetworkRequestLog.tsx +++ b/packages/vscode-extension/src/network/components/NetworkRequestLog.tsx @@ -11,8 +11,8 @@ import { VscodeTableHeaderCell, VscodeTableRow, } from "@vscode-elements/react-elements"; +import VscodeTable from "./VscodeTableInternalFix"; import IconButton from "../../webview/components/shared/IconButton"; -import VscodeTable from "./VscodeTableInternal"; import { getNetworkLogValue, sortNetworkLogs } from "../utils/networkLogUtils"; import { NetworkLogColumn } from "../types/network"; import { useNetworkFilter } from "../providers/NetworkFilterProvider"; diff --git a/packages/vscode-extension/src/network/components/VscodeTableInternal.tsx b/packages/vscode-extension/src/network/components/VscodeTableInternalFix.tsx similarity index 100% rename from packages/vscode-extension/src/network/components/VscodeTableInternal.tsx rename to packages/vscode-extension/src/network/components/VscodeTableInternalFix.tsx