From 7a5cfa812b7be8a7013e458213892c899c4792bd Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Thu, 27 Aug 2026 15:36:10 -0400 Subject: [PATCH] fix(blog): pin blog-layout: list thumbnail to a fixed aspect ratio MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit blog-layout: list sizes the row thumbnail as `height: 100%` of the row with `aspect-ratio: auto`. Row height is set by the text column next to it, so anything that changes line-wrapping (window width, browser zoom, even a longer title) changes the image box's shape, and object-fit: cover crops more or less of the photo accordingly — most noticeably, zooming in narrows the text column, wraps it onto more lines, grows the row, and squeezes the image into a taller/narrower box. Override the thumbnail with a fixed aspect-ratio via a small stylesheet (same `css:` mechanism docs-starter uses) so the crop stays consistent regardless of viewport width or zoom level. Co-Authored-By: Claude --- blog/fern/docs.yml | 2 ++ blog/fern/styles.css | 16 ++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 blog/fern/styles.css diff --git a/blog/fern/docs.yml b/blog/fern/docs.yml index b19c720..7a56f01 100644 --- a/blog/fern/docs.yml +++ b/blog/fern/docs.yml @@ -39,3 +39,5 @@ logo: height: 20 favicon: ./assets/favicon.svg + +css: styles.css diff --git a/blog/fern/styles.css b/blog/fern/styles.css new file mode 100644 index 0000000..f89c0dc --- /dev/null +++ b/blog/fern/styles.css @@ -0,0 +1,16 @@ +/* Custom styles for the Plantstore blog example */ + +/* + * blog-layout: list normally sizes the thumbnail to `height: 100%` of the + * row, with `aspect-ratio: auto`. Row height comes from the text column + * next to it, so anything that changes line-wrapping (a narrower window, + * a longer title, browser zoom) changes the image box's shape and how + * much of the photo gets cropped by object-fit: cover. Pin it to a fixed + * ratio instead so the crop stays consistent regardless of viewport width + * or zoom level. + */ +.fern-blog-card-list .fern-blog-card-image { + aspect-ratio: var(--aspect-video); + height: auto; + align-self: center; +}