Fix graph view overflow and sidebar visibility

- Add graph-mode class to parent containers when graph view is active
- Add CSS rules for .graph-mode and :has(.graph-view) for overflow: visible
- Ensure sidebar and controls are not clipped by parent overflow
- Add width/height 100% to content-area.graph-view

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

deck-frontend/src/main.ts

@@ -72,6 +72,17 @@ class App {
     contentArea.innerHTML = '';
     contentArea.className = `content-area ${state.view}-view`;
 
+    // Toggle graph-mode class on parents for overflow handling
+    const mainLayout = $('.main-layout');
+    const centerPanel = $('.center-panel');
+    if (state.view === 'graph') {
+      mainLayout?.classList.add('graph-mode');
+      centerPanel?.classList.add('graph-mode');
+    } else {
+      mainLayout?.classList.remove('graph-mode');
+      centerPanel?.classList.remove('graph-mode');
+    }
+
     // Mount new view
     switch (state.view) {
       case 'grid':

deck-frontend/src/styles/main.css

@@ -163,6 +163,8 @@ body {
 
 /* === MAIN LAYOUT === */
 .main-layout { display: flex; flex: 1; overflow: hidden; }
+.main-layout.graph-mode,
+.main-layout:has(.graph-view) { overflow: visible; }
 
 /* === LEFT PANEL === */
 .left-panel {
@@ -204,6 +206,8 @@ body {
 
 /* === CENTER PANEL === */
 .center-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.center-panel.graph-mode,
+.center-panel:has(.graph-view) { overflow: visible; }
 
 /* === VIEW TABS === */
 .view-tabs { display: flex; gap: 6px; }
@@ -223,7 +227,11 @@ body {
 
 /* === CONTENT AREA === */
 .content-area { flex: 1; overflow: hidden; position: relative; }
-.content-area.graph-view { overflow: visible; }
+.content-area.graph-view {
+    overflow: visible;
+    width: 100%;
+    height: 100%;
+}
 
 /* === GRID VIEW === */
 .grid-view {
@@ -402,7 +410,7 @@ body {
     position: relative;
     overflow: visible !important;
 }
-.graph-view svg { width: 100%; height: 100%; display: block; background: var(--bg); }
+.graph-view svg { width: 100%; height: 100%; display: block; background: var(--bg); position: relative; z-index: 1; }
 .node { cursor: pointer; }
 .node text { fill: var(--text-muted); pointer-events: none; font-size: 11px; }
 .node.selected circle { stroke: var(--accent); stroke-width: 4; }