← All changes | resources/js/components/ui/toast.tsx +15 -1 3.0.6 → 3.0.17 View file →

		@@ -85,12 +85,26 @@
85	85	const ToastContainer: React.FC<ToastContainerProps> = ({
86	86	toasts,
87	87	onRemove,
88	88	}) => {
	89	+ // Sit below the WordPress admin bar (and above it in stacking order) so
	90	+ // toasts aren't hidden behind it on the front-end account page. The admin
	91	+ // bar is 46px on small screens (<=782px) and 32px otherwise; +16px gap.
	92	+ const topOffset = React.useMemo(() => {
	93	+ if (typeof document === "undefined") return 16;
	94	+ if (!document.body.classList.contains("admin-bar")) return 16;
	95	+ const small = typeof window !== "undefined" && window.innerWidth <= 782;
	96	+ return (small ? 46 : 32) + 16;
	97	+ }, []);
	98	+
89	99	if (toasts.length === 0) return null;
90	100
91	101	return (
92		- <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none">
	102	+ <div
	103	+ style={{ top: topOffset }}
	104	+ // z-index above the WP admin bar (99999) so it never hides the toast.
	105	+ className="fixed right-4 z-[100000] flex flex-col gap-2 pointer-events-none"
	106	+ >
93	107	{toasts.map((toast) => (
94	108	<ToastItem key={toast.id} toast={toast} onRemove={onRemove} />
95	109	))}
96	110	</div>