questionFeed: fix subject title overlay, illustration-tile frame, Yes button width - #751
Merged
Merged
Conversation
… button width - SubjectArtTitle no longer overlays the artwork's bottom edge; SubjectArt splits into SubjectArtImage (owns the art's own sizing) + a normal-flow title below it (#741). - Illustration-group candidate tiles get a landscape frame (IllustrationArtPlaceholder) sized from the actual Scryfall art-crop region instead of the full card's 63/88 ratio; ungrouped (full-scan) tiles keep the card-ratio frame. CandidateGrid's tile clamp raised from 78-116px to 120-190px (#746). - Root cause for #746's frame not reliably honoring its own aspect-ratio: ZoomableThumbnail's img used height:100% against an indeterminate parent, which per the CSS box model falls back to the image's own intrinsic ratio, silently overriding the frame's declared ratio. ZoomableThumbnail is now position:absolute;inset:0 so it never participates in that computation. - Level 1 Yes button drops .block; ActionStack's default flex stretch (not just the class) was independently forcing full width, so its first child now opts out via align-self:flex-start (#740). - SPEC-wtc-rebuild.md: corrects amendment A3 (wrongly concluded the title overlay wasn't a defect), supersedes A13 (kept .block), and updates the affected binding-table rows.
…sentation # Conflicts: # docs/proposals/mockups/wtc-rebuild/SPEC-wtc-rebuild.md
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
SubjectArtTitle) was absolutelypositioned inside the artwork's own box, covering its bottom edge. It's
now a normal-flow sibling below the art —
SubjectArtsplits intoSubjectArtImage(owns the art's sizing/aspect-ratio) and the titlebelow it, so the title can never share the art's space, at every
viewport and both Level 1 and Level 2.
card-shaped) now render in a new
IllustrationArtPlaceholderframesized to the actual crop region's aspect ratio (measured from
MPCAutofill's
ART_CROP_BOX/art_crop_pxfixtures), instead of beingforced through the full card's 63/88
ArtPlaceholder. Ungrouped(full-scan) tiles keep the card-ratio frame.
CandidateGrid's tilesize floor/ceiling is also raised (78–116px → 120–190px) since the
artwork is the subject of the question being asked.
ZoomableThumbnail'simgusedheight: 100%against anindeterminate parent, which per the CSS box model falls back to the
image's own intrinsic ratio and silently overrides the frame's
declared ratio.
ZoomableThumbnailis nowposition: absolute; inset: 0so it never participates in that computation — this was a latentbug in the existing
ArtPlaceholdertoo, just invisible therebecause real card scans already have a ratio close to 63/88.
.block(full width) andkeeps
.primary(colour) — the complaint was about size, not aboutthe button being identifiable as the primary action. Dropping the
class alone wasn't sufficient:
ActionStack's default flexalign-items: stretchwas independently forcing the button to therow's full width, so its first child now opts out via
align-self: flex-startwhileActionGrid(needing the full row width for its ownthree siblings) keeps the default.
SPEC-wtc-rebuild.md: corrects amendment A3, which had concluded thetitle overlay wasn't a defect and attributed the symptom entirely to
What's That: hover-zoom on card/illustration is clipped by its container frame #705's hover-clipping fix — that conclusion didn't hold, since the
overlay was unconditional on hover. Supersedes A13 (which kept
.block). Updates the "subject art title", "candidate grid", and"candidate tile" binding-table rows to the new values.
this change — verified it still stays visible while scrolling at every
viewport tested.
Test plan
npm test(Jest) — 676/676 passednpx playwright test(full suite, chromium) — 347/349 on the firstparallel run; the 2 failures (
DisplayLeftRailFidelity.spec.ts,Toasts.spec.ts) both passed standalone on rerun (pre-existingparallel-load flakes, unrelated to files touched here)
npm run build— succeedspython3 .github/scripts/coverage_delta.py --base origin/master— cleanLevel 2 (
QuestionFeed.spec.ts), illustration-tile vs ungrouped-tileframe aspect ratio (
QuestionFeed.spec.ts), Yes button content-widthvs its "Not sure" sibling (
QuestionFeedResponsive.spec.ts)390px, 800px, and 1600px, at both Level 1 and Level 2