fix(modal): fix modal not closing in iOS PWA (#29)

- Add cursor:pointer to .modal-overlay so iOS Safari fires click events
  on the backdrop (iOS ignores clicks on non-interactive divs without it)
- Add touchend fallback listener on overlay for belt-and-suspenders iOS support
- Enlarge close button from target-sm (32px) to target-md (40px) to meet
  Apple touch-target guidelines; remove now-redundant ::before expansion
- Swipe-to-close now only activates from the top handle zone (< 48px) or
  when the panel is scrolled to top, preventing accidental dismissal while
  scrolling form content downward
This commit is contained in:
Ulas
2026-04-06 09:59:37 +02:00
parent 0505ce406c
commit f4268ce696
3 changed files with 28 additions and 10 deletions
+14 -2
View File
@@ -115,14 +115,20 @@ function _wireSheetSwipe(panel) {
let dragging = false;
panel.addEventListener('touchstart', (e) => {
startY = e.touches[0].clientY;
// Nur von der Handle-Zone (obere 48px) oder wenn Panel ganz oben → Swipe erlauben
const touchY = e.touches[0].clientY;
const rect = panel.getBoundingClientRect();
const isHandleZone = touchY - rect.top < 48;
const isScrolledToTop = panel.scrollTop <= 0;
if (!isHandleZone && !isScrolledToTop) return;
startY = touchY;
dragging = true;
}, { passive: true });
panel.addEventListener('touchmove', (e) => {
if (!dragging) return;
const dy = e.touches[0].clientY - startY;
if (dy < 0) return; // Kein Swipe nach oben
if (dy < 0) { dragging = false; return; } // Aufwärts-Scroll: Swipe abbrechen
panel.style.transform = `translateY(${dy * 0.6}px)`;
}, { passive: true });
@@ -224,6 +230,12 @@ export function openModal({ title, content, onSave, onDelete, size = 'md' } = {}
if (e.target === activeOverlay) closeModal();
});
// iOS PWA: click-Events auf non-interactive divs sind unzuverlässig →
// touchend als Fallback (passive, damit Scroll nicht blockiert wird)
activeOverlay.addEventListener('touchend', (e) => {
if (e.target === activeOverlay) closeModal();
}, { passive: true });
// Close-Button
activeOverlay.querySelector('[data-action="close-modal"]')
?.addEventListener('click', closeModal);