From 4c9295de21531e001729cc362494059977e1084f Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Sat, 18 Jul 2026 01:51:01 +0200
Subject: [PATCH] feat: AI sidebar mobile full-width overlay with back button

- Mobile: expanded sidebar is fixed inset-0 full-screen overlay with back button
- Mobile: collapsed icon strip hidden (no space on mobile)
- Desktop: unchanged resizable panel + collapsed icon strip
---
 frontend/src/components/layout/AISidebar.tsx | 73 +++++++++++++++-----
 1 file changed, 54 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/layout/AISidebar.tsx b/frontend/src/components/layout/AISidebar.tsx
index b48415d..7ea449b 100644
--- a/frontend/src/components/layout/AISidebar.tsx
+++ b/frontend/src/components/layout/AISidebar.tsx
@@ -27,11 +27,11 @@ export function AISidebar() {
     })();
   }, []);
 
-  // Collapsed: narrow icon strip
+  // Collapsed: narrow icon strip (desktop only, hidden on mobile)
   if (aiSidebarCollapsed) {
     return (
       <div
-        className="flex-shrink-0 w-12 flex flex-col items-center border-l border-secondary-200 bg-white py-3"
+        className="hidden md:flex flex-shrink-0 w-12 flex-col items-center border-l border-secondary-200 bg-white py-3"
         data-testid="ai-sidebar-collapsed"
       >
         <button
@@ -48,28 +48,27 @@ export function AISidebar() {
     );
   }
 
-  // Expanded: full chat panel with resize handle
+  // Expanded: Mobile = full width overlay, Desktop = resizable panel
   return (
-    <ResizablePanel
-      initialWidth={320}
-      minWidth={240}
-      maxWidth={600}
-      className="border-l border-secondary-200 bg-white"
-      data-testid="ai-sidebar-pane"
-    >
-      <div className="h-full flex flex-col">
-        <div className="h-12 flex items-center justify-between px-3 border-b border-secondary-200">
-          <span className="text-sm font-medium text-secondary-700">KI Assistent</span>
+    <>
+      {/* Mobile: full width overlay with back button */}
+      <div
+        className="md:hidden fixed inset-0 z-50 bg-white flex flex-col"
+        data-testid="ai-sidebar-mobile"
+      >
+        <div className="h-14 flex items-center gap-2 px-3 border-b border-secondary-200">
           <button
             onClick={toggleAISidebar}
-            className="p-1 rounded text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100"
-            title="Einklappen"
-            aria-label="KI Assistent einklappen"
+            className="inline-flex items-center gap-1 px-2 py-1 rounded text-sm text-secondary-700 hover:bg-secondary-100 min-h-touch"
+            aria-label="Zurück"
+            data-testid="ai-sidebar-back"
           >
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
             </svg>
+            <span className="text-sm font-medium">Zurück</span>
           </button>
+          <span className="text-sm font-medium text-secondary-700 ml-2">KI Assistent</span>
         </div>
         <div className="flex-1 overflow-hidden">
           {loading ? (
@@ -83,6 +82,42 @@ export function AISidebar() {
           )}
         </div>
       </div>
-    </ResizablePanel>
+
+      {/* Desktop: resizable panel */}
+      <ResizablePanel
+        initialWidth={320}
+        minWidth={240}
+        maxWidth={600}
+        className="hidden md:flex border-l border-secondary-200 bg-white"
+        data-testid="ai-sidebar-pane"
+      >
+        <div className="h-full flex flex-col">
+          <div className="h-12 flex items-center justify-between px-3 border-b border-secondary-200">
+            <span className="text-sm font-medium text-secondary-700">KI Assistent</span>
+            <button
+              onClick={toggleAISidebar}
+              className="p-1 rounded text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100"
+              title="Einklappen"
+              aria-label="KI Assistent einklappen"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
+          <div className="flex-1 overflow-hidden">
+            {loading ? (
+              <div className="flex items-center justify-center h-full text-sm text-secondary-400">Laden...</div>
+            ) : sessionId ? (
+              <ChatWindow sessionId={sessionId} compact className="h-full" />
+            ) : (
+              <div className="flex items-center justify-center h-full text-sm text-red-500">
+                Session konnte nicht erstellt werden
+              </div>
+            )}
+          </div>
+        </div>
+      </ResizablePanel>
+    </>
   );
 }