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>