fix(passport): "Continue with email" submission button below fold on …

…mobile (#2714)
proofzero · Oct 11, 2023 · 9bab485 · 9bab485
1 parent d70b0d0
commit 9bab485
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/apps/passport/app/components/email/EmailPanel.tsx b/apps/passport/app/components/email/EmailPanel.tsx
@@ -47,7 +47,7 @@ export const EmailPanel = ({
           Your Email Address
         </Text>
       </section>
-      <section className="flex-1">
+      <section className="mb-4">
         <Input
           type="email"
           id="email"

diff --git a/apps/passport/app/routes/authenticate/$clientId/email/index.tsx b/apps/passport/app/routes/authenticate/$clientId/email/index.tsx
@@ -82,7 +82,7 @@ export default () => {
             Your Email Address
           </Text>
         </section>
-        <section className="flex-1">
+        <section className="mb-4">
           <Input
             type="email"
             id="email"
@@ -96,7 +96,7 @@ export default () => {
             <Text
               size="sm"
               weight="medium"
-              className="text-red-500 mt-4 mb-2 text-center"
+              className="text-red-500 mt-4 text-center"
             >
               {errorMessage}
             </Text>

diff --git a/apps/passport/app/routes/authenticate/$clientId/email/verify.tsx b/apps/passport/app/routes/authenticate/$clientId/email/verify.tsx
@@ -168,9 +168,10 @@ export default () => {
   return (
     <div
       className={
-        'flex shrink flex-col items-center justify-center gap-4 mx-auto\
-      bg-white p-6 h-[100dvh] lg:h-[580px] lg:max-h-[100dvh] w-full\
-       lg:w-[418px] lg:border-rounded-lg dark:bg-gray-800 border border-[#D1D5DB] dark:border-gray-600'
+        'flex shrink flex-col items-center\
+        gap-4 mx-auto bg-white p-6 h-[100dvh]\
+        lg:h-[580px] lg:max-h-[100dvh] w-full lg:w-[418px]\
+        lg:rounded-lg dark:bg-gray-800 border border-[#D1D5DB] dark:border-gray-600'
       }
       style={{
         boxSizing: 'border-box',

diff --git a/packages/design-system/src/molecules/email-otp-validator/EmailOTPValidator.tsx b/packages/design-system/src/molecules/email-otp-validator/EmailOTPValidator.tsx
@@ -120,12 +120,12 @@ export default function EmailOTPValidator({
         </Text>
       </section>
 
-      <section className="flex-1">
+      <section>
         <div className="flex flex-col items-center mt-4 mb-8 text-center">
           <Text className="text-gray-500 dark:text-gray-400">
             We&apos;ve sent a code to
           </Text>
-          <Text className="text-gray-500 dark:text-gray-400 font-medium w-[368px] inline-block float-left whitespace-nowrap truncate">
+          <Text className="text-gray-500 dark:text-gray-400 font-medium max-w-[85dvw] inline-block float-left whitespace-nowrap truncate">
             {email}
           </Text>
         </div>