fix: improve blog card thumbnail alignment in list view#7764
fix: improve blog card thumbnail alignment in list view#7764mishradwaterlaw wants to merge 2 commits into
Conversation
|
🚀 Preview deployment: https://layer5.io/pr-preview/pr-7764/
|
|
Please apply the same changes made in this PR : |
Signed-off-by: mishradwaterlaw <Tezashmishra@outlook.com>
mishradwaterlaw
force-pushed
the
fix/blog-card-thumbnail-list-view
branch
from
88b9609 to
2a79353
Compare
Signed-off-by: mishradwaterlaw <Tezashmishra@outlook.com>
|
@rishiraj38 thank you for direction,,, after going through PR #7745, ive applied the same changes to blogList.style.js adding overflow: hidden, flex-shrink: 0, object-fit: cover, and explicit width/height on thumbnail images across all breakpoints. ive also applied your resolved review suggestions to Card.style.js making width/height conditional via $listView, and adding border-radius/overflow: hidden to the image wrapper for list view, please let me know if any further changes are needed... |
rishiraj38
left a comment
rishiraj38
left a comment
There was a problem hiding this comment.
@mishradwaterlaw It’s not the same. Please check again and apply the correct changes.
2 participants
Description
This PR fixes #7743
Blog card thumbnails in list view were rendering at their intrinsic size due to width: auto; height: auto on .gatsby-image-wrapper img. This left empty space below images since object-fit: cover needs explicit dimensions to work correctly.
Changes (src/components/Card/Card.style.js only):
Set width: 100% height: 100% on gatsby-image-wrapper img. so images fill the fixed-height container
Grid view is unaffected object-fit stays conditionally cover/contain via the existing $listView prop, fix is scoped to Card.style.js, using the prop that already handles list view logic.
Notes for Reviewers
This addresses the same issue as the closed PR #7745, but applies the fix at the component level using the existing $listView prop as suggested by @rishiraj38 .
Signed commits