From a8a880e7487491aff1a373499b16dd351644cf1e Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 8 Feb 2025 22:04:07 -0600
Subject: [PATCH] Make useIsDesktop Tailwind 4 compatible

---
 src/utility/useIsDesktop.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/utility/useIsDesktop.ts b/src/utility/useIsDesktop.ts
index 5f6963a2..2a0e0b2d 100644
--- a/src/utility/useIsDesktop.ts
+++ b/src/utility/useIsDesktop.ts
@@ -1,15 +1,18 @@
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export default function useIsDesktop() {
-  const [isDesktop, setIsDesktop] = useState(false);
+  const [isDesktop, setIsDesktop] = useState<boolean>();
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (typeof window !== 'undefined') {
-      const mql = window.matchMedia('(min-width: var(--breakpoint-md))');
+      const breakpointMd = getComputedStyle(document.documentElement)
+        .getPropertyValue('--breakpoint-md');
+      const mql = window.matchMedia(`(min-width: ${breakpointMd})`);
       setIsDesktop(mql.matches);
-      const eventHandler = (event: MediaQueryListEvent) => {
+
+      const eventHandler = (event: MediaQueryListEvent) =>
         setIsDesktop(event.matches);
-      };
+
       mql.addEventListener('change', eventHandler);
       return () => mql.removeEventListener('change', eventHandler);
     }