Merge pull request #11 from bootwindproject/fix/modal

fix: modal
bootwindui · Dec 2, 2023 · f30fd01 · f30fd01
2 parents 959767d + 5a73cb7
commit f30fd01
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/modal/src/lib/ModalContent.tsx b/packages/modal/src/lib/ModalContent.tsx
@@ -30,9 +30,9 @@ export const ModalContent = ({ isOpen = false, ...props }: ModalContentProps) =>
     return (
         createPortal(
             (
-                <div className={cn("fixed inset-0 transition duration-200 [&:not(.show)]:opacity-0 [&:is(.show)]:opacity-100 [&:not(.show)]:invisible [&:is(.show)]:visible [&:is(.show)]:transition [&:is(.show)_.modal]:top-24 ", isOpen ? 'show' : '')}>
+                <div className={cn("fixed inset-0 transition duration-200 px-5 pb-5 overflow-auto [&:not(.show)]:opacity-0 [&:is(.show)]:opacity-100 [&:not(.show)]:invisible [&:is(.show)]:visible [&:is(.show)]:transition [&:is(.show)_.modal]:top-24 ", isOpen ? 'show' : '')}>
                     <div className="relative">
-                        <div className="modal z-[100] top-20 bg-white absolute max-w-[600px] w-full mx-5 left-1/2 -translate-x-1/2 rounded-md">
+                        <div className="modal z-[100] top-20 bg-white absolute max-w-[600px] w-full left-1/2 -translate-x-1/2 rounded-md">
                             {props.children}
                         </div>
                     </div>

diff --git a/packages/modal/src/stories/modal.stories.tsx b/packages/modal/src/stories/modal.stories.tsx
@@ -30,7 +30,9 @@ export const Basic = () => {
                         <ModalTitle>Sign In</ModalTitle>
                     </ModalHeader>
                     <ModalBody>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe mollitia a, molestiae soluta cupiditate consequuntur ullam voluptates, commodi magnam unde amet similique quae! Nostrum ducimus veniam sed labore praesentium molestias.
+                        <p className='mb-5'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe mollitia a, molestiae soluta cupiditate consequuntur ullam voluptates, commodi magnam unde amet similique quae! Nostrum ducimus veniam sed labore praesentium molestias.</p>
+                        <p className='mb-5'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe mollitia a, molestiae soluta cupiditate consequuntur ullam voluptates, commodi magnam unde amet similique quae! Nostrum ducimus veniam sed labore praesentium molestias.</p>
+                        <p className='mb-5'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe mollitia a, molestiae soluta cupiditate consequuntur ullam voluptates, commodi magnam unde amet similique quae! Nostrum ducimus veniam sed labore praesentium molestias.</p>
                     </ModalBody>
                     <ModalFooter>
                         <Button onClick={() => setIsOpen(false)}>Close</Button>