A pattern, the fourth rung. A title on one side and the controls that act on the list on the other, wrapping to two rows when there is no room for one. 71 heads on 71 painted screens, and 27 of them have a title with nothing to sort. Measured 2026-08-08 in a browser, at 390 and 1280.
This file is the row. A display face and its colour are what the block looks like, so they stay in the component that owns the block. The shelf and the reason stay on the patterns page.
27 of the 71 carry a title and no controls, which is why the row is a wrapping flex with space between rather than a two-column grid: a grid would leave an empty cell on 27 screens and a person would see the title sitting off to one side of a gap.
| at 390 | at 1280 | |
|---|---|---|
| a head with no controls | 293x29 | 911x40 |
| a head with controls | 293x114, three rows | 911x40, one row |
| the controls | 293x77, wrapped | 314x35 |
29 to 114 is the whole behaviour of this pattern. On a phone the title takes its own line and the two menus wrap under it; at 1280 all three sit in one 40px row. Nothing is hidden and nothing is a media query: the flex wraps, and the gap is written as two values so the row gap and the column gap differ.
The painted layer removes the head's own bottom inset, because on a plate the distance to the list is the plate's padding and not the head's margin. Two rules, one for the row and one for the heading inside it.
The border-bottom that used to be reset with them went to the frame, and the sentence is the one this whole step turns on: a rule that removes an edge is about the edge. The same split is written out on the detail shell.
A row that sometimes has one child is a wrapping flex, not a grid. 27 of 71 have nothing on the right.
The distance to what follows belongs to the container. Same sentence as the reading column on the browse shell, arrived at from a different screen.
Never use a two-column grid for a head. Twenty-seven screens have nothing to put in the second cell.
Never put the heading's face in the row's file. The type is what the block looks like and the row is where it stands.
The shelf: the patterns page. The
stylesheet: components/patterns/list-head.css. The controls in it:
filters. The heading's type: feed. The plate
whose padding replaced the inset: components/base.css.