Update app.py

app.py

@@ -57,11 +57,17 @@ modal_and_cart_js = """
             alert("You cannot add more items after finalizing your order.");
             return;
         }
-        document.getElementById('modal').style.display = 'block';
+        const modal = document.getElementById('modal');
+        modal.style.display = 'block';
+        modal.style.position = 'absolute';
+        modal.style.top = `${window.scrollY + window.innerHeight / 2 - modal.offsetHeight / 2}px`;
+        modal.style.left = `${window.innerWidth / 2 - modal.offsetWidth / 2}px`;
+
         document.getElementById('modal-image').src = image;
         document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-description').innerText = description;
         document.getElementById('modal-price').innerText = price;
+
         // Reset extras
         const extrasInputs = document.querySelectorAll('input[name="biryani-extra"]');
         extrasInputs.forEach(input => input.checked = false);
@@ -147,7 +153,7 @@ def app():
 
         # Modal window
         modal_window = gr.HTML("""
-        <div id="modal" style="display: none; position: fixed; top: 10%; left: 5%; width: 90%; max-width: 400px; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000;">
+        <div id="modal" style="display: none; position: absolute; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000;">
             <div style="text-align: right;">
                 <button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer;">&times;</button>
             </div>
@@ -163,7 +169,7 @@ def app():
                 <label><input type="checkbox" name="biryani-extra" value="Extra Raitha" /> Extra Raitha  + $1.00</label>
                 <label><input type="checkbox" name="biryani-extra" value="Extra Salan" /> Extra Salan  + $2.00</label>
                 <label><input type="checkbox" name="biryani-extra" value="Extra Onion & Lemon" /> Extra Onion & Lemon + $2.00</label>
-                <label><input type="checkbox" name="biryani-extra" value="Chill Chicken" /> Chilli Chicken + $14.00</label>
+                <label><input type="checkbox" name="biryani-extra" value="Chilli Chicken" /> Chilli Chicken + $14.00</label>
                 <label><input type="checkbox" name="biryani-extra" value="Veg Manchurian" /> Veg Manchurian + $12.00</label>
             </div>
             <!-- Quantity and Special Instructions -->