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 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -1008,15 +1008,16 @@ export const App: React.FC = () => {
           </div>
         </div>
 
-        {/* Desktop Header: 3-column Layout (Logo, InstantCaptureBar, Profile Pill) */}
+        {/* Desktop Header: 3-column Layout (Logo, InstantCaptureBar, Profile Pill). From md a grid with equal
-        <div className="hidden sm:flex max-w-6xl mx-auto px-4 py-2 items-start justify-between gap-6">
+            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>