--- 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 `` 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*