[UI] Add fitContainer rendering mode to normalize thumbnails - #7918
[UI] Add fitContainer rendering mode to normalize thumbnails#7918hiyach28 wants to merge 2 commits into
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughThe PR adds optional ChangesArticle card image fitting
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested labels: Sequence Diagram(s)sequenceDiagram
participant ResourceGrid
participant Card
participant Image
ResourceGrid->>Card: pass fitContainer for Article cards
Card->>Image: pass fitContainer
Image->>Image: compute contain and full-size styles
Image-->>Card: render fitted image
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: dependency version conflict. Check your lock file or package.json. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Card/Card.style.js`:
- Around line 74-83: Update the styled component’s `$fitContainer` styling in
the relevant card wrapper so it retains a definite height at the 992–1200px
breakpoint, overriding the later `.post-thumb-block` auto-height rule. Preserve
the existing responsive media-query behavior and ensure fitted thumbnails
continue resolving their 100% height consistently across article aspect ratios.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 1d1d7f03-278c-4313-bfa6-e5f970472143
📒 Files selected for processing (4)
src/components/Card/Card.style.jssrc/components/Card/index.jssrc/components/image.jssrc/sections/Resources/Resources-grid/index.js
Signed-off-by: hiyach28 <hiyach28@gmail.com>
6110239 to
cad2f1d
Compare
|
@hiyach28 Did you checked other pages like blogs? if there card got misaligned. |
|
@saurabhraghuvanshii I have only worked on the Articles page as explicitly mentioned in the issue. |
|
@hiyach28 Please imporve all pages and take care for this page also /blog |
|
I have drafted an implementation plan for the same, so it's easier to review: ObjectiveExtend the existing ScopeEnable
Implementation
Files Expected to Change
No additional changes are expected in the shared implementation ( Success Criteria
|
3 participants
Summary
This PR fixes inconsistent thumbnail rendering on the Resources → Articles grid by introducing an opt-in
fitContainerrendering mode.Previously, article thumbnails containing SVGs and raster images with widely varying intrinsic dimensions rendered at noticeably different visual sizes. This resulted in uneven card layouts, inconsistent spacing, and poor visual balance across the grid.
Instead of normalizing individual assets or introducing page-specific rendering logic, this PR adds a reusable rendering abstraction that allows thumbnails to scale consistently while preserving their original aspect ratios and existing rendering behavior elsewhere in the application.
Fixes #7912
Root Cause
The issue was caused by the clashes between image dimensions and the existing rendering abstraction.
During investigation, several observations emerged:
src/components/image.js.object-fit: containcould not normalize their rendering, resulting in inconsistent visual sizing across the grid.This meant thumbnails with different intrinsic dimensions produced inconsistent visual output even though they shared the same card layout.
Investigation
Several implementation strategies were explored before arriving at the final solution.
object-fit: cover: Although this aligned thumbnail sizes, it cropped wide and tall logos, resulting in loss of important visual content.Final Solution
Instead of modifying assets or introducing page-specific rendering logic, this PR normalizes rendering at the abstraction responsible for image presentation.
This addresses the underlying rendering behavior rather than individual assets.
ResourcesGrid: Declares layout intent by enabling
fitContaineronly for article thumbnails. It's unaware of rendering implementation details.Card: Owns layout. It establishes the drawing canvas and spacing while forwarding rendering intent. It does not contain image-specific logic.
Image: Owns image rendering. The new
fitContainermode normalizes rendering for both SVG and raster images while preserving aspect ratio and respecting the existing rendering pipeline. By placing the abstraction here, rendering behavior remains centralized and reusable.Why this approach
This solution addresses the problem at the rendering abstraction rather than introducing page-specific or asset-specific fixes.
The new
fitContainermode is opt-in, allowing the Resources → Articles grid to normalize thumbnail rendering without affecting existing consumers. By centralizing the behavior inImage, the implementation works consistently for both SVG and raster images while preserving aspect ratios and avoiding asset modifications.This approach provides several benefits:
fitContaineris explicitly enabled.ResourcesGrid,Card, andImage.Screenshots
Before
After
Testing
Verified locally using the Gatsby development server.
Verified
The implementation was validated against thumbnails with significantly different intrinsic dimensions, including Kubernetes, Consul, GitHub, Docker, and Istio.
Checklist
I signed my commits.
Summary by CodeRabbit
New Features
Bug Fixes