Level 2. A plate at the foot of a screen holding three or four siblings, each of them a
thumbnail, a question and a price, or on a document a question and no picture at all.
15 plates on 15 painted screens and 50 rows, 30 of them with a thumbnail and 20 without,
read from the rendered DOM on 2026-08-19. This line said "10 plates and 31 rows on 10 painted
screens" with 27 thumbnails and 4 rows without one, which was the reading of 2026-08-08, when
the ten event-detail screens were the whole of it. What moved it is five long documents:
terms.html on 2026-08-15 and about, privacy, cookies and responsible-betting on
2026-08-18, each carrying one plate of its own siblings. It is the tap target that keeps a person
moving, and the box numbers below were measured 2026-08-08 in a browser, at 390 and 1280.
The level and its reason stay on the molecules page. This page holds two things a shelf cannot: where a press has to be drawn when the whole row is the link, and one count that does not match another.
| at 390 | at 1280 | |
|---|---|---|
| the plate | 351x351 | 969x351 |
| a row | 309x70 | 927x70 |
| the thumbnail | 46x46, and it does not move | |
| See more | 300x47, capped, centred, at both widths | |
The height of the row is the same at both widths, and only the question stretches. It clamps to two lines, so a long market cannot push the price off the row or make one row twice its neighbour.
The photograph is written on the element, and it is the one thing the root rule names by name: a datum, an event photograph, and a value a script writes at run time are not styling. This is the second of the three.
The whole row IS the link, so the ground goes on the
<a>. The <li> around it owns only the groove between rows,
and a state drawn there would sit OUTSIDE the thing being pushed: a 1px line changing colour
while the row it separates does nothing.
This is the tap target of ten event screens and five documents, on mobile, counted 2026-08-19 and nine event screens when this was written, where the hover never fires at all. The row is flat at rest, so only the ground moves, and the question keeps the brass the hover gives it: one axis, and the axis that a finger can see.
See more is the same chip as Load more elsewhere, and it answered the pointer on the way in while saying nothing when pushed. Same fix, written after the hover at equal specificity so source order decides. Its inset top bevel is the chip's own edge rather than a lift, so it stays; there is no outer shadow to drop.
Twenty rows in the product have no photograph, and this page said they were
58px out of line with the rows above them. Measured in a browser on 2026-08-08, they are not.
All twenty stand on the five document pages, each of them the whole of its own plate, and not one
of them is a market: they are the other documents. A list where no row has a thumbnail is
internally consistent, so every question in it starts at the same 68 at 390 and the same 586.5 at
1280, which was measured on terms.html on 2026-08-08 when it was the only such list
there was.
This paragraph read "all four are on terms.html" and quoted a
row as Privacy Policy / not built, and both halves are stale in the reader's favour,
2026-08-19. There are five such lists now rather than one, one per document, and
privacy, cookies, about and responsible-betting are built and linked since 2026-08-18, so
no row in any of the five points at a page that is not there. The finding the paragraph was
written for is the same finding and it is stronger for standing on five lists instead of
one: a list of documents is a different list from a list of markets, and the missing
photograph is the TYPE showing rather than a defect. 20 rows of 50, on five plates of the fifteen,
and 0 of the fifteen mixed.
A count without a grouping is a defect looking for a screen. "4 of 31 rows have no thumbnail" was read from the source and was true, and "20 of 50" would be read the same way and be true again. What both leave out is that the rows without a picture are whole lists on document pages and the rows with one are whole lists on event screens, which is the difference between a broken layout and two kinds of list that each know what they are.
The arrangement that DOES break is a mixed list, and it was built to check. Cloning one row into the terms list and giving it a thumbnail puts that row's question at 126 against the other four at 68, and at 644.5 against 586.5: 58px, at both widths, exactly the number the row named. That arrangement exists nowhere in the product.
So the contract is written rather than a rule added. The thumbnail is
optional and the LIST decides: every row carries one or no row does. A rule for a mixed
list would be a rule with no reader, and the day a market genuinely has no photograph the
placeholder is a thing to design rather than a thing to guess now.
docs/backlog.md 60, closed.
A state is drawn on the thing that is pressed. If the anchor is the row, the row's ground is the anchor's ground, and the list item is furniture.
A question clamps. Two lines, always, so a list of markets is a list and not a column of paragraphs.
Never put the press on the list item. The ground would land outside the link, which is the part a finger is actually on.
Never mix a row with a thumbnail and a row without one in the same list. Measured at 58px of misalignment at both widths. The column comes from the child, so a row with no child has no column, and the reader sees two components rather than one list.
Never let this plate become a second feed. It is a way out of a dead end, three or four rows deep; a list that scrolls is the feed's job and the feed already exists.
The level and its reason: the molecules
page. The stylesheet: components/related.css. The chip that "See more" is:
chip, and its twin at the foot of a feed:
load more. Why the row closed with no code change:
docs/decisions.md, 2026-08-08.