From 23f8659aaa343cb313037868e87a68771a05d99e Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 17 Mar 2026 23:44:21 -0400
Subject: [PATCH] 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>
---
 cortex/static/style.css | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/cortex/static/style.css b/cortex/static/style.css
index ab3639c..ff8f172 100644
--- a/cortex/static/style.css
+++ b/cortex/static/style.css
@@ -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) {