The header was one flex row — identity, then vitals pinned to the top right.
The identity column is tall (name, rank, marksmanship, the two style hints, two
age fields) and the vitals row is short, so everything under the vitals was
empty blue: roughly a third of the header.
Split it into two columns and stack the status column: vitals, then the derived
numbers, then the readied weapons. Both of those already existed as full-width
bands directly below, so nothing new is on screen — it is the same content
arranged to use the space, and it puts damage modifier and readied weapons next
to hit points, which is where they are read during a fight.
Two sizing traps, both found by measuring rather than looking:
The status column is an auto track, so its width came from max-content — the
readied-weapons line, whose length is whatever the weapon names happen to be.
That crushed identity into a 190px gutter with the name truncated to "Marta
Hollow". width:0 + min-width:100% keeps those panels out of the measurement so
the column is sized by the vitals and they stretch to match.
The vitals row is wide enough on its own to do the same thing, so the columns
are proportional (1fr / 1.6fr) and the vitals now wrap.
Measured at 1020px: header 367px tall before, 266px after, columns 241 and 235
so they end level. At 1400px: 214px tall, columns 189 and 158, vitals unwrapped.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
