I'm using a Modal component from MUI in my project and I am facing an issue with displaying a large JSON object inside the modal.
The problem is, the top of the modal extends beyond the screen height and even after making it scrollable, I am unable to scroll up to view the content at the top.
Below is the code snippet for my React component:
const modal = (task_definition: string) => {
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => setOpen(false);
const style = {
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '75%',
bgcolor: '#333333',
border: '2px solid #000',
boxShadow: 24,
p: 4
};
return (
<div>
<Button onClick={handleOpen}>Describe Task</Button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
style={{ overflow: "auto" }}
>
<Box sx={{...style, overflow: "auto"}}>
<Typography id="modal-modal-title" variant="h6" component="h2">
Task Definition Described
</Typography>
<Typography id="modal-modal-description" sx={{ mt: 2 }} component={'span'}>
{prettyJson(task_definition)}
</Typography>
</Box>
</Modal>
</div>
);
}
Can you suggest which CSS property I should adjust to ensure that my modal fits properly within the screen?