diff --git a/src/shared/styles/globals.css b/src/shared/styles/globals.css index 952b33c5c..7896bdf5b 100644 --- a/src/shared/styles/globals.css +++ b/src/shared/styles/globals.css @@ -1967,7 +1967,7 @@ html[data-window-kind="voice-buddy"] #root { } [data-streamdown="table-wrapper"] > div:has(> [data-streamdown="table"]) { - overflow-y: hidden; + overflow-y: auto; padding-block-end: var(--streamdown-table-scrollbar-block-size, 0px); } @@ -1980,6 +1980,7 @@ html[data-window-kind="voice-buddy"] #root { [data-streamdown="table"] td { font-size: 0.8125rem; + overflow-wrap: break-word; } /* Streamdown paints its table scroll container with bg-background. Keep the diff --git a/src/shared/styles/globals.streamdown-table.test.ts b/src/shared/styles/globals.streamdown-table.test.ts index 8c9dc24e7..ba45fa01c 100644 --- a/src/shared/styles/globals.streamdown-table.test.ts +++ b/src/shared/styles/globals.streamdown-table.test.ts @@ -16,10 +16,19 @@ describe("Streamdown table styles", () => { /\[data-streamdown="table"\]\s+th\s*\{[^}]*(?:letter-spacing|text-transform):/s, ); expect(globalsCss).toMatch( - /\[data-streamdown="table"\]\s+td\s*\{[^}]*font-size:\s*0\.8125rem;/s, + /\[data-streamdown="table"\]\s+td\s*\{[^}]*font-size:\s*0\.8125rem;[^}]*overflow-wrap:\s*break-word;/s, ); expect(globalsCss).not.toMatch( /\[data-streamdown="table"\]\s+td\s*\{[^}]*white-space:\s*normal;/s, ); }); + + it("allows vertical scrolling for tables taller than the max height", () => { + expect(globalsCss).toMatch( + /table-wrapper"\][^}]*> div:has\(> \[data-streamdown="table"\]\)\s*\{[^}]*overflow-y:\s*auto;/s, + ); + expect(globalsCss).not.toMatch( + /table-wrapper"\][^}]*overflow-y:\s*hidden/s, + ); + }); });