[BUG] - Modal not fully visible on small (little height) screens

[YassBaer]

NextUI Version

v2.2.9

Describe the bug

When using a "shallow" monitor (for a lack of a better word, i.e. one with very little height) and/or very high modals, the top part of the modal can become unreachable through scrolling. We have higher modals in our application so it became apparent there, but the behavior is the same with the modals from the docs as you can see in the video and by testing it yourself.

It seems like scroll-behavior: outside fixes this, but imo content should never become unreachable. Maybe scrollBehavior: outside should become the default or it should at least be documented more explicitly that one should use outside when experiencing such behavior.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Go to the Modal Docs
2. Use a screen with very little height (or use the responsive view inside chrome dev tools) (roughly 450px height)
3. Make sure to stay above the 'sm:'-Threshold for the width. (It works on small screens, probably because modals are placed differently there)
4. Open the first Modal in the docs and try to scroll to see the heading

Expected behavior

As a user, I expected to be able to scroll to see the entirety of the content within the modal.

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/82964083/ebea0a9b-f45d-400b-a5e2-a9048030a334

Operating System Version

macOS, tested on Windows as well

Browser

Chrome

[linear[bot]]

ENG-414 [BUG] - Modal not fully visible on small (little height) screens

[EliseevDanil]

I also wait for fix this

There is a way that helped me

1. for the div that wraps the section (wrapper in classNames props), you need to add align-items: unset; justify-content: unset; text-align: center; padding: 4rem 1.5rem;
2. for the section (className props) add margin: auto; text-align: left;

now the popup should scroll correctly

[srmlcn]

Scrolling simply doesn't happen in either scroll type. I've tested it on MacOS (Safari and Firefox) and Ubuntu (Firefox). In all configurations, my own code behaves similarly to the NextUI website, where the modal pops up with content unreachable and no ability to scroll to it.

https://github.com/nextui-org/nextui/assets/46287074/b99986ad-3933-4960-a753-87aecf673823

In the video attached, you can see the scroll bars showing up on the right-hand side of the screen, but nothing happens to the modal.

I also want to point out that it's not just small screens. My 4K screens render the same situation.

[daveycodez]

Also experiencing this issue, a big problem for landscape on mobile

[EtherealData]

bump!

[wingkwong]

I couldn't reproduce in the latest doc page. Please help share a video.

[mrdaano]

@wingkwong You can resize your window to reproduce this issue. I did it using inspect element: Screencast from 2024-12-23 17-34-46.webm

[WesleyKapow]

Bump. This is pretty bad. I can reproduce on https://www.heroui.com/docs/components/modal with the first modal by shrinking my chrome's window height.

Just tried @EliseevDanil's fix https://github.com/heroui-inc/heroui/issues/2413#issuecomment-1974961874 which looks good!

[datapanthom]

01 August 2025, unresolved