eleven / messenger Public

status: nav pills — two equal-width full-width rows (#1222) (#1243)

The four nav group pills were intrinsic-width flex items, so the two rows
sat ragged. Paul asked (2026-07-21) for both rows full width with the two
pills in each row equally wide: the pill container becomes a CSS grid
(grid-template-columns: 1fr 1fr), collapsing to one column under the
existing 640px Menu-disclosure breakpoint (justify-self keeps the Menu
button intrinsic-width there).

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Paul Campbell 3 months ago 18001055e6626df2bd4c303ff07320609c18d9ae parent 8e86c2d

1 file changed, +10 −3

web/status/status.css +10 −3

diff --git a/web/status/status.css b/web/status/status.css

index 5b09ea4..82f5efb 100644

--- a/web/status/status.css

+++ b/web/status/status.css

@@ -70,8 +70,12 @@ header .brand { color: var(--ink-2); font-size: 14px; }

public records, Plan), each a quiet chip cluster on a surface. The labels

encode what a page IS, so item names inside them stay short ("Access", not

"Access Ledger"). The current page is a filled non-link chip, still marked

- aria-current + bolded so weight (not color alone) carries it. */

-nav.status-nav { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; max-width: 760px; margin: 10px auto 18px; }

+ aria-current + bolded so weight (not color alone) carries it. A 2×2 grid,

+ not a wrapped flex row: intrinsic-width pills left the two rows ragged, and

+ Paul asked (2026-07-21) for both rows full width with equal-width pills —

+ 1fr tracks give exactly that (rows also share a height, so the four read as

+ one block). */

+nav.status-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 14px; max-width: 760px; margin: 10px auto 18px; }

.status-nav .group {

display: flex; flex-wrap: wrap; align-items: center; gap: 2px;

background: var(--surface); border: 1px solid var(--border);

@@ -100,7 +104,10 @@ nav.status-nav { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; max-

.status-nav .menu-toggle:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; }

.status-nav .menu-toggle .glyph { color: var(--ink-2); }

@media (max-width: 640px) {

- .status-nav .menu-toggle { display: inline-flex; }

+ /* One column: the open groups stack full-width; justify-self keeps the

+ Menu button intrinsic-width (a grid cell would otherwise stretch it). */

+ nav.status-nav { grid-template-columns: 1fr; }

+ .status-nav .menu-toggle { display: inline-flex; justify-self: start; }

nav.status-nav:not(.open) .group { display: none; }

}