Fix pet carousel: selection stuck, border clipped on hover

[oBecks]

User description

Summary

• Clicking a pet card in the dashboard carousel only worked when the click also happened to trigger a scroll (via scrollIntoView). On wider viewports where every card is already fully visible, scrollIntoView on an already-in-view card is a no-op, so the IntersectionObserver-driven selection state never updated — clicks silently did nothing, and whatever card was last scrolled to stayed selected permanently.
• Fix: clicking a card now sets the selection directly, independent of whether an actual scroll occurs. Swipe/scroll-driven selection (via the observer) is unchanged.
• Also fixed the hovered card's orange border getting clipped at the top — the scroll strip had bottom padding (pb-2) but no top padding, so the hover lift transform pushed the card's rounded border past the container's clip boundary.

Test plan

• tsc --noEmit passes
• Verified the click-selection fix against an isolated repro of the exact hook logic (old code: clicking a fully-visible card left the wrong card selected; new code: selection updates immediately)
• Manually click through the dashboard carousel to confirm pet selection and hover border render correctly

---

Generated description

Below is a concise technical summary of the changes proposed in this PR:
Fix dashboard pet carousel selection by exposing setCenteredId from useCenteredCard and applying it directly on card clicks, while preserving observer-based swipe selection. Add top padding and restructure card styling to prevent hover borders from being clipped.

Topic	Details
Hover border rendering	Add top spacing and move hover transforms and visual styles to an inner card container so lifted borders remain visible. Modified files (1) app/dashboard/_components/PetsCarousel.tsx Latest Contributors(2) User Commit Date beckomerrr@gmail.com Fix pet carousel: clic... August 28, 2026 oBecks Polish auth pages and ... August 28, 2026
Pet selection	Update PetsCarousel to select clicked pets immediately regardless of scrolling, while retaining smooth centering and observer-driven swipe behavior. Modified files (2) app/dashboard/_components/PetsCarousel.tsx app/dashboard/_components/useCenteredCard.ts Latest Contributors(2) User Commit Date beckomerrr@gmail.com Fix pet carousel: clic... August 28, 2026 oBecks Polish auth pages and ... August 28, 2026

_{Review this PR on Baz | Customize your next review}

Summary by CodeRabbit

• Bug Fixes

  • Pet selection now updates immediately when a card is clicked.
  • Smooth carousel scrolling is preserved while improving selection responsiveness.

• Style

  • Improved card hover and focus states.
  • Refined card entrance animations and added spacing above the carousel.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
commit-pet	Ready	Preview	Aug 28, 2026 11:01am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 84241092-819e-4c3a-a495-9891d698bb1a

📥 Commits

Reviewing files that changed from the base of the PR and between 43d1f90 and 756a5af.

📒 Files selected for processing (1)

• app/dashboard/_components/PetsCarousel.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• app/dashboard/_components/PetsCarousel.tsx

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

---

📝 Walkthrough

Walkthrough

The pet carousel now updates the selected pet immediately when a card is clicked. The centering hook exposes its setter. Card styling, focus states, hover states, and spacing are updated.

Changes

Pet carousel selection

Layer / File(s)	Summary
Expose centered card setter app/dashboard/_components/useCenteredCard.ts	useCenteredCard now returns setCenteredId with the existing centered ID, container ref, and registration callback.
Update selection on card clicks app/dashboard/_components/PetsCarousel.tsx	Card clicks set the centered pet before smooth scrolling. The carousel adds top padding, and card interaction styles move to an inner wrapper with group hover and focus states.

Estimated code review effort: 3 (Moderate) | ~15–30 minutes

Merge Risk:⚪ Minimal · up to 756a5

This localized change directly updates carousel selection on click and adds spacing to prevent hover-border clipping; no actionable merge-blocking risk remains after normal checks and review.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 2 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ 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 describes both primary fixes: immediate pet carousel selection and the clipped hover border.
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.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/pet-carousel-selection

---

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