Update app.py

app.py

@@ -1477,6 +1477,27 @@ body, .gradio-container {
     width: 500px;  /* Set a custom width for the video */
     height: 350px; /* Set a custom height for the video */
     margin: 0 auto; /* Center the video horizontally */
+    }
+.row-container {
+    display: flex;
+    justify-content: flex-start; /* Align buttons to the left */
+    gap: 10px; /* Space between buttons */
+
+}
+.custom-button {
+    width: 100px; /* Small width */
+    height: 30px; /* Small height */
+    margin-right: 10px; /* Spacing between buttons */
+    text-align: center; /* Center text alignment */
+    font-size: 14px; /* Adjust font size */
+    background-color: #f0f0f0; /* Button background color */
+    border: 1px solid #ccc; /* Border styling */
+    border-radius: 5px; /* Rounded corners */
+    cursor: pointer; /* Pointer cursor on hover */
+}
+
+.custom-button:hover {
+    background-color: #e0e0e0; /* Background color on hover */
 }
 """
 with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
@@ -1490,9 +1511,9 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
         demo.load(update_message, None, m)
 
     # Buttons for sample queries
-    with gr.Row():
-        sample_button3 = gr.Button("can you generate a doughnut chart with item name and quantities for warehouse DUBAIWARE", elem_classes="gr-buttonbig")
-        sample_button4 = gr.Button("Analyze item name & quantity for different customers in a stacked bar chart for the warehouse DUBAIWARE & send email to [email protected]", elem_classes="gr-button")
+    with gr.Row(elem_classes=["row-container"]):
+        sample_button3 = gr.Button("can you generate a doughnut chart with item name and quantities for warehouse DUBAIWARE", elem_classes="custom-button")
+        sample_button4 = gr.Button("Analyze item name & quantity for different customers in a stacked bar chart for the warehouse DUBAIWARE & send email to [email protected]", elem_classes="custom-button")
 
     # Chatbot component
     with gr.Row():