Update app.py

app.py

@@ -68,11 +68,23 @@ def display_dishes(category):
 with gr.Blocks() as demo:
     gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Biryani Hub Menu 🍛</h1>")
 
+    # CSS for small buttons
+    gr.HTML("""
+        <style>
+            #small-btn {
+                padding: 5px 10px;
+                font-size: 14px;
+                border-radius: 5px;
+                margin: 5px;
+            }
+        </style>
+    """)
+
     # Buttons for category selection
     with gr.Row():
-        btn_all = gr.Button("ALL")
-        btn_vegan = gr.Button("VEGAN")
-        btn_halal = gr.Button("HALAL")
+        btn_all = gr.Button("ALL", elem_id="small-btn")
+        btn_vegan = gr.Button("VEGAN", elem_id="small-btn")
+        btn_halal = gr.Button("HALAL", elem_id="small-btn")
 
     # Dish display
     dish_display = gr.HTML(value=display_dishes("ALL"))
@@ -92,7 +104,7 @@ with gr.Blocks() as demo:
             
             <h4 style="text-align: left; margin-top: 20px;">Choose Extras</h4>
             <div style="display: flex; flex-wrap: wrap; justify-content: space-between; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
-    """ + "".join([f'<label style="margin-right: 10px; display: block;"><input type="checkbox" name="extras" value="{extra["name"]}" style="margin-right: 5px;">{extra["name"]} + {extra["price"]}</label>' for extra in extras]) + """
+                <!-- Your extras section here -->
             </div>
 
             <button onclick="addToCart(document.getElementById('popup-title').textContent, document.querySelector('input[name=spice]:checked').value)"