From 8891dc046d26b04b31a71439cb77d5c53c40c5be Mon Sep 17 00:00:00 2001 From: Sandro Date: Mon, 2 Nov 2026 12:10:36 +0100 Subject: [PATCH 1/3] fix(ui): keep the capture bar centred and still when the status changes From md the desktop header is a grid with equal outer columns, so the Quick Dump bar sits exactly in the middle whatever name or status stands on the right; the status line keeps the width of its longest label. Co-Authored-By: Claude Opus 5.5 --- frontend/src/App.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6e8c3c8..db401f8 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1008,15 +1008,16 @@ export const App: React.FC = () => { - {/* Desktop Header: 3-column Layout (Logo, InstantCaptureBar, Profile Pill) */} -
+ {/* Desktop Header: 3-column Layout (Logo, InstantCaptureBar, Profile Pill). From md a grid with equal + outer columns, so the capture bar stays exactly centred whatever name or status stands on the right */} +
{/* Logo & Headline */}
{ setActiveTab('triage'); handleTriggerAddButton(); }} - className="h-9 flex items-center gap-2.5 cursor-pointer group select-none flex-shrink-0" + className="h-9 flex items-center gap-2.5 cursor-pointer group select-none flex-shrink-0 md:justify-self-start" >
@@ -1039,7 +1040,7 @@ export const App: React.FC = () => {
{/* Quick-Capture Input Bubble directly in Header (above Tabs) */} -
+
{
{/* User Profile Pill & Dropdown Menu */} -
+
- {/* Desktop Header: 3-column Layout (Logo, InstantCaptureBar, Profile Pill). From md a grid with equal - outer columns, so the capture bar stays exactly centred whatever name or status stands on the right */} -
+ {/* Desktop Header: 3-column grid (Logo, InstantCaptureBar, Profile Pill) with equal outer columns, so + the capture bar stays exactly centred whatever name or status stands on the right */} +
{/* Logo & Headline */}
{ setActiveTab('triage'); handleTriggerAddButton(); }} - className="h-9 flex items-center gap-2.5 cursor-pointer group select-none flex-shrink-0 md:justify-self-start" + className="h-9 flex items-center gap-2.5 cursor-pointer group select-none flex-shrink-0 justify-self-start" >
@@ -1040,7 +1041,7 @@ export const App: React.FC = () => {
{/* Quick-Capture Input Bubble directly in Header (above Tabs) */} -
+
{
{/* User Profile Pill & Dropdown Menu */} -
+