Fix footer not sticking to bottom in short pages

[abdusco]

Fixes https://github.com/simonw/datasette/issues/1129

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 91.42%. Comparing base (49d8fc0) to head (8d4c69c). Report is 1110 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1130   +/-   ##
=======================================
  Coverage   91.42%   91.42%           
=======================================
  Files          31       31           
  Lines        3873     3873           
=======================================
  Hits         3541     3541           
  Misses        332      332           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[simonw]

I deployed this to https://datasette-issue-1129.vercel.app/ (using datasette publish vercel fixtures.db --branch 8d4c69c6fb0ef741a19070f5172017ea3522e83c --about_url https://github.com/simonw/datasette/issues/1129 --about datasette/issues/1129 --project datasette-issue-1129) - weirdly, on Mobile Safari the footer appears just below the visible window:

I've seen other problems with fixed footers on Mobile Safari too: at Eventbrite this was a really nasty problem for us to figure out: https://www.eventbrite.com/engineering/mobile-safari-why/

[abdusco]

EDIT: I misunderstood the problem. This seems like a fix better suited for Safari. But I don't have any Apple device to test it.

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/

---

It's actually not that difficult to fix. Well, this is actually a workaround to keep viewport in place.

I usually put a transition (forgot to do it here) that keeps page from resizing.

.container {
  min-height: 100vh;
  transition: height 10000s steps(0);
}

steps() function prevents excessive layout calculations, and lets the page snap back into place (10000s ~= 3h later) in a single step. This fix also prevents page from jumping around when the keyboard pops up and down.

[abdusco]

There's a workaround: https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/

and a future fix: https://css-tricks.com/safari-15-new-ui-theme-colors-and-a-css-tricks-cameo/