From ade98a22def243dd34bd510529aef0c5bbd05a2c Mon Sep 17 00:00:00 2001
From: mrohan-sq <mrohan@squareup.com>
Date: Fri, 28 Aug 2026 16:00:57 -0500
Subject: [PATCH] fix(chat): restore table vertical scroll and cell word
 wrapping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The table scroll container had overflow-y: hidden, which clipped rows
below Streamdown's 300px max-height with no way to scroll. This was
worsened by PR #207 (smaller wrapping headers → narrower columns →
taller body rows). Long unbreakable strings in td cells also caused
horizontal overflow instead of wrapping.

- Change overflow-y: hidden → auto on the table scroll container
- Add overflow-wrap: break-word to td cells
- Update tests to match
---
 src/shared/styles/globals.css                      |  3 ++-
 src/shared/styles/globals.streamdown-table.test.ts | 11 ++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

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,
+    );
+  });
 });