From e284f88923d86b925fb5517358e112d645c06818 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Fri, 15 May 2026 12:30:08 -0400 Subject: [PATCH] fix: serp thumbnails shrink to fit grid cell (MPS-24 lane layout) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit shop.printableprompts.com's lanes layout looked broken: each lane rendered a single giant product card spanning the entire viewport. Cause: img.serp-thumbnail had no width constraint, so a 1080px-natural thumbnail expanded its grid cell to 1080px, collapsing the auto-fit 'repeat(auto-fit, minmax(160px, 1fr))' grid to a one-column layout. Per CLAUDE.md CSS Media Sizing rule, use width: auto + max-width: 100% (never width: 100% with max-height). Adds height: auto + display: block to kill inline-image whitespace. Affects every page that renders .serp-thumbnail (home, shop, search, tag detail) — printableprompts had pixel-large thumbnails so it surfaced there first; other shops with smaller thumbs were getting away with the lack of constraint. --- make_post_sell/static/css/common.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index 2e73947..da4474d 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -1355,6 +1355,15 @@ div.serp-item:hover { } img.serp-thumbnail { + /* width: auto + max-width: 100% per CLAUDE.md CSS Media Sizing: + lets the image shrink to fit its grid cell without forcing the + cell to expand to the image's natural width (which on + printableprompts is 1080px+ and was collapsing the auto-fit + grid to a single full-viewport column). */ + width: auto; + max-width: 100%; + height: auto; + display: block; border-radius: var(--radius-sm, 4px); }