Update app.py

app.py

@@ -19,6 +19,9 @@ with gr.Blocks(css="styles.css") as app:
         """
     )
 
+    # Create a hidden popup area
+    popup_area = gr.HTML(visible=False)
+
     # Display all items as a vertical list
     with gr.Column(elem_id="food-list"):
         for food_name in FOOD_DATA.keys():
@@ -29,12 +32,11 @@ with gr.Blocks(css="styles.css") as app:
             ).click(
                 display_card,
                 inputs=[gr.Textbox(value=food_name, visible=False)],
-                outputs="popup-content"  # Update the popup content dynamically
+                outputs=popup_area,  # Reference the popup HTML component
             )
 
-    # Popup container
-    with gr.HTML(elem_id="popup-container", visible=True):
-        gr.HTML(value="", elem_id="popup-content")  # Placeholder for popup content
+    # Add the popup area to the app
+    popup_area.style()
 
 # Launch the app
 app.launch()