From b93c62372dcd75d9972c5bece7c0ea4b046a46c1 Mon Sep 17 00:00:00 2001
From: Ho Ngoc Hai <hongochai10@icloud.com>
Date: Sun, 19 Apr 2026 09:19:19 +0700
Subject: [PATCH] fix(web): tighten PublicLayout header on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/[locale]/(public)/layout.tsx b/apps/web/app/[locale]/(public)/layout.tsx
index 15807a7..9841034 100644
--- a/apps/web/app/[locale]/(public)/layout.tsx
+++ b/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 />
-                <span className="hidden text-sm text-muted-foreground sm:inline">
+                {/* Bell only on sm+ to avoid overcrowding mobile header */}
+                <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" />}