sandrodach/MindSift
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): keep the capture bar centred and still when the status changes

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-11-02 12:10:36 +01:00
1 parent ad254537d0
commit 8891dc046d
1 file changed
+8 -6
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+8 -6
View File
@@ -1008,15 +1008,16 @@ export const App: React.FC = () => {
</div>
</div>
{/* Desktop Header: 3-column Layout (Logo, InstantCaptureBar, Profile Pill) */}
<div className="hidden sm:flex max-w-6xl mx-auto px-4 py-2 items-start justify-between gap-6">
{/* 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 */}
<div className="hidden sm:flex md:grid md:grid-cols-[minmax(12rem,1fr)_minmax(0,36rem)_minmax(12rem,1fr)] max-w-6xl mx-auto px-4 py-2 items-start justify-between gap-6">
{/* Logo & Headline */}
<div
onClick={() => {
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"
>
<div className="w-7 h-7 bg-accent text-on-accent rounded-btn flex items-center justify-center">
<Brain className="w-4 h-4" />
@@ -1039,7 +1040,7 @@ export const App: React.FC = () => {
</div>
{/* Quick-Capture Input Bubble directly in Header (above Tabs) */}
<div className="flex-1 max-w-xl mx-auto flex items-center gap-2">
<div className="flex-1 max-w-xl mx-auto md:w-full flex items-center gap-2">
<div className="flex-1">
<InstantCaptureBar
onCaptured={handleCaptured}
@@ -1059,7 +1060,7 @@ export const App: React.FC = () => {
</div>
{/* User Profile Pill & Dropdown Menu */}
<div className="relative h-9 flex items-center gap-2 flex-shrink-0" ref={dropdownRef}>
<div className="relative h-9 flex items-center gap-2 flex-shrink-0 md:justify-self-end" ref={dropdownRef}>
<button
onClick={() => {
triggerHaptic(10);
@@ -1069,7 +1070,8 @@ export const App: React.FC = () => {
title="Benutzermenü öffnen"
>
<UserAvatar user={user} size="sm" />
<span className="flex flex-col items-start leading-tight">
{/* Wide enough for the longest status ("eingeschränkt"), so switching status moves nothing */}
<span className="flex flex-col items-start leading-tight min-w-[5.5rem]">
<span className="max-w-[130px] truncate hidden sm:inline text-main font-medium">
{user.displayName}
</span>