The single-row top bar was a flat flex row, which made the search field
drift left or right depending on how wide the surrounding clusters were.
Rework it as a 3-column CSS grid (left zone, search, right zone) so the
search input lands at the geometric center of the window regardless of
the side-zone widths.
Mechanics:
- `.topbar-single` becomes `display: grid` with
`grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr)` and a 16 px
column gap. The middle (auto) column holds only the search, which is
capped at `flex: 0 1 360px` so it cannot push into the side columns.
- The left and right zones are flex containers with
`justify-content: space-between`, so brand pins far-left while filter
pills hug the search, and sort hugs the search while the kebab pins
far-right. The filter pills are now grouped semantically with the
search (they scope it) instead of floating next to the brand.
- A `@container launcher (max-width: 1100px)` rule collapses the layout
back to a single nowrap flex row at narrow widths — the geometric
centering stops reading at narrow widths and would otherwise force
awkward truncation, so we abandon it rather than fight it.
- The `.launcher` root opts into container queries via
`container-type: inline-size; container-name: launcher`.
`launcher.jsx` now wraps the existing children in `.topbar-left`,
`.topbar-center`, `.topbar-right` (plus a `.topbar-left-trail` /
`.topbar-right-lead` for the inner space-between alignment), but each
control component is otherwise untouched.
The README's "Top bar" section is rewritten to spec the new layout, and
a new "Changes since v2" section calls it out at the top of the
handoff. The game-directory button line is left as-is in this commit
and addressed separately.
Test Plan
- Open `design_reference/SoftLAN Launcher.html` in a static server and
inspect variant A at full width: the search input's horizontal center
should match the window's horizontal center, regardless of accent /
density choices in the Tweaks panel.
- Shrink the launcher artboard below 1100 px and confirm the row
collapses to a single left-to-right strip with no overlap.
ddidderr
6e28f736e8