From 87331f0a3abcc863ccf5ee4a8e55eeea2c0c3f75 Mon Sep 17 00:00:00 2001
From: ozer <109994179+ddoemonn@users.noreply.github.com>
Date: Tue, 2 Sep 2025 16:25:31 +0300
Subject: [PATCH] fix(availability): prevent hover animation jump when
 switching days (#22209)

* fix(availability): prevent hover animation jump when switching days

* Update CellHighlightContainer.tsx

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
---
 .../components/CellHighlightContainer.tsx     | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/features/timezone-buddy/components/CellHighlightContainer.tsx b/packages/features/timezone-buddy/components/CellHighlightContainer.tsx
index b24bd42995..3722a7b0ed 100644
--- a/packages/features/timezone-buddy/components/CellHighlightContainer.tsx
+++ b/packages/features/timezone-buddy/components/CellHighlightContainer.tsx
@@ -13,20 +13,31 @@ export function CellHighlightContainer({ children }: { children: React.ReactNode
 
   const [isAnimating, setIsAnimating] = useState(false);
   const componentContainerRef = useRef<HTMLDivElement>(null);
-  const { x, y, height, isHover, updateDimensions, setContainerRef } = useStore(store, (state) => state);
+  const { x, y, height, isHover, updateDimensions, setContainerRef, browsingDate, emitCellPosition } =
+    useStore(store, (state) => state);
+  const prevBrowsingDateRef = useRef(browsingDate);
 
   useEffect(() => {
     let timeout: NodeJS.Timeout | null = null;
     if (isHover) {
       setIsAnimating(true);
     } else {
-      timeout = setTimeout(() => setIsAnimating(false), 1000);
+      timeout = setTimeout(() => setIsAnimating(false), 300);
     }
     return () => {
       timeout && clearTimeout(timeout);
     };
   }, [isHover]);
 
+  useEffect(() => {
+    if (prevBrowsingDateRef.current?.getTime() !== browsingDate.getTime()) {
+      setIsAnimating(false);
+      // Clear hover state and position when date changes
+      emitCellPosition(-1);
+      prevBrowsingDateRef.current = browsingDate;
+    }
+  }, [browsingDate, emitCellPosition]);
+
   useLayoutEffect(() => {
     const handleUpdate = () => {
       updateDimensions();
@@ -50,13 +61,16 @@ export function CellHighlightContainer({ children }: { children: React.ReactNode
   return (
     <LazyMotion features={domAnimation}>
       <div
-        className="relative -mx-2 w-[calc(100%+16px)] overflow-x-scroll px-2 lg:-mx-6 lg:w-[calc(100%+48px)] lg:px-6"
+        className="relative -mx-2 w-[calc(100%+16px)] overflow-hidden overflow-x-scroll px-2 lg:-mx-6 lg:w-[calc(100%+48px)] lg:px-6"
         ref={componentContainerRef}>
         {children}
 
         <m.div
-          className="border-subtle opcaity-0 pointer-events-none absolute left-0 top-0 h-full rounded-lg border-2"
-          animate={{ x: [null, x], opacity: isAnimating || isHover ? 1 : 0.1 }}
+          className="border-subtle pointer-events-none absolute left-0 top-0 h-full rounded-lg border-2 opacity-0"
+          animate={{
+            x: [null, x],
+            opacity: isAnimating || isHover ? 1 : 0,
+          }}
           style={{ y, height, width: DAY_CELL_WIDTH }}
           transition={{ type: "spring", stiffness: 300, damping: 30 }}
         />