From 4ed0627f00d0e84032acc85a0eda46d8bc716dab Mon Sep 17 00:00:00 2001
From: CalderLund <calder@makenotion.com>
Date: Sat, 21 Feb 2026 10:56:16 -0800
Subject: [PATCH] =?UTF-8?q?fix:=20mobile=20responsiveness=20=E2=80=94=20pr?=
 =?UTF-8?q?event=20iOS=20zoom,=20overlay=20sidebar,=20brighter=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Set font-size to 16px on all inputs/textareas to prevent iOS Safari auto-zoom
- Make sidebar a full-width overlay on mobile instead of squishing content
- Add backdrop overlay to dismiss sidebar on mobile
- Brighten gray scale for better readability across the app

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/App.tsx                          | 17 ++++++++++++++--
 frontend/src/components/NewSongView.tsx       |  4 ++--
 .../src/components/PromptLibrarySidebar.tsx   |  9 +++++++--
 frontend/src/themes.ts                        | 20 +++++++++++--------
 4 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f280d9c..3949541 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -532,7 +532,20 @@ function App() {
       )}
 
       {/* Two-panel layout */}
-      <Flex flex={1} overflow="hidden">
+      <Flex flex={1} overflow="hidden" position="relative">
+        {/* Mobile backdrop overlay */}
+        {sidebarOpen && !isLargeScreen && (
+          <Box
+            position="absolute"
+            top={0}
+            left={0}
+            w="100%"
+            h="100%"
+            bg="blackAlpha.600"
+            zIndex={15}
+            onClick={() => handleToggleSidebar(false)}
+          />
+        )}
         {/* Left: Prompt Library Sidebar */}
         {sidebarOpen && (
           <PromptLibrarySidebar
@@ -625,7 +638,7 @@ function App() {
         <Box
           position="fixed"
           bottom={0}
-          left={sidebarOpen ? '280px' : 0}
+          left={sidebarOpen && isLargeScreen ? '280px' : 0}
           right={0}
           bg="rgba(60, 28, 28, 0.7)"
           backdropFilter="blur(8px)"
diff --git a/frontend/src/components/NewSongView.tsx b/frontend/src/components/NewSongView.tsx
index dab6aee..1efbf76 100644
--- a/frontend/src/components/NewSongView.tsx
+++ b/frontend/src/components/NewSongView.tsx
@@ -1099,7 +1099,7 @@ export default function NewSongView({
                   border="none"
                   _focus={{ boxShadow: 'none' }}
                   p={0}
-                  fontSize="sm"
+                  fontSize="md"
                   mb={3}
                 />
 
@@ -1235,7 +1235,7 @@ export default function NewSongView({
                   border="none"
                   _focus={{ boxShadow: 'none' }}
                   p={0}
-                  fontSize="sm"
+                  fontSize="md"
                 />
 
                 {/* Debug panel for lyrics topic (dev only) */}
diff --git a/frontend/src/components/PromptLibrarySidebar.tsx b/frontend/src/components/PromptLibrarySidebar.tsx
index aeb71d8..257bf87 100644
--- a/frontend/src/components/PromptLibrarySidebar.tsx
+++ b/frontend/src/components/PromptLibrarySidebar.tsx
@@ -819,8 +819,9 @@ export default function PromptLibrarySidebar({
 
   return (
     <Box
-      w="280px"
-      minW="280px"
+      w={{ base: '100%', md: '280px' }}
+      minW={{ base: '100%', md: '280px' }}
+      maxW={{ base: '100%', md: '280px' }}
       flexShrink={0}
       h="100%"
       maxH="100%"
@@ -831,6 +832,10 @@ export default function PromptLibrarySidebar({
       display="flex"
       flexDirection="column"
       overflow="hidden"
+      position={{ base: 'absolute', md: 'relative' }}
+      top={0}
+      left={0}
+      zIndex={20}
     >
       {/* Top: Logo + Close button */}
       <HStack py={2} px={2} justify="space-between">
diff --git a/frontend/src/themes.ts b/frontend/src/themes.ts
index 6494e3f..e0cd24f 100644
--- a/frontend/src/themes.ts
+++ b/frontend/src/themes.ts
@@ -25,18 +25,18 @@ const theme = extendTheme({
       800: '#0d7633',
       900: '#085f28',
     },
-    // Lifted gray scale — slightly brighter across the board
+    // Lifted gray scale — brighter for better readability
     gray: {
       50: '#f7fafc',
       100: '#edf2f7',
       200: '#e2e8f0',
-      300: '#cbd5e0',
-      400: '#a0aec0',
-      500: '#718096',
-      600: '#4a5568',
-      700: '#323b4a',
-      800: '#222a38',
-      900: '#191f2b',
+      300: '#d0d7e2',
+      400: '#a8b2c1',
+      500: '#7f8da0',
+      600: '#556070',
+      700: '#3a4556',
+      800: '#283242',
+      900: '#1e2533',
     },
     spotify: {
       green: '#1DB954',
@@ -53,6 +53,10 @@ const theme = extendTheme({
         color: 'white',
         letterSpacing: '0.01em',
       },
+      // Prevent iOS Safari auto-zoom on input focus (requires >= 16px)
+      'input, textarea, select': {
+        fontSize: '16px !important',
+      },
       // Subtle glow on focus for all interactive elements
       '*:focus-visible': {
         boxShadow: '0 0 0 2px rgba(255, 255, 255, 0.25) !important',