From 3e61a0633de037e9ebd0757a710d6721d7ec4e42 Mon Sep 17 00:00:00 2001
From: Kartik <103111467+kartik-212004@users.noreply.github.com>
Date: Tue, 1 Jul 2025 09:32:41 +0530
Subject: [PATCH] prevent info icon from repositioning when text wraps on small
 screens (#22132)

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
---
 apps/web/modules/settings/my-account/profile-view.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/modules/settings/my-account/profile-view.tsx b/apps/web/modules/settings/my-account/profile-view.tsx
index c5352692c4..edd7606482 100644
--- a/apps/web/modules/settings/my-account/profile-view.tsx
+++ b/apps/web/modules/settings/my-account/profile-view.tsx
@@ -652,8 +652,9 @@ const ProfileForm = ({
           />
         </div>
         {extraField}
-        <p className="text-subtle mt-1 flex items-center gap-1 text-sm">
-          <Icon name="info" /> {t("tip_username_plus")}
+        <p className="text-subtle mt-1 flex gap-1 text-sm">
+          <Icon name="info" className="mt-0.5 flex-shrink-0" />
+          <span className="flex-1">{t("tip_username_plus")}</span>
         </p>
         <div className="mt-6">
           <TextField label={t("full_name")} {...formMethods.register("name")} />