Update app.py

app.py

@@ -128,32 +128,47 @@ modal_and_cart_js = """
         "Veg Manchurian": 12
     };
     let finalized = false;
-    function openModal(name, image, description, price) {
+    function openModal(name, image, description, price, event) {
         if (finalized) {
             alert("You cannot add more items after finalizing your order.");
             return;
         }
+
         const modal = document.getElementById('modal');
-        modal.style.display = 'block';
+        modal.style.display = 'block'; // Display the modal
         modal.style.position = 'fixed';
+
+        // Reduce modal height for better display
+        modal.style.height = '50%'; // Adjust height to 50% of the viewport
+        modal.style.overflowY = 'auto'; // Add scrolling if content overflows
+
         if (window.innerWidth <= 768) {
+            // Mobile: Use touch Y position
             modal.style.width = '90%';
-            modal.style.top = `${event.touches ? event.touches[0].screenY : event.clientY}px`;
+            modal.style.top = `${event.touches ? event.touches[0].screenY : event.clientY - modal.offsetHeight / 2}px`;
         } else {
+            // Laptop: Use mouse Y position without 7%
             modal.style.width = '30%';
-              modal.style.top = `${event.clientY}px`;// Use mouse Y position for laptop
+            const adjustedY = event.clientY - modal.offsetHeight / 2; // Center based on modal height
+            modal.style.top = `${adjustedY}px`;
         }
+
         modal.style.left = '50%';
-        modal.style.transform = 'translate(-50%, 0)';
+        modal.style.transform = 'translate(-50%, 0)'; // Adjust transform to exclude vertical centering
+
+        // Set modal content
         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 inputs
         const extrasInputs = document.querySelectorAll('input[name="biryani-extra"]');
         extrasInputs.forEach(input => input.checked = false);
         document.getElementById('quantity').value = 1;
         document.getElementById('special-instructions').value = '';
     }
+
     function closeModal() {
         document.getElementById('modal').style.display = 'none';
     }