fix(header): keep mobile logo on one line, compact auth buttons (#512)

## 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
This commit is contained in:
Víctor Falcón 2026-06-09 14:44:35 +02:00 committed by GitHub
parent e9ba70b315
commit 1530544b8b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 7 deletions

View File

@ -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 && (