Update app.py

app.py

@@ -15,25 +15,27 @@ with gr.Blocks(css="styles.css") as app:
     gr.Markdown(
         """
         ### Explore Popular Dishes 🍛
-        Click on any dish card below to view its image, nutritional facts, and portion size.
+        Click on any dish below to view its image, nutritional facts, and portion size.
         """
     )
 
-    # Display all items as clickable cards
-    with gr.Row(elem_id="food-list"):
-        display_area = gr.HTML()  # Popup card display area
+    # Display all items as a vertical list
+    with gr.Column(elem_id="food-list"):
+        display_area = gr.HTML(visible=False)  # Popup card display area
         for food_name in FOOD_DATA.keys():
-            with gr.Column():
-                # Each button is a card for a food item
-                gr.Button(
-                    value=food_name,
-                    elem_id=f"food-{food_name.replace(' ', '-').lower()}",
-                    interactive=True,
-                ).click(
-                    display_card, 
-                    inputs=[gr.Textbox(value=food_name, visible=False)], 
-                    outputs=display_area
-                )
+            gr.Button(
+                value=food_name,
+                elem_id=f"food-{food_name.replace(' ', '-').lower()}",
+                interactive=True,
+            ).click(
+                display_card, 
+                inputs=[gr.Textbox(value=food_name, visible=False)], 
+                outputs=display_area
+            )
+
+    # Add a dedicated display area for the popup
+    with gr.Row(elem_id="popup-container"):
+        display_area.render()
 
 # Launch the app
 app.launch()