fix(BUY-64266): prevent product card image overflow on desktop search grids - #337
Open
BuyWhere wants to merge 3 commits into
Open
fix(BUY-64266): prevent product card image overflow on desktop search grids#337BuyWhere wants to merge 3 commits into
BuyWhere wants to merge 3 commits into
Conversation
…card overflow QA (Hermes SOUL 2026-07-25, VidMee vidmee_ss_aeeb690895e31d361737ec6c) saw product card thumbnails extend beyond the rightmost grid column on desktop multi-column search results. BUY-64736 (just merged to main, commit 294633d) already capped the image at max-h-[220px] for the parent-reflow symptom, but kept group-hover:scale-[1.03] on the <img>. The hover scale was the residual BUY-64266 cause: on hover the image grew to 103% of its 4:3 frame and, with the parent reflow now bounded, still visibly clipped at the column edge on the rightmost card. Fix: drop transition-transform duration-300 group-hover:scale-[1.03] from the SearchCard <img> and add max-w-full so the natural width can't push past the card column either. BUY-64736's max-h-[220px] + aspect-ratio:4/3 + object-contain are preserved — image still letterboxes inside its frame. Files touched: src/app/search/SearchResultsClient.tsx (SearchCard)
Before: fill + object-cover cropped tall/wide images, causing overflow on multi-column grid (rightmost card bled past viewport). After: object-contain ensures images display fully within their cell; aspect-square wrapper with overflow-hidden clips any remaining overflow. Co-Authored-By: Claude <noreply@anthropic.com>
…oduct card images Previous commit d3f8031 fixed object-cover → object-contain. This follow-up removes: - flex centering wrapper (fill + object-contain handles positioning) - redundant inline style (className object-contain already sets it) - gradient bg from image div (only needed for icon fallback) Co-Authored-By: Claude <noreply@anthropic.com>
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.
Summary
Fixes product card images overflowing their grid columns on desktop multi-column layouts (rightmost card image bleeds past viewport).
Changes
src/app/search/SearchResultsClient.tsx: Removed hover scale transform, added explicit max-height constraintssrc/components/ProductCard.tsx: Changedobject-cover→object-contain, removed redundant flex centering wrapperRoot Cause
Product card images used
object-coverwhich cropped tall/wide images, causing rightmost card to visually overflow its grid column on desktop multi-column layouts.How It Works
aspect-squarewithoverflow-hiddenclips any overflowfill+object-containensures images display fully without croppingmax-h-[220px]on search results provides explicit height capCloses BUY-64266
🤖 Generated with Claude Code