fix: add collisionBoundary for HoverCard Content to avoid flicker pro…

…blem (CaliCastle#33)
ZhiYuan1688 · Nov 9, 2023 · c5e2648 · c5e2648
2 parents 55f74e1 + cbc621c
commit c5e2648
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/components/links/PeekabooLink.tsx b/components/links/PeekabooLink.tsx
@@ -1,8 +1,7 @@
 'use client'
 
 import { clsxm } from '@zolplay/utils'
-import { AnimatePresence } from 'framer-motion'
-import { motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 import Image from 'next/image'
 import Link, { type LinkProps } from 'next/link'
 import React from 'react'
@@ -73,7 +72,10 @@ export function PeekabooLink({
  <AnimatePresence mode="wait">
  {isOpen && (
  <HoverCard.Portal forceMount>
- <HoverCard.Content asChild>
+ <HoverCard.Content
+ asChild
+ collisionPadding={250}
+ >
  <motion.div
  className="pointer-events-none relative z-50 w-[400px] origin-top overflow-hidden !p-0"
  initial={{