From 7c18a82aaf6519bc0d7becd896d94fa649427e94 Mon Sep 17 00:00:00 2001 From: Jeongkyu Shin Date: Wed, 23 Sep 2026 17:57:37 +0900 Subject: [PATCH] fix: preserve DataTable column widths Automatic table layout could shrink explicit column widths back to the scroll container, so a resized 600px column rendered much narrower. The shared table now sizes to its declared/content width while retaining a full-width minimum and local horizontal scrolling. Stylesheet coverage guards that layout contract. Validation: pnpm run verify with an isolated npm cache. Refs #48 --- src/components/DataTable/DataTable.css | 10 +++++++++- src/components/DataTable/DataTable.styles.test.ts | 8 ++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/DataTable/DataTable.css b/src/components/DataTable/DataTable.css index c0e57f0..6559b37 100644 --- a/src/components/DataTable/DataTable.css +++ b/src/components/DataTable/DataTable.css @@ -21,7 +21,15 @@ } .data-table__table { - width: 100%; + /* + * A user-resized column is an explicit layout contract. `width: 100%` + * lets the automatic table layout algorithm shrink that contract back to + * the scroll container, leaving a 600px header rendered at a much smaller + * width. Size to the content/declared columns instead, while retaining a + * full-width table when those columns fit the container. + */ + width: max-content; + min-width: 100%; border-collapse: collapse; table-layout: auto; } diff --git a/src/components/DataTable/DataTable.styles.test.ts b/src/components/DataTable/DataTable.styles.test.ts index bc368ba..6ca0360 100644 --- a/src/components/DataTable/DataTable.styles.test.ts +++ b/src/components/DataTable/DataTable.styles.test.ts @@ -67,6 +67,14 @@ function contrast(a: Rgba, b: Rgba): number { } describe("DataTable resize grip styles", () => { + it("keeps declared column widths when the table overflows its local scroll container", () => { + expect(COMPONENT_CSS).toMatch( + /\.data-table__table\s*{[\s\S]*width:\s*max-content;/, + ); + expect(COMPONENT_CSS).toMatch(/\.data-table__table\s*{[\s\S]*min-width:\s*100%;/); + expect(COMPONENT_CSS).toMatch(/\.data-table\s*{[\s\S]*overflow-x:\s*auto;/); + }); + it("reserves a token-sized 24px-or-larger target outside header content", () => { expect(COMPONENT_CSS).toMatch( /\.data-table__cell--resizable\s*{[\s\S]*padding-inline-end/,