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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user