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

@@ -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);
   }, []);