From a0dc2705d597763031f6dc4f3fca9416ab0186b0 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 17 Jun 2026 18:47:58 -0700
Subject: [PATCH 1/2] LAYOUT-2: fix Workspace top-bar control overlap at
 ~1024px
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The three top-bar sections (graph selector / 8 view-mode buttons / status)
overflowed at 1024px and the centered button strip rendered on top of the graph
selector text (audit OVERLAP: "Graph View" × selector, 100%). Constrain the
layout so sections never collide:
- center strip is flex-1 min-w-0 and scrolls within its slot;
- it only centers at xl (>=1280, where it fits) — justify-start at lg so its
  left edge stays in its slot instead of being pushed under the selector;
- left selector is compact (md:max-w-xs md:shrink); right status md:shrink-0.
Verified via the audit's overlap scan: 0 overlaps @1024. THE GATE 5/5.

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

diff --git a/packages/web/src/pages/Workspace.tsx b/packages/web/src/pages/Workspace.tsx
index 61f4792a..1725632e 100644
--- a/packages/web/src/pages/Workspace.tsx
+++ b/packages/web/src/pages/Workspace.tsx
@@ -88,7 +88,7 @@ export function Workspace() {
         <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2 sm:gap-4">
 
           {/* Left Section: Graph Selector */}
-          <div className="flex-1 min-w-0 md:order-1 max-w-lg">
+          <div className="min-w-0 md:order-1 w-full md:w-auto md:max-w-xs md:shrink">
             <div className="flex items-center space-x-4 h-full">
               {/* Title & Version - Compact */}
               <div className="flex flex-col justify-center">
@@ -122,7 +122,7 @@ export function Workspace() {
 
           {/* Center Section: View Mode Buttons — desktop/tablet only. Phones use the
               bottom tab bar (List / Graph / More) instead of this strip. */}
-          <div className="flex justify-start lg:justify-center md:order-2 overflow-x-auto no-scrollbar -mx-3 px-3 sm:mx-0 sm:px-0">
+          <div className="flex flex-1 min-w-0 justify-start xl:justify-center md:order-2 overflow-x-auto no-scrollbar -mx-3 px-3 sm:mx-0 sm:px-0">
             <div className="flex flex-nowrap bg-gray-700/50 backdrop-blur-sm rounded-lg p-1.5 sm:p-2 gap-1 border border-gray-600/50">
               <button
                 onClick={() => setViewMode('graph')}
@@ -241,7 +241,7 @@ export function Workspace() {
 
           {/* Right Section: Status and Actions — hidden on mobile (the hamburger
               handles nav there); these chips otherwise eat the small-screen width. */}
-          <div className="flex flex-col lg:flex-row lg:items-center gap-3 md:order-3">
+          <div className="flex flex-col lg:flex-row lg:items-center gap-3 md:order-3 md:shrink-0">
             {/* Data-store status (provider-agnostic — keyed off the GraphQL API, which is
                 the actual data layer; the backing store may be D1, Neo4j, etc.) */}
             <div className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs transition-all cursor-help ${

From 6245c034e9c992556cb55db52400d41604b7c2db Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 17 Jun 2026 18:50:33 -0700
Subject: [PATCH 2/2] =?UTF-8?q?LAYOUT-2b:=20"Show=20Project=20Health"=20bu?=
 =?UTF-8?q?tton=20=E2=80=94=20position=20in=20content=20area,=20clear=20of?=
 =?UTF-8?q?=20header=20+=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The toggle was `fixed right-4 top-20` (viewport-relative) while the panel it
opens is absolute within the content container — so it overlapped the global
header on desktop (user report). Make it `absolute top-4` within the same
container as the panel, and shift it left of the 320px panel when open so it
stays clickable. Clear, collision-free positioning.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/web/src/components/ViewManager.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/ViewManager.tsx b/packages/web/src/components/ViewManager.tsx
index 7f30e336..f203dc51 100644
--- a/packages/web/src/components/ViewManager.tsx
+++ b/packages/web/src/components/ViewManager.tsx
@@ -712,9 +712,12 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
 
         {/* Project Health Toggle Button - Floating (desktop only: the 320px panel
             would cover a phone screen, and it's a secondary analytics surface) */}
+        {/* Positioned WITHIN the content container (absolute), like the panel it
+            toggles — not `fixed`, which overlapped the global header. When the
+            320px panel is open, sit just left of it so the toggle stays clickable. */}
         <button
           onClick={() => setShowProjectHealth(!showProjectHealth)}
-          className="hidden md:block fixed right-4 top-20 z-40 p-3 bg-gray-700/60 hover:bg-gray-700/80 backdrop-blur-sm rounded-lg border border-gray-600/50 hover:border-gray-500/70 transition-all duration-200 group"
+          className={`hidden md:block absolute top-4 z-40 p-3 bg-gray-700/60 hover:bg-gray-700/80 backdrop-blur-sm rounded-lg border border-gray-600/50 hover:border-gray-500/70 transition-all duration-200 group ${showProjectHealth ? 'right-[21rem]' : 'right-4'}`}
           title={showProjectHealth ? "Hide Project Health" : "Show Project Health"}
         >
           {showProjectHealth ? (