tenants2 icon indicating copy to clipboard operation
tenants2 copied to clipboard

Modals are not usable if their content is too tall for the viewport

Open toolness opened this issue 6 years ago • 1 comments

Urg, this might have to do with #161 and/or the way we're shoehorning Bulma's modal styles into react-aria-modal, but as I discovered when adding our relatively enormous amount of privacy policy info to a modal (#101), our modals don't currently allow any scrolling by default, which means that if the modal is too tall for the viewport, the user can't see all the content, and the only way for them to go back is basically to use their browser's back button.

I hacked in a fix in ce8b4c1 that adds a new jf-is-scrollable-if-too-tall class to make this somewhat bearable:

modal-screenshot

The annoying thing is that it's not obvious the area is scrollable on iOS, because of how iOS hides the scrollbar by default--so if the bottom of the scroll area happens to be at a clean line break, then the user might not realize there's additional content. We might want to add one of those thingys where the bottom fades the text to white, to indicate that there's still more content.

Fortunately, it seems like the privacy modal is the only one that has enough content to surface this issue on my iPhone SE in portrait mode. Users in landscape mode will likely experience problems but hopefully they will just tilt their phone and everything will be OK.

That said, smartwatch users are right out.

toolness avatar Oct 22 '18 12:10 toolness

These are my findings from playing around with BrowserStack and the Privacy Policy modal: -Modal will not scroll even when browser window is too short on IE 8 and under, Chrome 33 and under, Firefox 18 and under, and Safari 6.2 and under -Modal will also not scroll on iPhone 5, but for a different reason: the browser will not allow the user to scroll all the way to the right or the bottom to access the "Got it!" button or the part of the modal that would allow scrolling. User cannot exit the modal -The "jf-scrollable-if-too-tall" class fixes the scrolling problem on the iPhone 5 and surprisingly on Chrome 33, but none of the other browsers. It also adds a second scrollbar on every other browser

Sjones21 avatar Jun 24 '20 18:06 Sjones21