LAYOUT-2: fix top-bar control overlap at ~1024px

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 ? (

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 ${