Update picture - #47
Merged
Merged
Conversation
Both update portraits are 1536x2048. Stacked and width-capped, dad.jpg sat 448px wide in a 712px card — ~120px of dead gutter either side, 597px of photo, an 860px card, the tallest thing in the feed by a wide margin. And uganda.jpg, once its square crop was replaced with the uncropped original, carried no imageFit at all, so it fell through to the default 16:9 cover and got cropped to a band. `imageFit: 'contain'` becomes `'tall'`, with three stages on the card's own width rather than the viewport: - 48rem+: beside the text, capped at 400px tall. - 28rem-48rem: stacked, whole photo, capped at 400px. - under 28rem: no cap, no frame — full card width at the photo's own ratio. The phone stage is uncropped on purpose. A 4:3 centre crop was tried and took the tops of heads off; a tall card beats a decapitated one. Renamed from `contain` because below 28rem it is now object-cover, so the old name lied. Updates goes max-w-4xl to max-w-5xl. Not cosmetic: the side layout needs 48rem of card, and at 4xl the card maxed out at 712px and could never reach it. At 5xl it's 840px. That widening then exposed `max-w-prose` (65ch) on the body, which left 154px dead on the right of every landscape card, so the measure cap is gone — the paragraph settles around 780px on its own. Home gets a new `imageAside` prop, a placement choice rather than an entry one: its teaser card is ~1216px, wide enough that even a landscape photo reads as a short band over a short block of clamped text. Aside, it's 400x225 beside the text and the card drops from 461px to 267px. The feed leaves it off — 840px is narrow enough that a landscape photo fills the width properly stacked. One CSS trap worth recording, since it looks correct and silently does nothing: the row switch cannot live on the article. An element can't respond to a container query it declares itself, so `@min-[48rem]:flex-row` on the `@container` article resolves against an ancestor and never matches. It's on an inner wrapper, with a comment. Measured, feed: 840px card and side layout from ~820px viewport up; stacked and capped 480-816; filling below. Home: aside from 900px up. Landscape cards unchanged at every width. Residual, deliberately left: the dad entry's body is 876px against a 400px photo, so its side layout still has a blank left column. Uganda's body is 508px and reads well. No layout knob fixes a text-length mismatch — that one needs the copy split or the photo allowed to grow. Verified with biome ci, typecheck, bun run test, bun run test:browser, and a production build. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The flex row put the photo in a column of its own, so a card whose text outran the photo got a tall blank column beside it — the dad entry ran 876px of text against a 400px photo. A float fixes that by being self-adjusting: short entries sit alongside the photo, long ones wrap underneath it, and there's no threshold to measure or tune. Text now flows around the photo and continues full-width below it. Extended to landscape photos too, which also collapses the API. `imageAside` is gone: it existed to force a side layout for `cover` photos on Home, and now every photo floats above 48rem, so it did nothing the default didn't. The wrapper drops its nested conditional and is a flat `flex flex-1 flex-col @Min-[48rem]:flow-root`. `imageFit` now picks only the size cap, not the layout: - `cover` caps width at 400px. Capping a 16:9 photo's height at 400px would make it 711px wide and swallow the card. - `tall` caps height at 400px, and still drops the cap entirely below 28rem. Landscape cards get much shorter, since a 400px inset replaces an 838px full-bleed band: Flybox 1136 -> 742, New Home 902 -> 508, New Job 1396 -> 1002, Job Search 798 -> 430. Tall cards: dad 878 -> 696, uganda 508 -> 482. Below 48rem nothing changes — still full-bleed and stacked at 768px and 390px. Photo tops now align with the category tags (`pt-7` matching the body's `md:p-7`). Three CSS constraints that make floats work here, all commented in place because each one fails silently: - The body can't be a flex container at that width. A flex container is its own formatting context, so its lines refuse to wrap around the float and it just sits beside it. Hence `@min-[48rem]:block`. - The wrapper needs `flow-root`, or the card collapses behind the float. - That query can't live on the article. An element can't respond to a container query it declares itself, so `@min-[48rem]:flex-row` on the `@container` article resolved against an ancestor and never matched — it looked right and did nothing. Cost of the float: no vertical divider between photo and text, since a full-height rule would cut through text that has wrapped underneath. The vignette stays — below 48rem the photo is still full-bleed, which is where it earns its keep. Verified with biome ci, typecheck, bun run test, bun run test:browser, and a production build, and measured at 1280/768/390 on the feed plus Home. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The comment survived 58bbe7a unchanged and described the component as it was before: `cover` as always full-bleed, "stages" as something only `tall` has, and no mention of the float at all. All three became wrong when every photo started floating above a 48rem card. Rewritten around what the flag now actually controls — which dimension the float is capped on, not the layout, since the layout no longer varies by fit. Also records that container queries read the *content* box and `.panel` carries a 1px border, so every threshold engages ~2px later than the card's outer width implies: the float starts at a 770px card, not 768. Found by auditing the branch. CLAUDE.md was already accurate; the code comment was the one that had drifted, which is the wrong way round. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The comments accreted through several rounds of layout iteration and ended up restating each other. 12 lines out, no facts lost. - The `imageFit` docblock keeps both size caps, the 711px reasoning and the content-box gotcha, but loses a viewport figure that belongs in CLAUDE.md and a sentence explaining what container queries are. - The tall and cover branches each stopped repeating "floats above 48rem" and "capped on width, because 711px" — both already stated once in the docblock. The cover branch keeps only the nested-boxes note, which is local to it. - The picture-level comment dropped a signpost to a doc two screens up, keeping just the hover-zoom rationale, which isn't recorded anywhere else. All three silent-failure traps are still documented at the line that would break: a flex context defeating the text wrap, `flow-root` for float enclosure, and the container query an element can't declare on itself. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
zanemyers
force-pushed
the
update-picture
branch
from
August 14, 2026 19:56
bce3ae2 to
a417bc6
Compare
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.
No description provided.