From f52de7331f5345768f26a618f196a2af7cece162 Mon Sep 17 00:00:00 2001
From: Harshit Sharma <cwd.harshit911@gmail.com>
Date: Wed, 21 Aug 2024 21:47:14 +0530
Subject: [PATCH] fix: UI Breaks When Entering a Long Username in Profile
 Settings (#16304)

* 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>
---
 .../components/ui/UsernameAvailability/PremiumTextfield.tsx   | 4 ++--
 .../components/ui/UsernameAvailability/UsernameTextfield.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index da811b4db8..351f09242b 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -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>
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index bf6b0d2eb5..2eab59a02a 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -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>