danvics/pediatric-ai-scribe-v3
1
0
Fork 0
Code Issues Pull requests Projects Releases 16 Packages Wiki Activity Actions

fix: tables scroll sideways on the phone again instead of breaking words to fit the screen

Browse source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016fZGJNyDvERbMgS2Uc2msP
This commit is contained in:
Daniel 2026-09-14 14:41:40 +02:00
parent cd00fae460
commit 7ea6c41941
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
public/css/assistant.css
View file

@ -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; }