UI: fix mobile input area layout

- Stack textarea above button row on mobile (flex-direction: column)
- font-size: 16px on textarea prevents iOS Safari auto-zoom on focus
- body height: 100dvh adjusts dynamically as soft keyboard opens/closes
- Right col goes horizontal (row) with full width on mobile
- Hide height-row and enter-toggle (desktop-only concepts)
- Larger touch targets for Send/Stop/Note
- Hide session-id to reclaim vertical space

Desktop layout unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-17 23:44:21 -04:00
parent fe6561bf6a
commit 23f8659aaa

View File

@@ -994,7 +994,39 @@
header { padding: 8px 12px; gap: 8px; }
header .subtitle { display: none; }
#messages { padding: 12px; }
#input-area { padding: 10px 12px; }
/* dvh adjusts as soft keyboard opens/closes */
body { height: 100dvh; }
/* Hide session ID — saves vertical space */
#session-id { display: none; }
/* Input area: stack textarea above button row */
#input-area {
flex-direction: column;
align-items: stretch;
padding: 8px 12px;
gap: 6px;
}
/* 16px minimum prevents iOS Safari auto-zoom on focus */
#input { font-size: 16px; }
/* Right col goes horizontal, full width */
#right-col {
flex-direction: row;
width: 100%;
gap: 6px;
}
/* Desktop-only controls — hide on mobile */
#height-row,
#enter-toggle { display: none !important; }
/* Larger touch targets */
#send, #stop { padding: 12px 0; flex: 1; font-size: 1rem; }
#note-btn { padding: 12px 14px; }
#note-type-btn { padding: 6px 10px; }
}
@media (max-width: 380px) {