Make scrollable areas more consistent (#952)

Co-authored-by: wintonzheng <null>

skyvern-frontend/src/routes/tasks/create/PromptBox.tsx

@@ -10,7 +10,11 @@ import { AxiosError } from "axios";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { stringify as convertToYAML } from "yaml";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import {
+  ScrollArea,
+  ScrollAreaViewport,
+  ScrollBar,
+} from "@/components/ui/scroll-area";
 
 function createTaskFromTaskGenerationParameters(
   values: TaskGenerationApiResponse,
@@ -178,21 +182,23 @@ function PromptBox() {
         </div>
       </div>
       <ScrollArea>
-        <div className="flex gap-4 rounded-sm bg-slate-elevation1 p-4">
-          {examplePrompts.map((examplePrompt) => {
-            return (
-              <div
-                key={examplePrompt}
-                className="cursor-pointer whitespace-nowrap rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5"
-                onClick={() => {
-                  setPrompt(examplePrompt);
-                }}
-              >
-                {examplePrompt}
-              </div>
-            );
-          })}
-        </div>
+        <ScrollAreaViewport className="h-full w-full rounded-[inherit]">
+          <div className="flex gap-4 rounded-sm bg-slate-elevation1 p-4">
+            {examplePrompts.map((examplePrompt) => {
+              return (
+                <div
+                  key={examplePrompt}
+                  className="cursor-pointer whitespace-nowrap rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5"
+                  onClick={() => {
+                    setPrompt(examplePrompt);
+                  }}
+                >
+                  {examplePrompt}
+                </div>
+              );
+            })}
+          </div>
+        </ScrollAreaViewport>
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
     </div>