Modal doesn't fit screen in Chakra UI

Question

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.

See image

How can I fix that?

Here's the code:

const { isOpen, onOpen, onClose } = useDisclosure();
const sizes = ['sm', 'md', 'lg', 'xl', 'full'];
const [size, setSize] = useState('md');
const handleSizeClick = (newSize) => {
    setSize(newSize);
    onOpen();
};

<Modal onClose={onClose}
       size={size}
       isOpen={isOpen}
>
    <ModalOverlay />
        <ModalContent>
            <ModalHeader>Entre</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
            </ModalBody>
            <ModalFooter>
                <Button onClick={onClose}>Entrar</Button>
            </ModalFooter>
        </ModalContent>
</Modal>

The modal is triggered by an onClick() event in a button within the dropdown menu.