From 4f3d3dc3b3ee26749d80ddc6b85d8a3a774b8481 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Sun, 28 Jun 2026 15:50:33 +0200 Subject: [PATCH] Fix dropdown popup edge weight and close animation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The popup stacked a CSS border on top of shadow-5, whose first layer is already a 0 0 0 1px sand-a3 hairline ring, so the edge rendered as two 1px lines. Drop the redundant border and let the shadow provide the single hairline. Also transition the scale property instead of transform: Tailwind v4 maps scale-95 to the CSS scale property, so the old transform,opacity list never animated the scale and the close snapped. Animate scale and opacity with an explicit 150ms ease-out so open and close are smooth. Signed-off-by: Émile Ré --- packages/ui/src/v2/Dropdown/variants.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/v2/Dropdown/variants.ts b/packages/ui/src/v2/Dropdown/variants.ts index 96d6a90cf..12b5dcc8a 100644 --- a/packages/ui/src/v2/Dropdown/variants.ts +++ b/packages/ui/src/v2/Dropdown/variants.ts @@ -19,8 +19,8 @@ import { tv } from "tailwind-variants/lite"; export const dropdownPopup = tv({ base: [ - "min-w-40 origin-(--transform-origin) rounded-3 border border-sand-a2 bg-sand-1 p-2 shadow-5 outline-none", - "transition-[transform,opacity] data-starting-style:scale-95 data-starting-style:opacity-0", + "min-w-40 origin-(--transform-origin) rounded-3 bg-sand-1 p-2 shadow-5 outline-none", + "transition-[scale,opacity] duration-150 ease-out data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:scale-95 data-ending-style:opacity-0", ], });