UI: Prevent navbar layout breaking from excessively long user names

[rohan-pandeyy]

Description

Currently, the user's display name appears in the navbar after onboarding and can also be updated later from the settings page.

There is no effective handling for excessively long names, which can cause the navbar layout to break. Since the name is positioned on the top-right section of the navbar, a very long name pushes other navbar elements (such as the search bar and application title) out of alignment and toward the left side of the screen.

In extreme cases, a user can enter a very long continuous string, causing the name field to occupy a large portion of the navbar width.

Expected Behavior

The navbar should remain stable and responsive regardless of the user's display name length.

Suggested improvements:

• Add a reasonable maximum character limit for the user name field during onboarding and settings update.
• Prevent overly long continuous strings from breaking the layout.
• Truncate long names in the navbar using ellipsis (...) once the available width is exceeded.

Example:

• Jonathan Christopher Anderson
  → Jonathan...
  or better yet,
  → Jonathan only.

Whichever looks very UI friendly

Possible Implementation Ideas

• Use CSS text truncation techniques such as:
  • overflow: hidden
  • text-overflow: ellipsis
  • white-space: nowrap
• Add frontend validation for maximum allowed name length.
• Ensure the navbar remains responsive across different screen sizes.

Acceptance Criteria

• Long names no longer shift or break navbar elements.
• Navbar layout remains responsive and visually consistent.
• Truncated names display properly with ellipsis.
• User input validation prevents excessively long names.
• Works correctly on both desktop and smaller screen widths.

Additional Notes

Please ensure the solution is implemented consistently for:

• Initial onboarding flow
• Settings/profile name update flow
• All navbar variants where the user name is displayed

[github-actions]

👋 Thanks for opening this issue! The maintainers will review it shortly. Till then, do not open any PR. This is a strict rule we like to follow around here :)

[Umang-Khemka]

Hi, I'd like to work on this issue.

Here's my planned approach:

1. Navbar truncation - Use CSS truncate with max-w-[150px] and title attribute
   so hovering shows the full name as a tooltip.

2. Input validation - Instead of a hard character limit (which would block legitimate
   long names like Jonathan Christopher Anderson), I'll validate individual words —
   blocking any single continuous word longer than 20 characters to prevent layout-breaking
   strings like aaaaaaaaaaaaaaaaaaaaaa.

Files to be changed:

• frontend/src/components/Navbar.tsx - truncate display name
• frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx - add word length validation
• frontend/src/components/Settings/components/AccountSettingsCard.tsx - add word length validation

Please assign this issue to me. Thanks!

[rohan-pandeyy]

@Umang-Khemka please go ahead!