Commit 24122b17629451e4614d34f3b771769e87b99d79 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-03-09 09:28:30-07:00
committer	Julius Marminge <jmarminge@gmail.com> 2026-03-09 10:01:46-07:00
log	24122b17629451e4614d34f3b771769e87b99d79
tree	020c606cb970fb5162cabd1918d660cdc1afde47
parent	081a6dacdbb623da0b560360384d58cb95a484e5

Stabilize toast stacking offsets to prevent hover flicker

- derive toast indices and Y offsets from the filtered visible toasts
- pass frontmost height and per-toast layout vars to the viewport/item styles
- add unit tests for visible toast layout calculations and height normalization

3 files changed, 93 insertions(+), 5 deletions(-)

apps
- web
  - src
    components
    ui
    toast.logic.test.ts
    toast.logic.ts
    toast.tsx

apps/web/src/components/ui/toast.logic.test.ts+40-1

...	@@ -1,5 +1,5 @@	...	@@ -1,5 +1,5 @@
1	import { assert, describe, it } from "vitest";	1	import { assert, describe, it } from "vitest";
2	import { shouldHideCollapsedToastContent } from "./toast.logic";	2	import { buildVisibleToastLayout, shouldHideCollapsedToastContent } from "./toast.logic";
3		3
4	describe("shouldHideCollapsedToastContent", () => {	4	describe("shouldHideCollapsedToastContent", () => {
5	it("keeps a single visible toast readable", () => {	5	it("keeps a single visible toast readable", () => {
...	@@ -14,3 +14,42 @@ describe("shouldHideCollapsedToastContent", () => {	...	@@ -14,3 +14,42 @@ describe("shouldHideCollapsedToastContent", () => {
14	assert.equal(shouldHideCollapsedToastContent(1, 3), true);	14	assert.equal(shouldHideCollapsedToastContent(1, 3), true);
15	});	15	});
16	});	16	});
		17
		18	describe("buildVisibleToastLayout", () => {
		19	it("computes indices and offsets from the visible subset", () => {
		20	const visibleToasts = [{ id: "a", height: 48 }, { id: "b", height: 72 }, { id: "c", height: 24 }];
		21
		22	const layout = buildVisibleToastLayout(visibleToasts);
		23
		24	assert.equal(layout.frontmostHeight, 48);
		25	assert.deepEqual(
		26	layout.items.map(({ toast, visibleIndex, offsetY }) => ({
		27	id: toast.id,
		28	visibleIndex,
		29	offsetY,
		30	})),
		31	[
		32	{ id: "a", visibleIndex: 0, offsetY: 0 },
		33	{ id: "b", visibleIndex: 1, offsetY: 48 },
		34	{ id: "c", visibleIndex: 2, offsetY: 120 },
		35	],
		36	);
		37	});
		38
		39	it("treats missing heights as zero", () => {
		40	const layout = buildVisibleToastLayout([{ id: "a" }, { id: "b", height: undefined }, { id: "c", height: 30 }]);
		41
		42	assert.equal(layout.frontmostHeight, 0);
		43	assert.deepEqual(
		44	layout.items.map(({ toast, offsetY }) => ({
		45	id: toast.id,
		46	offsetY,
		47	})),
		48	[
		49	{ id: "a", offsetY: 0 },
		50	{ id: "b", offsetY: 0 },
		51	{ id: "c", offsetY: 0 },
		52	],
		53	);
		54	});
		55	});

apps/web/src/components/ui/toast.logic.ts+37

...	@@ -7,3 +7,40 @@ export function shouldHideCollapsedToastContent(	...	@@ -7,3 +7,40 @@ export function shouldHideCollapsedToastContent(
7	if (visibleToastCount <= 1) return false;	7	if (visibleToastCount <= 1) return false;
8	return visibleToastIndex > 0;	8	return visibleToastIndex > 0;
9	}	9	}
		10
		11	type ToastWithHeight = {
		12	height?: number \| null \| undefined;
		13	};
		14
		15	type VisibleToastLayoutItem<TToast extends object> = {
		16	toast: TToast;
		17	visibleIndex: number;
		18	offsetY: number;
		19	};
		20
		21	export function buildVisibleToastLayout<TToast extends object>(
		22	visibleToasts: readonly (TToast & ToastWithHeight)[],
		23	): {
		24	frontmostHeight: number;
		25	items: VisibleToastLayoutItem<TToast & ToastWithHeight>[];
		26	} {
		27	let offsetY = 0;
		28
		29	return {
		30	frontmostHeight: normalizeToastHeight(visibleToasts[0]?.height),
		31	items: visibleToasts.map((toast, visibleIndex) => {
		32	const item = {
		33	toast,
		34	visibleIndex,
		35	offsetY,
		36	};
		37
		38	offsetY += normalizeToastHeight(toast.height);
		39	return item;
		40	}),
		41	};
		42	}
		43
		44	function normalizeToastHeight(height: number \| null \| undefined): number {
		45	return typeof height === "number" && Number.isFinite(height) && height > 0 ? height : 0;
		46	}

apps/web/src/components/ui/toast.tsx+16-4

 @@ -1,7 +1,7 @@
 "use client";
 import { Toast } from "@base-ui/react/toast";
-import { useEffect } from "react";
+import { useEffect, type CSSProperties } from "react";
 import { useParams } from "@tanstack/react-router";
 import { ThreadId } from "@t3tools/contracts";
 import {
 @@ -14,7 +14,7 @@ import {
 import { cn } from "~/lib/utils";
 import { buttonVariants } from "~/components/ui/button";
-import { shouldHideCollapsedToastContent } from "./toast.logic";
+import { buildVisibleToastLayout, shouldHideCollapsedToastContent } from "./toast.logic";
 type ThreadToastData = {
   threadId?: ThreadId | null;
 @@ -158,6 +158,7 @@ function Toasts({ position = "top-right" }: { position: ToastPosition }) {
   const visibleToasts = toasts.filter((toast) =>
     shouldRenderForActiveThread(toast.data, activeThreadId),
   );
+  const visibleToastLayout = buildVisibleToastLayout(visibleToasts);
   useEffect(() => {
     const activeToastIds = new Set(toasts.map((toast) => toast.id));
 @@ -183,12 +184,17 @@ function Toasts({ position = "top-right" }: { position: ToastPosition }) {
         )}
         data-position={position}
         data-slot="toast-viewport"
+        style={
+          {
+            "--toast-frontmost-height": `${visibleToastLayout.frontmostHeight}px`,
+          } as CSSProperties
+        }
       >
-        {visibleToasts.map((toast, visibleIndex) => {
+        {visibleToastLayout.items.map(({ toast, visibleIndex, offsetY }) => {
           const Icon = toast.type ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS] : null;
           const hideCollapsedContent = shouldHideCollapsedToastContent(
             visibleIndex,
-            visibleToasts.length,
+            visibleToastLayout.items.length,
           );
           return (
 @@ -241,6 +247,12 @@ function Toasts({ position = "top-right" }: { position: ToastPosition }) {
               )}
               data-position={position}
               key={toast.id}
+              style={
+                {
+                  "--toast-index": visibleIndex,
+                  "--toast-offset-y": `${offsetY}px`,
+                } as CSSProperties
+              }
               swipeDirection={
                 position.includes("center")
                   ? [isTop ? "up" : "down"]