From 164a7bc7adefbba72f62ed15acf527c8f7432486 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Sun, 21 Jun 2026 15:33:50 -0700
Subject: [PATCH] fix(web): keep the workspace view-tab strip from clipping at
 ~1280px
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On the live site (which also shows the Collaborators status button), the 8 view
tabs silently clipped at 1280px wide — the strip's overflow-x-auto + no-scrollbar
hid the last tab (~30px) once the selector + Connected + Collaborators consumed
the row. Measured live: group 578px > 548px available → 30px hidden.

Trim the tab group's intrinsic width from 578px to 500px (fits 548 with ~48px
headroom) without dropping labels: tighter button padding (px-3→px-2), tighter
inner gaps/padding (gap-1→gap-0.5, p-2→p-1.5), smaller min-w, and right-size the
oversized icons (lg:h-10/40px → lg:h-8/32px). Verified: typecheck + smoke 5/5,
and the strip fits 1280/1366/1440/1680/1920 with no hidden tabs.

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

diff --git a/packages/web/src/pages/Workspace.tsx b/packages/web/src/pages/Workspace.tsx
index d07a8aec..9cc0cb31 100644
--- a/packages/web/src/pages/Workspace.tsx
+++ b/packages/web/src/pages/Workspace.tsx
@@ -133,115 +133,115 @@ 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 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">
+            <div className="flex flex-nowrap bg-gray-700/50 backdrop-blur-sm rounded-lg p-1 sm:p-1.5 gap-0.5 border border-gray-600/50">
               <button
                 onClick={() => setViewMode('graph')}
-                className={`px-2.5 py-1.5 sm:px-3 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-2 min-w-[3rem] flex-shrink-0 ${
+                className={`px-2 py-1.5 sm:px-2 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-1.5 min-w-[2.75rem] flex-shrink-0 ${
                   viewMode === 'graph' 
                     ? 'bg-green-600 text-white shadow' 
                     : 'text-gray-300 hover:text-white'
                 }`}
                 title="Graph View"
               >
-                <Network className="h-5 w-5 sm:h-8 sm:w-8 lg:h-10 lg:w-10" strokeWidth={1.5} />
+                <Network className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
                 <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
                   Graph
                 </div>
               </button>
               <button
                 onClick={() => setViewMode('dashboard')}
-                className={`px-2.5 py-1.5 sm:px-3 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-2 min-w-[3rem] flex-shrink-0 ${
+                className={`px-2 py-1.5 sm:px-2 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-1.5 min-w-[2.75rem] flex-shrink-0 ${
                   viewMode === 'dashboard' 
                     ? 'bg-green-600 text-white shadow' 
                     : 'text-gray-300 hover:text-white'
                 }`}
                 title="Dashboard View"
               >
-                <LayoutDashboard className="h-5 w-5 sm:h-8 sm:w-8 lg:h-10 lg:w-10" strokeWidth={1.5} />
+                <LayoutDashboard className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
                 <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
                   Dashboard
                 </div>
               </button>
               <button
                 onClick={() => setViewMode('table')}
-                className={`px-2.5 py-1.5 sm:px-3 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-2 min-w-[3rem] flex-shrink-0 ${
+                className={`px-2 py-1.5 sm:px-2 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-1.5 min-w-[2.75rem] flex-shrink-0 ${
                   viewMode === 'table' 
                     ? 'bg-green-600 text-white shadow' 
                     : 'text-gray-300 hover:text-white'
                 }`}
                 title="Table View"
               >
-                <Table className="h-5 w-5 sm:h-8 sm:w-8 lg:h-10 lg:w-10" strokeWidth={1.5} />
+                <Table className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
                 <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
                   Table
                 </div>
               </button>
               <button
                 onClick={() => setViewMode('cards')}
-                className={`px-2.5 py-1.5 sm:px-3 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-2 min-w-[3rem] flex-shrink-0 ${
+                className={`px-2 py-1.5 sm:px-2 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-1.5 min-w-[2.75rem] flex-shrink-0 ${
                   viewMode === 'cards' 
                     ? 'bg-green-600 text-white shadow' 
                     : 'text-gray-300 hover:text-white'
                 }`}
                 title="Card View"
               >
-                <CreditCard className="h-5 w-5 sm:h-8 sm:w-8 lg:h-10 lg:w-10" strokeWidth={1.5} />
+                <CreditCard className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
                 <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
                   Card
                 </div>
               </button>
               <button
                 onClick={() => setViewMode('kanban')}
-                className={`px-2.5 py-1.5 sm:px-3 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-2 min-w-[3rem] flex-shrink-0 ${
+                className={`px-2 py-1.5 sm:px-2 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-1.5 min-w-[2.75rem] flex-shrink-0 ${
                   viewMode === 'kanban' 
                     ? 'bg-green-600 text-white shadow' 
                     : 'text-gray-300 hover:text-white'
                 }`}
                 title="Kanban View"
               >
-                <Columns className="h-5 w-5 sm:h-8 sm:w-8 lg:h-10 lg:w-10" strokeWidth={1.5} />
+                <Columns className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
                 <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
                   Kanban
                 </div>
               </button>
               <button
                 onClick={() => setViewMode('gantt')}
-                className={`px-2.5 py-1.5 sm:px-3 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-2 min-w-[3rem] flex-shrink-0 ${
+                className={`px-2 py-1.5 sm:px-2 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-1.5 min-w-[2.75rem] flex-shrink-0 ${
                   viewMode === 'gantt' 
                     ? 'bg-green-600 text-white shadow' 
                     : 'text-gray-300 hover:text-white'
                 }`}
                 title="Gantt Chart"
               >
-                <GanttChartSquare className="h-5 w-5 sm:h-8 sm:w-8 lg:h-10 lg:w-10" strokeWidth={1.5} />
+                <GanttChartSquare className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
                 <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
                   Gantt
                 </div>
               </button>
               <button
                 onClick={() => setViewMode('calendar')}
-                className={`px-2.5 py-1.5 sm:px-3 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-2 min-w-[3rem] flex-shrink-0 ${
+                className={`px-2 py-1.5 sm:px-2 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-1.5 min-w-[2.75rem] flex-shrink-0 ${
                   viewMode === 'calendar' 
                     ? 'bg-green-600 text-white shadow' 
                     : 'text-gray-300 hover:text-white'
                 }`}
                 title="Calendar View"
               >
-                <CalendarDays className="h-5 w-5 sm:h-8 sm:w-8 lg:h-10 lg:w-10" strokeWidth={1.5} />
+                <CalendarDays className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
                 <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
                   Calendar
                 </div>
               </button>
               <button
                 onClick={() => setViewMode('activity')}
-                className={`px-2.5 py-1.5 sm:px-3 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-2 min-w-[3rem] flex-shrink-0 ${
+                className={`px-2 py-1.5 sm:px-2 sm:py-2 text-sm rounded transition-colors whitespace-nowrap flex flex-col items-center gap-0.5 sm:gap-1.5 min-w-[2.75rem] flex-shrink-0 ${
                   viewMode === 'activity' 
                     ? 'bg-green-600 text-white shadow' 
                     : 'text-gray-300 hover:text-white'
                 }`}
                 title="Activity Feed"
               >
-                <Activity className="h-5 w-5 sm:h-8 sm:w-8 lg:h-10 lg:w-10" strokeWidth={1.5} />
+                <Activity className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
                 <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
                   Activity
                 </div>