From a833017da137ffd3e3f052a30c0ff5b7eb267966 Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Wed, 9 Oct 2024 08:39:12 -0700
Subject: [PATCH] Update the example prompts and add overflow (#943)

---
 skyvern-frontend/src/routes/tasks/create/PromptBox.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
index eb4c03e4..cad34699 100644
--- a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
@@ -59,6 +59,9 @@ function createTemplateTaskFromTaskGenerationParameters(
 const examplePrompts = [
   "What is the top post on hackernews?",
   "Navigate to Google Finance and search for AAPL",
+  "What is the top NYT bestseller?",
+  "What is the top ranked football team?",
+  "Find the top selling electrical connector on finditparts",
 ];
 
 function PromptBox() {
@@ -173,12 +176,12 @@ function PromptBox() {
           </div>
         </div>
       </div>
-      <div className="flex gap-4 rounded-sm bg-slate-elevation1 p-4">
+      <div className="flex gap-4 overflow-x-scroll rounded-sm bg-slate-elevation1 p-4">
         {examplePrompts.map((examplePrompt) => {
           return (
             <div
               key={examplePrompt}
-              className="cursor-pointer rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5"
+              className="cursor-pointer whitespace-nowrap rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5"
               onClick={() => {
                 setPrompt(examplePrompt);
               }}