Thanks for the article!
I remember I had a hard time trying to stretch dialog to full screen for mobile devices, but it actually didn't want to work. The code was something like this:
dialog { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; }
this is most likely due to the absolute positioning. position: absolute will use the top-left corner of the closest ancestor that is "positioned" as the origin for it's layout [1]. If you want that origin to be the top-left corner of the viewport, use position: fixed.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_...
In addition to `position: fixed`, shouldn't it be top, left, height, width, instead of top, left, bottom, right? In the second case, it would follow the top and left instructions then take the necessary amount of space, ignoring right and bottom?
You can shorthand the last four declarations with a single `inset: 10px;` (or maybe `inset: .625rem;`?