From 852adc51d65c19c71b3cfe9c0ae3c7cdf354fd0b Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Wed, 8 Oct 2025 12:54:03 +0000
Subject: [PATCH] Improve mobile detection hook for better cross-device
 compatibility

Update useIsMobile hook to use MediaQueryList.matches for detecting mobile devices, addressing SSR compatibility and improving initial value setting and event listening.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: fe5b902e-beda-40fc-bf87-a3c4ab300e3a
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
---
 src/hooks/use-mobile.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx
index 99548db2..d2487bac 100644
--- a/src/hooks/use-mobile.tsx
+++ b/src/hooks/use-mobile.tsx
@@ -6,14 +6,23 @@ export function useIsMobile(): boolean | undefined {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
 
   React.useEffect(() => {
+    // Guard against server-side rendering
     if (typeof window === 'undefined') return;
     
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    
+    // Use MediaQueryList.matches instead of window.innerWidth for consistency
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+      setIsMobile(mql.matches);
     };
+    
+    // Set initial value
+    setIsMobile(mql.matches);
+    
+    // Listen for changes
     mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    
+    // Cleanup listener on unmount
     return () => mql.removeEventListener("change", onChange);
   }, []);