Leopoldadmin/web-cad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: CSS layout - .main → .app-body selector mismatch caused sidebar full-width

Browse Source 
The component uses className="app-body" but CSS targeted .main for the grid layout.
This caused leftbar, canvas, and rightbar to all render at full viewport width
instead of the 3-column grid (leftbar 64px | canvas 1fr | rightbar 240px).
This commit is contained in:
Leopoldadmin
2026-06-26 18:37:20 +02:00
parent 6d15a692af
commit ef23463a74
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles.css
+5 -5
View File
@@ -427,7 +427,7 @@ a:hover { text-decoration: underline; }
/* ============================================================
MAIN AREA (desktop 3-column)
============================================================ */
.main {
.app-body {
display: grid;
grid-template-columns: var(--leftbar-w) 1fr var(--rightbar-w);
min-height: 0;
@@ -435,9 +435,9 @@ a:hover { text-decoration: underline; }
overflow: hidden;
position: relative;
}
.main.left-collapsed { grid-template-columns: 0 1fr var(--rightbar-w); }
.main.right-collapsed { grid-template-columns: var(--leftbar-w) 1fr 0; }
.main.both-collapsed { grid-template-columns: 0 1fr 0; }
.app-body.left-collapsed { grid-template-columns: 0 1fr var(--rightbar-w); }
.app-body.right-collapsed { grid-template-columns: var(--leftbar-w) 1fr 0; }
.app-body.both-collapsed { grid-template-columns: 0 1fr 0; }
/* ============================================================
LEFT SIDEBAR (Desktop tool palette 2-col)
@@ -1230,7 +1230,7 @@ a:hover { text-decoration: underline; }
.ribbon-btn span { display: none; }
/* Main area: NO left/right desktop columns, canvas + right tab bar */
.main {
.app-body {
grid-template-columns: 1fr var(--mobile-right-tab-w);
}
.leftbar, .rightbar { display: none; }