Skip to content

The atlas HUD claims too many pixels (~302px; PR #297's row split is ~52px of it) #307

Description

@TortoiseWolfe

The atlas HUD claims too many pixels

Owner, 2026-07-16: "The HUD claims too many pixels as it is." Filed rather than fixed —
deliberately kept out of #301 so that chrome change stayed structural and reviewable, and so
the HUD can be judged against the full-viewport scene it now sits on rather than the
clipped rectangle it used to.

Measured

~302px tall in the default state, at 1200x630 (i.e. ~48% of the viewport height):

row element classes est.
wrapper p-3 + panel p-3 24
1 Atlas — {slug} text-sm font-semibold ~20
2 count/status line font-mono text-[11px] ~16
3 [source][type][height] mt-2 flex gap-1 + 3x btn btn-xs min-h-0 32
4 Play tour mt-2 + btn btn-primary btn-sm min-h-11 w-full 52
5 corners, own row mt-2 flex gap-1 + btn btn-xs min-h-0 32
6 legend <ul> (6 rows) mt-2 space-y-0.5, li text-[11px] ~114
panel p-3 bottom 12

What caused it, honestly

PR #297 did. Before it, Play and corners shared ONE row as btn btn-xs chips
(git show ce8fde8). The tour-discoverability fix made Play a full-width btn-sm min-h-11
on its own row and pushed corners into a new row below: ~+52px. That is the complaint's
direct cause and it is ours.

Constraints for whoever takes this

  • Play's min-h-11 is NOT trimmable. It is CLAUDE.md's 44px touch-target floor, added
    deliberately by feat(#292): the atlas is the default — wide bake, flip, honest tests, tour + card #297, and the comment at the call site says so. Do not "reclaim" it.
  • The legend is the biggest block (~114px, 6 rows) and has no a11y floor arguing against
    collapsing it. But note it is now arguably the point: since feat(#292): the atlas opens coloured by type, not by our own pipeline #304 the atlas opens coloured
    by type, so the legend is the key to what you are looking at. Collapsing it by default
    may cost more than the pixels are worth — worth the owner's eye, not a unilateral call.
  • If you collapse the legend, hide only the <ul> — never empty the state. The headline
    building count is DERIVED from legend state (legend.reduce(...)). AtlasViewer.client.tsx
    documents that a second count source is exactly what once made the headline read
    "0 buildings" over a correct 8031-building legend. That has shipped once already.
  • The atlas's own colour-mode chips (btn btn-xs min-h-0) are already sub-44px and no test
    catches it — there is no repo-wide touch-target gate (blog-touch-targets.spec.ts covers
    only /blog; mobile-buttons.spec.ts only /). Shrinking things further walks toward that.

Cheap wins, in order

  1. corners rejoins Play's row (flex gap-1, Play flex-1): ~32px back, restores exactly
    what feat(#292): the atlas is the default — wide bake, flip, honest tests, tour + card #297 split, no a11y cost.
  2. Collapsible legend: ~114px, a third of the panel. Needs the owner's call per above.

Also worth reconsidering now

#301 gave the scene the full viewport, and #303 notes the tour caption and the building card
render the same three facts in two corners. Three overlays over one map is the real pixel
problem; the HUD's height is one third of it.

Refs #292, #297, #303, #301.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions