Skip to content

WI-093: The game page, at the width it is read on

WI-093: The game page, at the width it is read on

Problem

WI-092 gave the web a scale. Nothing used it: the game page was still a single .card holding a stack of blocks, unchanged since WI-061 except in colour.

What the page actually contains, measured

Before designing a layout it was worth asking what there is to lay out. Against the live catalogue:

Games333
With a description0
With an image0 — and 0 in the harvested corpus of 3973 either
Facts per game4, for all 333 — designers, year, players, time

So a game page is a name, a one-line byline, three numbers and about six tags. That is the whole of it.

This retires a plan rather than fulfilling one. The obvious desktop design for a Letterboxd-alike is a cover rail beside the content, and it was what this item was expected to build. There is no cover, and there will not be one until the harvest fetches Wikidata’s P18 — which WI-046 already recorded as out of scope and nothing has scheduled since. A rail for an image that does not exist is a design for a screenshot.

What shipped instead

The facts are the substance, so they get a column. On a wide viewport the page is two columns — content, and a sticky rail carrying the three facts at display size with their units set quietly beside them. On a phone the rail falls underneath and the facts sit side by side, which is the only sane shape in one column.

Prose is bounded by --measure for the day a description exists. At --content width with 17px type, an unbounded paragraph runs past 100 characters a line.

The call to action looks like one. It was a text link that read like the credits beside it.

The index is two columns above 56rem. A single column of short rows left half the page empty and made a 333-game catalogue feel like a list of four.

The cover is kept and corrected rather than deleted. It rendered object-fit: cover under a max-height, which crops box art — portrait artwork in a landscape box. It is now natural-aspect within the rail. It renders for nobody today; the licence plumbing behind it (WI-047, WI-048) is what must not be re-derived when an image finally arrives.

Out of scope

  • Dark mode. Possible since WI-092; its own judgement and its own diff.
  • Making the chips links. They are the obvious discovery surface and that is WI-041’s, not a layout item’s.
  • Fetching cover images. A harvest change, and the reason there is no rail.
  • Anything about the thinness itself. See below — it is not a CSS problem.

Definition of done

  • The game page is two columns on a wide viewport and one on a phone.
  • The facts read as the substance of the page, not as small print.
  • Prose is bounded by the measure.
  • The primary action looks like an action.
  • The index uses the width available to it.
  • A cover, if one ever arrives, is not cropped.
  • No raw colour or size — the widened check from WI-092 still passes.
  • Gate green.

Verification

Served locally and read the way a visitor gets it:

/games/catan 200
title <h1 class="display">Catan</h1>
byline 1995 · Klaus Teuber · Kosmos
rail present
facts Players 3–4 · Time 75 · Weight 2.30
chips 6
action Log a play in the app
cover 0 (expected: nothing in the catalogue has an image)
/games 24 links
.game two-column rule present
.results two-column rule present
sticky rail present
Terminal window
pnpm --filter @tabletop/web test # 37
pnpm gate

The finding this item could not fix

Every game page is thin, and no layout changes that.

ADR-0009 stakes the entire web stack on these pages ranking. A page with a title, a byline, three numbers and six tags — and no prose at all, on any of 333 — is thin content in the sense search engines use the word. metaDescription already builds the snippet from facts, with a comment saying why: “Most of the catalogue has no prose.”

It is not a CSS problem and it is not an agent’s to solve:

  • Wikidata carries no prose and no mechanics — WI-076 measured that.
  • The mechanics currently shown are the fixture’s hand-authored tags, which ADR-0017 has already ruled are not the controlled vocabulary. They disappear the moment the harvested corpus is loaded.
  • Filling it needs either Wikipedia extracts (CC BY-SA, attribution obligations already built) or LLM enrichment, which is WI-H05 — a human approving spend.

Worth stating plainly because the crawlability work in WI-091 makes it reachable: the site is now findable, and what a crawler finds is four facts.