From 701ae7c7e7d3284b396eff010b257dfd2d4a5968 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Mon, 23 Mar 2026 09:34:45 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20assistant=20chat=20mobile=20layout=20?=
 =?UTF-8?q?=E2=80=94=20sidebar=20hidden,=20slide-out=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Chat sidebar was rendering side-by-side on mobile causing squished layout.
Now hidden on mobile with a "Chats" toggle button + "+ New" in a compact
header bar. Sidebar slides out as an overlay on mobile, auto-closes on
chat selection.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/assistant/ChatSidebar.tsx  | 39 ++++++++++---
 frontend/src/pages/AssistantChatPage.tsx      | 57 +++++++++++++++----
 2 files changed, 77 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/assistant/ChatSidebar.tsx b/frontend/src/components/assistant/ChatSidebar.tsx
index 3776ce53..1d66a93c 100644
--- a/frontend/src/components/assistant/ChatSidebar.tsx
+++ b/frontend/src/components/assistant/ChatSidebar.tsx
@@ -9,6 +9,8 @@ interface ChatSidebarProps {
   onNewChat: () => void
   onDeleteChat: (id: string) => void
   onTogglePin: (id: string, pinned: boolean) => void
+  mobileOpen?: boolean
+  onMobileClose?: () => void
 }
 
 export function ChatSidebar({
@@ -18,19 +20,41 @@ export function ChatSidebar({
   onNewChat,
   onDeleteChat,
   onTogglePin,
+  mobileOpen = false,
+  onMobileClose,
 }: ChatSidebarProps) {
   const pinnedChats = chats.filter(c => c.pinned)
   const unpinnedChats = chats.filter(c => !c.pinned)
 
+  const handleSelectChat = (id: string) => {
+    onSelectChat(id)
+    onMobileClose?.()
+  }
+
+  const handleNewChat = () => {
+    onNewChat()
+    onMobileClose?.()
+  }
+
   return (
-    <div
-      className="w-72 shrink-0 flex flex-col border-r h-full"
-      style={{ borderColor: 'var(--glass-border)' }}
-    >
+    <>
+      {/* Mobile overlay */}
+      {mobileOpen && (
+        <div className="fixed inset-0 z-40 bg-black/50 sm:hidden" onClick={onMobileClose} />
+      )}
+      <div
+        className={cn(
+          'w-72 shrink-0 flex flex-col border-r h-full',
+          'fixed inset-y-0 left-0 z-50 sm:static sm:z-auto',
+          'transition-transform duration-200',
+          mobileOpen ? 'translate-x-0' : '-translate-x-full sm:translate-x-0',
+        )}
+        style={{ borderColor: 'var(--glass-border)', background: 'var(--color-bg-sidebar)' }}
+      >
       {/* Header */}
       <div className="px-4 py-3 border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
         <button
-          onClick={onNewChat}
+          onClick={handleNewChat}
           className="w-full flex items-center justify-center gap-2 bg-primary text-white font-semibold text-sm rounded-lg px-4 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
         >
           <Plus size={16} />
@@ -52,7 +76,7 @@ export function ChatSidebar({
             key={chat.id}
             chat={chat}
             isActive={chat.id === activeChatId}
-            onSelect={() => onSelectChat(chat.id)}
+            onSelect={() => handleSelectChat(chat.id)}
             onDelete={() => onDeleteChat(chat.id)}
             onTogglePin={() => onTogglePin(chat.id, !chat.pinned)}
           />
@@ -67,7 +91,7 @@ export function ChatSidebar({
             key={chat.id}
             chat={chat}
             isActive={chat.id === activeChatId}
-            onSelect={() => onSelectChat(chat.id)}
+            onSelect={() => handleSelectChat(chat.id)}
             onDelete={() => onDeleteChat(chat.id)}
             onTogglePin={() => onTogglePin(chat.id, !chat.pinned)}
           />
@@ -80,6 +104,7 @@ export function ChatSidebar({
         )}
       </div>
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/AssistantChatPage.tsx b/frontend/src/pages/AssistantChatPage.tsx
index 0aa6aa92..39590de2 100644
--- a/frontend/src/pages/AssistantChatPage.tsx
+++ b/frontend/src/pages/AssistantChatPage.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Sparkles, Send, Loader2, Flag } from 'lucide-react'
+import { Sparkles, Send, Loader2, Flag, MessageSquare } from 'lucide-react'
 import { PageMeta } from '@/components/common/PageMeta'
 import { assistantChatApi } from '@/api/assistantChat'
 import { analytics } from '@/lib/analytics'
@@ -24,6 +24,7 @@ export default function AssistantChatPage() {
   const [input, setInput] = useState('')
   const [loading, setLoading] = useState(false)
   const [showConclude, setShowConclude] = useState(false)
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
   const prefillHandledRef = useRef(false)
@@ -232,22 +233,54 @@ export default function AssistantChatPage() {
     <>
     <PageMeta title="AI Assistant" />
     <div className="flex h-[calc(100vh-3.5rem)]">
-      {/* Sidebar */}
-      <ChatSidebar
-        chats={chats}
-        activeChatId={activeChatId}
-        onSelectChat={selectChat}
-        onNewChat={handleNewChat}
-        onDeleteChat={handleDeleteChat}
-        onTogglePin={handleTogglePin}
-      />
+      {/* Sidebar — hidden on mobile, slide-out via toggle */}
+      <div className="hidden sm:block">
+        <ChatSidebar
+          chats={chats}
+          activeChatId={activeChatId}
+          onSelectChat={selectChat}
+          onNewChat={handleNewChat}
+          onDeleteChat={handleDeleteChat}
+          onTogglePin={handleTogglePin}
+        />
+      </div>
+      <div className="sm:hidden">
+        <ChatSidebar
+          chats={chats}
+          activeChatId={activeChatId}
+          onSelectChat={selectChat}
+          onNewChat={handleNewChat}
+          onDeleteChat={handleDeleteChat}
+          onTogglePin={handleTogglePin}
+          mobileOpen={mobileSidebarOpen}
+          onMobileClose={() => setMobileSidebarOpen(false)}
+        />
+      </div>
 
       {/* Main chat area */}
       <div className="flex-1 flex flex-col min-w-0">
+        {/* Mobile header with chat history toggle */}
+        <div className="sm:hidden flex items-center gap-2 px-3 py-2 border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
+          <button
+            onClick={() => setMobileSidebarOpen(true)}
+            className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
+          >
+            <MessageSquare size={16} />
+            Chats
+          </button>
+          <div className="flex-1" />
+          <button
+            onClick={handleNewChat}
+            className="rounded-lg px-3 py-2 text-sm font-medium text-primary hover:bg-primary/10 transition-colors"
+          >
+            + New
+          </button>
+        </div>
+
         {activeChatId ? (
           <>
             {/* Messages */}
-            <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+            <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 space-y-4">
               {messages.length === 0 && !loading && (
                 <div className="flex flex-col items-center justify-center h-full text-center">
                   <div className="w-16 h-16 rounded-full bg-accent-dim flex items-center justify-center mb-4">
@@ -284,7 +317,7 @@ export default function AssistantChatPage() {
             </div>
 
             {/* Input */}
-            <div className="px-6 py-4 border-t shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
+            <div className="px-3 sm:px-6 py-3 sm:py-4 border-t shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
               <div className="max-w-3xl mx-auto">
                 <div className="flex items-end gap-3">
                   <textarea