Fix: prevent vertical overflow on initiative card hover

[KitsuneKode]

Summary

Fixes vertical overflow in the Initiatives carousel when hovering over a card and the "Apply" button appears.

What changed

Increased bottom padding on the carousel scroll container from pb-4 to pb-10 in Initiatives.tsx, giving the hover-revealed Apply button enough space so it no longer spills outside the container.

Problem

On hover, the Apply button slides into view at the bottom of each initiative card. With only pb-4 (16px) of padding, the button extended past the scroll area, causing a vertical scrollbar and layout shift.

Solution

Reserve more space below the card row (pb-10 / 40px) so the Apply button can appear on hover without triggering vertical overflow in the horizontal scroll container.

Screenshots

Before

After

Test plan

• Open the Initiatives section on the homepage
• Hover over an initiative card and confirm the Apply button appears
• Confirm no vertical scrollbar appears in the carousel on hover
• Confirm horizontal scrolling still works with the left/right arrows
• Check on mobile and desktop viewport sizes

Summary by CodeRabbit

• Style
  • Improved vertical spacing in the initiatives carousel for better visual presentation.

[vercel]

@KitsuneKode is attempting to deploy a commit to the WeMakeDevs' projects 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8a906d6e-fc99-42b1-988a-d7105e7fa449

📥 Commits

Reviewing files that changed from the base of the PR and between 5e80682 and fba295c.

⛔ Files ignored due to path filters (1)

• bun.lock is excluded by !**/*.lock

📒 Files selected for processing (1)

• src/components/Initiatives.tsx

---

📝 Walkthrough

Walkthrough

A single Tailwind CSS class change in src/components/Initiatives.tsx increases the bottom padding of the initiatives horizontal carousel scroll container from pb-4 to pb-10.

Changes

Initiatives Carousel Spacing

Layer / File(s)	Summary
Scroll container bottom padding src/components/Initiatives.tsx	Bottom padding class on the horizontally scrollable row changed from pb-4 to pb-10.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~1 minute

Poem

A bunny hopped through carousels wide,
And nudged the padding just a little to the side.
From four to ten, the spacing grew,
More room below for initiatives to view!
🐇✨

🚥 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 describes preventing vertical overflow on hover, which directly addresses the PR's core objective of fixing the overflow issue caused by the Apply button appearing on card hover.
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.}