Drop the sticky bar: the Freeze my deck CTA now sits in the flow like the homework one

The last visible difference between the two CTAs was the container: the
deck button lived in a full-bleed sticky strip (translucent background,
hairline top border, its own padding), which also tinted the disabled chip
differently. The homework button sits plainly in the page flow.

- The CTA block is now a plain space-y-2 stack at the end of the form:
  full-width button + centred helper line, exactly like /homework.
- /create's page padding switches from the sticky-era .pb-cta (9rem, phone
  override 4.6rem) to .pb-tabbar, and lg:pb-20 to lg:pb-16 — identical to
  the homework page. The now-unused .pb-cta rules are gone.
- Result: same button width (358px @390 / 688px @1280), height, radius,
  helper placement and trailing space on both pages; neither has a sticky
  ancestor any more.

Service worker: freezmo-v16.

Verified: CTA-flow suite 26/26 (below-the-fold at rest, no sticky ancestor,
full-width, helper centred underneath, width/height/radius/trailing-space
parity at 390px and 1280px), desktop regression 74/74, mobile 51/51,
i18n 27/27. Lint + build clean.
This commit is contained in:
Martin Dvořák 2026-10-09 10:52:23 +00:00
commit a8c752828e
4 changed files with 5 additions and 16 deletions

View file

@ -707,17 +707,6 @@ body {
.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-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) }
@media (max-width: 639px) {
.pb-cta { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.6rem) }
}
@media (display-mode: standalone) {
.standalone-hide { display: none }