Lars/shinkan-jinkendo
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

refactor: improve sidebar and layout responsiveness in app.css
Some checks failed
Deploy Development / deploy (push) Successful in 36s
Details
Test Suite / lint-backend (push) Successful in 0s
Details
Test Suite / build-frontend (push) Successful in 6s
Details
Test Suite / playwright-tests (push) Failing after 39s
Details

Browse Source 
- 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.
This commit is contained in:
Lars 2026-05-05 12:45:00 +02:00
parent 8c9c97bedb
commit 0971f35402
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/app.css
View File

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