I am encountering a challenge with the layout.
What am I looking for?
I need a modal dialog that expands vertically, extending beyond the screen, centered both horizontally and vertically, with minimal margin on the top and bottom.
Is this feature not documented in MUI? The prescribed method in MUI displays a dialog with scrollable content, keeping the action button constantly visible. However, this does not align with our app's design concept. While it may defy Material Design guidelines, it is necessary for our application.
Have you conducted a Google search on this issue? Yes
What have I achieved so far? I have managed to make the dialog grow beyond the screen, with background scrolling appropriately. Nevertheless, I am unable to maintain top and bottom margins as desired; it stretches until it hits the top at 0 (refer to screenshot 2).
To better illustrate this problem, I will showcase two significant scenarios: the dialog smaller than the viewport (A) and larger than the viewport (B).
Screenshot 1 - state A - ideal scenario https://i.sstatic.net/ceMIP.png
Screenshot 2 - state B upper functioning adequately without top / bottom margins https://i.sstatic.net/RITBM.png
Screenshot 3 - state B upper preferred https://i.sstatic.net/8PESM.png
Screenshot for state A highlighting the issue by adding top / marginTop / paddingTop https://i.sstatic.net/gwPkj.png
Explore this example here: https://codesandbox.io/s/lxw7ylxy8z
Thus, utilizing a marginTop or top property on the paper element of MUI, or a paddingTop within the root element of the MUI Component dialog property, disrupts state A’s vertical centering while failing to apply bottom margin in state B.
I am contemplating solutions like EQCSS or computations based on the dialog's computed size. Nevertheless, I believe there should be a more efficient approach using only CSS and flexbox. The challenge lies in inserting elements within the MUI Hierarchy, or perhaps I lack the knowledge on how to achieve this.
Hoping for assistance on this matter, Feel free to request additional information if needed.