From 36bf530f52c21e275352b0abd8d95b15b85298f2 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 5 Aug 2026 16:32:53 +0300
Subject: [PATCH] web: add popover-transition to standardize fade in transition

Signed-off-by: eti <eti@eti.tf>
---
 web/src/app.css                               | 26 ++++++++++++++++
 .../components/reaction/ReactionPicker.svelte |  2 +-
 web/src/lib/components/ui/Combobox.svelte     | 30 +------------------
 web/src/lib/components/ui/Dropdown.svelte     |  2 +-
 4 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index de04d3b6..acaf90b3 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -233,6 +233,32 @@
 	line-height: 1.25rem;
 }
 
+@utility popover-transition {
+	opacity: 0;
+	scale: 0.98;
+	transition:
+		opacity 120ms ease-out,
+		scale 120ms ease-out,
+		overlay 120ms allow-discrete,
+		display 120ms allow-discrete;
+
+	&:popover-open {
+		opacity: 1;
+		scale: 1;
+	}
+
+	@starting-style {
+		&:popover-open {
+			opacity: 0;
+			scale: 0.98;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+}
+
 @layer base {
 	@font-face {
 		font-family: "InterVariable";
diff --git a/web/src/lib/components/reaction/ReactionPicker.svelte b/web/src/lib/components/reaction/ReactionPicker.svelte
index 360fdaeb..1a45a14a 100644
--- a/web/src/lib/components/reaction/ReactionPicker.svelte
+++ b/web/src/lib/components/reaction/ReactionPicker.svelte
@@ -68,7 +68,7 @@
 	id={popoverId}
 	popover="auto"
 	style={`position-anchor: ${anchorName}`}
-	class="inset-auto mt-1 h-fit w-max rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular [position-area:bottom_center]"
+	class="inset-auto mt-1 h-fit w-max popover-transition rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular [position-area:bottom_center]"
 >
 	<div class="grid grid-cols-4 p-1">
 		{#each ORDERED_REACTION_KINDS as kind (kind)}
diff --git a/web/src/lib/components/ui/Combobox.svelte b/web/src/lib/components/ui/Combobox.svelte
index 94250ea5..17ae8481 100644
--- a/web/src/lib/components/ui/Combobox.svelte
+++ b/web/src/lib/components/ui/Combobox.svelte
@@ -9,7 +9,7 @@
 			trigger: "flex min-h-9 cursor-pointer items-center gap-2 px-2.5 py-1",
 			value: "min-w-0 flex-1 truncate text-left typography-paragraph-regular",
 			panel:
-				"combobox-panel fixed z-50 m-0 hidden max-h-[min(24rem,calc(100dvh-1rem))] w-72 max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-0 text-foreground-default shadow-regular open:flex dark:shadow-none",
+				"combobox-panel fixed z-50 m-0 hidden max-h-[min(24rem,calc(100dvh-1rem))] w-72 max-w-[calc(100vw-1rem)] popover-transition flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-0 text-foreground-default shadow-regular open:flex dark:shadow-none",
 			search: "shrink-0 border-b border-border-default p-2",
 			list: "min-h-0 flex-1 overflow-y-auto p-1",
 			groupHeading: "px-2 pt-2 pb-1 font-semibold text-foreground-muted first:pt-1",
@@ -357,32 +357,4 @@
 			position-area: block-end span-inline-start;
 		}
 	}
-
-	.combobox-panel {
-		opacity: 0;
-		scale: 0.98;
-		transition:
-			opacity 120ms ease-out,
-			scale 120ms ease-out,
-			overlay 120ms allow-discrete,
-			display 120ms allow-discrete;
-	}
-
-	.combobox-panel:popover-open {
-		opacity: 1;
-		scale: 1;
-	}
-
-	@starting-style {
-		.combobox-panel:popover-open {
-			opacity: 0;
-			scale: 0.98;
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.combobox-panel {
-			transition: none;
-		}
-	}
 </style>
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index d82f6f08..8674d6c1 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -6,7 +6,7 @@
 		slots: {
 			root: "relative inline-block",
 			plainTrigger: "min-h-0 gap-1 border-0 bg-transparent p-0 text-inherit hover:bg-transparent",
-			menu: "dropdown-menu fixed z-50 m-0 max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] divide-y divide-border-default overflow-auto rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular"
+			menu: "dropdown-menu fixed z-50 m-0 max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] popover-transition divide-y divide-border-default overflow-auto rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular"
 		},
 		variants: {
 			align: {
-- 
2.51.2