fix: mobile layout breaks on screens narrower than 375px

frontend/src/app/dashboard/page.tsx

@@ -57,7 +57,7 @@
 
 export default function DashboardPage() {
   const { user, loading, initialized } = useAuth();
   const router = useRouter();
 
   const [documents, setDocuments] = useState<DocInfo[]>([]);
   const prevDocsRef = useRef<Record<string, string>>({});
@@ -86,7 +86,6 @@
   }, []);
 
   // Auth guard
-
   useEffect(() => {
     if (initialized && !user) router.replace("/login");
   }, [user, initialized, router]);
@@ -104,7 +103,6 @@
     }
   }, [user]);
 
-
   // Load documents
   const loadDocuments = useCallback(async () => {
     setDocumentsLoading(true);
@@ -187,7 +185,8 @@
   );
 
   return (
-    <div className="h-screen flex flex-col overflow-hidden">
+    // min-w-[375px] ensures the layout never squishes below iPhone SE width
+    <div className="h-screen flex flex-col overflow-hidden min-w-[375px]">
       <Header
         sidebarOpen={sidebarOpen}
         onToggleSidebar={() => setSidebarOpen(!sidebarOpen)}

frontend/src/app/globals.css

@@ -372,3 +372,19 @@
 .light .prose-chat .hljs-comment { color: oklch(0.5 0 0); }
 .light .prose-chat strong { color: oklch(0.2 0 0); }
 .light .prose-chat blockquote { color: oklch(0.4 0 0); }
+
+html,
+body {
+  min-width: 375px;
+}
+
+/*
+ * Enable iOS safe-area insets so fixed elements (FAB, modals) clear
+ * the home indicator bar on iPhone SE and similar devices.
+ * Requires viewport-fit=cover in the <meta name="viewport"> tag.
+ */
+@supports (padding: env(safe-area-inset-bottom)) {
+  :root {
+    --safe-area-bottom: env(safe-area-inset-bottom);
+  }
+}

frontend/src/components/chat/ChatPanel.tsx

@@ -228,7 +228,7 @@
           setMessages((prev) =>
             prev.map((m) =>
               m.id === assistantId
                 ? { ...m, content: `Error: ${event.data}`, isStreaming: false }
                 : m
             )
           );
@@ -275,12 +275,12 @@
     if (!activeDoc) return;
     setShowExportMenu(false);
     const token = localStorage.getItem("token");
     const url = `${API_BASE}/api/v1/chat/export/${activeDoc.id}?format=${format}&token=${token}`;
     // Trigger download via a temporary anchor
     const a = document.createElement("a");
     a.href = url;
     a.download = "";
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
   };
@@ -291,7 +291,7 @@
     const handleClickOutside = (e: MouseEvent) => {
       if (exportMenuRef.current && !exportMenuRef.current.contains(e.target as Node)) {
         setShowExportMenu(false);
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
@@ -508,7 +508,7 @@
       </div>
 
       {/* ── Input Area ─────────────────────────────── */}
-      <div className="border-t border-border/50 p-4 bg-card/30 backdrop-blur-sm relative">
+      <div className="border-t border-border/50 p-4 pl-16 sm:pl-4 bg-card/30 backdrop-blur-sm relative">
         <div className="max-w-3xl mx-auto relative">
           {/* Status / Error Message Area */}
           {(isRecording || speechError) && (
@@ -593,7 +593,7 @@
               >
                 {isRecording ? <MicOff className="h-4 w-4" /> : <Mic className="h-4 w-4" />}
               </Button>
 
               {/* NEW Keyboard Shortcuts Info Button */}
               <Button
                 id="shortcut-help-btn"
@@ -615,7 +615,7 @@
                 size="icon"
                 onClick={handleSend}
                 disabled={!input.trim() || streaming}
-                className="h-[44px] w-[44px]"
+                className="h-10 w-10 sm:h-[44px] sm:w-[44px]"
                 aria-label={streaming ? "Sending message" : "Send message"}
               >
                 {streaming ? (
@@ -633,7 +633,7 @@
                       variant="ghost"
                       size="icon"
                       onClick={() => setShowExportMenu((v) => !v)}
-                      className="h-[44px] w-[44px] text-muted-foreground hover:text-primary"
+                      className="h-10 w-10 sm:h-[44px] sm:w-[44px] text-muted-foreground hover:text-primary"
                       title={t("chat.exportTitle")}
                       aria-label={t("chat.exportTitle")}
                       aria-expanded={showExportMenu}
@@ -648,7 +648,7 @@
                         role="menu"
                         aria-label="Export chat"
                         onKeyDown={handleExportMenuKeyDown}
-                        className="absolute bottom-full mb-2 right-0 min-w-[160px] rounded-lg border border-border bg-popover p-1 shadow-lg animate-in fade-in slide-in-from-bottom-2 z-50"
+                        className="absolute bottom-full mb-2 right-0 min-w-[160px] max-w-[calc(100vw-2rem)] rounded-lg border border-border bg-popover p-1 shadow-lg animate-in fade-in slide-in-from-bottom-2 z-50"
                       >
                         <button
                           id="export-md-btn"
@@ -688,7 +688,7 @@
                     variant="ghost"
                     size="icon"
                     onClick={handleClear}
-                    className="h-[44px] w-[44px] text-muted-foreground hover:text-destructive"
+                    className="h-10 w-10 sm:h-[44px] sm:w-[44px] text-muted-foreground hover:text-destructive"
                     aria-label="Clear chat history"
                   >
                     <Trash2 className="w-4 h-4" />

frontend/src/components/chat/ChatSessionSidebar.tsx

@@ -235,9 +235,16 @@ export default function ChatSessionSidebar() {
         </Button>
       </div>
 
+      {/*
+        FAB — mobile only (md:hidden).
+        z-20: sits below the Header (z-50) and its backdrop (z-40) so
+              it is not tappable when the document navigation sheet is open.
+        bottom uses safe-area-inset-bottom so the button clears the iOS
+        home indicator on iPhone SE and other small-screen devices.
+      */}
       <Button
         onClick={() => setMobileOpen(true)}
-        className="fixed bottom-4 left-4 z-30 h-11 w-11 rounded-full shadow-lg md:hidden"
+        className="fixed bottom-[calc(1rem+env(safe-area-inset-bottom,0px))] left-4 z-20 h-11 w-11 rounded-full shadow-lg md:hidden"
         size="icon"
         aria-label="Open chat sessions"
         aria-controls="mobile-chat-sessions"
@@ -263,7 +270,7 @@ export default function ChatSessionSidebar() {
         )}
         aria-label="Chat sessions"
         aria-hidden={!mobileOpen}
-        inert={!mobileOpen ? true : undefined}
+        {...(!mobileOpen ? { inert: true } : {})}
       >
         {sessionsContent(true)}
       </aside>

frontend/src/components/layout/Header.tsx

@@ -13,8 +13,8 @@
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
   DropdownMenuPortal,
   DropdownMenuRadioGroup,
@@ -253,7 +253,7 @@
         ].join(" ")}
         aria-label="Mobile navigation"
         aria-hidden={!sheetOpen}
-        inert={!sheetOpen ? true : undefined}
+        {...(!sheetOpen ? { inert: true } : {})}
       >
         <div className="h-14 flex items-center justify-between px-4 border-b border-sidebar-border flex-shrink-0">
           {/* MOBILE LOGO — clicking navigates to dashboard and closes the sheet */}