Improve news card image framing and text alignment#987
Open
RisingOrange wants to merge 5 commits into
Open
Conversation
Match the card image frame to the 1200/628 post-banner crop and switch image fit by source: internal post images (curated to frame well at that ratio) keep object-fit: cover, while Substack/press images (arbitrary shapes we don't control) use object-fit: contain so charts, posters and banners aren't cropped. The container gets a bg-subtle background so the contained letterbox blends with the card.
👷 Deploy request for pauseai pending review.Visit the deploys page to approve it
|
The hover scale(1.03) was applied to all card images; for contained (external) images the container's overflow:hidden then clips the enlarged image, cutting off ~1.5% on hover and defeating the point of contain. Scope the zoom to cover-cropped internal images only.
Resolve NewsCard.svelte image conflict: combine the source-based object-fit (cover internal / contain external) with main's new Image aspectRatio prop, updating it to 1200/628 to match the new card image frame.
RisingOrange
added a commit
to RisingOrange/pauseai-website
that referenced
this pull request
Jul 18, 2026
RisingOrange
marked this pull request as ready for review
July 18, 2026 12:52
RisingOrange
marked this pull request as draft
July 18, 2026 13:12
Titles vary from one to three lines, so subtitles started at different heights across a row. Reserve a fixed two-line title area and vertically center the title within it: subtitles now line up regardless of title length, and short one-line titles no longer leave a gap above the subtitle. The line clamp moves to an inner span because -webkit-line-clamp needs display:-webkit-box, which can't coexist with the flex centering.
RisingOrange
changed the title
RisingOrange
added a commit
to RisingOrange/pauseai-website
that referenced
this pull request
Jul 18, 2026
The fixed-height title area uses display:flex; making it column so the two loading skeleton bars stack on separate lines again instead of shrinking side-by-side, while keeping the loaded single-line/two-line title vertically centered.
RisingOrange
marked this pull request as ready for review
July 18, 2026 14:10
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.
Two related improvements to the news cards: images are no longer cropped, and card text now lines up across a row.
Image framing
The cards previously used
aspect-ratio: 16/10withobject-fit: coverfor every image, which cropped the edges of anything that wasn't already a matching landscape shape — posters, charts, and Substack banners lost content.Following the existing post-banner design system (#702), which standardizes internal post images to a curated
1200/628crop:aspect-ratio: 1200 / 628to match the post banner ratio.object-fit: cover— they're curated to frame well at this ratio. TheirImageaspectRatiohint is updated to1200/628so the responsivesizesmath stays accurate.object-fit: containso charts, posters, and wide/tall banners show in full instead of being cropped.--bg-subtlebackground so the contained letterbox blends with the card body.scale(1.03)) is scoped to cover-cropped images only — zooming a contained image would re-crop it underoverflow: hidden.Text alignment
Titles range from one to three lines, so the description below each started at a different height across a row, and short titles left an awkward gap above their description (reported on Discord).
-webkit-line-clampneedsdisplay: -webkit-box, which can't coexist with the flex centering.Before / After
Rendered with the real production news images and copy. Note in before: the wide Fable 5 banner / chart / tall portraits are cropped, and the row-1 descriptions ("Apply now" / "Hundreds of…" / "The US reaction…") sit at different heights. In after: images show in full and descriptions line up.
Before:
After:
Verification
pnpm check— 0 errors;pnpm _lint:knip— passes; eslint cleanobject-fit: containresolves correctly for external images inside NetlifyImage's<picture>wrapper, and the fixed-height centered title aligns descriptions.