CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-04 21:04:37 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(dashboard-ui): guard Web APIs in animated pill/tab indicators

Browse Source 
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)
This commit is contained in:
mantrakp04 2026-06-01 15:32:02 -07:00
parent 9dfab510dc
commit abd2e6a3b7
2 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dashboard-ui-components/src/components/pill-toggle.tsx
View File

@ -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);

2
packages/dashboard-ui-components/src/components/tabs.tsx
View File

@ -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);