fixed the modal overlay

LAION-AI · Jan 3, 2023 · ec9e338 · ec9e338
1 parent c68bbe7
commit ec9e338
Showing 1 changed file with 10 additions and 12 deletions.
diff --git a/website/src/components/CollapsableText.tsx b/website/src/components/CollapsableText.tsx
@@ -1,4 +1,4 @@
-import { Button, Container, useDisclosure } from "@chakra-ui/react";
+import { Button, useDisclosure } from "@chakra-ui/react";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton } from "@chakra-ui/react";
 import React from "react";
 
@@ -13,17 +13,15 @@ export const CollapsableText = ({ text, maxLength = 220 }) => {
         <Button style={{ display: "contents" }} onClick={onOpen}>
           ...
         </Button>
-        <Container maxW="full">
-          <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"}>
-            <ModalOverlay>
-              <ModalContent maxH="400">
-                <ModalHeader>Full Text</ModalHeader>
-                <ModalCloseButton />
-                <ModalBody>{text}</ModalBody>
-              </ModalContent>
-            </ModalOverlay>
-          </Modal>
-        </Container>
+        <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"} >
+          <ModalOverlay style={{ width: "100%", height: "100%" }}>
+            <ModalContent maxH="400">
+              <ModalHeader>Full Text</ModalHeader>
+              <ModalCloseButton />
+              <ModalBody>{text}</ModalBody>
+            </ModalContent>
+          </ModalOverlay>
+        </Modal>
       </>
     );
   }