Opening Dialog drawer half way - reactjs

Question

I'm trying to trigger a dialog box to open when a button is clicked so that it takes up half the height of the blue area as shown in the picture below, while the remaining top half will have the backdrop. Currently i'm unable to force the dialog box to open up in the specific area (blue area), instead it takes up the fullscreen and i'm not sure how to change that. I've added a sample code in codesanbox to show what I have done to try to do this: https://codesandbox.io/s/material-demo-rryul
This is an image showing what I would like to achieve
export default function CenteredGrid() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div className={classes.root}>
<Grid container spacing={1}>
<Grid item xs={6}>
<Paper style={{ height: 500, background: "blue" }}>
<div>
<Button
variant="outlined"
color="white"
onClick={handleClickOpen}
>
Open full-screen dialog
</Button>
<Dialog
fullScreen
open={open}
onClose={handleClose}
TransitionComponent={Transition}
>
<AppBar className={classes.appBar}>
<Toolbar>
<IconButton
edge="start"
color="inherit"
onClick={handleClose}
aria-label="close"
>
<CloseIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Sound
</Typography>
<Button autoFocus color="inherit" onClick={handleClose}>
save
</Button>
</Toolbar>
</AppBar>
<List>
<ListItem button>
<ListItemText
primary="Phone ringtone"
secondary="Titania"
/>
</ListItem>
<Divider />
<ListItem button>
<ListItemText
primary="Default notification ringtone"
secondary="Tethys"
/>
</ListItem>
</List>
</Dialog>
</div>
</Paper>
</Grid>
<Grid item xs={6}>
<Paper style={{ height: 500, background: "purple" }} />
</Grid>
</Grid>
</div>
);
}
If anything is unclear, just let me know

Answer 1

The material ui Dialog is rendered as portal. As per doc, Modal component's props are also available to Dialog.
So you can use the Modal's container prop in Dialog and provide a target which indicates where to display the portal.
The container will have the portal children appended to it.
By default, it uses the body of the top-level document object,
Working demo (codesandbox)
dialog style
dialog: {
background: "orange",
position: "relative !important",
height: "100%",
width: "100%",
padding: "100px 0px 0px 0px", //change this based on your needs
backgroundColor: "rgba(0,0,0,0.6)"
}
dialog jsx
...
const container = React.useRef(null);
...
...
<Dialog
container={container.current}//<---here
fullScreen
open={open}
onClose={handleClose}
TransitionComponent={Transition}
className={classes.dialog}
>
...