From 1a33366615fc5501bc860b72d3898f4c03e38226 Mon Sep 17 00:00:00 2001
From: jackwener <jakevingoo@gmail.com>
Date: Wed, 24 Jun 2026 21:47:11 +0800
Subject: [PATCH] fix(ui): drop layout-trigger properties from Tooltip
 transitions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Kenji aesthetic audit reminder 4/6 (msg `6cc0e04d` 2026-06-24,
finding #2): Tooltip is a high-frequency hover/focus surface and
should use instant positioning + compositor-only popup transitions.
Two sites violated:

1. Positioner: `transition-[top,left,right,bottom,transform]`
   — `top` / `left` / `right` / `bottom` are layout-trigger
   properties. Every reposition (e.g. anchor moved by scroll, or
   side flipped on collision) ran through layout + paint instead
   of GPU compositor. Reduced to `transition-transform` so the
   transform-based reposition still tweens smoothly; the layout
   positioning happens instantly off-frame.

2. Popup: `transition-[width,height,scale,opacity]` — `width` /
   `height` are layout-trigger. Reduced to `transition-[scale,opacity]`,
   which is what the data-starting-style / data-ending-style scale-98
   + opacity-0 actually animate. The popup-width / popup-height
   CSS vars still set the size; just no longer transitioned.

Net behavior: tooltip pops in/out via scale+fade (compositor),
repositions via transform (compositor). Layout properties are
applied instantly per frame instead of crossfading.

Drawer's `transition-[transform,box-shadow,height,background-color]`
and Tabs' `transition-[width,translate]` indicator are flagged in
kenji's audit but deferred — both interact with swipe gesture / tab
sizing logic and need a focused PR with visual smoke verification.

Scoped to 2 lines in 1 file to keep merge surface minimal with the
in-flight PRs #202 / #204 / #206.
---
 packages/ui/src/primitives/tooltip.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/primitives/tooltip.tsx b/packages/ui/src/primitives/tooltip.tsx
index bb0cb4eba2..ec15d72df2 100644
--- a/packages/ui/src/primitives/tooltip.tsx
+++ b/packages/ui/src/primitives/tooltip.tsx
@@ -39,14 +39,14 @@ export function TooltipPopup({
       <TooltipPrimitive.Positioner
         align={align}
         anchor={anchor}
-        className="z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none"
+        className="z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-transform data-instant:transition-none"
         data-slot="tooltip-positioner"
         side={side}
         sideOffset={sideOffset}
       >
         <TooltipPrimitive.Popup
           className={cn(
-            "relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) text-balance rounded-md border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs shadow-md/5 transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:duration-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) text-balance rounded-md border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs shadow-md/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:duration-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
             className,
           )}
           data-slot="tooltip-popup"