Update app.py

app.py

@@ -8,7 +8,7 @@ menu = {
     "Starters": [
         {
             "name": "A1 - Summer Rolls (Vegan)",
-            "description": ( 
+            "description": (
                 "Rice paper, fresh carrots, cucumbers, with mint, cilantro rolled with rice noodles and tofu."
                 " Served with Hoisin and peanut butter sauce."
             ),
@@ -240,24 +240,29 @@ with gr.Blocks() as demo:
             with gr.TabItem(section):
                 for item in items:
                     with gr.Row():
-                        # Show the dish image via HTML so the client downloads it directly
-                        gr.HTML(
-                            f"<img src='{item.get('image', '')}' alt='{item.get('name', '')}' "
-                            "style='height:90px;width:120px;border-radius:8px;'/>"
-                        )
-                        # Show the dish name, description and bold price
-                        with gr.Column():
+                        # Column for the image
+                        with gr.Column(scale=1):
+                            gr.HTML(
+                                f"<img src='{item.get('image', '')}' alt='{item.get('name', '')}' "
+                                "style='height:90px;width:120px;border-radius:8px;'/>"
+                            )
+                        # Column for the dish details
+                        with gr.Column(scale=4):
                             name = item.get("name", "")
                             desc = item.get("description", "")
                             price_str = item.get("price", "")
-                            price_html = f"<span style='font-size:1.1em;font-weight:bold;color:green;'>{price_str}</span>"
+                            price_html = (
+                                f"<span style='font-size:1.1em;font-weight:bold;color:green;'>{price_str}</span>"
+                            )
                             gr.Markdown(
                                 f"**{name}**\n\n{desc}\n\n{price_html}",
                                 show_label=False,
                             )
-                        # Create a blank button to act as the clickable area for adding the item
-                        add_btn = gr.Button(value="")
-                        button_refs.append((item, add_btn))
+                        # Column for the clickable grey bar (blank button).  The scale ensures it fills
+                        # the remaining horizontal space and is easy to click.
+                        with gr.Column(scale=2):
+                            add_btn = gr.Button(value="")
+                            button_refs.append((item, add_btn))
     # Add spacing before cart
     gr.Markdown("<br><br>")
     # Cart display section
@@ -274,28 +279,31 @@ with gr.Blocks() as demo:
     decision_output = gr.Markdown(visible=False)
     confirm_button = gr.Button("✅ I have made my decision")
     change_button = gr.Button("🔄 Wait, I want to make change", visible=False)
-    # Register button click events to add items to cart
+    # Register button click events to add items to cart. Each click returns
+    # updated cart table, total and cart state so that the UI updates
+    # properly. Without specifying the outputs and returning the updates,
+    # the click handler may not refresh the displayed DataFrame in some
+    # environments (e.g. Hugging Face Spaces).
     for _item, _btn in button_refs:
         def _on_add(cart_state, item=_item):
+            # Add the selected dish to the cart and compute the new
+            # DataFrame and total. Return them to update the UI.
             df, total, new_cart = add_item_simple(item, cart_state)
-            cart_table.update(value=df)
-            total_display.update(value=total)
-            return new_cart
+            return df, total, new_cart
         _btn.click(
             _on_add,
             inputs=[cart_state],
-            outputs=[cart_state],
+            outputs=[cart_table, total_display, cart_state],
         )
-    # Update cart when user edits quantities manually
+    # Update cart when user edits quantities manually. Return the updated
+    # DataFrame, total and cart state to refresh the display.
     def _on_table_edit(df, cart_state):
         df_new, total, new_cart = update_cart_from_table(df, cart_state)
-        cart_table.update(value=df_new)
-        total_display.update(value=total)
-        return new_cart
+        return df_new, total, new_cart
     cart_table.change(
         _on_table_edit,
         inputs=[cart_table, cart_state],
-        outputs=[cart_state],
+        outputs=[cart_table, total_display, cart_state],
     )
     # Confirm button logic
     def _confirm_wrapper(cart_df, note):