Update app.py

app.py

@@ -129,43 +129,34 @@ modal_and_cart_js = """
     };
     let finalized = false;
     function openModal(name, image, description, price) {
-        if (finalized) {
-            alert("You cannot add more items after finalizing your order.");
-            return;
-        }
-
         const modal = document.getElementById('modal');
-        const buttonRect = event.target.getBoundingClientRect(); // Get button position
+        const buttonRect = event.target.getBoundingClientRect();
 
-        // Set modal width based on device size
         if (window.innerWidth <= 768) {
-            modal.style.width = '90%'; // For mobile devices
-            } else {
-                modal.style.width = '30%'; // For laptops and larger screens
-              }
-
-        const modalWidth = modal.offsetWidth;
-        const modalHeight = modal.offsetHeight;
+            modal.style.width = '90%';
+        } else {
+            modal.style.width = '30%';
+        }
 
-        // Dynamically calculate modal position
-        const modalTop = window.scrollY + buttonRect.top + buttonRect.height / 2 - modalHeight / 2;
-        const modalLeft = window.scrollX + buttonRect.left + buttonRect.width / 2 - modalWidth / 2;
+        const modalTop = window.scrollY + buttonRect.top + buttonRect.height + 20;
+        const modalLeft = window.scrollX + buttonRect.left + buttonRect.width / 2 - modal.offsetWidth / 2;
 
-        // Apply positioning styles
         modal.style.display = 'block';
+        modal.style.position = 'absolute';
         modal.style.top = `${modalTop}px`;
         modal.style.left = `${modalLeft}px`;
 
-        // Populate modal content
-        document.getElementById('modal-image').src = image;
         document.getElementById('modal-name').innerText = name;
+        document.getElementById('modal-image').src = image;
         document.getElementById('modal-description').innerText = description;
         document.getElementById('modal-price').innerText = `$${price}`;
+    }
 
-        // Reset inputs
-        document.getElementById('quantity').value = 1;
-        document.getElementById('special-instructions').value = '';
+    function closeModal() {
+        document.getElementById('modal').style.display = 'none';
     }
+</script>
+    
 
     function closeModal() {
         document.getElementById('modal').style.display = 'none';
@@ -335,8 +326,8 @@ def app():
 
             # Modal window
             modal_window = gr.HTML("""
-                <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;">
+                    <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>
                     <img id="modal-image" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 20px;" />