From 478b27ac524dd3255cb6b93a4f6f284dbc0643e9 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Thu, 31 Oct 2024 08:49:15 -0700
Subject: [PATCH] Update skyvern UI responsiveness (#1098)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
---
 skyvern-frontend/package-lock.json            | 509 +++++++++++++++++-
 skyvern-frontend/package.json                 |   4 +-
 skyvern-frontend/src/components/ui/drawer.tsx | 115 ++++
 skyvern-frontend/src/routes/root/Header.tsx   |  38 +-
 .../routes/root/NavigationHamburgerMenu.tsx   |  34 ++
 .../src/routes/root/RootLayout.tsx            |  54 +-
 skyvern-frontend/src/routes/root/Sidebar.tsx  |  23 +
 .../src/routes/root/SidebarContent.tsx        |  50 ++
 .../routes/settings/SettingsPageLayout.tsx    |   2 +-
 .../src/routes/tasks/TasksPageLayout.tsx      |   2 +-
 .../tasks/create/CreateNewTaskLayout.tsx      |   2 +-
 .../src/routes/tasks/create/PromptBox.tsx     |   2 +-
 .../routes/workflows/WorkflowsPageLayout.tsx  |   2 +-
 13 files changed, 741 insertions(+), 96 deletions(-)
 create mode 100644 skyvern-frontend/src/components/ui/drawer.tsx
 create mode 100644 skyvern-frontend/src/routes/root/NavigationHamburgerMenu.tsx
 create mode 100644 skyvern-frontend/src/routes/root/Sidebar.tsx
 create mode 100644 skyvern-frontend/src/routes/root/SidebarContent.tsx

diff --git a/skyvern-frontend/package-lock.json b/skyvern-frontend/package-lock.json
index 37bb4261..9f434301 100644
--- a/skyvern-frontend/package-lock.json
+++ b/skyvern-frontend/package-lock.json
@@ -16,7 +16,7 @@
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-aspect-ratio": "^1.0.3",
         "@radix-ui/react-checkbox": "^1.1.1",
-        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.0.2",
@@ -30,6 +30,7 @@
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-tooltip": "^1.0.7",
+        "@radix-ui/react-visually-hidden": "^1.1.0",
         "@tanstack/react-query": "^5.28.6",
         "@uiw/codemirror-theme-tokyo-night-storm": "^4.23.0",
         "@uiw/react-codemirror": "^4.23.0",
@@ -53,6 +54,7 @@
         "serve-handler": "^6.1.5",
         "tailwind-merge": "^2.2.2",
         "tailwindcss-animate": "^1.0.7",
+        "vaul": "^1.1.1",
         "yaml": "^2.4.2",
         "zod": "^3.22.4",
         "zustand": "^4.5.2"
@@ -1460,31 +1462,30 @@
       }
     },
     "node_modules/@radix-ui/react-dialog": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
-      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
+      "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-focus-guards": "1.0.1",
-        "@radix-ui/react-focus-scope": "1.0.4",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-slot": "1.0.2",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
         "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.5"
+        "react-remove-scroll": "2.6.0"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -1495,6 +1496,291 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/react-remove-scroll": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
@@ -2492,6 +2778,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
@@ -2773,6 +3082,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
@@ -2807,6 +3139,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -2931,18 +3286,17 @@
       }
     },
     "node_modules/@radix-ui/react-visually-hidden": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
-      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.3"
+        "@radix-ui/react-primitive": "2.0.0"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2953,6 +3307,59 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/rect": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
@@ -4116,6 +4523,42 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/codemirror": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
@@ -7936,6 +8379,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vaul": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.1.tgz",
+      "integrity": "sha512-+ejzF6ffQKPcfgS7uOrGn017g39F8SO4yLPXbBhpC7a0H+oPqPna8f1BUfXaz8eU4+pxbQcmjxW+jWBSbxjaFg==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
     "node_modules/vite": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.2.tgz",
diff --git a/skyvern-frontend/package.json b/skyvern-frontend/package.json
index eae3ea34..f84f83a5 100644
--- a/skyvern-frontend/package.json
+++ b/skyvern-frontend/package.json
@@ -24,7 +24,7 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
@@ -38,6 +38,7 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
     "@tanstack/react-query": "^5.28.6",
     "@uiw/codemirror-theme-tokyo-night-storm": "^4.23.0",
     "@uiw/react-codemirror": "^4.23.0",
@@ -61,6 +62,7 @@
     "serve-handler": "^6.1.5",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.1",
     "yaml": "^2.4.2",
     "zod": "^3.22.4",
     "zustand": "^4.5.2"
diff --git a/skyvern-frontend/src/components/ui/drawer.tsx b/skyvern-frontend/src/components/ui/drawer.tsx
new file mode 100644
index 00000000..f62cc2e4
--- /dev/null
+++ b/skyvern-frontend/src/components/ui/drawer.tsx
@@ -0,0 +1,115 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "@/util/utils";
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
diff --git a/skyvern-frontend/src/routes/root/Header.tsx b/skyvern-frontend/src/routes/root/Header.tsx
index b7e60a30..ef7d1cb5 100644
--- a/skyvern-frontend/src/routes/root/Header.tsx
+++ b/skyvern-frontend/src/routes/root/Header.tsx
@@ -1,6 +1,7 @@
 import { DiscordLogoIcon } from "@radix-ui/react-icons";
 import GitHubButton from "react-github-btn";
 import { Link, useMatch } from "react-router-dom";
+import { NavigationHamburgerMenu } from "./NavigationHamburgerMenu";
 
 function Header() {
   const match = useMatch("/workflows/:workflowPermanentId/edit");
@@ -11,24 +12,27 @@ function Header() {
 
   return (
     <header>
-      <div className="flex h-24 items-center justify-end gap-4 px-6">
-        <Link
-          to="https://discord.com/invite/fG2XXEuQX3"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <DiscordLogoIcon className="h-7 w-7" />
-        </Link>
-        <div className="h-7">
-          <GitHubButton
-            href="https://github.com/skyvern-ai/skyvern"
-            data-color-scheme="no-preference: dark; light: dark; dark: dark;"
-            data-size="large"
-            data-show-count="true"
-            aria-label="Star skyvern-ai/skyvern on GitHub"
+      <div className="flex h-24 items-center px-6">
+        <NavigationHamburgerMenu />
+        <div className="ml-auto flex gap-4">
+          <Link
+            to="https://discord.com/invite/fG2XXEuQX3"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            Star
-          </GitHubButton>
+            <DiscordLogoIcon className="h-7 w-7" />
+          </Link>
+          <div className="h-7">
+            <GitHubButton
+              href="https://github.com/skyvern-ai/skyvern"
+              data-color-scheme="no-preference: dark; light: dark; dark: dark;"
+              data-size="large"
+              data-show-count="true"
+              aria-label="Star skyvern-ai/skyvern on GitHub"
+            >
+              Star
+            </GitHubButton>
+          </div>
         </div>
       </div>
     </header>
diff --git a/skyvern-frontend/src/routes/root/NavigationHamburgerMenu.tsx b/skyvern-frontend/src/routes/root/NavigationHamburgerMenu.tsx
new file mode 100644
index 00000000..7d15da0b
--- /dev/null
+++ b/skyvern-frontend/src/routes/root/NavigationHamburgerMenu.tsx
@@ -0,0 +1,34 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { HamburgerMenuIcon } from "@radix-ui/react-icons";
+import { SidebarContent } from "./SidebarContent";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+
+function NavigationHamburgerMenu() {
+  return (
+    <div className="block lg:hidden">
+      <Drawer direction="left">
+        <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">
+          <VisuallyHidden.Root>
+            <DrawerHeader>
+              <DrawerTitle>Skyvern</DrawerTitle>
+              <DrawerDescription>Skyvern App Navigation</DrawerDescription>
+            </DrawerHeader>
+          </VisuallyHidden.Root>
+          <SidebarContent />
+        </DrawerContent>
+      </Drawer>
+    </div>
+  );
+}
+
+export { NavigationHamburgerMenu };
diff --git a/skyvern-frontend/src/routes/root/RootLayout.tsx b/skyvern-frontend/src/routes/root/RootLayout.tsx
index 53b8c4aa..9235f769 100644
--- a/skyvern-frontend/src/routes/root/RootLayout.tsx
+++ b/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 />
diff --git a/skyvern-frontend/src/routes/root/Sidebar.tsx b/skyvern-frontend/src/routes/root/Sidebar.tsx
new file mode 100644
index 00000000..03fdd5d7
--- /dev/null
+++ b/skyvern-frontend/src/routes/root/Sidebar.tsx
@@ -0,0 +1,23 @@
+import { useSidebarStore } from "@/store/SidebarStore";
+import { cn } from "@/util/utils";
+import { SidebarContent } from "./SidebarContent";
+
+function Sidebar() {
+  const collapsed = useSidebarStore((state) => state.collapsed);
+
+  return (
+    <aside
+      className={cn(
+        "fixed hidden h-screen min-h-screen border-r-2 px-6 lg:block",
+        {
+          "w-64": !collapsed,
+          "w-28": collapsed,
+        },
+      )}
+    >
+      <SidebarContent useCollapsedState />
+    </aside>
+  );
+}
+
+export { Sidebar };
diff --git a/skyvern-frontend/src/routes/root/SidebarContent.tsx b/skyvern-frontend/src/routes/root/SidebarContent.tsx
new file mode 100644
index 00000000..3afdc2c8
--- /dev/null
+++ b/skyvern-frontend/src/routes/root/SidebarContent.tsx
@@ -0,0 +1,50 @@
+import { Logo } from "@/components/Logo";
+import { LogoMinimized } from "@/components/LogoMinimized";
+import { useSidebarStore } from "@/store/SidebarStore";
+import { Link } from "react-router-dom";
+import { SideNav } from "./SideNav";
+import { cn } from "@/util/utils";
+import { Button } from "@/components/ui/button";
+import { PinLeftIcon, PinRightIcon } from "@radix-ui/react-icons";
+
+type Props = {
+  useCollapsedState?: boolean;
+};
+
+function SidebarContent({ useCollapsedState }: Props) {
+  const { collapsed: collapsedState, setCollapsed } = useSidebarStore();
+  const collapsed = useCollapsedState ? collapsedState : false;
+
+  return (
+    <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="hidden h-6 w-6 lg:block" />
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { SidebarContent };
diff --git a/skyvern-frontend/src/routes/settings/SettingsPageLayout.tsx b/skyvern-frontend/src/routes/settings/SettingsPageLayout.tsx
index 073878f7..d6fae90c 100644
--- a/skyvern-frontend/src/routes/settings/SettingsPageLayout.tsx
+++ b/skyvern-frontend/src/routes/settings/SettingsPageLayout.tsx
@@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom";
 
 function SettingsPageLayout() {
   return (
-    <div className="container mx-auto px-8">
+    <div className="container mx-auto">
       <main>
         <Outlet />
       </main>
diff --git a/skyvern-frontend/src/routes/tasks/TasksPageLayout.tsx b/skyvern-frontend/src/routes/tasks/TasksPageLayout.tsx
index 3b29e307..f4ef0b02 100644
--- a/skyvern-frontend/src/routes/tasks/TasksPageLayout.tsx
+++ b/skyvern-frontend/src/routes/tasks/TasksPageLayout.tsx
@@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom";
 
 function TasksPageLayout() {
   return (
-    <div className="container mx-auto px-8">
+    <div className="container mx-auto">
       <main>
         <Outlet />
       </main>
diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskLayout.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskLayout.tsx
index dbed516b..faa3d2a7 100644
--- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskLayout.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskLayout.tsx
@@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom";
 
 function CreateNewTaskLayout() {
   return (
-    <main className="container mx-auto px-8">
+    <main className="container mx-auto">
       <Outlet />
     </main>
   );
diff --git a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
index 4f567408..2f0f599b 100644
--- a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
@@ -149,7 +149,7 @@ function PromptBox() {
           <span className="text-2xl">
             What task would you like to accomplish?
           </span>
-          <div className="flex w-[35rem] max-w-xl items-center rounded-xl bg-slate-700 py-2 pr-4">
+          <div className="flex w-1/2 max-w-xl items-center rounded-xl bg-slate-700 py-2 pr-4">
             <Textarea
               className="min-h-0 resize-none rounded-xl border-transparent px-4 hover:border-transparent focus-visible:ring-0"
               value={prompt}
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowsPageLayout.tsx b/skyvern-frontend/src/routes/workflows/WorkflowsPageLayout.tsx
index 57c86d47..2331422b 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowsPageLayout.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowsPageLayout.tsx
@@ -7,7 +7,7 @@ function WorkflowsPageLayout() {
   return (
     <main
       className={cn({
-        "container mx-auto px-8": !match,
+        "container mx-auto": !match,
       })}
     >
       <Outlet />