Update app.py

attempt to make example buttons row horizontal

app.py

@@ -183,6 +183,14 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="sky")) as demo:
     # Insert custom CSS for layout:
     gr.HTML("""
     <style>
+    .example-row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap; /* Will wrap to vertical if there's not enough space */
+        justify-content: center; /* or flex-start, depending on your layout preference */
+        gap: 10px; /* optional: add spacing between buttons */
+    }
+    
     /* Container for the input box and embedded send button */
     .input-container {
         position: relative;
@@ -253,7 +261,7 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="sky")) as demo:
     # ---------------------------
     # Example Inputs Row (clickable examples)
     # ---------------------------
-    with gr.Row(visible=True) as examples_container:
+    with gr.Row(elem_classes="example-row", visible=True) as examples_container:
         ex1 = gr.Button("Who?")
         ex2 = gr.Button("Where?")
         ex3 = gr.Button("What?")