correct displaying of pokemon modal detail on xs creens

3FE3LE · Sep 17, 2023 · c0915a6 · c0915a6
1 parent 6ededb0
commit c0915a6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/cypress/screenshots/2-advanced-examples/misc.cy.js/my-image.png b/cypress/screenshots/2-advanced-examples/misc.cy.js/my-image.png
diff --git a/src/components/UI/Modal.tsx b/src/components/UI/Modal.tsx
@@ -20,19 +20,24 @@ const ModalOverlay = tw.div`
 `
 
 const ModalContainer = tw.div`
+  relative
   bg-white
   m-5
   w-full
   rounded-3xl
   max-w-4xl
-  max-h-screen
+  box-border
+  max-h-[calc(100vh-2rem)]
+  sm:max-h-screen
 `
 
 const ModalHeader = tw.div`
-  flex
+  absolute
   justify-between
   items-center
   p-5
+  flex
+  w-full
   `
 
 const ModalTitle = tw.h1`
@@ -55,23 +60,24 @@ const ModalContent = tw.section`
 `
 const ModalImg = tw(Image)`
   object-contain
-  max-w-md
   w-full
   aspect-square
   bg-green-100
   rounded-3xl
+  sm:max-w-md
 `
 const ModalInfo = tw.div`
   bg-slate-100
   w-full
-  h-full
+  h-auto
   p-5
   rounded-3xl
   flex
   flex-col
   gap-5
   max-h-96
   overflow-scroll
+  sm:h-full
 `
 
 const ModalCloseButton = tw.button`
@@ -107,9 +113,8 @@ export default function Modal({ isOpen, onClose, pokemon }: ModalProps) {
 
   const movements = moves.slice(0, 4)
   const mainType = types[0]
-  const handsToFoots = (height/3).toFixed(1)
-  const pokemonLbs = weight/10
-
+  const handsToFoots = (height / 3).toFixed(1)
+  const pokemonLbs = weight / 10
 
   return (
     <ModalOverlay>
@@ -120,7 +125,7 @@ export default function Modal({ isOpen, onClose, pokemon }: ModalProps) {
             <XClose />
           </ModalCloseButton>
         </ModalHeader>
-        <ModalContent>
+        <ModalContent css={{ maxHeight: 'inherit' }}>
           <ModalImg
             src={String(img)}
             alt={String(img)}
@@ -138,19 +143,15 @@ export default function Modal({ isOpen, onClose, pokemon }: ModalProps) {
             </div>
             <div tw="flex gap-2 items-center">
               <ModalLabel>types: </ModalLabel>
-                <PokemonTypePill type={mainType} data={types} />
+              <PokemonTypePill type={mainType} data={types} />
             </div>
             <div tw="flex gap-2 flex-wrap items-center">
               <ModalLabel>abilities: </ModalLabel>
-                <PokemonTypePill
-
-                  type={mainType}
-                  data={abilities}
-                />
+              <PokemonTypePill type={mainType} data={abilities} />
             </div>
             <div tw="flex gap-2 flex-wrap items-center">
               <ModalLabel tw="inline">moves: </ModalLabel>
-                <PokemonTypePill  type={mainType} data={movements} />
+              <PokemonTypePill type={mainType} data={movements} />
             </div>
           </ModalInfo>
         </ModalContent>