whatsthat: layout pass reclaiming desktop/mobile space (#705, #707, #710, #711) - #737
Merged
Conversation
, #711) - Reference card (Subject) is pinned within the hero container via position: sticky, not the viewport, so it stays visible while scrolling at every width, including WD3's compacted phone strip. - WtcHero/WtcHead's own max-width raised from 1180px to 1600px, and whatsthat.tsx now passes fullWidth to ProjectContainer - the sitewide 1200px ContentMaxWidth cap was the actual constraint keeping desktop narrow regardless of the hero's own value. - The attribute-chip panel shows automatically for identify_printing/ confirm_suggestion questions instead of sitting behind a manual toggle, and no longer shares a box with the reference card (it renders in the questions column now, not a ring around the card) - guaranteeing it can never occlude the pinned card. - An implied-negative chip collapses its label instead of only dimming, reclaiming the row space several dimmed siblings used to reserve. - SuggestedThumb/CandidateButton release their overflow:hidden clip for exactly the hover duration ZoomableThumbnail scales art up, so the zoom is no longer cut flush at the tile edge. - The Level 1 Yes button drops its oversized .big modifier, reading at the same size as its ActionGrid siblings. Tests: Jest 73/73 suites, 676/676 passing. Playwright 351 total, 344 passed + 1 pre-existing parallel-load flake (confirmed passing standalone, unrelated file) + 6 skipped. npm run build compiles clean. coverage-delta gate clean (2 acks for a default-visibility rename and a retired ring-layout test, both in .github/coverage-acks.txt).
This was referenced Aug 6, 2026
Open
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
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.
Summary
Subject) inside the hero container viaposition: sticky(not the viewport) so it stays visible while scrolling at every width, including the
compacted horizontal strip on narrow containers.
WtcHero/WtcHead's own max-width from 1180px to 1600px and passesfullWidthto
whatsthat.tsx'sProjectContainer- the sitewide 1200px content cap, not thehero's own value, was the actual constraint keeping desktop narrow.
identify_printing/confirm_suggestionquestions instead of behind a manual toggle, and moves it out ofa ring-around-the-card composition into the questions column, so it can no longer
share a box with (and therefore can't occlude) the pinned reference card.
row space several dimmed siblings used to reserve.
SuggestedThumb/CandidateButtonrelease their restingoverflow: hiddenclipfor exactly the hover duration their zoomed thumbnail needs to escape it, so hover-zoom
is no longer cut flush at the tile edge.
.bigmodifier from the Level 1 Yes button so it reads at the samesize as its sibling answer buttons.
Test plan
npm test(Jest) - 73 suites / 676 tests passingnpx playwright test- 351 tests total, 344 passed, 6 skipped, 1 flaked underparallel load in an unrelated file (
SelectVersionSection.spec.ts), confirmedpassing standalone
npm run build- compiles clean, no type errors.github/scripts/coverage_delta.py --base origin/master- clean (2 acked renames,both recorded in
.github/coverage-acks.txt)and desktop (1600px) widths: reference card stays visible while scrolling, the
chip panel never overlaps it, desktop uses its available width, hover-zoom is no
longer clipped, and the Level 1 answer row reads as a hierarchy