fix(blog): use object-cover so card and detail covers fill the frame

[Benjtalkshow]

Summary

• Revert the BlogCard and BlogPostDetails cover images from object-contain back to object-cover so banners fill the card/hero frame instead of letterboxing.
• The earlier switch to object-contain was meant to preserve the full image, but it produced dark bands around banners. With properly-sized cover images (2:1 ratio on the card, taller responsive height on the details page), object-cover fills the frame without visible cropping.

Test plan

• Open /blog and confirm every post card's banner fills the image area edge to edge (no dark bands).
• Open the hackathon launch post and any other recent post detail page; the hero banner should fill the box without letterbox bands.

Summary by CodeRabbit

• Style
  • Modified how blog cover images fit within their containers on blog listing and detail pages for improved visual presentation.

[vercel]

@Benjtalkshow is attempting to deploy a commit to the Threadflow Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d520079a-98da-43b8-a121-fc8eae9a7748

📥 Commits

Reviewing files that changed from the base of the PR and between 54c36bf and cec94e5.

📒 Files selected for processing (2)

• components/landing-page/blog/BlogCard.tsx
• components/landing-page/blog/BlogPostDetails.tsx

---

📝 Walkthrough

Walkthrough

Blog cover images in the card and detail views now use object-cover instead of object-contain for styling, changing how images scale and crop within their 2:1 aspect-ratio containers during hover transitions.

Changes

Blog Cover Image Fit Behavior

Layer / File(s)	Summary
Image fit styling updates components/landing-page/blog/BlogCard.tsx, components/landing-page/blog/BlogPostDetails.tsx	BlogCard and BlogPostDetails components changed the Next.js Image className from object-contain to object-cover, affecting how cover images scale and crop within their containers.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• boundlessfi/boundless#551: Directly overlaps with the same object-cover ↔ object-contain className swap in BlogCard.tsx and BlogPostDetails.tsx.

Suggested reviewers

• 0xdevcollins

Poem

🐰 Blog images now crop with grace,
From contain to cover they find their place,
Two small tweaks make the visual right,
Cards and details both fit just tight! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(blog): use object-cover so card and detail covers fill the frame' clearly and specifically describes the main change: switching blog images from object-contain to object-cover to fill frames properly.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 and usage tips.}