Polish: pin footer to viewport bottom, 2-up phone sparkline grid

263e4f7c by Isaac Bythewood · 1 month ago

Polish: pin footer to viewport bottom, 2-up phone sparkline grid

Final Paper Ledger polish pass (Phase 12).

- base.scss: make body a flex column with main flex-growing, so the
  footer pins to the bottom of the viewport on short pages (404, empty
  states) instead of floating up with a band of bare paper beneath it.
  The footer carries bottom-nav clearance on phones; the desktop block
  trims it back.
- home.scss: the home dashboard's nine sparkline cards were a single
  long column on phones. They now lay out 2-up under $bp-sm; wider
  screens keep the existing auto-fill flow unchanged.

modified frontend/static_src/base/styles/base.scss

@@ -56,7 +56,11 @@ body {  font-family: var(--font-ui);  color: var(--ink);  background: var(--paper);  /* flex column so the footer pins to the bottom of the viewport on short     pages (404, empty states) instead of floating up with paper beneath it */  min-height: 100dvh;  display: flex;  flex-direction: column;  line-height: 1.5;  -webkit-font-smoothing: antialiased;  text-rendering: optimizeLegibility;

@@ -393,16 +397,18 @@ code {}/* ---------- main + footer ---------- *//* main grows to fill the flex column, pushing the footer to the bottom. */main {  padding-bottom: 84px;  min-height: 62dvh;  flex: 1 0 auto;}.footer {  border-top: 1px solid var(--rule);  background: var(--paper-edge);  margin-top: 52px;  padding: 22px 16px;  /* the extra bottom room clears the fixed bottom nav on phones; the     desktop block below trims it back since desktop has no bottom nav */  padding: 22px 16px calc(22px + 64px + env(safe-area-inset-bottom));  color: var(--ink-faint);  font-size: 0.8rem;  text-align: center;

@@ -591,8 +597,9 @@ main {    display: none;  }  main {    padding-bottom: 32px;  /* no bottom nav on desktop, so the footer needs no clearance for it */  .footer {    padding-bottom: 22px;  }  .wrap {

modified frontend/static_src/home/styles/home.scss

@@ -29,10 +29,19 @@/* ---------- sparkline cards ---------- */.spark-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));  /* phone: a tight 2-up grid so the nine cards are not one long column.     minmax(0, 1fr) lets a card shrink under its mono price rather than     overflow. Wider screens get the auto-fill flow in the media query. */  grid-template-columns: repeat(2, minmax(0, 1fr));  gap: 11px;}@media (min-width: $bp-sm) {  .spark-grid {    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));  }}.spark-card {  @include card;  display: flex;