From d26dc6a8a530d7fd595f48406d742ac3cf43af9f Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 26 Mar 2026 21:55:02 +0100
Subject: [PATCH] fix: make DetailPanel overlay instead of taking flex space

DetailPanel now uses position: fixed to overlay the content area rather
than participating in the AppShell flex row. This prevents the TopBar
from being compressed when the panel opens. Added box-shadow for depth
separation and z-index: 100 for stacking.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../composites/DetailPanel/DetailPanel.module.css         | 8 +++++++-
 src/design-system/layout/AppShell/AppShell.module.css     | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/design-system/composites/DetailPanel/DetailPanel.module.css b/src/design-system/composites/DetailPanel/DetailPanel.module.css
index ef08847..96480b1 100644
--- a/src/design-system/composites/DetailPanel/DetailPanel.module.css
+++ b/src/design-system/composites/DetailPanel/DetailPanel.module.css
@@ -1,4 +1,8 @@
 .panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
   width: 0;
   overflow: hidden;
   transition: width 0.25s ease, opacity 0.2s ease;
@@ -7,13 +11,15 @@
   display: flex;
   flex-direction: column;
   background: var(--bg-surface);
-  flex-shrink: 0;
+  z-index: 100;
+  box-shadow: none;
 }
 
 .panel.open {
   width: 400px;
   opacity: 1;
   border-left-color: var(--border);
+  box-shadow: var(--shadow-lg);
   animation: slideInRight 0.25s ease-out both;
 }
 
diff --git a/src/design-system/layout/AppShell/AppShell.module.css b/src/design-system/layout/AppShell/AppShell.module.css
index 866a9cd..f680869 100644
--- a/src/design-system/layout/AppShell/AppShell.module.css
+++ b/src/design-system/layout/AppShell/AppShell.module.css
@@ -2,6 +2,7 @@
   display: flex;
   height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .main {