cameleer/design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make DetailPanel overlay instead of taking flex space
All checks were successful
Build & Publish / publish (push) Successful in 1m1s
Details

Browse Source 
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>
This commit is contained in:
hsiegeln
2026-03-26 21:55:02 +01:00
parent c0b1cbdc5b
commit d26dc6a8a5
2 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/design-system/composites/DetailPanel/DetailPanel.module.css
View File

@@ -1,4 +1,8 @@
.panel { .panel {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
transition: width 0.25s ease, opacity 0.2s ease; transition: width 0.25s ease, opacity 0.2s ease;
@@ -7,13 +11,15 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--bg-surface); background: var(--bg-surface);
flex-shrink: 0; z-index: 100;
box-shadow: none;
} }
.panel.open { .panel.open {
width: 400px; width: 400px;
opacity: 1; opacity: 1;
border-left-color: var(--border); border-left-color: var(--border);
box-shadow: var(--shadow-lg);
animation: slideInRight 0.25s ease-out both; animation: slideInRight 0.25s ease-out both;
} }

1
src/design-system/layout/AppShell/AppShell.module.css
View File

@@ -2,6 +2,7 @@
display: flex; display: flex;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
position: relative;
} }
.main { .main {