From b5b74a788c533d0fa38a7a40da3421c5643f55ae Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <adhabal2002@gmail.com>
Date: Wed, 6 Mar 2024 14:52:59 +0000
Subject: [PATCH] fix: overflow issue with user name input

---
 apps/web/src/components/forms/v2/signup.tsx          | 4 ++--
 apps/web/src/components/ui/user-profile-skeleton.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/forms/v2/signup.tsx b/apps/web/src/components/forms/v2/signup.tsx
index 189116e01..bf1814588 100644
--- a/apps/web/src/components/forms/v2/signup.tsx
+++ b/apps/web/src/components/forms/v2/signup.tsx
@@ -360,7 +360,7 @@ export const SignUpFormV2 = ({
             {step === 'CLAIM_USERNAME' && (
               <fieldset
                 className={cn(
-                  'flex h-[500px] w-full flex-col gap-y-4',
+                  'relative flex h-[500px] w-full flex-col gap-y-4',
                   isGoogleSSOEnabled && 'h-[600px]',
                 )}
                 disabled={isSubmitting}
@@ -378,7 +378,7 @@ export const SignUpFormV2 = ({
 
                       <FormMessage />
 
-                      <div className="bg-muted/50 border-border text-muted-foreground mt-2 inline-block truncate rounded-md border px-2 py-1 text-sm lowercase">
+                      <div className="bg-muted/50 border-border text-muted-foreground absolute mt-2 inline-block w-full truncate rounded-md border px-2 py-1 text-sm lowercase">
                         {baseUrl.host}/u/{field.value || '<username>'}
                       </div>
                     </FormItem>
diff --git a/apps/web/src/components/ui/user-profile-skeleton.tsx b/apps/web/src/components/ui/user-profile-skeleton.tsx
index 1c8f35b64..c6936522b 100644
--- a/apps/web/src/components/ui/user-profile-skeleton.tsx
+++ b/apps/web/src/components/ui/user-profile-skeleton.tsx
@@ -24,9 +24,9 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
         className,
       )}
     >
-      <div className="border-border bg-background text-muted-foreground inline-flex items-center rounded-md border px-2.5 py-1.5 text-sm">
+      <div className="border-border bg-background text-muted-foreground relative inline-block rounded-md border px-2.5 py-1.5 text-sm">
         <span>{baseUrl.host}/u/</span>
-        <span className="inline-block max-w-[8rem] truncate lowercase">{user.url}</span>
+        <span className="absolute inline-block max-w-[8rem] truncate lowercase">{user.url}</span>
       </div>
 
       <div className="mt-4">