Update app.py

app.py

@@ -346,17 +346,17 @@ def app():
 
             # Modal window
             modal_window = gr.HTML("""
-                <div id="modal" style="display: none; position: fixed; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000; width: 90%; max-width: 500px; height: 750px;">
+                <div id="modal" style="display: none; position: fixed; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000; width: 90%; max-width: 500px; height: 750px; overflow-y: auto;">
                     <div style="text-align: right; height: 30px;">
                         <button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer; height: 30px; width: 30px;">&times;</button>
-                     </div>
+                    </div>
                     <img id="modal-image" style="width: 100%; height: 300px; border-radius: 8px; margin-bottom: 20px;" />
                     <h2 id="modal-name" style="font-size: 20px; height: auto; margin-bottom: 10px;"></h2>
                     <p id="modal-description" style="font-size: 16px; height: auto; margin-bottom: 10px;"></p>
                     <p id="modal-price" style="font-size: 16px; height: auto; margin-bottom: 20px;"></p>
                     <!-- Biryani Extras -->
                     <label for="biryani-extras" style="display: block; font-size: 14px; margin-bottom: 10px;">Extras :</label>
-                    <div id="biryani-extras-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; height: 150px; overflow-y: auto;">
+                    <div id="biryani-extras-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; height: 120px; overflow-y: auto;">
                         <label><input type="checkbox" name="biryani-extra" value="Thums up" /> Thums up + $2.00</label>
                         <label><input type="checkbox" name="biryani-extra" value="Sprite" /> Sprite + $2.00</label>
                         <label><input type="checkbox" name="biryani-extra" value="Extra Raitha" /> Extra Raitha  + $1.00</label>
@@ -366,13 +366,16 @@ def app():
                         <label><input type="checkbox" name="biryani-extra" value="Veg Manchurian" /> Veg Manchurian + $12.00</label>
                     </div>
                     <!-- Quantity and Special Instructions -->
-                    <label for="quantity" style="display: block; font-size: 14px; margin-bottom: 5px;">Quantity:</label>
-                    <input type="number" id="quantity" value="1" min="1" style="width: 50px; height: 30px; font-size: 14px;" />
-                    <br><br>
-                    <textarea id="special-instructions" placeholder="Add special instructions here..." style="width: 100%; height: 100px; font-size: 14px; margin-bottom: 20px;"></textarea>
-                    <br><br>
+                    <div style="margin-bottom: 10px;">
+                        <label for="quantity" style="display: block; font-size: 14px; margin-bottom: 5px;">Quantity:</label>
+                        <input type="number" id="quantity" value="1" min="1" style="width: 50px; height: 30px; font-size: 14px;" />
+                    </div>
+                    <div style="margin-bottom: 10px;">
+                        <label for="special-instructions" style="display: block; font-size: 14px; margin-bottom: 5px;">Special Instructions:</label>
+                        <textarea id="special-instructions" placeholder="Add special instructions here..." style="width: 100%; height: 100px; font-size: 14px;"></textarea>
+                    </div>
                     <!-- Add to Cart Button -->
-                    <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer; height: 40px; width: auto;" onclick="addToCart()">Add to Cart</button>
+                    <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer; height: 40px; width: auto;">Add to Cart</button>
                 </div>
                 """)
             # Update menu dynamically based on preference