possible fix for occluded height #449
Conversation
✅ Deploy Preview for tsml-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| ) : ( | ||
| <div style={{ display: 'flex', flexGrow: 1 }}> | ||
| <Map | ||
| <div style={{ minHeight: `calc(100dvh - ${occludedHeight}px)` }}> |
There was a problem hiding this comment.
the diff looks a little weird below - the only change here is wrapping everything in this div ☝️
There was a problem hiding this comment.
LGTM, works on my machine
There was a problem hiding this comment.
Honestly it makes sense, and if it somehow clashes with oddball designs on a few sites, it's small enough to work around.
It might be good to make this change default, and add some config option to disable just in case there's some weird clash, but we can always do that later.
|
thanks! yeah i'm open to making this a configuration, or just trying to iterate when we hear reports of issues looks like it's working pretty well so far (in mac safari at least) on |
ideally, TSML UI will at a minimum fill the available space on the screen
when it's in list view, it typically scrolls higher than the viewport and that's fine
when in map view however, it can sometimes be too small or too big. a recent PR set the min-height to be 100dvh, which is great except when there's a fixed element, such as a header, occluding part of the viewport
check out https://aasanjose.org/meetings?view=map - ideally the map would not go off the bottom of the screen
this PR computes the height of probably-occluding elements and adjusts TSML UI's min-height accordingly. also adds example test with a fixed header
concerns: