Navbar UI Breaks with Long Usernames
Describe the bug
When a user has a long display name (e.g., "Kokkula Sahithi 4-Yr B.Tech.: Mechanical Engg., IIT(BHU)"), the navbar layout breaks. The username section expands beyond its allocated space, causing navigation tabs to overlap and the layout to become cluttered.
Root Cause Analysis
In src/components/Navbar.tsx, the username is displayed using user?.fullName || user?.username || "User" inside a badge component (around line 151) without any text truncation or max-width constraint. The badge uses hidden md:block for responsive hiding but has no overflow handling.
What Needs to Be Done
- Add
max-w-[150px] truncate or similar Tailwind classes to the username badge
- Add a
title attribute to show the full name on hover
- Test with very long names on desktop, tablet, and mobile breakpoints
- Ensure the Clerk
UserButton component and navigation links do not overlap
Files to Modify
src/components/Navbar.tsx — line ~150-155 (username badge section)
Acceptance Criteria
Navbar UI Breaks with Long Usernames
Describe the bug
When a user has a long display name (e.g., "Kokkula Sahithi 4-Yr B.Tech.: Mechanical Engg., IIT(BHU)"), the navbar layout breaks. The username section expands beyond its allocated space, causing navigation tabs to overlap and the layout to become cluttered.
Root Cause Analysis
In
src/components/Navbar.tsx, the username is displayed usinguser?.fullName || user?.username || "User"inside a badge component (around line 151) without any text truncation or max-width constraint. The badge useshidden md:blockfor responsive hiding but has no overflow handling.What Needs to Be Done
max-w-[150px] truncateor similar Tailwind classes to the username badgetitleattribute to show the full name on hoverUserButtoncomponent and navigation links do not overlapFiles to Modify
src/components/Navbar.tsx— line ~150-155 (username badge section)Acceptance Criteria