fix: reserve layout space for Partners carousel and Features images

[Bryandero98]

Summary

Closes #8018. Two independent CLS (Cumulative Layout Shift) sources on the homepage:

• Partners carousel: the slick/unslick breakpoint switch restructures the DOM on client-side init, shifting content below it. Reserves the single-row height (min-height: 110px, matching .partner__block__inner's fixed height: 110px) on desktop only (min-width: 1401px), where slick renders a single row by design — below that breakpoint .partner__block__inner wraps into multiple rows and a fixed height would be wrong.
• Features section images (whiteboarding/commenting/aws, all 877×476 SVGs) had no width/height/aspect-ratio, so the browser couldn't reserve their box before load. Added aspect-ratio: 877 / 476 to the actual <img> — it's nested inside a Link (renders as <a>), so the selector is & > a > img, not the & > img a first pass would reach for. Also added explicit width/height to the small AWS/GCP logo icons in the linked-cards row, which were missing them entirely.

Test plan

• npm run checklint — no new errors introduced (286 pre-existing errors in unrelated files untouched by this PR; the 4 files this PR touches lint clean on their own).
• Verified live against npm run develop:lite: getComputedStyle confirms aspect-ratio resolves to 877 / 476 on the actual rendered <img> elements (previously auto, meaning the original & > img selector never matched).
• Verified the carousel reserves ~110–113px on desktop via getBoundingClientRect.
• Note: the Features images' visual bounding-box ratio still differs from 877/476 because ImageWrapper/ImageWrapperTwo apply a 3D transform (perspective + scale + rotateY/rotateZ) for a hover effect — that's a paint-time projection, not the layout box CLS is actually computed from, so it doesn't affect this fix.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Improvements
  • Improved feature card image sizing and aspect-ratio handling for more consistent layouts.
  • Added explicit dimensions to AWS and GCP logos to help prevent page content from shifting while loading.
  • Reserved space for the partner slider on large desktop screens, reducing layout movement during initialization.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: d9c32c67-8286-4e6e-a67e-eca890d82374

📥 Commits

Reviewing files that changed from the base of the PR and between 6c975ec and 900bab0.

📒 Files selected for processing (4)

• src/components/Features/index.js
• src/components/Features/style.js
• src/sections/Home/FeaturesContainer/index.js
• src/sections/Home/Partners-home/partnerSection.style.js

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

📝 Walkthrough

Walkthrough

The PR updates feature image dimensions and aspect-ratio styling, adds explicit AWS and GCP logo sizes, and reserves desktop space for the partners carousel.

Changes

Homepage layout stability

Layer / File(s)	Summary
Feature image dimensions and selectors src/components/Features/index.js, src/components/Features/style.js	Feature images now use item-specific dimensions with fallbacks. Linked images use a 877 / 476 aspect ratio.
Homepage feature asset dimensions src/sections/Home/FeaturesContainer/index.js	AWS and GCP entries now define explicit dimensions. Related JSX formatting and trailing-comma updates are included.
Partner carousel reserved space src/sections/Home/Partners-home/partnerSection.style.js	The partner slider reserves 110px at viewport widths of 1401px and above.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 74ed3

This change reserves space for homepage feature images and the desktop partner carousel to reduce layout shift without changing carousel or link behavior. The implementation is ready to merge.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The changes address carousel space reservation and Feature image dimensions, but the provided summary does not show explicit dimensions or aspect-ratio reservations for partner images. It also provide…	Add explicit dimensions or an equivalent aspect-ratio reservation for partner images. Verify and document that desktop and mobile CLS are below 0.10, with no hydration mismatch or visual regression, while preserving existing carousel and Fe…

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the two primary changes: reserving layout space for the Partners carousel and Features images.
Out of Scope Changes check	✅ Passed	The functional and formatting changes remain within the scope of reducing layout shifts in the Partners and Features sections. No unrelated behavior or feature changes are evident.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 4…

Full details: Linked Issues check

Explanation

The changes address carousel space reservation and Feature image dimensions, but the provided summary does not show explicit dimensions or aspect-ratio reservations for partner images. It also provides no evidence that desktop and mobile CLS meet the required value below 0.10 or that hydration mismatches are avoided.

Resolution

Add explicit dimensions or an equivalent aspect-ratio reservation for partner images. Verify and document that desktop and mobile CLS are below 0.10, with no hydration mismatch or visual regression, while preserving existing carousel and Features behavior.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Preview deployment for PR #8022 removed.

This PR preview was automatically pruned because we keep only the 3 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.