marfrit/bullpen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bullseye: fix mobile horizontal overflow (text was cramped into a left column)

Browse Source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EWpfhDgYNA21tETDP9ueBE
This commit is contained in:
Markus Fritsche
2026-07-21 20:12:05 +02:00
parent 786adda565
commit a80acf6fc5
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bullseye/page.py
+9 -3
View File
@@ -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%; }}
}}
</style>
</head>