From abd2e6a3b73bbcde54c360c987612b360f003c5d Mon Sep 17 00:00:00 2001 From: mantrakp04 Date: Mon, 1 Jun 2026 15:32:02 -0700 Subject: [PATCH] fix(dashboard-ui): guard Web APIs in animated pill/tab indicators DesignPillToggle and DesignCategoryTabs called window.matchMedia and new ResizeObserver unconditionally, which throws in environments without those Web APIs (e.g. JSDOM tests, older browsers). Guard both before use; the one-shot updateSliderMetrics still runs so layout stays correct. (CodeRabbit) --- packages/dashboard-ui-components/src/components/pill-toggle.tsx | 2 ++ packages/dashboard-ui-components/src/components/tabs.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/dashboard-ui-components/src/components/pill-toggle.tsx b/packages/dashboard-ui-components/src/components/pill-toggle.tsx index c2ddb4ead..713a683c3 100644 --- a/packages/dashboard-ui-components/src/components/pill-toggle.tsx +++ b/packages/dashboard-ui-components/src/components/pill-toggle.tsx @@ -94,6 +94,7 @@ export function DesignPillToggle({ }; useEffect(() => { + if (typeof window === "undefined" || typeof window.matchMedia !== "function") return; const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); const updatePrefersReducedMotion = () => setPrefersReducedMotion(mediaQuery.matches); @@ -121,6 +122,7 @@ export function DesignPillToggle({ updateSliderMetrics(); + if (typeof ResizeObserver === "undefined") return; const resizeObserver = new ResizeObserver(updateSliderMetrics); resizeObserver.observe(toggle); resizeObserver.observe(selectedButton); diff --git a/packages/dashboard-ui-components/src/components/tabs.tsx b/packages/dashboard-ui-components/src/components/tabs.tsx index 36500a1d0..fbe401d84 100644 --- a/packages/dashboard-ui-components/src/components/tabs.tsx +++ b/packages/dashboard-ui-components/src/components/tabs.tsx @@ -142,6 +142,7 @@ export function DesignCategoryTabs({ }; useEffect(() => { + if (typeof window === "undefined" || typeof window.matchMedia !== "function") return; const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); const updatePrefersReducedMotion = () => setPrefersReducedMotion(mediaQuery.matches); @@ -169,6 +170,7 @@ export function DesignCategoryTabs({ updateSliderMetrics(); + if (typeof ResizeObserver === "undefined") return; const resizeObserver = new ResizeObserver(updateSliderMetrics); resizeObserver.observe(tabList); resizeObserver.observe(selectedButton);