fix(articles): bound the height of article images - #132
Merged
Conversation
An article with a picture opened to a wall of it. The cover lost its height bound in #129, when it stopped being cropped to 16:9 so it would render at its own ratio. That reads fine for a landscape cover and badly for a portrait one: 720px of column width becomes over a thousand pixels of height, and the reader arrives at an image with the title somewhere below the fold. It is full width again but capped, and cropped to stay a banner rather than a page. Body images only ever had `max-w-full`, which does nothing for a tall one. A single portrait screenshot filled the screen and pushed the paragraph it illustrated out of sight. They are bounded on both axes now, and deliberately not cropped — scaling a diagram down whole keeps what it was drawn to show, where covering it to a box would cut part of it away. The tests assert the classes, which is unusual and right here: the missing class was the whole defect. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Hu1QuLxS84vdf1gmzoGtWP
Contributor
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
tdn-client | bb98d0a | Commit Preview URL Branch Preview URL |
Aug 26 2026, 01:17 AM |
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.
An article with a picture in it opened to a wall of picture. Two separate causes, both mine.
The cover
It lost its height bound in #129, when it stopped being cropped to 16:9 so it could render at its own ratio. That reads fine for a landscape cover and badly for a portrait one: 720px of column width becomes over a thousand pixels of height, and the reader arrives at an image with the title somewhere below the fold.
Full width again, but capped — and cropped, so it stays a banner rather than becoming the page.
Body images
These only ever had
max-w-full, which does nothing for a tall image. One portrait screenshot filled the screen and pushed the paragraph it was illustrating out of sight.Bounded on both axes now, and deliberately not cropped: scaling a diagram down whole keeps what it was drawn to show, where covering it to a box would cut part of it away. That is the one place where the cover and the body should behave differently.
Reviewing
The tests assert Tailwind classes, which is usually a weak thing to do — here it is the right thing, because the missing class was the defect. Each is written to say what breaks without it rather than restating the class name.
The editor's cover preview had the same gap; that fix went to #131, since the editor does not exist on
mainyet. The two are matched deliberately — a preview that is taller than the published article leaves the writer guessing.Verification
pnpm build,tsc -b,pnpm lintclean. 414 unit tests across 59 files pass.Worth saying plainly: this was a regression I introduced, and the reason it survived review is that the reading view was only ever exercised against articles with no cover. The new tests close that specific gap.
🤖 Generated with Claude Code
https://claude.ai/code/session_01Hu1QuLxS84vdf1gmzoGtWP