engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

fix: serp thumbnails shrink to fit grid cell (MPS-24 lane layout)

Browse source 
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.
This commit is contained in:
russell@unturf.com 2026-05-15 12:30:08 -04:00
parent 28ffee6c8c
commit e284f88923
No known key found for this signature in database
1 changed files with 9 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

9
make_post_sell/static/css/common.css
View file

@ -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);
}