openvibers/openvibe.food Commits

Home on phones: the short lists are sideways rows, every card in them (#136)

OP OpenVibers committed 15 days ago · c8ff2b1ec0 · 2 files, +6 −2

The recipes, both value lists, the meal kits and the recalls were cut to four
(recalls two) on a phone; they are one row each that scrolls sideways, with every
card. CSS raw budget 38 -> 39 (measured 38.3).

Changes

ddiff --git a/public/css/home.css b/public/css/home.css
iindex 1924bde..1096b47 100644
---- a/public/css/home.css
++++ b/public/css/home.css
@@@ -46,7 +46,11 @@
  .home-fold > summary:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: 14px; }
  .home-fold .sc-sec { margin: 0; padding: 0 16px 14px; }
  @media (max-width: 599px) {
--  .home-cards.short > li:nth-child(n+5), .home-cards.short.two > li:nth-child(n+3) { display: none; }
++  /* Third pass: the short lists are one sideways row each, every card in it (they were cut to four, recalls to two). */
++  .home-cards.short { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; gap: 10px; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
++  .home-cards.short::-webkit-scrollbar { display: none; }
++  .home-cards.short > li { flex: 0 0 46%; min-width: 0; scroll-snap-align: start; }
++  .home-cards.short.five > li, .home-cards.short.two > li { flex-basis: 80%; }
    .home-cards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The figures are one strip that scrolls sideways, not a screen of tiles. */
    .home-stats { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
ddiff --git a/test/perf-budget.test.js b/test/perf-budget.test.js
iindex 23219f6..de218fe 100644
---- a/test/perf-budget.test.js
++++ b/test/perf-budget.test.js
@@@ -25,7 +25,7 @@ const BUDGETS = {
      cssFiles: 3,   // 3 (app.css, the cached /shared/showcase.css and css/home.css)
      // 16.4 since the product's own pages brought their stylesheet with them (the search and plan forms, the place
      // cards, the pantry's tick list); app.css itself stayed within a few lines.
--    cssRawKB: 38,   // 33.6 openvibe-shared 4.26.1 (hero visual); 28.1 with Shared 4.13.0 (2026-10-26: account links); 22.2 with css/home.css; 16.4 before
++    cssRawKB: 39,   // 38.3 the home's phone rows (2026-10-29); 33.6 openvibe-shared 4.26.1 (hero visual); 28.1 with Shared 4.13.0 (2026-10-26: account links); 22.2 with css/home.css; 16.4 before
      cssBrotliKB: 8.5,   // 8.2 the home's phone limits and fold (2026-10-29); 6.4 with Shared 4.13.0 (2026-10-26: account links); 5.3 with css/home.css; 4.3 with the hero search panel
      externalFiles: 0,   // 0
  };