From 97e0a2a06c830a7597dbe8a3e7ddb37fdd652e7b Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 23 Sep 2026 01:05:00 +0200
Subject: [PATCH] web/ui: centre tooltip arrows while the bubble scales in

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/ui/Tooltip.stories.svelte  | 33 +++++++++++++++++++
 web/src/lib/components/ui/Tooltip.svelte      | 11 +++++--
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/ui/Tooltip.stories.svelte b/web/src/lib/components/ui/Tooltip.stories.svelte
index 5d57e1bb5..3b4a251f8 100644
--- a/web/src/lib/components/ui/Tooltip.stories.svelte
+++ b/web/src/lib/components/ui/Tooltip.stories.svelte
@@ -1,5 +1,6 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect, userEvent, waitFor, within } from "storybook/test";
 	import Plus from "$icon/plus";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Tooltip from "$lib/components/ui/Tooltip.svelte";
@@ -89,3 +90,35 @@
 		</Tooltip>
 	</div>
 </Story>
+
+<Story
+	name="Arrow centred"
+	asChild
+	play={async ({ canvasElement }) => {
+		const trigger = within(canvasElement).getByRole("button", { name: "Add" });
+		await userEvent.hover(trigger);
+		const bubble = document.getElementById(trigger.getAttribute("aria-describedby")!)!;
+		const centre = trigger.getBoundingClientRect().left + trigger.offsetWidth / 2;
+		const arrow = () => Number.parseFloat(bubble.style.getPropertyValue("--tooltip-arrow"));
+		await waitFor(() => expect(arrow()).toBeGreaterThan(0));
+		await waitFor(() =>
+			expect(Math.abs(bubble.getBoundingClientRect().left + arrow() - centre)).toBeLessThan(
+				0.5
+			)
+		);
+
+		const layoutLeft = bubble.getBoundingClientRect().left;
+		bubble.style.transition = "none";
+		bubble.style.scale = "0.5";
+		window.dispatchEvent(new Event("resize"));
+		await waitFor(() => expect(Math.abs(layoutLeft + arrow() - centre)).toBeLessThan(0.5));
+		bubble.style.removeProperty("scale");
+		bubble.style.removeProperty("transition");
+	}}
+>
+	<div class="flex justify-center p-5xl">
+		<Tooltip content="A label much wider than its trigger">
+			<Button variant="ghost" size="mini" icon={Plus} aria-label="Add" />
+		</Tooltip>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Tooltip.svelte b/web/src/lib/components/ui/Tooltip.svelte
index ac2966e40..bfa6da2ff 100644
--- a/web/src/lib/components/ui/Tooltip.svelte
+++ b/web/src/lib/components/ui/Tooltip.svelte
@@ -98,9 +98,16 @@
 
 	const measureArrow = () => {
 		if (!arrow || !bubbleEl || !wrapperEl) return;
-		const bubble = bubbleEl.getBoundingClientRect();
+		const box = bubbleEl.getBoundingClientRect();
 		const trigger = wrapperEl.getBoundingClientRect();
-		if (bubble.width === 0) return;
+		if (box.width === 0) return;
+		const style = getComputedStyle(bubbleEl);
+		const width = Number.parseFloat(style.width);
+		const height = Number.parseFloat(style.height);
+		const [originX, originY] = style.transformOrigin.split(" ").map(Number.parseFloat);
+		const left = box.left - originX * (1 - box.width / width);
+		const top = box.top - originY * (1 - box.height / height);
+		const bubble = { left, top, width, height };
 
 		const vertical = side === "top" || side === "bottom";
 		measuredSide = vertical
-- 
2.51.2