From 0971f3540206ad3aab5e1f9f383d6f28e58fd412 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Tue, 5 May 2026 12:45:00 +0200
Subject: [PATCH] refactor: improve sidebar and layout responsiveness in
 app.css

- Introduced a CSS variable for the desktop sidebar width to enhance maintainability and responsiveness.
- Updated sidebar and app shell styles to utilize the new variable, ensuring consistent layout across different screen sizes.
- Adjusted margin and width properties to prevent overflow and improve overall user experience on various devices.
---
 frontend/src/app.css | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 419949f..79648dc 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -18,6 +18,7 @@
   --header-h: 52px;
   --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
   --capture-content-max: 800px;
+  --desktop-sidebar-width: 220px;
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -2124,7 +2125,7 @@ a.analysis-split__nav-item {
 .desktop-sidebar {
   display: none;
   flex-direction: column;
-  width: 220px;
+  width: var(--desktop-sidebar-width, 220px);
   height: 100vh;
   position: fixed;
   left: 0;
@@ -2259,15 +2260,21 @@ a.analysis-split__nav-item {
     margin: 0;
     width: 100%;
     min-height: 100%;
+    overflow-x: clip;
   }
 
   .desktop-sidebar {
     display: flex;
   }
 
+  /* Kein width:100% zusätzlich zu margin-left — sonst Spalte = Viewport + Sidebar → horizontaler Scroll */
   .app-shell__column {
-    margin-left: 220px;
+    margin-left: var(--desktop-sidebar-width, 220px);
+    width: calc(100% - var(--desktop-sidebar-width, 220px));
+    max-width: calc(100% - var(--desktop-sidebar-width, 220px));
+    min-width: 0;
     min-height: 100vh;
+    box-sizing: border-box;
   }
 
   .app-header--mobile {