From 295caa58c11af9a3019c3a1485b614eb57fcd168 Mon Sep 17 00:00:00 2001
From: ARCHITECT <architect@tzzr.local>
Date: Wed, 14 Jan 2026 00:47:57 +0000
Subject: [PATCH] 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         | 11 +++++++++++
 deck-frontend/src/styles/main.css | 12 ++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/deck-frontend/src/main.ts b/deck-frontend/src/main.ts
index d7422a8..f07c066 100644
--- a/deck-frontend/src/main.ts
+++ b/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':
diff --git a/deck-frontend/src/styles/main.css b/deck-frontend/src/styles/main.css
index ab2b0d3..f665c4b 100644
--- a/deck-frontend/src/styles/main.css
+++ b/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; }