Jon/sky 5452 sidebar improvements (#3098)

skyvern-frontend/src/components/NavLinkGroup.tsx

@@ -2,6 +2,7 @@ import { useSidebarStore } from "@/store/SidebarStore";
 import { cn } from "@/util/utils";
 import { NavLink, useMatches } from "react-router-dom";
 import { Badge } from "./ui/badge";
+import { useIsMobile } from "@/hooks/useIsMobile.ts";
 
 type Props = {
   title: string;
@@ -16,6 +17,7 @@ type Props = {
 };
 
 function NavLinkGroup({ title, links }: Props) {
+  const isMobile = useIsMobile();
   const { collapsed } = useSidebarStore();
   const matches = useMatches();
   const groupIsActive = matches.some((match) => {
@@ -32,6 +34,7 @@ function NavLinkGroup({ title, links }: Props) {
       <div
         className={cn("py-2 text-slate-400", {
           "text-primary": groupIsActive,
+          "mt-2 py-1 text-[0.8rem] font-medium uppercase": isMobile,
         })}
       >
         <div
@@ -42,7 +45,7 @@ function NavLinkGroup({ title, links }: Props) {
           {title}
         </div>
       </div>
-      <div className="space-y-2">
+      <div className="space-y-[1px]]">
         {links.map((link) => {
           return (
             <NavLink
@@ -53,6 +56,7 @@ function NavLinkGroup({ title, links }: Props) {
               className={({ isActive }) => {
                 return cn(
                   "block rounded-lg py-2 pl-3 text-slate-400 hover:bg-muted hover:text-primary",
+                  { "py-1 pl-0 text-[0.8rem]": isMobile },
                   {
                     "bg-muted": isActive,
                   },

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 };

skyvern-frontend/src/routes/root/NavigationHamburgerMenu.tsx

@@ -17,7 +17,7 @@ function NavigationHamburgerMenu() {
         <DrawerTrigger asChild>
           <HamburgerMenuIcon className="size-6 cursor-pointer" />
         </DrawerTrigger>
-        <DrawerContent className="bottom-2 left-2 top-2 mt-0 w-64 rounded border-0 px-6">
+        <DrawerContent className="bottom-2 left-2 top-2 mt-0 h-full w-64 rounded border-0">
           <VisuallyHidden.Root>
             <DrawerHeader>
               <DrawerTitle>Skyvern</DrawerTitle>

skyvern-frontend/src/routes/root/SidebarContent.tsx

@@ -16,7 +16,7 @@ function SidebarContent({ useCollapsedState }: Props) {
   const collapsed = useCollapsedState ? collapsedState : false;
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex h-full flex-col overflow-y-auto px-6">
       <Link to={window.location.origin}>
         <div className="flex h-24 items-center">
           {collapsed ? <LogoMinimized /> : <Logo />}