Fix protocol card image cropping on hover

[Aman8543]

#Summary
Fixes protocol card hover behavior where images were cropped when scaled.

Change

• Allowed image wrapper overflow so scaled images are not clipped on hover.

Notes

I noticed existing PRs (#17, #19, #20) that address this issue.
This PR is submitted as part of a hackathon contribution and follows the same intended fix.

Summary by CodeRabbit

Release Notes

• Refactor
  • Updated Card component structure and element organization for improved layout consistency.
  • Enhanced image overflow handling for better visual presentation.
  • Refined styling with minor adjustments to ensure improved consistency across the component interface.

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

[coderabbitai]

Walkthrough

The Card component is restructured to remove the Link wrapper from the root element and render a plain div instead. The image container's overflow property changes from hidden to visible, and minor code cleanup is applied to className and description rendering syntax.

Changes

Cohort / File(s)	Summary
Card component refactoring components/card.tsx	Removed Link wrapper from root element and replaced with div; changed image container overflow from hidden to visible; cleaned up title className spacing; simplified description rendering with concise arrow function

Possibly related issues

• Cropping when hovering #16 — The overflow-hidden to overflow-visible change directly addresses the hover-cropping behavior for enlarged images described in this issue.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify that removing the Link wrapper doesn't break navigation expectations or SEO if the card previously served as a primary navigation element
• Confirm that overflow-visible on the image container doesn't cause unintended layout shifts or overlap with sibling elements

Poem

🐰 A card sheds its Link, now dancing free,
Images overflow with glee!
No cropping, no hiding—just beauty displayed,
Divs and visibility, perfectly made!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly matches the main change: removing Link wrapper and changing image overflow to fix image cropping on hover in the Card component.
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

🧹 Nitpick comments (1)

components/card.tsx (1)

20-27: Consider optimizing image dimensions and improving alt text.

Two minor improvements:

1. Image dimensions: The width and height props (700x700) significantly exceed the display size (h-64 = 256px). Consider setting these closer to the actual rendered size for optimal performance.

2. Alt text: "Protocol Logo" is generic. Consider using the title prop for a more descriptive alt text: alt={title} or alt={\${title} logo`}`.

Apply this diff:

     <Image
       src={image}
-      alt="Protocol Logo"
+      alt={`${title} logo`}
       loading="lazy"
-      width="700"
-      height="700"
+      width="300"
+      height="300"
       className="h-64 w-full object-contain transition duration-500 group-hover:scale-105"
     />

📜 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 f0f9d3e.

📒 Files selected for processing (1)

• components/card.tsx (1 hunks)

🔇 Additional comments (1)

components/card.tsx (1)

19-28: The overflow-visible change correctly fixes image cropping on hover.

The change from overflow-hidden to overflow-visible allows the image to scale to 105% without being clipped. With the grid layouts using gap-8 spacing (32px), the ~13px expansion from the 5% scale is fully contained and won't cause overlap or layout issues.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Remove the key prop from inside the Card component.

The key prop should be applied at the parent level when rendering multiple Card components in a list, not inside the component definition itself. This placement serves no purpose and violates React conventions.

Apply this diff to remove the key prop:

-  <div
-    key={index}
-    className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl"
-  >
+  <div className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl">

If keys are needed, apply them at the parent level:

{cards.map((card, index) => (
  <Card key={index} {...card} />
))}

🤖 Prompt for AI Agents

In components/card.tsx around line 16, remove the inline key prop from the Card
component JSX (delete "key={index}") because keys belong on the parent when
rendering lists; then ensure any list rendering of Card in parent components
supplies a stable key (e.g., card.id or index) when mapping over cards.