amadan
web: bump core text size on touch devices (#33)
Message bubbles inherited the 16px default, which reads a little small on a phone (held further from the eye than a laptop). Nudge the main reading + typing surfaces up on coarse-pointer devices only — bubbles, composer, chat-list name/preview, reply quote — leaving desktop untouched. Composer stays at 17px (≥16) so iOS doesn't auto-zoom the page on focus.
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 file changed,
+9
−0
web/static/style.css+9 −0
diff --git a/web/static/style.css b/web/static/style.css| index d151b30..2d56820 100644 |
| --- a/web/static/style.css |
| +++ b/web/static/style.css |
| @@ -675,6 +675,15 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr |
| Scoped to coarse pointers so desktop stays at the bare inset (≈0). */ |
| @media (pointer: coarse) { |
| .composer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } |
| + /* A phone is held further from the eye than a laptop screen sits — bump the |
| + core reading + typing text up a notch so messages are comfortable. Desktop |
| + (fine pointer) keeps its sizes. Composer stays ≥16px so iOS doesn't |
| + auto-zoom the page when the field is focused. */ |
| + .msg .bubble { font-size: 17px; } |
| + .composer textarea { font-size: 17px; } |
| + .thread-row-name { font-size: 17px; } |
| + .thread-row-preview { font-size: 14px; } |
| + .reply-quote-text { font-size: 15px; } |
| } |
| .composer-field { |
| position: relative; |