Modal height (h-fit / h-full)

[Mahmoud-zino]

Describe the feature in detail (code, mocks, or screenshots encouraged)

As discussed in Discord we need a way to make the user decide if they want h-fit or h-full.

Potential solutions

1. provide a CssClass prop height with a default value and document both possibilities with their side effects.
2. provide an enum sort of prop that lets the user choose one of both solutions.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

Discord support issue -> https://discord.com/channels/1003691521280856084/1140610247304679454

last PR targeting this issue (changed from h-full to h-fit) -> #1695

issue (caused by h-full) -> #1683

[endigo9740]

@Mahmoud-zino FYI per this, I've noted on the v2 docs when a modal opens or closes, the some scrollbars appear very briefly on the right side of the page, which affects the position of the modal slightly. It animates in a C shape, rather than sliding up in a straight line.

This only last for a few milliseconds though, so it's a blink and you miss it kind of thing.

So far I've only tested in Chrome on Mac, but I think it may be related to the scroll changes for modals recently. Mentioning it here just in case.

UPDATE

Reported here, so we'll track this separately:

• https://github.com/skeletonlabs/skeleton/issues/2239

[emmarvpol]

@endigo9740

@Mahmoud-zino FYI per this, I've noted on the v2 docs when a modal opens or closes, the some scrollbars appear very briefly on the right side of the page, which affects the position of the modal slightly. It animates in a C shape, rather than sliding up in a straight line.

This only last for a few milliseconds though, so it's a blink and you miss it kind of thing.

So far I've only tested in Chrome on Mac, but I think it may be related to the scroll changes for modals recently. Mentioning it here just in case.

I noticed the same behavior so I added this to app.postcss. Now there is no scrollbar blinking and the modal is scrollable. Tested on Opera, Firefox and Safari.

.modal-backdrop {
  @apply overflow-hidden;
}

.modal-transition {
  @apply max-h-screen;
}

[endigo9740]

Per Discord - here's a way to set view-specific sizing options temporarily. This should provide a workaround for now.

w-[50vw] h-[70vh]

The v stands for "viewport" in this case. Check MDN if you need more instruction how these sizing units operate.

[Schroedi]

I was searching for this issue and only found it via Discord. The goal of this comment is just to add more keywords to the Github issue so others can find it. Feel free to remove this comment if it's considered spam.

In my head the issue was a kind of jumping, jittering of the popup. srd on Discord described it as "When you open a modal you can see that it jumps/shifts last second." (https://discord.com/channels/1003691521280856084/1153376314292715560)