Dealing with an MUI Dialog that has a dynamic height can be frustrating, especially when it starts to "jump around" the screen as it adjusts to fit the content filtered by the user. Take a look at this issue:
https://i.stack.imgur.com/IndlU.gif
An easy fix for this problem would be to remove the alignItems property from the dialogPaper using the classes property. Here's an example:
const useStyles = makeStyles((theme) => ({
pivottedDialog: {
alignItems: 'unset',
...
},
}));
const MyDialog = () => (
<Dialog
{...otherProps}
classes={{
scrollPaper: classes.pivottedDialog
}}
>
...
</Dialog>
)
However, this solution causes the dialog to lose its centered position on the screen, which is essential for the full list dialog without any filters applied. I want the dialog to start in the same position as the original one, regardless of screen size (above 600px width)
https://i.stack.imgur.com/dCvnx.png
How can I achieve this?
I've attempted adjusting the positioning and using the top property for the pivottedDialog class, but it doesn't remain consistent across different screen sizes. It needs to stay centered and responsive on all screens wider than 600px.
I created a demo app with both dialogs, which you can experiment with here: https://codesandbox.io/s/crazy-tesla-emc8m?file=/src/App.js