vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity

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

Browse Source 
* feat: Improve UI for username availability in UsernameTextfield component

* fix: Fixed UI for username availability in UsernameTextfield component

* Update UsernameTextfield.tsx

* fix: FixedUI for username availability in PremiumTextfield and UsernameTextfield components

* fix: Fixed the PremiumTextField.tsx

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
This commit is contained in:
Harshit Sharma
2024-08-21 16:17:14 +00:00
committed by GitHub
co-authored by Anik Dhabal Babu
parent 1690770d6a
commit f52de7331f
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+2 -2
View File
@@ -280,7 +280,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
<div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">
<div className="flex-1 px-2">
<p className="text-subtle">{t("current_username")}</p>
<p className="text-emphasis mt-1" data-testid="current-username">
<p className="text-emphasis mt-1 break-all" data-testid="current-username">
{currentUsername}
</p>
</div>
@@ -288,7 +288,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
<p className="text-subtle" data-testid="new-username">
{t("new_username")}
</p>
<p className="text-emphasis">{inputUsernameValue}</p>
<p className="text-emphasis break-all">{inputUsernameValue}</p>
</div>
</div>
</div>
apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+2 -2
View File
@@ -164,7 +164,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
<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 max-w-md overflow-hidden text-ellipsis break-all"
data-testid="current-username">
{currentUsername}
</p>
@@ -175,7 +175,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
{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 max-w-md overflow-hidden text-ellipsis break-all">
{inputUsernameValue}
</p>
</Tooltip>