From 9a3b60bcd9aab55bfd4e0ccb79956f11bdfbf5d7 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 19 Jun 2025 22:26:36 -0500
Subject: [PATCH] Refine og hover behavior

---
 src/components/og/OGTooltip.tsx               |  2 +-
 .../primitives/TooltipPrimitive.tsx           | 34 +++++++++++++------
 src/recipe/PhotoRecipeOverlay.tsx             |  2 +-
 tailwind.css                                  | 34 +++++++++----------
 4 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/components/og/OGTooltip.tsx b/src/components/og/OGTooltip.tsx
index 9561254b..017a87f2 100644
--- a/src/components/og/OGTooltip.tsx
+++ b/src/components/og/OGTooltip.tsx
@@ -26,7 +26,7 @@ export default function OGTooltip({
           {...props}
           className={clsx(
             'overflow-hidden rounded-[0.25rem]',
-            'outline-medium bg-dim',
+            'outline-medium bg-extra-dim',
           )}
         />
         {caption && <div className={clsx(
diff --git a/src/components/primitives/TooltipPrimitive.tsx b/src/components/primitives/TooltipPrimitive.tsx
index 9762a503..45ded739 100644
--- a/src/components/primitives/TooltipPrimitive.tsx
+++ b/src/components/primitives/TooltipPrimitive.tsx
@@ -13,28 +13,36 @@ export default function TooltipPrimitive({
   children,
   className,
   classNameTrigger: classNameTriggerProp,
-  sideOffset = 10,
-  delayDuration = 100,
-  skipDelayDuration = 300,
-  supportMobile,
   color,
   keyCommand,
   keyCommandModifier,
+  supportMobile,
+  animateLarge,
   disableHoverableContent,
+  delayDuration = 100,
+  skipDelayDuration = 300,
+  align,
+  side,
+  sideOffset = 10,
   debug,
 }: {
   content?: ReactNode
   children: ReactNode
   className?: string
   classNameTrigger?: string
-  sideOffset?: number
-  delayDuration?: number
-  skipDelayDuration?: number
-  supportMobile?: boolean
   color?: ComponentProps<typeof MenuSurface>['color']
   keyCommand?: string
   keyCommandModifier?: ComponentProps<typeof KeyCommand>['modifier']
+  supportMobile?: boolean
+  animateLarge?: boolean
   disableHoverableContent?: boolean
+  // Tooltip.Provider
+  delayDuration?: number
+  skipDelayDuration?: number
+  // Tooltip.Content
+  align?: ComponentProps<typeof Tooltip.Content>['align']
+  side?: ComponentProps<typeof Tooltip.Content>['side']
+  sideOffset?: number
   debug?: boolean
 }) {
   const refTrigger = useRef<HTMLButtonElement>(null);
@@ -104,11 +112,17 @@ export default function TooltipPrimitive({
         <Tooltip.Portal>
           <Tooltip.Content
             ref={refContent}
+            align={align}
+            side={side}
             sideOffset={sideOffset}
             className={clsx(
               // Entrance animations
-              'data-[side=top]:animate-fade-in-from-bottom',
-              'data-[side=bottom]:animate-fade-in-from-top',
+              animateLarge
+                ? 'data-[side=top]:animate-fade-in-from-bottom-large'
+                : 'data-[side=top]:animate-fade-in-from-bottom',
+              animateLarge
+                ? 'data-[side=bottom]:animate-fade-in-from-top-large'
+                : 'data-[side=bottom]:animate-fade-in-from-top',
               // Extra collision padding
               'mx-2',
               // Z-index above
diff --git a/src/recipe/PhotoRecipeOverlay.tsx b/src/recipe/PhotoRecipeOverlay.tsx
index a39a71e2..8f748cb1 100644
--- a/src/recipe/PhotoRecipeOverlay.tsx
+++ b/src/recipe/PhotoRecipeOverlay.tsx
@@ -124,7 +124,7 @@ export default function PhotoRecipeOverlay({
               recipe={title}
               className={clsx(
                 'text-[15px]',
-                '[&>*>*>*]:text-black',
+                '[&>*>*>*>*]:text-black',
                 'tracking-wide',
               )}
             />
diff --git a/tailwind.css b/tailwind.css
index ef47229a..29731815 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -47,28 +47,26 @@ html {
     100% { opacity: 1; }
   }
 
-  --animate-fade-in-from-top: fade-in-from-top 0.25s ease-in-out;
+  --animate-fade-in-from-top: fade-in-from-top 0.2s ease-out;
+  --animate-fade-in-from-top-large: fade-in-from-top-large 0.2s ease-out;
   @keyframes fade-in-from-top {
-    0% {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0);
-    }
+    0% { opacity: 0; transform: translateY(-10px); }
+    100% { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes fade-in-from-top-large {
+    0% { opacity: 0; transform: translateY(-20px); }
+    100% { opacity: 1; transform: translateY(0); }
   }
 
-  --animate-fade-in-from-bottom: fade-in-from-bottom 0.25s ease-in-out;
+  --animate-fade-in-from-bottom: fade-in-from-bottom 0.2s ease-out;
+  --animate-fade-in-from-bottom-large: fade-in-from-bottom-large 0.2s ease-out;
   @keyframes fade-in-from-bottom {
-    0% {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0);
-    }
+    0% { opacity: 0; transform: translateY(10px); }
+    100% { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes fade-in-from-bottom-large {
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
   }
 
   --animate-rotate-pulse: rotate-pulse 0.75s linear infinite normal both running;