From b9cadf6b0a7f226fa7793a8e063a4318c138af4b Mon Sep 17 00:00:00 2001
From: Aaron Nelson <aaron@aaronnelson.studio>
Date: Sun, 26 Apr 2026 06:53:24 +0000
Subject: [PATCH] =?UTF-8?q?Mobile=20fixes=20=E2=80=94=20safe=20area=20inse?=
 =?UTF-8?q?ts,=20settings=20SVG=20icon,=20input=20overflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/page.tsx                | 11 +++++++----
 components/MessageInput.tsx | 14 ++++++++++----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index bdf2387..d35290b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -82,8 +82,8 @@ export default function Home() {
       >
         {/* Topbar */}
         <div
-          className="flex items-center justify-between px-4 py-3 flex-shrink-0"
-          style={{ borderBottom: '1px solid var(--border)' }}
+          className="flex items-center justify-between px-4 flex-shrink-0"
+          style={{ borderBottom: '1px solid var(--border)', paddingTop: 'max(12px, env(safe-area-inset-top))', paddingBottom: '12px' }}
         >
           <div className="flex items-center gap-3">
             {/* Sidebar toggle */}
@@ -106,10 +106,13 @@ export default function Home() {
           </div>
           <button
             onClick={() => setSettingsOpen(!settingsOpen)}
-            style={{ color: settingsOpen ? 'var(--accent)' : 'var(--text3)', background: 'none', border: 'none', cursor: 'pointer', padding: '4px', borderRadius: '6px', fontSize: '18px' }}
+            style={{ color: settingsOpen ? 'var(--accent)' : 'var(--text3)', background: 'none', border: 'none', cursor: 'pointer', padding: '6px', borderRadius: '6px', lineHeight: 1 }}
             aria-label="Settings"
           >
-            ⚙
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="3"/>
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+            </svg>
           </button>
         </div>
 
diff --git a/components/MessageInput.tsx b/components/MessageInput.tsx
index 854eb31..7c6b6d5 100644
--- a/components/MessageInput.tsx
+++ b/components/MessageInput.tsx
@@ -110,8 +110,14 @@ export default function MessageInput() {
 
   return (
     <div
-      className="flex gap-2 items-end px-4 py-3 flex-shrink-0"
-      style={{ borderTop: '1px solid var(--border)' }}
+      className="flex gap-2 items-end flex-shrink-0"
+      style={{ 
+        borderTop: '1px solid var(--border)',
+        padding: '12px 16px',
+        paddingBottom: 'max(12px, env(safe-area-inset-bottom))',
+        paddingLeft: 'max(16px, env(safe-area-inset-left))',
+        paddingRight: 'max(16px, env(safe-area-inset-right))',
+      }}
     >
       {/* Voice button */}
       <button
@@ -138,7 +144,7 @@ export default function MessageInput() {
 
       {/* Text input */}
       <div
-        className="flex-1 rounded-xl"
+        className="flex-1 rounded-xl min-w-0 overflow-hidden"
         style={{ background: 'var(--bg2)', border: '1px solid var(--border2)' }}
       >
         <textarea
@@ -148,7 +154,7 @@ export default function MessageInput() {
           onKeyDown={handleKeyDown}
           placeholder="Ask anything... (Shift+Enter for new line)"
           rows={1}
-          className="w-full block resize-none outline-none bg-transparent px-3 py-3 leading-relaxed"
+          className="w-full block resize-none outline-none bg-transparent px-3 py-3 leading-relaxed min-w-0"
           style={{
             fontSize: 'var(--font-size)',
             color: 'var(--text)',