From 34fea35e8334adbad9803d51e5b8b4cd15930375 Mon Sep 17 00:00:00 2001
From: Nikhil Anand <137920494+niks-nikhil-anand@users.noreply.github.com>
Date: Wed, 28 Feb 2024 01:36:41 -0800
Subject: [PATCH] fix: text overflowing in username change popup #13846
 (#13911)

---
 .../components/ui/UsernameAvailability/UsernameTextfield.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index e0b8c289ce..483e7ca842 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -160,7 +160,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
               <div className="bg-subtle flex w-full flex-wrap gap-6 rounded-sm px-2 py-3 text-sm">
                 <div>
                   <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>
@@ -168,7 +168,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
                   <p className="text-subtle" data-testid="new-username">
                     {t("new_username")}
                   </p>
-                  <p className="text-emphasis mt-1">{inputUsernameValue}</p>
+                  <p className="text-emphasis mt-1 break-all">{inputUsernameValue}</p>
                 </div>
               </div>
             </div>