Jon/sky 5452 sidebar improvements (#3098)

skyvern-frontend/src/hooks/useIsMobile.ts

@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react";
+
+function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkIsMobile = () => {
+      // Check user agent for mobile phones specifically (not tablets)
+      const userAgent = navigator.userAgent.toLowerCase();
+
+      // Mobile phone patterns - exclude tablets
+      const mobilePatterns = [
+        /android.*mobile/, // Android phones (excludes tablets)
+        /iphone/, // iPhone
+        /ipod/, // iPod touch
+        /blackberry/, // BlackBerry
+        /windows phone/, // Windows Phone
+        /opera mini/, // Opera Mini
+        /iemobile/, // IE Mobile
+        /mobile/, // Generic mobile (but will be filtered by screen size)
+      ];
+
+      // Check if user agent matches mobile patterns
+      const hasMobileUserAgent = mobilePatterns.some((pattern) =>
+        pattern.test(userAgent),
+      );
+
+      // Additional check: screen width for mobile phones (typically < 768px)
+      // This helps distinguish phones from tablets
+      const hasSmallScreen = window.innerWidth < 768;
+
+      // Exclude tablets by checking for tablet-specific patterns
+      const tabletPatterns = [
+        /ipad/,
+        /android(?!.*mobile)/, // Android tablets (Android without "mobile")
+        /tablet/,
+        /kindle/,
+      ];
+
+      const isTablet = tabletPatterns.some((pattern) =>
+        pattern.test(userAgent),
+      );
+
+      // Return true only if it's a mobile device with small screen and not a tablet
+      return hasMobileUserAgent && hasSmallScreen && !isTablet;
+    };
+
+    const handleResize = () => {
+      setIsMobile(checkIsMobile());
+    };
+
+    // Initial check
+    setIsMobile(checkIsMobile());
+
+    // Listen for window resize events
+    window.addEventListener("resize", handleResize);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return isMobile;
+}
+
+export { useIsMobile };