From a80acf6fc5d7a487ff58bf780502aaae8501669d Mon Sep 17 00:00:00 2001 From: Markus Fritsche Date: Tue, 21 Jul 2026 20:12:05 +0200 Subject: [PATCH] bullseye: fix mobile horizontal overflow (text was cramped into a left column) The compose #msg flex-basis 20em + default flex min-width:auto forced the fixed dock wider than the phone viewport, so the whole page scrolled horizontally and the transcript got pinned into a narrow left strip with empty black on the right. Fixes: #msg min-width:0; long tokens wrap (#transcript overflow-wrap/word-break, pre white-space:pre-wrap + internal scroll); on mobile the compose #msg takes a full row and #to shrinks to 6em so nothing overflows. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01EWpfhDgYNA21tETDP9ueBE --- bullseye/page.py | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/bullseye/page.py b/bullseye/page.py index 7be5397..675d956 100644 --- a/bullseye/page.py +++ b/bullseye/page.py @@ -31,10 +31,16 @@ button {{ background: #0c5; color: #001; border: none; padding: 4px 12px; cursor #controls {{ margin-bottom: 6px; font-size: 0.85em; opacity: 0.9; }} #controls input[type=range] {{ vertical-align: middle; }} #compose {{ display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }} -#compose #msg {{ flex: 1 1 20em; }} -/* mobile: double the base font for readability (relies on the viewport meta above) + taller dock clearance */ +#compose #msg {{ flex: 1 1 20em; min-width: 0; }} +/* long tokens (urls, sic commands, code) must wrap, not force the page wider than the viewport */ +#transcript {{ overflow-wrap: break-word; word-break: break-word; }} +#transcript pre {{ white-space: pre-wrap; overflow-x: auto; max-width: 100%; }} +/* mobile: double the base font (relies on the viewport meta above); stack the compose so the + wide inputs never overflow (which was pinning the transcript into a narrow left column) */ @media (max-width: 768px) {{ - body {{ font-size: 200%; padding-bottom: 220px; }} + body {{ font-size: 200%; padding-bottom: 260px; }} + #compose #to {{ width: 6em; }} + #compose #msg {{ flex-basis: 100%; }} }}