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