diff --git a/package.json b/package.json index b368e3f..5132989 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "explore-dig-net", - "version": "0.3.0", + "version": "0.3.1", "private": true, "type": "module", "description": "explore.dig.net — the curated dApp store for the DIG Network / Chia ecosystem", diff --git a/src/styles.css b/src/styles.css index 9d4bb62..2878e0f 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1437,18 +1437,50 @@ a { margin-top: 20px; } + /* Phone launcher: the icon grid is the hero, so the heading + intro recede to a compact, + status-bar-like header (kept for a11y/SEO, §6.6 — never deleted) and the grid dominates the + viewport like an iOS/Android home screen. */ .apps-home { - padding-top: 20px; + padding-top: 16px; + } + + .apps-home-heading { + font-size: 21px; + } + + .apps-home-intro { + font-size: 13px; + margin-top: 6px; } .app-home-grid { - grid-template-columns: repeat(auto-fit, 72px); - gap: 24px 16px; - margin-top: 28px; + /* Full-width, evenly-distributed launcher columns — 4-up on phones — instead of the desktop's + centered fixed-px cluster. 1fr tracks span the whole shell width with even gutters, so a + handful of icons read as a home screen, not a small centered web widget. */ + grid-template-columns: repeat(4, 1fr); + justify-content: normal; + column-gap: 8px; + row-gap: 26px; + margin-top: 20px; } .app-tile { - max-width: 80px; + /* Fill the 1fr cell so columns are even across the launcher (no fixed-px cap that re-clusters). */ + max-width: none; + } + + /* Bigger home-screen squircles that scale with the 1fr cell (~56–72px). The 22% squircle radius + + soft drop shadow come from the base .app-tile-icon-frame rule; !important is required only to + beat AppIcon's inline width/height (the img attrs + the fallback span's inline style) — the + component's API is untouched (CLAUDE.md §2.0: AppIcon is reused/CRITICAL, re-skin via CSS only). */ + .app-tile-icon-frame .app-icon, + .app-tile-icon-frame .app-icon-fallback { + width: clamp(56px, 17vw, 72px) !important; + height: clamp(56px, 17vw, 72px) !important; + } + + .app-tile-name { + font-size: 12px; } } diff --git a/tests/a11y/apps.spec.ts b/tests/a11y/apps.spec.ts index c10e1ec..eae98d1 100644 --- a/tests/a11y/apps.spec.ts +++ b/tests/a11y/apps.spec.ts @@ -60,4 +60,29 @@ test.describe("Apps home-screen tab", () => { await expect(page.locator("html")).toHaveAttribute("data-theme", "light"); await expectAxeClean(page); }); + + // Regression for #51 follow-up: on phones the grid must read as a home-screen launcher — a + // full-width, evenly-distributed 4-up column layout — NOT the old centered fixed-72px cluster + // (`repeat(auto-fit, 72px)` + `justify-content: center`, which rendered a handful of icons as a + // small centered widget). Asserted against real CSS at the exact target phone widths. + for (const width of [360, 390, 414]) { + test(`renders a full-width 4-up launcher grid at ${width}px`, async ({ page }) => { + await page.setViewportSize({ width, height: 780 }); + await page.goto("/apps"); + const grid = page.getByTestId("app-home-grid"); + await expect(grid).toBeVisible(); + const tracks = await grid.evaluate( + (el) => + getComputedStyle(el) + .gridTemplateColumns.split(" ") + .map((v) => parseFloat(v)), + ); + // Exactly four equal columns (the cluster layout produced one track per app / collapsed + // 72px tracks, never four evenly-sized ones). + expect(tracks).toHaveLength(4); + // Each 1fr track is far wider than the old fixed 72px cluster track — proof the grid spans + // the full shell width instead of centering a small icon cluster. + for (const track of tracks) expect(track).toBeGreaterThan(74); + }); + } });