[3.0] Theme split (wave 9, part 1) — lay settings lists out on a grid rather than with floats

[albertlast]

Description

Part 1 of wave 9 of the #7933 split.

dl.settings is the label-and-control list that the administration centre and the profile
are built from — 97 of them across the settings pages. Each row was a floated dt at
56% beside a floated dd at 42%.

Floats leave the two halves of a row free to find their own heights, so a label and its
control are not lined up with each other. Two columns of a grid are. This moves the list
onto one, which also means the dt no longer needs a width, a float or a clear, and the
dl no longer needs overflow: auto to contain them.

This is a deliberate visual change, agreed beforehand. It is CSS only — no template
touches the class, and rtl.css needs no counterpart because grid columns follow the
writing direction on their own.

Two details worth pointing at

align-items: start. A grid item stretches to the height of its row by default, so a
short label beside a tall control grew to match it — in one case from 20px to 427px.
That is invisible while a label has no background of its own, but it is not what the
floated version did, so the labels are pinned to the top of their row. Without this line
186 labels changed height; with it, 39 do.

dt.windowbg spans the whole row rather than the label column, which is what its
former width: 98% meant. The snapshot this series ports from puts it in grid-column: 1 / 2 — a single column — which would have quietly halved it. Nothing emits the class
today either way.

Narrow screens needed fixing too

Both stylesheets that stack a settings list did it with width: 100%; float: none.
Neither does anything to a grid item, so the two columns survived all the way down and
each half kept only half the width it used to have. Two rules restore it:

• responsive.css below 480px, for the forum
• maintenance.css below 700px, for the installer and upgrader — where a grid-column
  rule was already sitting, waiting for a grid that did not exist yet

This is worth calling out because the first round of checking was done at desktop width
only and passed cleanly. It took measuring at six widths to find it.

How this was checked

Across 25 pages holding those 97 lists and 264 rows, comparing the display, float and
full bounding rectangle of every element:

lists that change display	97 — every one
dt/dd that lose their float	522
changes outside a settings list	only y on 267 elements and h on 149
page height delta	mean +1.6px, range −40 to +130
children overflowing their list	6 before, 6 after — the same ones, all pre-existing
stacking at 1280/900/720/600/470/380px	identical to before, on three settings pages
stacked rows at 470px and 380px	pixel for pixel identical, no page scrolls sideways

Nothing outside the lists is restyled: no display, float, x or w changes anywhere
else. Things below a list simply move as it changes height.

In a right-to-left language, all 57 label/control pairs on three sample pages put the
label on the right, so the mirroring works with no override.

One trade-off to be aware of

The label column narrows from 56% to 50%, so 39 labels wrap one line further. That was
part of what was agreed, and it buys a wider control column. If the old proportions are
preferred, it is a one-line change — grid-template-columns: 56% 42% instead of
1fr 1fr — and I am happy to make it.

Issues References (Fixes|Related|Closes)

Part of the #7933 split. Wave 8 is fully merged; this opens wave 9.

🤖 Generated with Claude Code