title: Modal doesn't fit screen in Chakra UI
body: <p>I am doing a project with Next.js and I've been trying to implement this modal on the page using Chakra UI, but it doesn't fit well as you can see in the image below.</p>
  <p><a href="https://i.stack.imgur.com/J8Ftu.jpg" rel="nofollow noreferrer">See image</a></p>
  <p>How can I fix that?</p>
  <p>Here's the code:</p>
  <pre><code>const { isOpen, onOpen, onClose } = useDisclosure();
  const sizes = ['sm', 'md', 'lg', 'xl', 'full'];
  const [size, setSize] = useState('md');
  const handleSizeClick = (newSize) =&gt; {
      setSize(newSize);
      onOpen();
  };
  
  &lt;Modal onClose={onClose}
         size={size}
         isOpen={isOpen}
  &gt;
      &lt;ModalOverlay /&gt;
          &lt;ModalContent&gt;
              &lt;ModalHeader&gt;Entre&lt;/ModalHeader&gt;
              &lt;ModalCloseButton /&gt;
              &lt;ModalBody&gt;
              &lt;/ModalBody&gt;
              &lt;ModalFooter&gt;
                  &lt;Button onClick={onClose}&gt;Entrar&lt;/Button&gt;
              &lt;/ModalFooter&gt;
          &lt;/ModalContent&gt;
  &lt;/Modal&gt;
  </code></pre>
  <p>The modal is triggered by an onClick() event in a button within the dropdown menu.</p>