When layout taste becomes a test

The failure mode looked harmless at first: a screen technically fit.

No horizontal scrollbar. No clipped root. No controls pushed outside the viewport. The Playwright fit guard was green, so the layout passed the kind of check a CI system can run without having a design opinion.

But on a landscape screen, the Battleland army chooser still felt wrong. The creature palette, roster, titan and angel options, legion-marker strip, empty selection placeholder, and Confirm action were all stacked as full-width bands. The palette clipped under later strips. Short controls stretched across the entire window. Setup tasks that belonged together read as separate rows because each row owned the same width and emphasis.

The screen had avoided overflow, but it had not used the viewport.

That gap is what the new UI design methodology exists to close. It does not try to turn all of "good UI" into a linter. It gives agents, ticket authors, and reviewers a shared set of lenses for judging whether a game screen uses its available space, keeps the primary object obvious, groups related controls, and remains stable across real game states. Then it takes one lens that can be measured objectively and turns it into a CI guard.

That last part matters. Prose can name a standard. A harness keeps it from slowly becoming optional.

The recurring landscape bug

Board-game UI makes landscape especially tempting to waste. A phone in portrait often wants a stack. A TV, tablet, or phone in landscape usually wants regions: board plus hand, palette plus setup rail, table plus action panel, lobby list plus join controls.

The lazy version is to keep the portrait DOM and let every section stretch edge to edge. It fits because the browser is good at making boxes wider. It still fails as a product surface because width becomes dead space, unrelated controls look equally important, and the real work of the screen can be pushed below secondary configuration.

Battleland made the problem concrete. The target redesign turns the army chooser from one full-width column into two functional regions:

• a left creature palette that owns the body height and scrolls internally
• a right Army setup rail containing roster, titan and angel choices, legion markers, and Confirm

The header can remain thin full-width chrome. The interactive setup task should not span the viewport just because the viewport is available.

That before/after is more than a CSS cleanup. It is the difference between a layout that merely does not overflow and a layout that understands what the player is doing.

Six lenses, not one taste argument

The methodology breaks the judgment into six lenses.

Visual hierarchy / information weight: name the primary object first. On a stage screen, that is usually the board, hand, pending action, palette, or current choice. Status chrome and destructive controls should not compete with it for width, contrast, or emphasis.

Spatial efficiency: spend landscape width on useful regions. Short setup controls should be capped, grouped, or moved into a rail instead of stretched into full-width bands.

Touch ergonomics / Fitts's law: frequent and consequential controls need comfortable targets and enough separation to hit reliably. The boldest control must not be the destructive one.

Gestalt grouping: related controls should read as one task. A player should not have to scan four full-width rows to understand one setup decision.

Progressive disclosure: show the common path first. Optional configuration and empty placeholders should not reserve major structural space until they matter.

Layout stability: role and viewport define the layout; game state changes content inside reserved regions. Errors, empty states, and item-count growth should not move the core board, hand, palette, or primary action.

These lenses are deliberately practical. They do not ask a reviewer to say "make it nicer." They ask a reviewer to name which part of the layout is carrying the screen, which controls belong together, and which viewport class is being underserved.

From lens to guard

The enforcement stack now has three layers.

First, the methodology doc is the contract. A ticket can cite it before implementation starts, and a reviewer can point to a specific lens instead of arguing from preference. That is already an improvement over taste, but prose alone is weak. It depends on every future agent remembering the same lesson.

Second, the landscape-column guard turns one objective piece of the spatial efficiency lens into geometry. The layout-fit-landscape-column-guard work adds an opt-in assertLandscapeColumnLayout assertion on top of the existing fit checks. assertScreenFits can already catch overflow, clipping, collapsed controls, and overlapping controls. The new guard can catch the specific shape that kept recurring: interactive landscape screens whose major regions are still stacked as full-width bands.

That distinction is important. A rectangle-fit check can say "nothing is broken." A column-layout check can say "this landscape screen is not actually using columns." It is not trying to judge color, copy, or product intent. It is mechanizing the part of the review that can be reduced to measured region relationships.

Third, the review rule makes the methodology mandatory review vocabulary. The guard catches objective drift. The reviewer still handles the human part: whether the palette is visually dominant enough, whether the setup rail groups the right controls, whether optional content is disclosed at the right time, and whether a phone-player orientation policy is intentional rather than accidental.

This is the AI-first-engineering pattern the project keeps circling back to:

1. Notice a repeated judgment failure.
2. Write the judgment down as a small, shared contract.
3. Mechanize the part that has objective geometry.
4. Leave the remaining product judgment visible for review.

The guard is not valuable because it replaces design review. It is valuable because it stops the same low-level miss from consuming design review over and over.

Why prose was not enough

Autonomous agents are good at satisfying the literal gate they can see. If the only gate says "no overflow," a full-width landscape stack is an attractive solution: simple DOM, simple CSS, green test.

Humans notice the waste. Agents need the waste named.

The methodology names it. The landscape-column guard makes one recurring version of it fail in CI. Together they move "use the landscape viewport intentionally" from review taste toward project infrastructure.

That is the useful boundary. Not every design decision belongs in a harness, and the methodology does not pretend otherwise. But when the same objective layout failure repeats across screens, leaving it as prose is just choosing to rediscover it later.

The Battleland army chooser made the failure visible. The design methodology made it discussable. The landscape guard makes it harder to regress.

That is the shape of an AI-first UI rule: a human names the lens, the codebase keeps the measurable part honest, and future agents have less room to confuse "fits" with "designed."