updated card component classnames

[Dinkar30]

closes #16

Summary by CodeRabbit

• Style
  • Adjusted image container styling on card components, modifying overflow behavior and layering properties.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Modified the card component's image container to prevent cropping on hover. Removed overflow-hidden from the outer image div and added relative z-10 positioning to the Image element, allowing enlarged images to overflow card boundaries naturally.

Changes

Cohort / File(s)	Summary
Image overflow fix components/card.tsx	Removed overflow-hidden from image container div; added relative z-10 class to Image element to enable overflow behavior and establish z-index stacking context on hover.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Verify that removing overflow-hidden doesn't unintentionally affect other card elements
• Confirm z-10 establishes proper stacking order without conflicting with surrounding components

Poem

🐰 Images now dance free and bold,
No cropping cage to make them fold,
With z-10 they rise on high,
Overflowing 'neath the sky! ✨

Pre-merge checks and finishing touches

✅ 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 directly describes the main change in the pull request: updating classnames in the card component.
Linked Issues check	✅ Passed	The PR addresses issue #16 by removing overflow-hidden from the card component, allowing hovered images to overflow instead of being cropped.
Out of Scope Changes check	✅ Passed	All changes are scoped to resolving the image cropping issue; only card component classnames and z-index context were modified.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c9f4e3a and 07d6557.

📒 Files selected for processing (1)

• components/card.tsx (1 hunks)

🔇 Additional comments (1)

components/card.tsx (1)

26-26: Verify that overflowing images don't interfere with adjacent cards.

The z-10 positioning combined with the 5% scale increase will cause images to overflow and potentially cover portions of adjacent cards in a grid layout. This could create visual confusion or unintended interaction issues.

Please verify the visual appearance and interaction behavior when hovering over cards in the grid layout, especially checking for:

• Overlap with adjacent card borders or content
• Whether the overflow feels intentional or jarring
• Any click/interaction issues with adjacent cards

You can test this by opening the protocols page and hovering over the cards to observe the behavior.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Image corners won't respect the rounded container.

Removing overflow-hidden allows the image to overflow (achieving the PR goal), but the image will no longer be clipped to the container's rounded-md corners. This may result in sharp image corners extending beyond the rounded container boundary.

Consider adding rounded-md directly to the Image element on line 26 to maintain visual consistency:

-            className="relative z-10 h-64 w-full object-contain transition duration-500 group-hover:scale-105"
+            className="relative z-10 h-64 w-full rounded-md object-contain transition duration-500 group-hover:scale-105"

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<div className="relative h-fit rounded-md">
	className="relative z-10 h-64 w-full rounded-md object-contain transition duration-500 group-hover:scale-105"

🤖 Prompt for AI Agents

In components/card.tsx around line 19 (container div) and the Image element at
line 26, removing overflow-hidden allowed the image to overflow but caused its
corners to ignore the container's rounded-md; add the rounded-md class directly
to the Image element (line 26) so the image itself is clipped to the same corner
radius as the container, ensuring visual consistency while keeping overflow
behavior; update the Image's className to include "rounded-md" (and preserve any
existing classes like sizing or object-fit).