fix(14-mobile-modal-fix): Modal rezerwacji działa na mobile/tablet

Sekcja Elementor zawierająca modal miała elementor-hidden-mobile/tablet, co powodowało display:none na rodzicu. Modal position:fixed wewnątrz ukrytego elementu miał zerowe wymiary. Fix: przeniesienie overlay do document.body w initRefs(). Plan Phase 13 (pakiety ochronne) utworzony, BLOCKED — czeka na klienta. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-10 00:05:53 +02:00
parent 9b36f8fec3
commit 6f6c1fcf17
8 changed files with 554 additions and 31 deletions
--- a/.paul/phases/14-mobile-modal-fix/14-01-SUMMARY.md
+++ b/.paul/phases/14-mobile-modal-fix/14-01-SUMMARY.md
@@ -0,0 +1,108 @@
+---
+phase: 14-mobile-modal-fix
+plan: 01
+subsystem: ui
+tags: [mobile, elementor, modal, responsive]
+
+requires:
+  - phase: none
+    provides: n/a
+provides:
+  - Modal rezerwacji działa na mobile/tablet
+affects: []
+
+tech-stack:
+  added: []
+  patterns: [overlay-to-body pattern for Elementor hidden sections]
+
+key-files:
+  created: []
+  modified:
+    - wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
+
+key-decisions:
+  - "appendChild do body zamiast CSS override — niezależne od przyszłych zmian widoczności sekcji Elementor"
+
+patterns-established:
+  - "Modal overlay musi być dzieckiem body, nie sekcji Elementor (unika problemów z hidden responsive)"
+
+duration: 15min
+started: 2026-04-09T21:50:00Z
+completed: 2026-04-09T22:05:00Z
+---
+
+# Phase 14 Plan 01: Mobile Modal Fix Summary
+
+**Fix: modal rezerwacji przeniesiony do document.body — działa na mobile/tablet niezależnie od widoczności sekcji Elementor.**
+
+## Performance
+
+| Metric | Value |
+|--------|-------|
+| Duration | ~15min |
+| Started | 2026-04-09 |
+| Completed | 2026-04-09 |
+| Tasks | 1 completed |
+| Files modified | 1 |
+
+## Acceptance Criteria Results
+
+| Criterion | Status | Notes |
+|-----------|--------|-------|
+| AC-1: Modal otwiera się na mobile | Pass | Zweryfikowane Playwright 375×812 |
+| AC-2: Brak regresji desktop | Pass | Desktop bez zmian — overlay i tak jest position:fixed |
+
+## Accomplishments
+
+- Modal rezerwacji działa na mobile i tablet — klienci mogą składać rezerwacje z telefonu
+- Pre-fill z hero search form działa poprawnie na mobile po fixie
+
+## Root Cause
+
+Sekcja Elementor (`elementor-element-a7629b1`, klasa `header-box`) miała ustawione `elementor-hidden-tablet elementor-hidden-mobile` w edytorze Elementor. To powodowało `display:none` na rodzicu modala. Modal `position:fixed` wewnątrz ukrytego elementu miał `width:0, height:0` — był w DOM, miał klasę `is-open`, ale był niewidoczny.
+
+## Fix
+
+Jedna linijka w `initRefs()` (carei-reservation.js:90):
+```js
+if (overlay && overlay.parentElement !== document.body) {
+    document.body.appendChild(overlay);
+}
+```
+
+Przeniesienie overlay do `<body>` gwarantuje że `position:fixed` działa względem viewport, niezależnie od struktury Elementor.
+
+## Files Created/Modified
+
+| File | Change | Purpose |
+|------|--------|---------|
+| `wp-content/plugins/carei-reservation/assets/js/carei-reservation.js` | Modified | appendChild overlay do body w initRefs() |
+
+## Decisions Made
+
+| Decision | Rationale | Impact |
+|----------|-----------|--------|
+| appendChild do body (nie CSS override) | Niezależne od przyszłych zmian responsive w Elementor | Trwały fix, zero ryzyka regresji |
+
+## Deviations from Plan
+
+None — plan wykonany dokładnie jak opisany.
+
+## Issues Encountered
+
+None.
+
+## Next Phase Readiness
+
+**Ready:**
+- Phase 13 (Pakiety ochronne) — BLOCKED, czeka na potwierdzenie klienta
+
+**Concerns:**
+- None
+
+**Blockers:**
+- Phase 13 zablokowana — potrzebna odpowiedź klienta o źródle danych cenowych
+
+---
+*Phase: 14-mobile-modal-fix, Plan: 01*
+*Completed: 2026-04-09*