fix(app-shell): stack the collapsed head so the mark keeps the icon column - #43
Merged
Conversation
…olumn Collapsed, the rail leaves 50px between its own padding, while the brand mark and the collapse toggle are both shrink-0 and together want about 70px. justify-center split the 20px overflow evenly, which put the mark some 15px left of the centre line every nav row lines up on — a wide mark hid it, a square one made it obvious. Stacking centres both on that line, and neither has to give up size for the other. jsdom has no layout, so the test asserts the class rather than the position. That is the honest limit of the harness, and the class is also the whole of the fix. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Three things in the collapsed rail were not rail items, and each showed it in a different way. The head laid the mark and the toggle side by side in the 50px the rail leaves between its own padding, while both are shrink-0 and together want about 70px. justify-center split the overflow evenly, putting the mark some 15px left of the line every nav row centres on. It stacks now. The mark rendered at whatever size the consumer set for the EXPANDED head. Beside 18px icons that reads as chrome rather than as something you can press — and it was in fact the only thing in the rail that did nothing when clicked. Collapsed it takes a rail item's slot, hover wash and right-hand tooltip, and goes home when there is an onHome to go to. Its accessible name is the title, which is the word it replaced. The toggle kept a p-1.5 box of its own: 30px against the column's 36. Collapsed it takes the same slot and tooltip; expanded it stays the small affordance at the head's right edge, where a full slot would only add padding. Measured on a running console: mark, toggle, search and every nav item are all 40x36 centred on 37. jsdom has no layout, so the tests assert classes — and for the toggle the measure is the nav item beside it rather than a literal, so the two cannot drift apart. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…e a link It faded on hover — transition-opacity, the only hover in the rail that was not a background change, sitting directly above a column of items that all wash. It now takes the same rounded box, the same wash and the same px-2.5 as the items under it, so the highlight covers mark and words together. The head gives up its own px-1 to make room for that padding. With both, the head's wash would start four pixels right of every wash beneath it — the kind of near-miss that reads as sloppy without anyone being able to name it. Measured on a running console: the head's box and a nav item's box both start at x=12, and the mark's left edge lands on 22, exactly where the nav icons do. The test measures against a RESTING nav item, not the active one: the active row wears the accent instead of a hover, so it would have proved nothing. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…above it Collapsed, the head is ONE rail item now: the mark at rest, the expand chevron under the pointer or under keyboard focus, in the same 36x40 box as everything below it. That slot's ACTION never changes — it expands, whichever glyph it happens to be showing — so the swap is an affordance rather than a mode. It costs nothing on a device with no hover, where the mark simply stays put and taps to open, and the accessible name reads "expand" throughout. This replaces the stacking from the previous commit. Stacking did centre the mark, but it cost a row, and that made the head the only part of the rail whose height moved between states. One slot costs neither: 112px of head becomes 68px, and the icon column starts where it did before any of this. Going home is not on that slot. A rail already showing its nav has a home item a row or two down; a second, hidden action on a control whose glyph changes under the cursor is a guess, not an affordance. Verified on a running console: the slot, search and every nav item are 40x36 on one centre line; at rest the mark is opaque and the chevron is not; under keyboard focus that inverts. The three shell baselines are regenerated through the container the CI uses, and nothing outside the shell moved. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
update-visual.sh is the documented way to regenerate the baselines, and it leaves test-results/ behind every time. Untracked and unignored, that invites the actual and diff PNGs of a failing run into a commit alongside the baselines they were meant to replace. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Collapsed, the rail leaves 50px between its own
px-3, while the brand mark and the collapse toggle are bothshrink-0and together want about 70px.justify-centersplit the 20px overflow evenly, so the mark sat some 15px left of the centre line every nav row lines up on.A wide mark hid this — 40×20 of ink drifting left reads as nothing much. A square mark made it obvious, which is how it surfaced.
Stacking the two centres both on that line, and neither gives up size for the other. Measured on a running console: mark centre 37, icon centre 37. The collapsed head grows from 72px to 92px, which the rail has room for.
jsdom has no layout, so the regression test asserts the class rather than the position — the honest limit of the harness, and the class is also the whole of the fix.
195 tests green,
tsc --noEmitclean.🤖 Generated with Claude Code