Chakra UI Modal overlay always cover all screen

Question

<>
  <Button onClick={onOpen}>Trigger modal</Button>

  <Modal onClose={onClose} isOpen={isOpen} isCentered>
    <ModalOverlay />
    <ModalContent>
      <ModalHeader>Modal Title</ModalHeader>
      <ModalCloseButton />
      <ModalBody>
        <Lorem count={2} />
      </ModalBody>
      <ModalFooter>
        <Button onClick={onClose}>Close</Button>
      </ModalFooter>
    </ModalContent>
  </Modal>
</>

I'm using chakra UI component UI package.

Modal overlay always cover all screen. How can I make ModalOverlay only cover limited screen?

Here is an example. Overlay only cover center screen except pink area

• https://i.sstatic.net/kbxEC.png

Answer 1

Try:

<ModalOverlay marginX="10vw" width="80vw" />