From 3f93a236e1912a337fc2a061597ac1d6f70ded2b Mon Sep 17 00:00:00 2001
From: Leopoldadmin <leopold.hammerschmidt@media-on.de>
Date: Sun, 28 Jun 2026 22:35:33 +0200
Subject: [PATCH] fix: add close buttons to mobile sidebars

- RightSidebar: added onCollapse prop and close button in header

- LeftSidebar: wired existing onCollapse prop in App.tsx

- CSS: show .leftbar-toggle and .rightbar-close on mobile

- Both buttons call setMobile{Left,Right}Open(false) to close overlays
---
 frontend/src/App.tsx                     |  2 ++
 frontend/src/components/RightSidebar.tsx |  4 ++++
 frontend/src/styles.css                  | 17 +++++++++++++++++
 frontend/src/types/ui.types.ts           |  1 +
 4 files changed, 24 insertions(+)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f354e8b..0dd05e5 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -954,6 +954,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
           selectedTemplate={selectedTemplate}
           onTemplateSelect={handleTemplateSelect}
           className={mobileLeftOpen ? 'open' : ''}
+          onCollapse={() => setMobileLeftOpen(false)}
         />
         <CanvasArea
           cursorPos={cursorPos}
@@ -1017,6 +1018,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
           onKISuggestionClick={handleSuggestionClick}
           kiLoading={kiLoading}
           className={mobileRightOpen ? 'open' : ''}
+          onCollapse={() => setMobileRightOpen(false)}
         />
       </div>
       <CommandLine
diff --git a/frontend/src/components/RightSidebar.tsx b/frontend/src/components/RightSidebar.tsx
index 1ddd932..5642d12 100644
--- a/frontend/src/components/RightSidebar.tsx
+++ b/frontend/src/components/RightSidebar.tsx
@@ -23,9 +23,13 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
   onRenameBlock, onDuplicateBlock, onDeleteBlock, onSvgImport, onSaveGroupAsBlock,
   onBlockCategoryChange, onBlockSearch, onDragBlock,
   kiMessages, kiSuggestions, onKISend, onKISuggestionClick, kiLoading, onUpdateElement,
+  onCollapse,
 }) => {
   return (
     <aside className={`rightbar${className ? ' ' + className : ''}`} aria-label="Eigenschaften-Panels">
+      <button className="rightbar-close" aria-label="Rechte Leiste schließen" onClick={onCollapse}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+      </button>
       <div className="rightbar-tabs" role="tablist">
         {tabs.map((tab) => (
           <button
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index ff1487e..710478f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1273,6 +1273,23 @@ a:hover { text-decoration: underline; }
   body.drawer-open { overflow: auto !important; }
   /* Mobile sidebars: scrollable content, visible labels */
   .leftbar { overflow-y: auto; -webkit-overflow-scrolling: touch; }
+  .leftbar-toggle { display: grid !important; }
+  .rightbar-close { display: grid !important; }
+  .rightbar-close {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--color-text);
+    cursor: pointer;
+    z-index: 10;
+  }
+  .rightbar-close svg { width: 18px; height: 18px; }
+  .rightbar-close:hover { background: var(--color-surface-3); }
   .leftbar-title { display: block; }
   .tool-section-label { display: block; padding: 0 6px 6px; }
   .tool-btn-label { display: block; }
diff --git a/frontend/src/types/ui.types.ts b/frontend/src/types/ui.types.ts
index 38d4cfd..ef69a89 100644
--- a/frontend/src/types/ui.types.ts
+++ b/frontend/src/types/ui.types.ts
@@ -159,6 +159,7 @@ export interface RightSidebarProps {
   kiLoading?: boolean;
   onUpdateElement?: (el: CADElement) => void;
   className?: string;
+  onCollapse?: () => void;
 }
 
 export interface PropertiesPanelProps {