From 7ea6c41941ddb07518f95e96c9f5f253f878bdba Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 14 Sep 2026 14:41:40 +0200 Subject: [PATCH] fix: tables scroll sideways on the phone again instead of breaking words to fit the screen The morning's change forced every table to the screen width below 640px and let cells break mid-word, so a four-column table read as columns of broken syllables. A swipe is the better trade; the hint under the table says so. Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_016fZGJNyDvERbMgS2Uc2msP --- public/css/assistant.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/public/css/assistant.css b/public/css/assistant.css index 37ec8ef0..fc45b653 100644 --- a/public/css/assistant.css +++ b/public/css/assistant.css @@ -375,13 +375,13 @@ body.assistant-workspace .assistant-layout { height: calc(100vh - var(--mobile-b 8px padding on top of that made the page 16px taller than the phone. */ body.assistant-workspace .main-content { padding:0; } body.assistant-workspace .assistant-layout { height:calc(100dvh - var(--mobile-bar, 0px)); display:flex; flex-direction:column; grid-template-rows:none; overflow:hidden; } - /* On a phone a table wraps to the screen instead of scrolling sideways: the - sideways swipe is not reliably reachable (the user could not scroll a - cut-off table at all), so cells break their words and the table takes the - full width. Wide tables get taller, never clipped. */ - .assistant-table-scroll { overflow-x:visible; } - .assistant-table-scroll table, .assistant-takehome-result table { width:100%; min-width:0; max-width:100%; table-layout:auto; } - .assistant-bubble th, .assistant-bubble td, .assistant-takehome-result th, .assistant-takehome-result td { overflow-wrap:anywhere; word-break:break-word; white-space:normal; } + /* A wide table scrolls sideways on the phone, as it always did. Forcing it + to the screen width (tried 2026-09-14) broke words mid-syllable in every + narrow column and read far worse than a swipe; the swipe hint below the + table says how to reach the rest. */ + .assistant-table-scroll { overflow-x:auto; touch-action:pan-x pan-y; } + .assistant-table-scroll::after { display:block; } + .assistant-table-scroll th, .assistant-table-scroll td { overflow-wrap:normal; word-break:normal; } } /* Desktop: the saved-chats rail collapses like ChatGPT's sidebar */ .assistant-layout { transition:grid-template-columns .18s ease; }