Update app.py

app.py

@@ -135,15 +135,14 @@ modal_and_cart_js = """
         }
         const modal = document.getElementById('modal');
         modal.style.display = 'block';
-        modal.style.position = 'absolute';
+        modal.style.position = 'fixed';
         if (window.innerWidth <= 768) {
             modal.style.width = '90%';
+            modal.style.top = `${event.touches ? event.touches[0].screenY : event.clientY}px`;
         } else {
             modal.style.width = '30%';
+            modal.style.top = `${event.clientY}px`; // Use mouse Y position for laptop
         }
-        const currentTop = parseInt(window.getComputedStyle(modal).top, 10);
-        const newTop = currentTop + 15;
-        modal.style.top = `${newTop}px`;
         modal.style.left = '50%';
         modal.style.transform = 'translate(-50%, -50%)';
         document.getElementById('modal-image').src = image;
@@ -322,7 +321,7 @@ 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 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;">
                     <div style="text-align: right;">
                         <button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer;">&times;</button>
                     </div>