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 1/3] 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">

From f7e7c6dedf865ed9b5187d238f38d64c658dce97 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Thu, 7 Mar 2024 20:08:11 +0530
Subject: [PATCH 2/3] fix: overflow issue

---
 apps/web/src/components/forms/v2/signup.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/forms/v2/signup.tsx b/apps/web/src/components/forms/v2/signup.tsx
index bf1814588..d15b50473 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(
-                  'relative flex h-[500px] w-full flex-col gap-y-4',
+                  '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 absolute mt-2 inline-block w-full truncate rounded-md border px-2 py-1 text-sm lowercase">
+                      <div className="bg-muted/50 border-border text-muted-foreground mt-2 inline-block max-w-[29rem] truncate rounded-md border px-2 py-1 text-sm lowercase">
                         {baseUrl.host}/u/{field.value || '<username>'}
                       </div>
                     </FormItem>

From ddfd4b9e1b1198ce392c52cf5781d850891e2ae6 Mon Sep 17 00:00:00 2001
From: Lucas Smith <me@lucasjamessmith.me>
Date: Fri, 8 Mar 2024 03:59:15 +0000
Subject: [PATCH 3/3] fix: update styling

---
 apps/web/src/components/forms/v2/signup.tsx          | 10 +++++-----
 apps/web/src/components/ui/user-profile-skeleton.tsx |  5 ++---
 apps/web/src/components/ui/user-profile-timur.tsx    |  2 +-
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/forms/v2/signup.tsx b/apps/web/src/components/forms/v2/signup.tsx
index d15b50473..a7e33a759 100644
--- a/apps/web/src/components/forms/v2/signup.tsx
+++ b/apps/web/src/components/forms/v2/signup.tsx
@@ -227,9 +227,9 @@ export const SignUpFormV2 = ({
       <div className="border-border dark:bg-background relative z-10 flex min-h-[min(800px,80vh)] w-full max-w-lg flex-col rounded-xl border bg-neutral-100 p-6">
         {step === 'BASIC_DETAILS' && (
           <div className="h-20">
-            <h1 className="text-2xl font-semibold">Create a new account</h1>
+            <h1 className="text-xl font-semibold md:text-2xl">Create a new account</h1>
 
-            <p className="text-muted-foreground mt-2 text-sm">
+            <p className="text-muted-foreground mt-2 text-xs md:text-sm">
               Create your account and start using state-of-the-art document signing. Open and
               beautiful signing is within your grasp.
             </p>
@@ -238,9 +238,9 @@ export const SignUpFormV2 = ({
 
         {step === 'CLAIM_USERNAME' && (
           <div className="h-20">
-            <h1 className="text-2xl font-semibold">Claim your username now</h1>
+            <h1 className="text-xl font-semibold md:text-2xl">Claim your username now</h1>
 
-            <p className="text-muted-foreground mt-2 text-sm">
+            <p className="text-muted-foreground mt-2 text-xs md:text-sm">
               You will get notified & be able to set up your documenso public profile when we launch
               the feature.
             </p>
@@ -378,7 +378,7 @@ export const SignUpFormV2 = ({
 
                       <FormMessage />
 
-                      <div className="bg-muted/50 border-border text-muted-foreground mt-2 inline-block max-w-[29rem] truncate rounded-md border px-2 py-1 text-sm lowercase">
+                      <div className="bg-muted/50 border-border text-muted-foreground mt-2 inline-block max-w-[16rem] 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 c6936522b..c8b8b808a 100644
--- a/apps/web/src/components/ui/user-profile-skeleton.tsx
+++ b/apps/web/src/components/ui/user-profile-skeleton.tsx
@@ -24,9 +24,8 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
         className,
       )}
     >
-      <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="absolute inline-block max-w-[8rem] truncate lowercase">{user.url}</span>
+      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm">
+        {baseUrl.host}/u/{user.url}
       </div>
 
       <div className="mt-4">
diff --git a/apps/web/src/components/ui/user-profile-timur.tsx b/apps/web/src/components/ui/user-profile-timur.tsx
index e99a314b4..8d1e517ad 100644
--- a/apps/web/src/components/ui/user-profile-timur.tsx
+++ b/apps/web/src/components/ui/user-profile-timur.tsx
@@ -25,7 +25,7 @@ export const UserProfileTimur = ({ className, rows = 2 }: UserProfileTimurProps)
         className,
       )}
     >
-      <div className="border-border bg-background text-muted-foreground inline-block rounded-md border px-2.5 py-1.5 text-sm">
+      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm">
         {baseUrl.host}/u/timur
       </div>