amadan
web: composer keeps breathing room on touch (regressed on mobile)
Removing the desktop 12px floor (env-only) left touch devices with too little bottom padding (env is 0 in mobile browsers, and the input sat flush against the Home indicator in the PWA). Scope it by pointer: desktop (fine) stays at the bare inset (~0); touch (coarse) gets 12px + the safe-area inset below the input.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 file changed,
+9
−2
web/static/style.css+9 −2
diff --git a/web/static/style.css b/web/static/style.css| index 418dda8..b25b341 100644 |
| --- a/web/static/style.css |
| +++ b/web/static/style.css |
| @@ -651,13 +651,20 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr |
| display: flex; |
| gap: 8px; |
| align-items: flex-end; |
| - /* The input hugs the bottom: no fixed bottom padding (env() is 0 on desktop), |
| - just the safe-area inset on mobile to clear the Home indicator / swipe bar. */ |
| + /* Desktop (fine pointer): the input hugs the bottom — env() is 0, so no fixed |
| + bottom padding. Touch devices get breathing room + the safe-area inset below |
| + (see the pointer:coarse rule), which desktop never picks up. */ |
| padding: 12px 16px; |
| padding-bottom: env(safe-area-inset-bottom, 0px); |
| border-top: 1px solid var(--border); |
| background: var(--panel); |
| } |
| +/* Touch: 12px of breathing room ABOVE the Home indicator / swipe bar (the inset), |
| + so the input never sits flush against the bottom edge or a browser toolbar. |
| + 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)); } |
| +} |
| .composer-field { |
| position: relative; |
| flex: 1; |