From 75db4044230130366f3b213f62974c6d9633e39c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 17 Feb 2026 06:32:26 +0000
Subject: v3 UI: Sidebar always overlays content, never shifts it (NK-z1czaq)

Make sidebar position: fixed on desktop, same as mobile. Content area
fills full viewport width and items remain centered regardless of sidebar
state. Easy-to-revert CONTENT CENTERING PARAMETER comment added.

https://claude.ai/code/session_01DpWhB9uGGMBnzqS28HxnuV
---
 frontend-vanilla/src/style.css | 42 +++++++++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css
index 7180d43..f724916 100644
--- a/frontend-vanilla/src/style.css
+++ b/frontend-vanilla/src/style.css
@@ -197,9 +197,9 @@ html {
   opacity: 1;
 }
 
-/* Main Content area */
+/* Main Content area - always fills full width (sidebar overlays) */
 .main-content {
-  flex: 1;
+  width: 100%;
   min-width: 0;
   overflow-y: auto;
   background-color: var(--bg-color);
@@ -283,24 +283,40 @@ html {
   }
 }
 
-/* Desktop Sidebar state */
+/* CONTENT CENTERING PARAMETER:
+ * The sidebar overlays content (position: fixed) and never shifts the main content area.
+ * Content is always centered in the full viewport width.
+ * To revert to sidebar-shifts-content: remove the @media (min-width: 1025px) fixed rules below
+ * and restore "flex: 1; min-width: 0" on .main-content only.
+ */
 @media (min-width: 1025px) {
-  /* Desktop Sidebar state - Removed to keep toggle fixed */
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000;
+    transform: translateX(-100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .sidebar-visible .sidebar {
+    transform: translateX(0);
+    box-shadow: 10px 0 20px rgba(0, 0, 0, 0.1);
+  }
+
+  .sidebar-hidden .sidebar {
+    transform: translateX(-100%);
+  }
 }
 
 /* Layout State */
 .sidebar-hidden .sidebar {
-  display: none;
+  display: flex;
 }
 
-@media (min-width: 1025px) {
-  .sidebar-hidden .sidebar {
-    display: none;
-  }
-
-  .sidebar-visible .sidebar {
-    display: flex;
-  }
+.sidebar-visible .sidebar {
+  display: flex;
 }
 
 input[type="text"],
-- 
cgit v1.2.3