fix: UI Breaks When Entering a Long Username in Profile Settings #16304

C-W-D-Harshit · 2024-08-21T11:34:51Z

What does this PR do?

This PR addresses a UI bug on the update username modal at https://app.cal.com/settings/my-account/profile, where entering a very long username would break the layout. The fix includes applying a character limit on the username input field and ensuring long usernames are truncated with an ellipsis to prevent UI issues.

Fixes [CAL-4162] Username update modal overflow #16297
Fixes CAL-4162

Loom Video: https://www.loom.com/share/5112a72ae42d4aae9bf42bf2aa4d20c3?sid=09aa27f8-b4f9-46b7-92be-e3a87aff80fe

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent-sized PR without self-review might be rejected).
I have added a Docs issue here if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

Go to https://app.cal.com/settings/my-account/profile.
Try to update the username with a long string and verify that the UI no longer breaks.
Check that a character limit is enforced on the username input field.
Verify that long usernames are correctly displayed with truncation (e.g., ellipsis) if they exceed the allowed space.

No additional environment variables are required.
Minimal test data: Any valid username.
Expected result: The username should update without breaking the UI, and long usernames should be truncated with ellipses when displayed.

…nent

vercel · 2024-08-21T11:34:56Z

@C-W-D-Harshit is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

graphite-app · 2024-08-21T11:35:10Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (08/21/24)

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

"Add community label" took an action on this PR • (08/21/24)

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

github-actions · 2024-08-21T11:40:34Z

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

Unknown release type "Feat" found in pull request title "Feat: Prevent UI Breakage from Long Usernames in Profile Settings". 

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

Amit91848

Thanks for the PR! In addition to this, it gets all wonky when you have extra long current username, can you fix that as well @C-W-D-Harshit

C-W-D-Harshit · 2024-08-21T12:18:06Z

Hi @Amit91848 I am currently working on that.

C-W-D-Harshit · 2024-08-21T13:01:52Z

Hi @Amit91848 I have fixed the issue.

https://www.loom.com/share/94881202752344708a164c69a192b28a?sid=743f630b-2df3-467a-8255-2b7ba1a0be1d

anikdhabal · 2024-08-21T13:17:21Z

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

+                <div className="max-w-96 w-fit">
                  <p className="text-subtle">{t("current_username")}</p>
                  <Tooltip content={currentUsername}>
                    <p
-                      className="text-emphasis mt-1 max-w-md overflow-hidden text-ellipsis"
+                      className="text-emphasis mt-1 w-full max-w-md overflow-hidden text-ellipsis"
                      data-testid="current-username">
                      {currentUsername}
                    </p>
                  </Tooltip>
                </div>
-                <div>
+                <div className="max-w-96 w-fit">
                  <p className="text-subtle" data-testid="new-username">
                    {t("new_username")}
                  </p>
                  <Tooltip content={inputUsernameValue}>
-                    <p className="text-emphasis mt-1 max-w-md overflow-hidden text-ellipsis">
+                    <p className="text-emphasis mt-1 w-full overflow-hidden text-ellipsis">


The changes are unnecessary. You can easily fix it by breaking the text onto the next line

@anikdhabal Yes you can also fix that by adding a new line, but what if someone just entered a very very long username 😅. The issue would still persist.
I think there should be some kind of character limit with zod validation in the username field.

It still manages and doesn’t break. What do we mean by a very, very long username? Are we thinking about one million letters? 😅

Also, you can't see the text that is outside the area, so it's better to show the full username before saving, instead of just hiding some parts

It still manages and doesn’t break. What do we mean by a very, very long username? Are we thinking about one million words? 😅

Nah mate 😅. I like your approach, it is a lot simpler. My approach was to just fix the code way it was.

github-actions · 2024-08-21T13:43:33Z

E2E results are ready!

Workflow #28984.1 latest results

Amit91848 · 2024-08-21T15:01:52Z

Shouldn't these changes be made in apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx as well?

anikdhabal · 2024-08-21T15:36:06Z

Shouldn't these changes be made in apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx as well?

Yeah, we need to make changes there as well. @C-W-D-Harshit pls do

…meTextfield components

….com into fixUsernameBug

C-W-D-Harshit · 2024-08-21T15:56:52Z

Hi @Amit91848, I have made the changes in PremiumTextfield.tsx.

anikdhabal

Looks good !

Amit91848

LGTM! Thanks @C-W-D-Harshit

feat: Improve UI for username availability in UsernameTextfield compo…

bbcef56

…nent

graphite-app bot added the community Created by Linear-GitHub Sync label Aug 21, 2024

graphite-app bot requested a review from a team August 21, 2024 11:34

github-actions bot added linear Sync Github Issue from community members to Linear.app ui area: UI, frontend, button, form, input ✅ good first issue Good for newcomers 🐛 bug Something isn't working labels Aug 21, 2024

dosubot bot added the 🧹 Improvements Improvements to existing features. Mostly UX/UI label Aug 21, 2024

C-W-D-Harshit changed the title ~~feat: Improve UI for username availability in UsernameTextfield compo…~~ Aug 21, 2024

C-W-D-Harshit changed the title ~~Feat: Prevent UI Breakage from Long Usernames in Profile Settings~~ Aug 21, 2024

Amit91848 requested changes Aug 21, 2024

View reviewed changes

fix: Fixed UI for username availability in UsernameTextfield component

86f648d

anikdhabal requested changes Aug 21, 2024

View reviewed changes

Update UsernameTextfield.tsx

5cecc8a

anikdhabal previously approved these changes Aug 21, 2024

View reviewed changes

anikdhabal requested a review from Amit91848 August 21, 2024 13:19

anikdhabal added the ready-for-e2e label Aug 21, 2024

C-W-D-Harshit added 3 commits August 21, 2024 21:21

fix: FixedUI for username availability in PremiumTextfield and Userna…

0d3fd0a

…meTextfield components

Merge branch 'fixUsernameBug' of https://github.com/C-W-D-Harshit/cal…

5b5db99

….com into fixUsernameBug

fix: Fixed the PremiumTextField.tsx

cb55a4e

C-W-D-Harshit dismissed anikdhabal’s stale review via cb55a4e August 21, 2024 15:55

Merge branch 'main' into fixUsernameBug

e8cac04

anikdhabal approved these changes Aug 21, 2024

View reviewed changes

Amit91848 approved these changes Aug 21, 2024

View reviewed changes

CarinaWolli enabled auto-merge (squash) August 21, 2024 16:07

CarinaWolli merged commit f52de73 into calcom:main Aug 21, 2024

C-W-D-Harshit deleted the fixUsernameBug branch August 21, 2024 17:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: UI Breaks When Entering a Long Username in Profile Settings #16304

fix: UI Breaks When Entering a Long Username in Profile Settings #16304

C-W-D-Harshit commented Aug 21, 2024

vercel bot commented Aug 21, 2024

graphite-app bot commented Aug 21, 2024

github-actions bot commented Aug 21, 2024

Amit91848 left a comment

C-W-D-Harshit commented Aug 21, 2024

C-W-D-Harshit commented Aug 21, 2024

anikdhabal Aug 21, 2024 •

edited

Loading

anikdhabal Aug 21, 2024

C-W-D-Harshit Aug 21, 2024

anikdhabal Aug 21, 2024 •

edited

Loading

C-W-D-Harshit Aug 21, 2024 •

edited

Loading

github-actions bot commented Aug 21, 2024 •

edited

Loading

Amit91848 commented Aug 21, 2024

anikdhabal commented Aug 21, 2024 •

edited

Loading

C-W-D-Harshit commented Aug 21, 2024

anikdhabal left a comment

Amit91848 left a comment

Labels

4 participants

fix: UI Breaks When Entering a Long Username in Profile Settings #16304

fix: UI Breaks When Entering a Long Username in Profile Settings #16304

Conversation

C-W-D-Harshit commented Aug 21, 2024

What does this PR do?

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

vercel bot commented Aug 21, 2024

graphite-app bot commented Aug 21, 2024

Graphite Automations

github-actions bot commented Aug 21, 2024

Amit91848 left a comment

Choose a reason for hiding this comment

C-W-D-Harshit commented Aug 21, 2024

C-W-D-Harshit commented Aug 21, 2024

anikdhabal Aug 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

anikdhabal Aug 21, 2024

Choose a reason for hiding this comment

C-W-D-Harshit Aug 21, 2024

Choose a reason for hiding this comment

anikdhabal Aug 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

C-W-D-Harshit Aug 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

github-actions bot commented Aug 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E results are ready!

Amit91848 commented Aug 21, 2024

anikdhabal commented Aug 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

C-W-D-Harshit commented Aug 21, 2024

anikdhabal left a comment

Choose a reason for hiding this comment

Amit91848 left a comment

Choose a reason for hiding this comment

Labels

4 participants

anikdhabal Aug 21, 2024 •

edited

Loading

anikdhabal Aug 21, 2024 •

edited

Loading

C-W-D-Harshit Aug 21, 2024 •

edited

Loading

github-actions bot commented Aug 21, 2024 •

edited

Loading

anikdhabal commented Aug 21, 2024 •

edited

Loading