diff --git a/ui/components/ui/table.tsx b/ui/components/ui/table.tsx index c83a0689..b30165ad 100644 --- a/ui/components/ui/table.tsx +++ b/ui/components/ui/table.tsx @@ -15,7 +15,7 @@ const Table = React.forwardRef( return (
{ + const localStorage = createLocalStorageMock(); + Object.defineProperty(globalThis, "localStorage", { + configurable: true, + value: localStorage, + }); + Object.defineProperty(window, "localStorage", { + configurable: true, + value: localStorage, + }); +}); + afterEach(() => { vi.restoreAllMocks(); document.body.innerHTML = ""; }); +function createLocalStorageMock(): Storage { + const entries = new Map(); + + return { + get length() { + return entries.size; + }, + clear() { + entries.clear(); + }, + getItem(key: string) { + return entries.get(key) ?? null; + }, + key(index: number) { + return Array.from(entries.keys())[index] ?? null; + }, + removeItem(key: string) { + entries.delete(key); + }, + setItem(key: string, value: string) { + entries.set(key, value); + }, + }; +} + function renderGrid(rows: GridRow[]) { const container = document.createElement("div"); document.body.appendChild(container); @@ -86,4 +123,22 @@ describe("DataGrid layout", () => { cleanup(); }); + + it("keeps the table wrapper as a plain overflow scroller for wide-grid horizontal scrolling", () => { + const { cleanup, table } = renderGrid([ + { + __ps_rowid: "row_1", + long_text: "wide", + short_text: "Acme Labs", + }, + ]); + const scrollContainer = table.parentElement; + + expect(scrollContainer).toBeInstanceOf(HTMLDivElement); + expect(scrollContainer?.className).toContain("overflow-auto"); + expect(scrollContainer?.className).toContain("min-w-0"); + expect(scrollContainer?.className).not.toContain("flex"); + + cleanup(); + }); });