fix: prevent button clipping on hover in Hero section#140
fix: prevent button clipping on hover in Hero section#140MD-Mushfiqur123 wants to merge 1 commit into
Conversation
WalkthroughThe Hero component's root animated container was simplified by removing the ChangesHero overflow-hidden removal
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/lib/components/blocks/home/Hero.tsxOops! Something went wrong! :( ESLint: 9.30.0 TypeError: Converting circular structure to JSON 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/lib/components/blocks/home/Hero.tsx (2)
1-48:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winAdd "use client" directive to enable client-side features.
This component uses client-side only features:
useRouterhook from 'next/navigation' (line 2, 8)- Framer Motion animations with
whileHoverandwhileTap(lines 10, 31, 36)Without the "use client" directive, this component will fail in Next.js App Router. As per coding guidelines, ensure "use client" is used when client-side features are required.
🔧 Add "use client" directive
+"use client"; + import { Button } from "`@/lib/components/ui/button`"; import { useRouter } from "next/navigation";As per coding guidelines for NextJS: Components must include "use client" when using client-side features and ensure only features that allow pure client-side rendering are used.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/lib/components/blocks/home/Hero.tsx` around lines 1 - 48, This component uses client-only hooks and Framer Motion (useRouter, motion, whileHover, whileTap) so add the "use client" directive as the very first line of the file to enable client-side rendering; ensure it appears before any imports in the Hero component file so useRouter and Framer Motion animations work correctly.
37-37:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUse Link or anchor tag for external documentation URL.
router.push()is intended for internal client-side navigation within the Next.js app. For external URLs like documentation links, use an anchor tag withtarget="_blank"andrel="noopener noreferrer"for security, or configure the Next.jsLinkcomponent appropriately.🔗 Recommended fix using anchor tag
<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}> - <Button size={"lg"} variant={"outline"} onClick={() => router.push("https://docs.stability.nexus/gluon-protocols/gluon-overview")}> + <Button size={"lg"} variant={"outline"} asChild> + <a href="https://docs.stability.nexus/gluon-protocols/gluon-overview" target="_blank" rel="noopener noreferrer"> Read Docs + </a> </Button> </motion.div>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/lib/components/blocks/home/Hero.tsx` at line 37, The Button currently uses router.push in its onClick handler (onClick={() => router.push("https://docs.stability.nexus/gluon-protocols/gluon-overview")}) which is meant for internal navigation; replace this with an anchor-based solution: render the Button as an anchor (<a> or your Button's "as" / "component" prop if available) pointing to the external URL, add target="_blank" and rel="noopener noreferrer", and remove the router.push usage so the Button behaves as a proper external link.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/lib/components/blocks/home/Hero.tsx`:
- Around line 1-48: This component uses client-only hooks and Framer Motion
(useRouter, motion, whileHover, whileTap) so add the "use client" directive as
the very first line of the file to enable client-side rendering; ensure it
appears before any imports in the Hero component file so useRouter and Framer
Motion animations work correctly.
- Line 37: The Button currently uses router.push in its onClick handler
(onClick={() =>
router.push("https://docs.stability.nexus/gluon-protocols/gluon-overview")})
which is meant for internal navigation; replace this with an anchor-based
solution: render the Button as an anchor (<a> or your Button's "as" /
"component" prop if available) pointing to the external URL, add target="_blank"
and rel="noopener noreferrer", and remove the router.push usage so the Button
behaves as a proper external link.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 597ecde0-0c4b-457a-b77b-e0f74bd41c62
📒 Files selected for processing (1)
src/lib/components/blocks/home/Hero.tsx
1 participant
Closes #139
Removes
overflow-hiddenfrom the Hero section's parent motion.div which was clipping the CTA buttons when they scale up (via framer-motion whileHover: scale 1.05).Summary by CodeRabbit