From 1004c4e420f885d874ad543a773f7d8636f03611 Mon Sep 17 00:00:00 2001 From: Jacob Beard Date: Sat, 8 Nov 2025 12:06:19 -0700 Subject: [PATCH 1/3] Improve mobile composer safe-area handling --- frontend/src/components/ChatInterface.css | 57 ++++++++++++++++++++++- 1 file changed, 56 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/ChatInterface.css b/frontend/src/components/ChatInterface.css index fe946dd..197c4e1 100644 --- a/frontend/src/components/ChatInterface.css +++ b/frontend/src/components/ChatInterface.css @@ -4,10 +4,15 @@ display: flex; flex-direction: column; height: 100vh; + height: 100dvh; + height: 100svh; max-width: 800px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + box-sizing: border-box; + padding-top: env(safe-area-inset-top); + padding-bottom: env(safe-area-inset-bottom); } /* Header */ @@ -88,6 +93,7 @@ flex: 1; overflow-y: auto; padding: 20px; + padding-bottom: calc(20px + env(safe-area-inset-bottom)); background-color: #f5f5f5; } @@ -193,6 +199,7 @@ display: flex; gap: 10px; padding: 16px 20px; + padding-bottom: calc(16px + env(safe-area-inset-bottom)); background-color: #fff; border-top: 1px solid #e0e0e0; } @@ -244,6 +251,7 @@ position: fixed; top: 20px; right: 20px; + top: max(20px, env(safe-area-inset-top)); background-color: #c62828; color: white; border: none; @@ -268,6 +276,10 @@ max-width: 100%; border-radius: 0; box-shadow: none; + height: 100vh; + height: 100dvh; + min-height: 100vh; + min-height: 100dvh; } .message { @@ -279,13 +291,56 @@ } .quick-exit { - top: 10px; + top: 12px; + top: max(12px, env(safe-area-inset-top)); right: 10px; padding: 8px 16px; font-size: 12px; } } +@media (max-width: 600px) { + .chat-header { + padding: 12px 16px; + } + + .chat-header h1 { + font-size: 20px; + } + + .chat-header p { + font-size: 13px; + } + + .progress-bar { + margin-top: 10px; + height: 16px; + } + + .progress-text { + font-size: 10px; + } + + .chat-messages { + padding: 12px 14px; + } + + .chat-input-form { + gap: 8px; + padding: 12px 14px; + } + + .chat-input { + padding: 10px 14px; + font-size: 14px; + } + + .send-btn { + padding: 10px 18px; + font-size: 14px; + } +} + /* Scrollbar Styling */ .chat-messages::-webkit-scrollbar { width: 6px; From 2617581c19c05f491057c49ebe3e8a8588bb0441 Mon Sep 17 00:00:00 2001 From: Jacob Beard Date: Sat, 8 Nov 2025 12:28:52 -0700 Subject: [PATCH 2/3] Fix iOS safe area handling for chat layout --- frontend/public/index.html | 5 ++++- frontend/src/components/ChatInterface.css | 6 ++++++ frontend/src/index.css | 12 ++++++++++++ 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/frontend/public/index.html b/frontend/public/index.html index f7f1078..fe0cb73 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -2,7 +2,10 @@ - + Date: Sat, 8 Nov 2025 12:53:10 -0700 Subject: [PATCH 3/3] Balance safe-area padding to avoid mobile overflow --- frontend/src/components/ChatInterface.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/ChatInterface.css b/frontend/src/components/ChatInterface.css index 194b345..4408824 100644 --- a/frontend/src/components/ChatInterface.css +++ b/frontend/src/components/ChatInterface.css @@ -11,18 +11,18 @@ min-height: 100lvh; min-height: -webkit-fill-available; max-width: 800px; + width: 100%; margin: 0 auto; background-color: #ffffff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); box-sizing: border-box; - padding-top: env(safe-area-inset-top); - padding-bottom: env(safe-area-inset-bottom); } /* Header */ .chat-header { background: linear-gradient(135deg, #ffdc00 0%, #ffb700 100%); padding: 20px; + padding-top: calc(20px + env(safe-area-inset-top)); text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } @@ -308,6 +308,7 @@ @media (max-width: 600px) { .chat-header { padding: 12px 16px; + padding-top: calc(12px + env(safe-area-inset-top)); } .chat-header h1 {