Update skyvern UI responsiveness (#1098)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

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

@@ -1,59 +1,21 @@
-import { Link, Outlet } from "react-router-dom";
 import { Toaster } from "@/components/ui/toaster";
-import { SideNav } from "./SideNav";
-import { PinLeftIcon, PinRightIcon } from "@radix-ui/react-icons";
-import { Logo } from "@/components/Logo";
-import { cn } from "@/util/utils";
-import { Button } from "@/components/ui/button";
-import { LogoMinimized } from "@/components/LogoMinimized";
-import { Header } from "./Header";
 import { useSidebarStore } from "@/store/SidebarStore";
+import { cn } from "@/util/utils";
+import { Outlet } from "react-router-dom";
+import { Header } from "./Header";
+import { Sidebar } from "./Sidebar";
 
 function RootLayout() {
-  const { collapsed, setCollapsed } = useSidebarStore();
+  const collapsed = useSidebarStore((state) => state.collapsed);
 
   return (
     <>
       <div className="h-full w-full">
-        <aside
-          className={cn("fixed h-screen min-h-screen border-r-2 px-6", {
-            "w-64": !collapsed,
-            "w-28": collapsed,
-          })}
-        >
-          <div className="flex h-full flex-col">
-            <Link to={window.location.origin}>
-              <div className="flex h-24 items-center">
-                {collapsed ? <LogoMinimized /> : <Logo />}
-              </div>
-            </Link>
-            <SideNav collapsed={collapsed} />
-            <div
-              className={cn("mt-auto flex min-h-16", {
-                "justify-center": collapsed,
-                "justify-end": !collapsed,
-              })}
-            >
-              <Button
-                size="icon"
-                variant="ghost"
-                onClick={() => {
-                  setCollapsed(!collapsed);
-                }}
-              >
-                {collapsed ? (
-                  <PinRightIcon className="h-6 w-6" />
-                ) : (
-                  <PinLeftIcon className="h-6 w-6" />
-                )}
-              </Button>
-            </div>
-          </div>
-        </aside>
+        <Sidebar />
         <Header />
         <main
-          className={cn("pb-4 pl-64", {
-            "pl-28": collapsed,
+          className={cn("lg:pb-4 lg:pl-64", {
+            "lg:pl-28": collapsed,
           })}
         >
           <Outlet />