@bearmenu/ui 0.8.11 → 0.8.13

package/src/components/menu-family-block.tsx

@@ -1,5 +1,6 @@
 import { Wallet } from "lucide-react";
 import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
 import { HueChip } from "./hue-chip";
 import { PHOTO_GROUND, PhotoGround } from "./photo-ground";
 import { Separator } from "./separator";
@@ -12,15 +13,16 @@ import type {
 } from "./menu-types";
 
 /**
- * MenuFamilyBlock — the cuisines index's family card. The mosaic is the ground.
+ * MenuFamilyBlock — the cuisines index's family card. One photograph is the ground.
  *
  * ## Three layers, and everything floats on them
  *
- * The grid of venue photographs is the background for the ENTIRE card, edge to
- * edge, and the facts sit on it. Three layers do the work:
+ * One venue photograph is the background for the ENTIRE card, edge to edge,
+ * and the facts sit on it. Three layers do the work:
  *
- *  1. **The mosaic**, full-bleed, wearing the family's hue through a
- *     `mix-blend-color` layer.
+ *  1. **The photograph**, full-bleed, wearing the family's hue through a
+ *     `mix-blend-color` layer. It was a mosaic of six; the design draws one
+ *     plate, and six tiles under the ink read as texture rather than a room.
  *  2. **An ink gradient** — absent where the photography is the subject, full
  *     where the rows begin. This is what buys the contrast. There used to be a
  *     masked backdrop-filter under it; it was removed for the measurement
@@ -29,10 +31,9 @@ import type {
  *
  * On the phone the ink runs top to bottom: the name and the action sit on
  * clear photography, the chips and the rows on the inked foot. On desktop the
- * same layers turn ninety degrees — the photo column on the left stays clear,
- * the row column on the right is the inked one. The mosaic
- * runs 3×2 there rather than 2×2, because at 1110px a four-tile grid makes each
- * photograph too big to read as texture.
+ * photo column on the left (a third) stays clear, and the row column on the
+ * right is opaque paper in the card's own dark — three venue rows never sit
+ * on a photograph.
  *
  * ## The dark scope
  *
@@ -80,6 +81,12 @@ export type MenuFamilyBlockLabels = {
   priceBand: string;
   /** Main action, e.g. "Browse Italian". Sits on the photography — keep it short. */
   browse: string;
+  /**
+   * The action from `lg`, where the photo column is a third of the card and
+   * "Browse Bakeries & patisseries" does not fit — e.g. "Browse". The full
+   * `browse` stays the accessible name.
+   */
+  browseShort?: string;
   /** Passed through to the venue rows. */
   kitchens: MenuKitchenListLabels;
 };
@@ -96,22 +103,22 @@ export type MenuFamilyBlockProps = {
   className?: string;
 };
 
-/** 2×2 on the phone, 3×2 from `lg`. Tiles past the fourth are desktop-only. */
-const MOSAIC_TILES = 6;
-const PHONE_TILES = 4;
-
 /** The card's ground is `PhotoGround`'s, so the two cannot differ. */
 const GROUND = PHOTO_GROUND;
 
 /**
- * The ink. Absent at the top, heavier at the foot on the phone; absent on the
- * left, full on the right from `lg`. It is the
+ * The ink. Nearly absent at the top, heavier at the foot on the phone — the
+ * top 40% is the photograph, the rows sit on 0.92+; a to-right ramp from
+ * `lg`, where the row column brings its own opaque paper anyway. It is the
  * layer the contrast rests on. Literal rather than `var(--scrim)`: that token
  * lives in the app's stylesheet, not this package's, so a DS component reading
  * it renders nothing in Storybook and the other three consumers.
  */
 const INK =
-  "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.42)_0%,oklch(0.16_0.012_55_/_0.6)_30%,oklch(0.16_0.012_55_/_0.9)_48%,oklch(0.16_0.012_55_/_0.96)_100%)] lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.38)_0%,oklch(0.16_0.012_55_/_0.6)_30%,oklch(0.16_0.012_55_/_0.92)_46%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+  "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.12)_0%,oklch(0.16_0.012_55_/_0.55)_38%,oklch(0.16_0.012_55_/_0.92)_62%,oklch(0.16_0.012_55_/_0.96)_100%)] lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.38)_0%,oklch(0.16_0.012_55_/_0.6)_30%,oklch(0.16_0.012_55_/_0.92)_46%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+
+/** The row column's paper from `lg`: the card's dark, opaque. */
+const PAPER = "lg:bg-[oklch(0.21_0.012_55)]";
 
 /**
  * A second, LOCAL scrim under the name, count and action — the photo column's
@@ -140,10 +147,12 @@ export function MenuFamilyBlock({
   linkComponent: LinkComponent = DefaultLink,
   className,
 }: MenuFamilyBlockProps) {
-  const photos = (family.photoUrls ?? []).slice(0, MOSAIC_TILES);
-  const overflow = Math.max(family.venueCount - photos.length, 0);
-  const initial = (family.name.match(/\p{L}/u)?.[0] ?? "").toLocaleUpperCase();
+  const [photo] = family.photoUrls ?? [];
+  // "+N more" counts past the rows shown, which are the venues the reader can
+  // see — the photograph is one of them, not a venue on its own.
   const venues = family.venues ?? [];
+  const overflow = Math.max(family.venueCount - venues.length, 0);
+  const initial = (family.name.match(/\p{L}/u)?.[0] ?? "").toLocaleUpperCase();
 
   return (
     <article
@@ -155,30 +164,26 @@ export function MenuFamilyBlock({
         className
       )}
     >
-      {/* ── Layer 1: the photographs, wearing the family's colour ──────── */}
-      {/* A 2×2 on the phone, 3×2 from `lg`: at 1110px a four-tile grid makes
-          each photograph too big to read as texture. With no photographs at
-          all, one slot with the family's initial. */}
-      <PhotoGround
-        photos={photos.length > 0 ? photos : [undefined]}
-        initials={initial}
-        mosaicClassName={
-          photos.length > 0 ? "grid-cols-2 grid-rows-2 lg:grid-cols-3" : "grid-cols-1"
-        }
-        phoneTiles={PHONE_TILES}
-        gradient={gradient}
-      />
+      {/* ── Layer 1: the photograph, wearing the family's colour ───────── */}
+      {/* One venue's photograph, or the family's initial on the ground. */}
+      <PhotoGround photos={[photo]} initials={initial} mode="stack" gradient={gradient} />
 
       {/* ── Layer 2: the ink ────────────────────────────────────────────── */}
       <span aria-hidden className={cn("absolute inset-0", INK)} />
 
       {/* ── The content, floating ───────────────────────────────────────── */}
-      <div className="relative grid grid-cols-1 lg:grid-cols-[38%_1fr]">
-        {/* The photo column. On the phone it is the card's head; on desktop
-            the left third, with its stack anchored to the foot. */}
-        <div className={cn("relative flex flex-col p-3.5 lg:min-h-[320px] lg:justify-end lg:p-5", TEXT_SCRIM)}>
+      <div className="relative grid grid-cols-1 lg:grid-cols-[34%_1fr]">
+        {/* The photo column. On the phone it is the card's head, with the
+            overflow pill pinned to the corner and the photograph clear above
+            the name; on desktop the left third, its stack anchored to the foot. */}
+        <div
+          className={cn(
+            "relative flex min-h-[220px] flex-col justify-end p-3.5 lg:min-h-[320px] lg:p-5",
+            TEXT_SCRIM
+          )}
+        >
           {overflow > 0 && (
-            <span className="mb-16 self-end rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-2.5 py-1 text-[11px] font-semibold text-white lg:mb-3 lg:self-start">
+            <span className="absolute right-3.5 top-3.5 rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-2.5 py-1 text-[11px] font-semibold text-white lg:static lg:mb-3 lg:self-start">
               {labels.more(overflow)}
             </span>
           )}
@@ -186,55 +191,57 @@ export function MenuFamilyBlock({
           <h3 className="text-balance font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[30px]">
             {family.name}
           </h3>
-          <span className="mt-0.5 block text-[13px] font-medium tabular-nums text-white/70">
+          {/* The count and the band on one line: two facts about the family,
+              read together — "96 kitchens, 14–46 lei". */}
+          <span className="mt-1 flex flex-wrap items-center gap-x-2.5 gap-y-1 text-[13px] font-medium tabular-nums text-white/70">
             {labels.venueUnit(family.venueCount)}
+            {family.priceBandLabel && (
+              <span
+                className="inline-flex items-center gap-1"
+                aria-label={`${labels.priceBand}: ${family.priceBandLabel}`}
+              >
+                <Wallet className="h-3.5 w-3.5 shrink-0 text-white/60" aria-hidden />
+                {family.priceBandLabel}
+              </span>
+            )}
           </span>
 
-          {/* The action, as a translucent pill on the photography. `bg-white/16`
-              on the ink rather than `bg-accent`: ten filled accent buttons on
-              one page is ten primary actions, and the pill reads as part of the
-              picture rather than as a control laid on top of it.
-
-              No glyph. An arrow read as "leaves the site" beside a label that
-              already says where it goes, and a chevron would have made the pill
-              one more row: every venue row to its right ends in exactly that
-              chevron. The shape and the label are the whole affordance. */}
+          {/* The hub's one action on ink. No glyph: a chevron would have made
+              the pill one more row, and every venue row beside it ends in
+              exactly that chevron. */}
           <LinkComponent
             href={family.href}
-            className="mt-3.5 inline-flex h-10 w-max items-center rounded-full border border-white/20 bg-white/[0.16] px-4 text-[13.5px] font-bold text-white transition-colors hover:bg-white/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white motion-reduce:transition-none"
+            aria-label={labels.browse}
+            className={cn(buttonVariants({ variant: "ink", size: "pill" }), "mt-3.5 w-max max-w-full")}
           >
-            {labels.browse}
+            {labels.browseShort ? (
+              <>
+                <span className="lg:hidden">{labels.browse}</span>
+                <span className="hidden lg:inline">{labels.browseShort}</span>
+              </>
+            ) : (
+              labels.browse
+            )}
           </LinkComponent>
         </div>
 
-        {/* The inked column: chips, then the rows. */}
-        <div className="flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5">
-          <ul className="flex flex-wrap items-center gap-1.5">
-            {family.priceBandLabel && (
-              /* No hue: a fact about money, not about the family. In the dark
-                 scope `HueChip`'s `--muted` fallback is the dark pill the design
-                 draws. */
-              <HueChip
-                as="li"
-                className="font-bold tabular-nums"
-                aria-label={`${labels.priceBand}: ${family.priceBandLabel}`}
-                icon={<Wallet className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />}
-              >
-                {family.priceBandLabel}
-              </HueChip>
-            )}
-            {family.chips?.map((chip) => (
-              /* Label only. The counts are VENUES beside a dish group's name,
-                 which every reader takes for dishes. */
-              <HueChip key={chip.slug} as="li" hue={hue}>
-                {chip.label}
-              </HueChip>
-            ))}
-          </ul>
+        {/* The row column: chips, then the rows, on paper from `lg`. */}
+        <div className={cn("flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5", PAPER)}>
+          {family.chips && family.chips.length > 0 && (
+            <ul className="flex flex-wrap items-center gap-1.5 lg:justify-end">
+              {family.chips.map((chip) => (
+                /* Label only. The counts are VENUES beside a dish group's name,
+                   which every reader takes for dishes. */
+                <HueChip key={chip.slug} as="li" hue={hue}>
+                  {chip.label}
+                </HueChip>
+              ))}
+            </ul>
+          )}
 
           {venues.length > 0 && (
             <>
-              <Separator className="my-3" />
+              <Separator className="my-3 via-white/15" />
               <MenuKitchenList
                 kitchens={venues}
                 labels={labels.kitchens}
@@ -270,12 +277,12 @@ export function MenuFamilyBlockSkeleton({
       className={cn("dark relative overflow-hidden rounded-[14px]", GROUND, className)}
       aria-hidden
     >
-      <div className="grid grid-cols-1 lg:grid-cols-[38%_1fr]">
-        <div className="flex flex-col p-3.5 lg:min-h-[320px] lg:justify-end lg:p-5">
-          <Skeleton className="mb-16 h-6 w-[72px] self-end rounded-full lg:mb-3 lg:self-start" />
+      <div className="grid grid-cols-1 lg:grid-cols-[34%_1fr]">
+        <div className="relative flex min-h-[220px] flex-col justify-end p-3.5 lg:min-h-[320px] lg:p-5">
+          <Skeleton className="absolute right-3.5 top-3.5 h-6 w-[72px] rounded-full lg:static lg:mb-3" />
           <Skeleton className="h-7 w-[60%]" />
-          <Skeleton className="mt-2 h-3.5 w-[90px]" />
-          <Skeleton className="mt-3.5 h-10 w-[160px] rounded-full" />
+          <Skeleton className="mt-2 h-3.5 w-[150px]" />
+          <Skeleton className="mt-3.5 h-11 w-[160px] rounded-full" />
         </div>
         <div className="flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5">
           <div className="flex gap-1.5">

package/src/components/menu-family-tiles.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuFamilyTiles } from "./menu-family-tiles";
+import { mockFamilyTiles, mockFamilyTilesAll } from "./menu-mocks";
+
+const meta: Meta<typeof MenuFamilyTiles> = {
+  title: "Menu/MenuFamilyTiles",
+  component: MenuFamilyTiles,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The hub's doorways: every family the city browses by, as a grid of coloured tiles — the family's name, its venue count and one venue's photograph tilted off the corner — closed by one tile that opens the whole index. Two to a row on a phone, four from `lg`, so seven families and the index make two rows at every width.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuFamilyTiles>;
+
+export const Default: Story = { args: { tiles: mockFamilyTiles, all: mockFamilyTilesAll } };
+
+/** Two-up on a phone — seven families and the index in four rows. */
+export const Mobile: Story = {
+  args: { tiles: mockFamilyTiles, all: mockFamilyTilesAll },
+  // The grid's columns follow the viewport, not the wrapper.
+  parameters: { viewport: { defaultViewport: "mobile1" } },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** No photographs anywhere: every polaroid holds the family's initial. */
+export const WithoutPhotos: Story = {
+  args: {
+    tiles: mockFamilyTiles.map(({ photoUrl: _photoUrl, ...tile }) => tile),
+    all: { ...mockFamilyTilesAll, photoUrl: undefined },
+  },
+};
+
+/** The drinks tab's five going-out families, no index tile. */
+export const Partial: Story = { args: { tiles: mockFamilyTiles.slice(0, 5) } };

package/src/components/menu-family-tiles.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MenuFamilyTiles } from "./menu-family-tiles";
+import { mockFamilyTiles, mockFamilyTilesAll } from "./menu-mocks";
+
+describe("MenuFamilyTiles", () => {
+  it("renders one link per family plus the index tile, in order", () => {
+    render(<MenuFamilyTiles tiles={mockFamilyTiles} all={mockFamilyTilesAll} />);
+    const links = screen.getAllByRole("link");
+    expect(links).toHaveLength(mockFamilyTiles.length + 1);
+    expect(links[0]).toHaveAttribute("href", mockFamilyTiles[0].href);
+    expect(links.at(-1)).toHaveAttribute("href", mockFamilyTilesAll.href);
+    expect(links.at(-1)).toHaveTextContent(mockFamilyTilesAll.label);
+  });
+
+  // A family without a photograph keeps the polaroid — the initial fills it —
+  // so a row of seven never has one tile with a different silhouette.
+  it("draws the initial where a family has no photograph", () => {
+    const [withPhoto, withoutPhoto] = [mockFamilyTiles[0], mockFamilyTiles.at(-1)!];
+    expect(withoutPhoto.photoUrl).toBeUndefined();
+    render(<MenuFamilyTiles tiles={[withPhoto, withoutPhoto]} />);
+    expect(document.querySelectorAll("img")).toHaveLength(1);
+    expect(screen.getByText(withoutPhoto.label.charAt(0))).toBeInTheDocument();
+  });
+
+  it("omits the index tile when no index is given", () => {
+    render(<MenuFamilyTiles tiles={mockFamilyTiles.slice(0, 3)} />);
+    expect(screen.getAllByRole("link")).toHaveLength(3);
+  });
+});

package/src/components/menu-family-tiles.tsx

@@ -0,0 +1,132 @@
+import { cn } from "../lib/utils";
+import type { MenuFamilyTile, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+import { PhotoGround } from "./photo-ground";
+
+/**
+ * MenuFamilyTiles — the hub's doorways: every family the city browses by, as
+ * a grid of coloured tiles, closed by one tile that opens the whole index.
+ *
+ * ## A tile, not a card
+ *
+ * The family card this replaces was a full-width mosaic with chips, a price
+ * band and a browse pill — a summary of the family, in a rail the reader had
+ * to swipe through one family at a time. The tile is the family's NAME, its
+ * venue count and one photograph on the family's hue, two to a row, so seven
+ * families and the index fit on one phone screen. The reader is choosing a
+ * family here, not learning about one; the summary lives on the page the tile
+ * opens.
+ *
+ * ## The photograph is a polaroid, not a ground
+ *
+ * One square photograph, tilted, running off the tile's top and right edges
+ * — the tile's `overflow-hidden` crops it, so it reads as a print dropped on
+ * the tile rather than a thumbnail placed in it — with the name and the count
+ * in the bottom-left, under the print's lower edge. Not a ground: white type
+ * on a photograph needs a scrim heavy enough to hide the photograph, and the
+ * hue is what tells seven tiles apart at a glance. The photograph is the
+ * FAMILY's — a plate, a room, a glass — served from the consumer's own origin,
+ * never a venue's (a venue on a tile about every venue reads as an
+ * endorsement). A family with no photograph gets the same tilted square
+ * holding `PhotoGround`'s serif initial, so the silhouette never changes.
+ *
+ * Every measure on the polaroid is a percentage of the tile, so the tile and
+ * the design stay in proportion from a 170px phone cell to a 260px desktop
+ * one: 82% of the height, 8% above the top, 4% past the right, 8° over —
+ * measured off the design frame.
+ *
+ * The bottom scrim is mandatory. The honey and terrace hues sit around
+ * `oklch(0.6…)`, where white at 14.5px is about 3:1 — under the 4.5:1 the
+ * label needs. The scrim takes the label's corner down to where it passes on
+ * every hue in the dictionary.
+ *
+ * Server-safe.
+ */
+
+function DefaultLink({ href, ...props }: MenuLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuFamilyTilesProps = {
+  tiles: MenuFamilyTile[];
+  /**
+   * The closing tile: the index behind the seven, drawn exactly like them —
+   * its own hue and photograph, `countLabel` as the caption. Only its place in
+   * the grid says it is the index. Omit when there is none.
+   */
+  all?: MenuFamilyTile;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+/**
+ * The tile: the design's 16:10, never shorter than two lines of name plus the
+ * count need.
+ */
+const TILE =
+  "group relative isolate flex aspect-[16/10] min-h-[108px] flex-col justify-end overflow-hidden rounded-2xl bg-muted p-3.5 text-white lg:p-4 " +
+  "transition-[transform,box-shadow] duration-200 hover:-translate-y-0.5 hover:shadow-[var(--shadow-card-hover)] active:translate-y-0 active:scale-[0.99] motion-reduce:transition-none " +
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+
+/**
+ * The polaroid. Same literal family as `PHOTO_GROUND` for the shadow, never a
+ * black `rgba` — the shadow is the ground the card family already stands on.
+ */
+const POLAROID =
+  "absolute -right-[4%] -top-[8%] z-0 block aspect-square h-[82%] overflow-hidden rounded-[10%] rotate-[8deg] " +
+  "shadow-[0_10px_22px_-6px_oklch(0.16_0.012_55_/_0.65)] transition-transform duration-300 group-hover:rotate-[5deg] motion-reduce:transition-none";
+
+const SCRIM =
+  "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:z-0 after:h-3/5 after:bg-gradient-to-t after:from-[oklch(0.16_0.012_55_/_0.55)] after:to-transparent after:content-['']";
+
+export function MenuFamilyTiles({
+  tiles,
+  all,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuFamilyTilesProps) {
+  const cells = all ? [...tiles, all] : tiles;
+
+  return (
+    <div className={cn("grid grid-cols-2 gap-3 lg:grid-cols-4 lg:gap-3.5", className)}>
+      {cells.map((tile) => (
+        <LinkComponent
+          key={tile.slug}
+          href={tile.href}
+          className={cn(TILE, SCRIM)}
+          style={tile.gradient ? { backgroundImage: tile.gradient } : undefined}
+        >
+          <span aria-hidden className={POLAROID}>
+            {tile.photoUrl ? (
+              /* Not lazy: the grid sits directly under the hero, and these
+                 photographs are the first thing the reader looks at. */
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={tile.photoUrl}
+                alt=""
+                decoding="async"
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+            ) : (
+              <PhotoGround
+                photos={[undefined]}
+                initials={tile.label.charAt(0)}
+                mode="stack"
+                glyphClassName="text-[44px]"
+              />
+            )}
+          </span>
+
+          {/* Both lines keep to the left 55%: the polaroid owns the right. */}
+          <span className="relative z-[1] line-clamp-2 max-w-[55%] text-[14.5px] font-extrabold leading-[1.2] tracking-[-0.015em] lg:text-[16px]">
+            {tile.label}
+          </span>
+          {tile.countLabel && (
+            <span className="relative z-[1] mt-0.5 max-w-[55%] truncate text-[12px] font-medium leading-[1.35] tabular-nums text-white/80 lg:text-[13px]">
+              {tile.countLabel}
+            </span>
+          )}
+        </LinkComponent>
+      ))}
+    </div>
+  );
+}

package/src/components/menu-hub-hero.tsx

@@ -158,7 +158,9 @@ export function MenuHubHero({
           </span>
         )}
 
-        <h1 className="max-w-[640px] font-serif text-[32px] font-semibold leading-[1.04] tracking-[-0.025em] lg:text-[50px]">
+        {/* 28px on a phone: 32px on a 358px column is five or six words a
+            line, which left "walk in blind." wrapping alone. */}
+        <h1 className="max-w-[640px] font-serif text-[28px] font-semibold leading-[1.06] tracking-[-0.025em] lg:text-[50px] lg:leading-[1.04]">
           {headline}
         </h1>
 
@@ -169,21 +171,25 @@ export function MenuHubHero({
         )}
 
         {figures && figures.length > 0 && (
-          // Two by two on the phone: four figures in one row wrapped to three and an orphan.
-          <div className="grid grid-cols-2 gap-x-6 gap-y-3 pt-3 lg:flex lg:flex-wrap lg:gap-x-8 lg:gap-y-4 lg:pt-1.5">
+          // One row of four on the phone. It was two by two, which was the
+          // taller half of a 500px hero; at 20px the widest figure ("19,090")
+          // is ~68px and four of them share a 358px column with room.
+          <div className="flex justify-between gap-x-3 pt-2 lg:flex-wrap lg:justify-start lg:gap-x-8 lg:gap-y-4 lg:pt-1.5">
             {figures.map((figure) => (
-              <div key={figure.label}>
-                <div className="text-2xl font-black leading-none tracking-[-0.03em] tabular-nums lg:text-[32px]">
+              <div key={figure.label} className="min-w-0">
+                <div className="text-xl font-black leading-none tracking-[-0.02em] tabular-nums lg:text-[32px] lg:tracking-[-0.03em]">
                   {figure.value}
                 </div>
-                <div className="mt-[5px] text-xs opacity-[0.72]">{figure.label}</div>
+                <div className="mt-1 text-[11px] leading-tight opacity-[0.72] lg:mt-[5px] lg:text-xs">
+                  {figure.label}
+                </div>
               </div>
             ))}
           </div>
         )}
 
         {(proof || action) && (
-          <div className="mt-auto flex flex-wrap items-center gap-3 pt-5">
+          <div className="mt-auto flex flex-wrap items-center gap-3 pt-4 lg:pt-5">
             {proof && (
               <span className="inline-flex min-h-11 items-center gap-2.5 rounded-full bg-white/[0.14] px-4 py-2 text-[13px]">
                 {proofIcon}

package/src/components/menu-index-list.stories.tsx

@@ -38,8 +38,13 @@ export const Tail: Story = {
   args: { entries: mockIndexEntries.slice(-8), title: "The tail" },
 };
 
-/** Two columns, not one: thirty-eight rows in one column is four screens. */
+/** One column with the expander: twelve rows, then "Show all 38 cuisines". */
 export const Mobile: Story = {
+  args: {
+    collapsedCount: 12,
+    expandLabels: { showAll: "Show all 38 cuisines", showFewer: "Show fewer" },
+  },
+  parameters: { viewport: { defaultViewport: "mobile1" } },
   decorators: [
     (Story) => (
       <div className="w-[390px] bg-background p-3">