fix: move header nav to separate row

apps/frontend/src/components/Layout/Header.tsx

@@ -58,6 +58,35 @@ export function Header() {
           </div>
         </Link>
 
+        <div className="app-header__actions">
+          <LanguageSwitcher />
+          <Button
+            variant="ghost"
+            size="sm"
+            className="app-header__action"
+            onClick={() => navigate('/settings')}
+            title={t('header.profileSettings')}
+            aria-label={t('header.profileSettings')}
+          >
+            <UserCog className="h-4 w-4" />
+            <span className="app-header__action-text">{t('header.profile')}</span>
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="app-header__action"
+            onClick={() => {
+              void logout().then(() => navigate('/login'));
+            }}
+            title={t('header.logout')}
+            aria-label={t('header.logout')}
+          >
+            <LogOut className="h-4 w-4" />
+            <span className="app-header__action-text">{t('header.logout')}</span>
+          </Button>
+        </div>
+      </div>
+
       <nav className="app-header__nav">
         {links.map((l) => (
           <NavLink
@@ -90,35 +119,6 @@ export function Header() {
           </NavLink>
         )}
       </nav>
-
-        <div className="app-header__actions">
-          <LanguageSwitcher />
-          <Button
-            variant="ghost"
-            size="sm"
-            className="app-header__action"
-            onClick={() => navigate('/settings')}
-            title={t('header.profileSettings')}
-            aria-label={t('header.profileSettings')}
-          >
-            <UserCog className="h-4 w-4" />
-            <span className="app-header__action-text">{t('header.profile')}</span>
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="app-header__action"
-            onClick={() => {
-              void logout().then(() => navigate('/login'));
-            }}
-            title={t('header.logout')}
-            aria-label={t('header.logout')}
-          >
-            <LogOut className="h-4 w-4" />
-            <span className="app-header__action-text">{t('header.logout')}</span>
-          </Button>
-        </div>
-      </div>
     </header>
   );
 }

apps/frontend/src/styles/global.css

@@ -40,7 +40,7 @@
     @apply mx-auto w-full max-w-6xl px-4 pt-6 sm:px-6 lg:px-8;
   }
   .app-header__inner {
-    @apply grid grid-cols-1 items-center gap-3 rounded-lg border border-border bg-surface/80 px-4 py-3 backdrop-blur lg:grid-cols-[auto_minmax(0,1fr)_auto];
+    @apply flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-surface/80 px-4 py-3 backdrop-blur;
   }
   .app-header__brand {
     @apply flex min-w-0 items-center gap-2;
@@ -55,7 +55,7 @@
     @apply truncate text-xs text-muted;
   }
   .app-header__nav {
-    @apply flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap lg:justify-center;
+    @apply mt-3 flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap rounded-lg border border-border bg-surface/80 px-4 py-2 backdrop-blur;
   }
   .app-header__nav-link {
     @apply inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-ink transition-colors hover:bg-ink/5;
@@ -64,7 +64,7 @@
     @apply bg-primary text-primary-foreground shadow-card hover:bg-primary;
   }
   .app-header__actions {
-    @apply flex shrink-0 items-center gap-1 justify-self-start whitespace-nowrap lg:justify-self-end;
+    @apply flex shrink-0 items-center gap-1 whitespace-nowrap;
   }
   .app-header__action {
     @apply shrink-0;