Make new ringdown modal the full height of the window

sfbrigade / bats-server

Routed is an app to help ambulances direct non-critical patients to hospital emergency rooms with the most availability.

https://routedapp.org/

GNU Affero General Public License v3.0

18 stars 12 forks source link

Make new ringdown modal the full height of the window #220

Closed fwextensions closed 2 years ago

fwextensions commented 2 years ago

Fix #211
Set the header to 100vh and position: fixed.
Add a no-scrolling class to html so the body won't scroll while the modal is open.

Adding a class to the HTML element, outside of the React tree, doesn't feel great, but it's the only way to stop the body from scrolling while the overlay is open. I think a redesign of the incoming ringdown UI won't require this modal takeover, so this is an okay solution for now.

Before

The incoming ringdown UI is stuck to the bottom of the list, which can be off-screen when there are enough ringdowns.

After

The UI is stuck to the bottom of the viewport, not the body content.

The overlay will scroll if needed:

fwextensions commented 2 years ago

This CSS works when the window is narrow and the UI is the full width of the viewport. But it still needs some tweaking when there is padding on either side, due to the position: fixed being relative to the viewport.

fwextensions commented 2 years ago

Okay, the CSS should now work in all cases. @francisli can you review?

francisli commented 2 years ago

Issues with iOS mobile Safari related to this: https://lukechannings.com/blog/2021-06-09-does-safari-15-fix-the-vh-bug/

fwextensions commented 2 years ago

Yes, it's basically impossible to reliably stick something to the bottom on mobile, due to the auto-hiding top/bottom bars. There are new CSS units that are coming someday that should improve the situation...

Anyway, I don't think this modal bottom design is the way to go anyway, so it'll hopefully be replaced.