Update components/cards.py

components/cards.py

@@ -6,21 +6,26 @@ def create_food_card(food_name):
     nutrition = food_info["nutrition"]
     portion_size = food_info["portion_size"]
 
-    # HTML for card
+    # Updated HTML for card to mimic screenshot structure
     card_html = f"""
     <div class="food-card">
+        <!-- Header Section -->
         <div class="card-header">
-            <img src="{image_src}" alt="{food_name}" class="food-image" />
             <button class="close-btn" onclick="document.querySelector('.food-card').style.display='none'">✖</button>
+            <img src="{image_src}" alt="{food_name}" class="food-image" />
         </div>
-        <div class="card-body">
-            <h3>{food_name}</h3>
-            <table class="nutrition-table">
-                {"".join([f"<tr><td>{key}</td><td>{value}</td></tr>" for key, value in nutrition.items()])}
-            </table>
-        </div>
-        <div class="card-footer">
-            <p><strong>Portion Size:</strong> {portion_size}</p>
+        
+        <!-- Bottom Section -->
+        <div class="card-content">
+            <div class="nutrition-details">
+                <h3>{food_name}</h3>
+                <table>
+                    {"".join([f"<tr><td>{key}</td><td>{value}</td></tr>" for key, value in nutrition.items()])}
+                </table>
+            </div>
+            <div class="portion-details">
+                <p><strong>Portion Size:</strong> {portion_size}</p>
+            </div>
         </div>
     </div>
     """