Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): prevent text descender cutoff in user dropdown #19309

Merged
merged 2 commits into from
Feb 19, 2025

Conversation

ddoemonn
Copy link
Contributor

@ddoemonn ddoemonn commented Feb 16, 2025

What does this PR do?

  • Text with descenders (g,j,p,q,y) gets cut off in user dropdown menu
  • Improves text readability in the user dropdown by properly handling letters with descenders
  • Maintains text truncation functionality while ensuring full character visibility

Fixes #19308

Mandatory Tasks

  • I have self-reviewed the code
  • N/A - No documentation changes required as this is a UI bug fix
  • I confirm automated tests are in place that prove my fix is effective

How should this be tested?

  1. Prerequisites:
  • Standard development environment setup
  • No special environment variables needed
  1. Test Data:
    Create a test user with a name containing letters with descenders, such as:
  • "Testing Project"
  • "Primary User"
  • "John Doge"
  1. Test Steps:

  2. Log in with a test user account

  3. Observe the user dropdown in the navigation bar

  4. Verify that all letters, including those with descenders, are fully visible

  5. Test with different browser zoom levels and viewport sizes

  6. Verify truncation still works correctly for long usernames

  7. Expected Results:

  • All letters should be completely visible, including their descenders
  • Text should maintain proper spacing and alignment
  • Truncation should work without cutting off any part of the letters
  • UI should look polished and professional
  1. Visual Verification:
    Before fix:
  • Letters g, j, p, q, y are partially cut off
  • Text appears cramped
    Screenshot 2025-02-16 at 12 22 02
    After fix:
  • All letters are fully visible
  • Text has proper spacing and line height
  • Clean, professional appearance
    Screenshot 2025-02-16 at 12 52 30

Checklist

  • I have read the contributing guide
  • My code follows the style guidelines of this project
  • I have commented my code in hard-to-understand areas
  • I have checked that my changes generate no new warnings

Copy link

vercel bot commented Feb 16, 2025

@ddoemonn is attempting to deploy a commit to the cal-staging Team on Vercel.

A member of the Team first needs to authorize it.

@CLAassistant
Copy link

CLAassistant commented Feb 16, 2025

CLA assistant check
All committers have signed the CLA.

@graphite-app graphite-app bot added the community Created by Linear-GitHub Sync label Feb 16, 2025
@graphite-app graphite-app bot requested a review from a team February 16, 2025 10:00
@github-actions github-actions bot added the 🐛 bug Something isn't working label Feb 16, 2025
@dosubot dosubot bot added the ui area: UI, frontend, button, form, input label Feb 16, 2025
Copy link

graphite-app bot commented Feb 16, 2025

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (02/16/25)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add community label" took an action on this PR • (02/16/25)

1 label was added to this PR based on Keith Williams's automation.

"Add ready-for-e2e label" took an action on this PR • (02/19/25)

1 label was added to this PR based on Keith Williams's automation.

@anikdhabal anikdhabal enabled auto-merge (squash) February 19, 2025 10:05
Copy link
Contributor

github-actions bot commented Feb 19, 2025

E2E results are ready!

@anikdhabal anikdhabal merged commit 050a030 into calcom:main Feb 19, 2025
31 of 36 checks passed
@ddoemonn ddoemonn deleted the fix/user-dropdown-text-overflow branch February 19, 2025 13:20
@ddoemonn
Copy link
Contributor Author

@anikdhabal Thanks for the review!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working community Created by Linear-GitHub Sync ready-for-e2e ui area: UI, frontend, button, form, input
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Text with descenders (g,j,p,q,y) gets cut off in user dropdown menu
3 participants