Skip to content

whatsthat: layout pass reclaiming desktop/mobile space (#705, #707, #710, #711) - #737

Merged
WilfordGrimley merged 1 commit into
masterfrom
feat-wtc-layout-pass
Aug 6, 2026
Merged

whatsthat: layout pass reclaiming desktop/mobile space (#705, #707, #710, #711)#737
WilfordGrimley merged 1 commit into
masterfrom
feat-wtc-layout-pass

Conversation

@WilfordGrimley

Copy link
Copy Markdown

Summary

  • Pins the reference card (Subject) inside the hero container via position: sticky
    (not the viewport) so it stays visible while scrolling at every width, including the
    compacted horizontal strip on narrow containers.
  • Raises WtcHero/WtcHead's own max-width from 1180px to 1600px and passes fullWidth
    to whatsthat.tsx's ProjectContainer - the sitewide 1200px content cap, not the
    hero's own value, was the actual constraint keeping desktop narrow.
  • Shows the attribute-chip filter panel automatically for identify_printing/
    confirm_suggestion questions instead of behind a manual toggle, and moves it out of
    a 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.
  • Collapses an implied-negative chip's label instead of only dimming it, reclaiming the
    row space several dimmed siblings used to reserve.
  • Lets SuggestedThumb/CandidateButton release their resting overflow: hidden clip
    for exactly the hover duration their zoomed thumbnail needs to escape it, so hover-zoom
    is no longer cut flush at the tile edge.
  • Drops the oversized .big modifier from the Level 1 Yes button so it reads at the same
    size as its sibling answer buttons.

Test plan

  • npm test (Jest) - 73 suites / 676 tests passing
  • npx playwright test - 351 tests total, 344 passed, 6 skipped, 1 flaked under
    parallel load in an unrelated file (SelectVersionSection.spec.ts), confirmed
    passing 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)
  • Manual verification in a real Chromium browser at phone (390px), tablet (800px),
    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

, #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).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant