Skip to content

Fix protocol card image cropping on hover #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aman8543 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix protocol card image cropping on hover #23

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 30 additions & 31 deletions components/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,36 @@ interface Props {
const Card: React.FC<Props> = ({ index, image, title, description, link }) => {
return (
<Link href={link}>
<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="relative h-fit overflow-hidden rounded-md">
<Image
src={image}
alt="Protocol Logo"
loading="lazy"
width="700"
height="700"
className="h-64 w-full object-contain transition duration-500 group-hover:scale-105"
/>
</div>
<div className="relative mt-4 h-fit">
<h3 className="text-center text-2xl font-semibold leading-6 tracking-tight text-gray-800">
{title}
</h3>
<p className="mb-6 mt-2 text-center text-black">
{description.split("\n").map((item, key) => {
return (
<span key={key}>
{item}
<br />
</span>
)
})}
</p>
</div>
</div>
</Link>
<div
key={index}
Copy link

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ 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.

className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl"
>
<div className="relative h-fit overflow-visible rounded-md">
<Image
src={image}
alt="Protocol Logo"
loading="lazy"
width="700"
height="700"
className="h-64 w-full object-contain transition duration-500 group-hover:scale-105"
/>
</div>
<div className="relative mt-4 h-fit">
<h3 className="text-center text-2xl font-semibold leading-6 tracking-tight text-gray-800">
{title}
</h3>
<p className="mb-6 mt-2 text-center text-black">
{description.split("\n").map((item, key) => (
<span key={key}>
{item}
<br />
</span>
))}
</p>
</div>
</div>
</Link>

)
}

Expand Down