From 57017b8aedd64aa62e773b676b73ce4e80b56f72 Mon Sep 17 00:00:00 2001
From: xthephreakx <5319954+xthephreakx@users.noreply.github.com>
Date: Wed, 29 Jul 2026 22:09:40 +0200
Subject: [PATCH] fix(navbar): prevent centred tab pill overlapping actions on
 tablet (#1747)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The desktop navbar's centred tab pill is absolutely positioned, so on the
md-range (tablet, ~768-1024px) its right edge slid underneath the right-hand
action cluster (notification bell + user menu) once the tab text labels made it
wide enough.

Hide the tab text labels below the lg breakpoint (icon-only on tablet, icon +
label on desktop ≥1024px), which keeps the pill narrow enough to clear the
actions. The icons gain title/aria-label so they stay accessible without text.

Co-authored-by: phreaky <phreakydev@gmail.com>
---
 client/src/components/Layout/Navbar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Layout/Navbar.tsx b/client/src/components/Layout/Navbar.tsx
index cb7cd684c..02e0b03bf 100644
--- a/client/src/components/Layout/Navbar.tsx
+++ b/client/src/components/Layout/Navbar.tsx
@@ -156,6 +156,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
             const isActive = location.pathname === tab.path
             return (
               <Link key={tab.id} to={tab.path}
+                title={tab.label} aria-label={tab.label}
                 className="flex items-center gap-1.5 transition-colors"
                 style={{
                   padding: '5px 16px', borderRadius: 9, fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', fontWeight: 500,
@@ -166,7 +167,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
                 onMouseEnter={e => { if (!isActive) e.currentTarget.style.color = 'var(--text-primary)' }}
                 onMouseLeave={e => { if (!isActive) e.currentTarget.style.color = 'var(--text-muted)' }}>
                 <tab.Icon className="w-4 h-4" />
-                <span>{tab.label}</span>
+                <span className="hidden lg:inline">{tab.label}</span>
               </Link>
             )
           })}