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
+7 -8
View File
@@ -626,6 +626,8 @@
align-items: flex-end;
justify-content: center;
animation: modal-overlay-in 0.2s ease forwards;
/* iOS Safari: click-Events auf non-interactive divs erfordern cursor:pointer */
cursor: pointer;
}
@media (min-width: 768px) {
@@ -642,6 +644,8 @@
overflow-y: auto;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
animation: modal-slide-up 0.25s var(--ease-out) forwards;
/* Cursor vom Overlay zurücksetzen */
cursor: default;
}
@media (min-width: 768px) {
@@ -672,8 +676,8 @@
}
.modal-panel__close {
width: var(--target-sm);
height: var(--target-sm);
width: var(--target-md);
height: var(--target-md);
display: flex;
align-items: center;
justify-content: center;
@@ -681,12 +685,7 @@
color: var(--color-text-secondary);
transition: background-color var(--transition-fast);
position: relative;
}
.modal-panel__close::before {
content: '';
position: absolute;
inset: -8px;
flex-shrink: 0;
}
.modal-panel__close:hover {