From 205d0f9ae4b029a8765efdf20f30422707f9b199 Mon Sep 17 00:00:00 2001
From: ardier16 <ardier16@gmail.com>
Date: Tue, 18 Jun 2024 15:39:26 +0300
Subject: [PATCH] Fix passport demo on mobile screens

---
 src/app/components/PassportDemo.tsx | 8 +++++---
 src/theme/config/screens.ts         | 1 +
 src/ui/Modal.tsx                    | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/components/PassportDemo.tsx b/src/app/components/PassportDemo.tsx
index a32f195..d8bd404 100644
--- 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
index e1cdef9..30e5a61 100644
--- 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
index 8cca5f3..1141091 100644
--- 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}
           >