dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix the dead space between /create's sticky CTA and the phone tab bar

Browse source 
On phones the "Freeze my deck" strip floats one tab-bar height (4.6rem)
above the viewport bottom, but the page reserved env + 9rem of trailing
room — so at the end of the scroll the strip docked ~70px higher than where
it had been floating, leaving a visible cavity above the tab bar.

Phones now get exactly the sticky offset (env + 4.6rem) as trailing space:
the strip settles where it was floating and the bar is never double-counted.
Tablet/desktop (>=640px) keep the roomier 9rem — unchanged.

Verified at 360/390px: gap CTA-to-bar 70.3px -> 0.3px, ~70px less dead
scroll; tablet 800px and desktop 1280px measurements identical to before.
Service worker: freezmo-v7.
This commit is contained in:
Martin Dvořák 2026-10-08 19:06:36 +00:00
commit 4ac2f33e3f
2 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/globals.css
View file

@ -684,7 +684,17 @@ body {
.pt-safe { padding-top: max(env(safe-area-inset-top), 0.75rem) } .pt-safe { padding-top: max(env(safe-area-inset-top), 0.75rem) }
.pb-safe { padding-bottom: max(env(safe-area-inset-bottom), 0.75rem) } .pb-safe { padding-bottom: max(env(safe-area-inset-bottom), 0.75rem) }
.pb-tabbar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.25rem) } .pb-tabbar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.25rem) }
/* Trailing room under the sticky "Freeze my deck" strip on /create.
Phones: the strip floats one tab-bar height above the viewport bottom (the
sticky bottom offset in UploadScreen), so the page only needs that much
scroll room under it — the strip settles exactly where it was already
floating, and the bottom bar is never double-counted. Keep 4.6rem in sync
with the sticky offset. Wider screens: the strip docks to the viewport
bottom and keeps the roomier 9rem. */
.pb-cta { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 9rem) } .pb-cta { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 9rem) }
@media (max-width: 639px) {
.pb-cta { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.6rem) }
}
@media (display-mode: standalone) { @media (display-mode: standalone) {
.standalone-hide { display: none } .standalone-hide { display: none }

2
public/sw.js
View file

@ -9,7 +9,7 @@
* *
* Bumping CACHE_VERSION is how a new deploy invalidates old assets. * Bumping CACHE_VERSION is how a new deploy invalidates old assets.
*/ */
const CACHE_VERSION = "freezmo-v6"; const CACHE_VERSION = "freezmo-v7";
const SHELL_CACHE = `${CACHE_VERSION}-shell`; const SHELL_CACHE = `${CACHE_VERSION}-shell`;
const ASSET_CACHE = `${CACHE_VERSION}-assets`; const ASSET_CACHE = `${CACHE_VERSION}-assets`;