fix(Modal): use percentage sizing to prevent scrollbar flash

[garyeung]

Checklist:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of the repo.
• I have tested these changes locally on my machine.

Closes #743

[huyenltnguyen]

Please provide more context on the issue and the fix, specifically the root cause and how the changes address it.

[huyenltnguyen]

For posterity, the root cause is:

The container has:

position: fixed;
inset: 0;
overflow: scroll;

The Dialog (child of container) has:

width: 100vw;
height: 100vh;

The conflict:

• Container with overflow: scroll reserves space for scrollbars
• Dialog is sized at 100vw × 100vh = full viewport, meaning Dialog is larger than the container's available content area
• This creates overflow in both directions

During the close transition, there's a rendering frame where:

• The modal is transitioning out
• The container still has overflow: scroll enforced, while overflow: hidden set to the body is lifted (set by Headless UI, to enable body scroll lock)
• The Dialog at 100vw × 100vh overflows the container's content box
• The scrollbars become visible on the container element
• When the modal completely fades out, these scrollbars disappear with it

This does not seem happen on modal open. It's probably because the transition happens quickly and body scroll lock is applied immediately, so there's no visual frame where the overflow scrollbars are noticeable.

---

The fix is to change Dialog's width and height to full, so it now sizes to 100% of container, not 100% of viewport.

[huyenltnguyen]

The overflow property should at least be auto. Otherwise, the content will get cut off if it's taller than the container.