From 1530544b8b3322f90829991df3d41d06e43e54a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Tue, 9 Jun 2026 14:44:35 +0200
Subject: [PATCH] fix(header): keep mobile logo on one line, compact auth
 buttons (#512)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What

Two mobile-header fixes:

- **Logo no longer wraps/clips.** The brand row had no `shrink-0`, so
flexbox squeezed it and "Whisper Money" wrapped to two lines or got cut
off by the buttons. Now pinned with `shrink-0` + `whitespace-nowrap`,
and the bird icon is bumped `size-4` → `size-5`.
- **Auth buttons fit when logged out.** Log in + Register both as text
buttons overflowed the narrow pill. Log in is now an icon-only ghost
button (`LogIn` icon, `aria-label` for a11y), so Register keeps its full
primary-CTA pill.

Desktop header is untouched.

## Test plan

- [ ] Logged-out mobile: logo on one line, login icon + Register both
visible, no overflow
- [ ] Logged-in mobile: Dashboard button unaffected
- [ ] Desktop unchanged
---
 resources/js/components/partials/header.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/partials/header.tsx b/resources/js/components/partials/header.tsx
index 03f83031..74e81508 100644
--- a/resources/js/components/partials/header.tsx
+++ b/resources/js/components/partials/header.tsx
@@ -3,7 +3,7 @@ import { dashboard, login } from '@/routes';
 import { type SharedData } from '@/types';
 import { __ } from '@/utils/i18n';
 import { Link, usePage } from '@inertiajs/react';
-import { BirdIcon, Github, StarIcon } from 'lucide-react';
+import { BirdIcon, Github, LogIn, StarIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import DiscordIcon from '../icons/DiscordIcon';
 import { Button } from '../ui/button';
@@ -46,9 +46,11 @@ export default function Header({
         <>
             {/* Mobile pill header */}
             <header className="fixed top-4 right-4 left-4 z-50 flex items-center justify-between rounded-full border border-border/50 bg-background/70 px-4 py-3.5 shadow-lg shadow-black/10 backdrop-blur-xl sm:hidden dark:border-border/30 dark:shadow-black/30">
-                <div className="flex items-center gap-2.5 font-mono">
-                    <BirdIcon className="size-4 text-[#1b1b18] dark:text-[#EDEDEC]" />
-                    <span className="text-sm font-medium">Whisper Money</span>
+                <div className="flex shrink-0 items-center gap-2.5 font-mono">
+                    <BirdIcon className="size-5 text-[#1b1b18] dark:text-[#EDEDEC]" />
+                    <span className="text-sm font-medium whitespace-nowrap">
+                        Whisper Money
+                    </span>
                 </div>
                 <nav className="flex items-center gap-2">
                     {!hideExternalButtons && (
@@ -118,13 +120,16 @@ export default function Header({
                     ) : (
                         !hideAuthButtons && (
                             <>
-                                <Link href={login({ query: { force: 1 } })}>
+                                <Link
+                                    href={login({ query: { force: 1 } })}
+                                    aria-label={__('Log in')}
+                                >
                                     <Button
                                         variant={'ghost'}
-                                        size="sm"
+                                        size="icon-sm"
                                         className="cursor-pointer rounded-full"
                                     >
-                                        {__('Log in')}
+                                        <LogIn className="size-4" />
                                     </Button>
                                 </Link>
                                 {canRegister && (