From 55f1fbe1b2a0af71d8d1b92d6f9d3dd69fdeaeb3 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Sun, 21 Jun 2026 16:37:03 -0700
Subject: [PATCH] fix(web): make the stacked status chips a uniform single
 column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

items-end (ragged widths) → items-stretch so Connected + Collaborators share
the column's width, and center the Connected chip's content. Clean single
column of equal-width pills.

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

diff --git a/packages/web/src/pages/Workspace.tsx b/packages/web/src/pages/Workspace.tsx
index 645a0344..b9d0844a 100644
--- a/packages/web/src/pages/Workspace.tsx
+++ b/packages/web/src/pages/Workspace.tsx
@@ -251,10 +251,10 @@ 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 items-end gap-1.5 md:order-3 md:shrink-0">
+          <div className="flex flex-col items-stretch gap-1.5 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 ${
+            <div className={`flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs transition-all cursor-help ${
               health?.services?.graphql?.status === 'healthy'
                 ? 'bg-green-600/20 text-green-300 border border-green-500/30'
                 : 'bg-red-600/20 text-red-300 border border-red-500/30'