History popup cropped on bottom

I found that my popups are cropped at the bottom, when their height hits the max-height:

It can be fixed by subtracting 60px in custom css:

.popup--tiles {
  max-height: calc(100vh - 50px - 80px - 30px - 62px); 
  border: 1px solid red;
}

It’s easiest testable by opening a history popup on mobile and turning your phone to landscape. Both in Chrome and Firefox. I am pretty sure, this was correct when I migrated history popup to the modular popup.

Do you see this, too? Or is it some strange setting of mine, which I just didn’t find?

If it’s a real issue: why 60px?!

[rchl]

[rchl]

I’m fine with adding some workaround for this.

Or maybe this approach mentioned in the article will work as well:

There is another fix for this that has come along more recently. Matt Smith documents it here. The trick is min-height: -webkit-fill-available; on the body as a progressive enhancement over 100vh, which should work on iOS devices.

Seems a bit cleaner.

And whatever you do, consider browsers that don’t support vh and other new APIs and do it in a “progressive enhancement” way so that it helps new browsers but doesn’t break old ones.