fixed-protocol-image-cropping-on-hover

[aryanraj2005-me]

• Fixed protocol image cropping on hover by adjusting card and image overflow styles, ensuring scaled images are not clipped by container boundaries and remain fully visible during interaction.

Summary by CodeRabbit

• Bug Fixes
  • Fixed Card component rendering to properly display content at component boundaries.

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

[coderabbitai]

Walkthrough

The Card component's CSS overflow behavior has been modified, changing the outer container and inner image wrapper from overflow-hidden to overflow-visible. This allows content to overflow beyond the component's boundaries without being clipped.

Changes

Cohort / File(s)	Summary
Card component styling components/card.tsx	Updated overflow properties from hidden to visible in outer container and inner image wrapper

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Visual rendering impact: Verify that the overflow-visible change produces intended visual results and doesn't introduce unwanted clipping or layout issues
• Component dependencies: Confirm no child components within Card rely on the previous overflow-hidden clipping behavior

Poem

🐰 A Card's bounds grow loose and wide,
No hidden overflow to hide,
Content spills beyond the frame,
Yet harmony and flow remain the same! ✨

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 pull request title clearly and specifically describes the main change: fixing protocol image cropping on hover by adjusting overflow styles.
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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

components/card.tsx (1)

19-27: Image wrapper overflow-visible compounds layout issues.

Changing the image wrapper to overflow-visible allows the scaled image (105% on hover) to extend beyond its container. Combined with the outer container's overflow-visible, this creates multiple issues:

• The rounded-md class becomes ineffective since content can overflow the rounded corners.
• The visual hierarchy and containment are lost.
• Adjacent elements may be obscured during hover.

The current approach attempts to prevent cropping during the scale animation, but overflow-visible is not the optimal solution for interactive scale effects within card layouts.

📜 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 288083c.

📒 Files selected for processing (1)

• components/card.tsx (1 hunks)

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Overflow-visible may cause layout issues and break visual design.

Adding overflow-visible to the card container allows content to extend beyond the border, shadow, and rounded corners. This can cause several problems:

• Visual inconsistency: Overflowing content extends past the card's visual boundaries (border and shadow), breaking the intended design containment.
• Adjacent card overlap: In a grid layout, scaled images will overlap neighboring cards without proper z-index management.
• Lost clickable area: Overflowing portions may not trigger the Link wrapper correctly.

Consider these alternative approaches:

Solution 1 (Recommended): Keep overflow-hidden and adjust the scale effect

-        className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl overflow-visible"
+        className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl overflow-hidden transition-all duration-500 hover:shadow-2xl hover:z-10"

Then scale down the image initially so hover brings it to 100%:

-            className="h-64 w-full object-contain transition duration-500 group-hover:scale-105"
+            className="h-64 w-full object-contain transition duration-500 scale-95 group-hover:scale-100"

Solution 2: Add z-index management if overflow is necessary

-        className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl overflow-visible"
+        className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl overflow-visible hover:z-10"

However, this still breaks the visual design boundaries and requires careful grid spacing.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents

In components/card.tsx around line 17, the card container uses overflow-visible
which lets child content bleed past borders/shadows and cause layout/interaction
issues; change overflow-visible to overflow-hidden to contain visuals, then
adjust the image scaling behavior so hover scales from a slightly smaller base
(e.g., set the image to scale-95 normally and scale-100 on hover) so it doesn't
overflow when animating; if overflow must be preserved, instead keep
overflow-visible but add explicit z-index to the hovered element and increase
grid spacing to prevent overlap, though the preferred fix is replacing
overflow-visible with overflow-hidden and tweaking the image scale transition.