From 40ad9332e60f66f61c8f423b26c1255ec7919acf Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Thu, 18 Jun 2026 10:14:15 -0700
Subject: [PATCH] =?UTF-8?q?LAYOUT-6:=20fix=20layout-toggle=20overlap=20?=
 =?UTF-8?q?=E2=80=94=20move=20into=20the=20graph=20control=20cluster?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The #30 hierarchical-layout toggle was a fixed bottom-left button (createPortal),
which overlapped the left sidebar's Debug/Chat Console toggle when the sidebar was
collapsed (live audit: 40% overlap @1024/1280/1920). Move it into the graph's
absolute control cluster, stacked under the zoom-extents button (desktop-only,
matching that button's styling), so it's positioned relative to the graph area —
never over the sidebar.

Caught by the GraphDone-Cloud live overlap audit; web typecheck clean; THE GATE 5/5.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/web/src/pages/Workspace.tsx | 32 ++++++++++++++--------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/web/src/pages/Workspace.tsx b/packages/web/src/pages/Workspace.tsx
index 2d0524ce..d07a8aec 100644
--- a/packages/web/src/pages/Workspace.tsx
+++ b/packages/web/src/pages/Workspace.tsx
@@ -460,6 +460,22 @@ export function Workspace() {
            >
              <Maximize2 className="h-4 w-4" />
            </button>
+           {/* Layout mode (desktop): force (organic) vs hierarchical (dependency
+               layers). Lives in the graph control cluster under zoom-extents, so
+               it never overlaps the left sidebar's console toggle. */}
+           <button
+             data-testid="graph-layout-toggle"
+             onClick={toggleLayoutMode}
+             className={`hidden md:flex absolute top-16 left-3 z-40 items-center justify-center w-10 h-10 rounded-full shadow-lg backdrop-blur-sm border transition-colors ${
+               layoutMode === 'hierarchical'
+                 ? 'bg-blue-600/90 border-blue-400 text-white hover:bg-blue-500/90'
+                 : 'bg-gray-900/90 border-gray-600 text-gray-300 hover:text-white hover:border-blue-400'
+             }`}
+             title={layoutMode === 'hierarchical' ? 'Hierarchical layout (click for force)' : 'Force layout (click for hierarchical)'}
+             aria-label="Toggle hierarchical layout"
+           >
+             <Network className="h-4 w-4" />
+           </button>
            {inspectorNode && (
              <div className="absolute z-40 inset-x-3 bottom-3 md:inset-x-auto md:bottom-auto md:top-3 md:right-3">
                <NodeInspector node={inspectorNode} onClose={() => setInspectorNode(null)} />
@@ -514,22 +530,6 @@ export function Workspace() {
         document.body
       )}
 
-      {/* Layout Mode Toggle - force (organic) vs hierarchical (dependency layers) */}
-      {viewMode === 'graph' && currentGraph && !isMobile && createPortal(
-        <button
-          onClick={toggleLayoutMode}
-          className={`fixed bottom-4 left-4 backdrop-blur-sm border rounded-lg p-3 shadow-xl transition-all duration-200 z-50 ${
-            layoutMode === 'hierarchical'
-              ? 'bg-blue-600/90 border-blue-400 hover:bg-blue-500/90'
-              : 'bg-gray-800/90 border-gray-600 hover:bg-gray-700/90'
-          }`}
-          title={layoutMode === 'hierarchical' ? 'Hierarchical layout (click for force)' : 'Force layout (click for hierarchical)'}
-        >
-          <Network className={`h-5 w-5 ${layoutMode === 'hierarchical' ? 'text-white' : 'text-gray-400'}`} />
-        </button>,
-        document.body
-      )}
-
       {/* Mini-Map Toggle Button - Shows when mini-map is hidden (desktop only) */}
       {viewMode === 'graph' && currentGraph && !showMiniMap && !isMobile && createPortal(
         <button