Fix passport demo on mobile screens

rarimo · Jun 18, 2024 · 205d0f9 · 205d0f9
1 parent 5587914
commit 205d0f9
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/app/components/PassportDemo.tsx b/src/app/components/PassportDemo.tsx
@@ -102,17 +102,19 @@ export default function PassportDemo({ isOpen }: { isOpen: boolean }) {
         </div>
       </div>
 
-      <div className='absolute right-0 top-[220px] h-[640px] w-[800px] sm:bottom-0 sm:right-1/4 sm:top-auto xl:bottom-0 xl:right-[20%]'>
+      <div className='h-sm:w-[480px] h-sm:h-[384px] h-sm:right-20 h-sm:-bottom-10 absolute right-0 top-[220px] h-[640px] w-[800px] sm:bottom-0 sm:right-1/4 sm:top-auto xl:bottom-0 xl:right-[20%]'>
         <img
           className='absolute bottom-0 right-0 h-full'
           src='/images/home/demo-hand.png'
           alt='Demo hand'
         />
 
-        <div className='absolute right-[101px] top-[8px] flex w-[215px] overflow-hidden rounded-[20px]'>
+        <div className='h-sm:top-[5px] h-sm:right-[61px] h-sm:w-[128px] h-sm:rounded-[12px] absolute right-[101px] top-[8px] flex w-[215px] overflow-hidden rounded-[20px]'>
           <div
             className='flex gap-[20px] transition-transform duration-300 ease-in-out'
-            style={{ transform: `translateX(-${step * 235}px)` }}
+            style={{
+              transform: `translateX(calc(-${100 * step}% - ${20 * step}px)`,
+            }}
           >
             {steps.map(({ image }, index) => (
               <img

diff --git a/src/theme/config/screens.ts b/src/theme/config/screens.ts
@@ -2,4 +2,5 @@ import { ThemeConfig } from 'tailwindcss/types/config'
 
 export const screens: ThemeConfig['screens'] = {
   '3xl': '2048px',
+  'h-sm': { raw: '(max-height: 400px)' },
 }
diff --git a/src/ui/Modal.tsx b/src/ui/Modal.tsx
@@ -42,7 +42,7 @@ export default function Modal({ isOpen, onClose, children, ...rest }: Props) {
               'fixed left-0 top-0 z-[100] flex h-screen w-screen bg-white transition-all duration-300 ease-in-out',
               isOpen
                 ? 'translate-y-0 opacity-100'
-                : 'pointer-events-none translate-y-full opacity-60',
+                : 'pointer-events-none translate-y-full opacity-0',
             )}
             {...rest}
           >