From ef23463a7413ed39d5d18adced6760e01641ebe0 Mon Sep 17 00:00:00 2001
From: Leopoldadmin <leopold.hammerschmidt@media-on.de>
Date: Fri, 26 Jun 2026 18:37:20 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20CSS=20layout=20-=20.main=20=E2=86=92=20.?=
 =?UTF-8?q?app-body=20selector=20mismatch=20caused=20sidebar=20full-width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 frontend/src/styles.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index ba8d7e6..7be4a41 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -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; }