fix(web): tighten PublicLayout header on mobile

The header on <sm viewports was crowded for logged-in users: the
desktop Dashboard button, NotificationBell, and hamburger toggle all
rendered on the same row next to the LanguageSwitcher, which pushed
content to the edges on 375px screens and duplicated the Dashboard CTA
(the mobile hamburger menu already exposes it).

- Hide the Dashboard button in the header behind `hidden sm:inline-flex`
  — mobile users reach it through the hamburger menu's full-width CTA.
- Hide NotificationBell behind `hidden sm:block` for the same reason;
  the bell needs enough room for its popover which doesn't fit well on
  mobile widths.
- Switch the right-side container from `space-x-2` to `gap-1 sm:gap-2`
  so icon-only buttons don't touch on narrow screens.
- Clamp the `user.fullName` inline label with `max-w-[12rem] truncate`
  to stop extremely long names pushing the header out of shape on
  borderline-sm widths.
- Mark the hamburger button as `shrink-0` + `type="button"` +
  `aria-expanded`, and annotate the `min-w-0` on the right group so
  flex children can truncate correctly.

Verified at 375×812: header now shows logo | language | hamburger only;
tapping the hamburger opens the drawer which carries bell-adjacent
items and the Dashboard CTA.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/[locale]/(public)/layout.tsx

@@ -80,15 +80,19 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
             ))}
           </nav>
 
-          <div className="ml-auto flex items-center space-x-2">
+          <div className="ml-auto flex min-w-0 items-center gap-1 sm:gap-2">
             <LanguageSwitcher />
             {user ? (
               <>
-                <NotificationBell />
+                {/* Bell only on sm+ to avoid overcrowding mobile header */}
-                <span className="hidden text-sm text-muted-foreground sm:inline">
+                <div className="hidden sm:block">
+                  <NotificationBell />
+                </div>
+                <span className="hidden max-w-[12rem] truncate text-sm text-muted-foreground sm:inline">
                   {user.fullName}
                 </span>
-                <Link href="/dashboard">
+                {/* Dashboard button is desktop-only; mobile users reach it via the hamburger menu */}
+                <Link href="/dashboard" className="hidden sm:inline-flex">
                   <Button size="sm">{t('common.dashboard')}</Button>
                 </Link>
               </>
@@ -106,8 +110,10 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
             )}
             {/* Mobile menu toggle */}
             <button
+              type="button"
               aria-label={mobileMenuOpen ? t('nav.closeMenu') : t('nav.openMenu')}
-              className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground sm:hidden"
+              aria-expanded={mobileMenuOpen}
+              className="inline-flex shrink-0 items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground sm:hidden"
               onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
             >
               {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}