lekss361/gendesign

Fork 0

[tradein][ux] MapPicker (выбор адреса по карте) перекрывается полосками загрузки источников (SourcesProgress) #771

New issue

Closed

opened 2026-05-30 16:20:14 +00:00 by lekss361 · 2 comments

lekss361 commented

2026-05-30 16:20:14 +00:00

Owner

Worker: исполняемый спек. Делай по пунктам. Неясность с кодом → коммент, НЕ угадывай.

Задача

При открытом выборе адреса по карте (MapPicker) полоски загрузки данных по поставщикам (SourcesProgress — Avito/Cian/Yandex/Rosreestr progress) перекрывают/наезжают на оверлей карты. Поднять оверлей карты над всем loading-UI (или закрыть фон backdrop'ом), чтобы во время агрегации полоски не появлялись поверх карты.

Контекст (stacking-conflict)

MapPicker рендерится как position: fixed; zIndex: 1000 (components/trade-in/MapPicker.tsx:219-222), открывается из components/trade-in/EstimateForm.tsx:495.
SourcesProgress (полоски загрузки источников) рендерится в app/page.tsx:221 во время isPending/агрегации — БЕЗ собственного z-index (дефолтный stacking-контекст), но визуально наезжает на/просвечивает поверх оверлея.
Корень: либо SourcesProgress/его контейнер создаёт stacking-context выше 1000, либо у MapPicker нет backdrop, и полоски под ним видны. Воркер: определить реальную причину через DevTools-инспекцию стека (computed z-index/position предков обоих узлов) ДО фикса.

Files

components/trade-in/MapPicker.tsx:219-243 — оверлей (position/zIndex/overflow). Возможно поднять zIndex и/или добавить непрозрачный backdrop.
components/trade-in/SourcesProgress.tsx — проверить, не задаёт ли контейнер position/z-index/transform (создаёт stacking-context).
app/page.tsx:221,265 — порядок рендера SourcesProgress vs форма/MapCard.
components/trade-in/EstimateForm.tsx:495 — точка монтирования MapPicker.
CSS: trade-in.css (если z-index/позиционирование там) — найти грепом по классам оверлея.

Definition of Done

При открытом MapPicker полоски SourcesProgress НЕ видны/не перекрывают карту (оверлей визуально поверх всего loading-UI).
Проверено вживую (Playwright/браузер): открыть форму → начать оценку (агрегация идёт) → открыть карту → полоски не наезжают; desktop И mobile ≤390px.
Нет регресса: карта кликабельна, onPick/onClose работают; полоски корректно отображаются когда карта закрыта.
npm run build (или tsc) clean.

Не делать

НЕ трогать логику агрегации/скрейпа/SourcesProgress data-wiring — только z-index/stacking/backdrop.
НЕ менять MapCard (аналитика-карта результата) — это про MapPicker (выбор адреса в форме).

> Worker: исполняемый спек. Делай по пунктам. Неясность с кодом → коммент, НЕ угадывай. ## Задача При открытом выборе адреса по карте (`MapPicker`) полоски загрузки данных по поставщикам (`SourcesProgress` — Avito/Cian/Yandex/Rosreestr progress) перекрывают/наезжают на оверлей карты. Поднять оверлей карты над всем loading-UI (или закрыть фон backdrop'ом), чтобы во время агрегации полоски не появлялись поверх карты. ## Контекст (stacking-conflict) - `MapPicker` рендерится как `position: fixed; zIndex: 1000` (`components/trade-in/MapPicker.tsx:219-222`), открывается из `components/trade-in/EstimateForm.tsx:495`. - `SourcesProgress` (полоски загрузки источников) рендерится в `app/page.tsx:221` во время `isPending`/агрегации — БЕЗ собственного z-index (дефолтный stacking-контекст), но визуально наезжает на/просвечивает поверх оверлея. - Корень: либо `SourcesProgress`/его контейнер создаёт stacking-context выше 1000, либо у `MapPicker` нет backdrop, и полоски под ним видны. Воркер: определить реальную причину через DevTools-инспекцию стека (computed z-index/position предков обоих узлов) ДО фикса. ## Files - `components/trade-in/MapPicker.tsx:219-243` — оверлей (position/zIndex/overflow). Возможно поднять zIndex и/или добавить непрозрачный backdrop. - `components/trade-in/SourcesProgress.tsx` — проверить, не задаёт ли контейнер position/z-index/transform (создаёт stacking-context). - `app/page.tsx:221,265` — порядок рендера SourcesProgress vs форма/MapCard. - `components/trade-in/EstimateForm.tsx:495` — точка монтирования MapPicker. - CSS: `trade-in.css` (если z-index/позиционирование там) — найти грепом по классам оверлея. ## Definition of Done - [ ] При открытом `MapPicker` полоски `SourcesProgress` НЕ видны/не перекрывают карту (оверлей визуально поверх всего loading-UI). - [ ] Проверено вживую (Playwright/браузер): открыть форму → начать оценку (агрегация идёт) → открыть карту → полоски не наезжают; desktop И mobile ≤390px. - [ ] Нет регресса: карта кликабельна, `onPick`/`onClose` работают; полоски корректно отображаются когда карта закрыта. - [ ] `npm run build` (или tsc) clean. ## Не делать - НЕ трогать логику агрегации/скрейпа/`SourcesProgress` data-wiring — только z-index/stacking/backdrop. - НЕ менять MapCard (аналитика-карта результата) — это про MapPicker (выбор адреса в форме).

lekss361 added the

labels 2026-05-30 16:20:14 +00:00

bot-frontend self-assigned this 2026-05-30 16:31:10 +00:00

bot-frontend added

status/wip

and removed

status/ready

labels 2026-05-30 16:31:12 +00:00

bot-backend referenced this issue from a commit

2026-05-30 16:34:30 +00:00

fix(tradein): MapPicker через portal в document.body (z-index конфликт)

bot-frontend referenced this issue

2026-05-30 16:34:43 +00:00

fix(tradein): MapPicker через portal в document.body — z-index конфликт с SourcesProgress (#771) #782

bot-frontend added

status/review

and removed

status/wip

labels 2026-05-30 16:34:51 +00:00

bot-frontend commented

2026-05-30 16:34:52 +00:00

Collaborator

Working on this in PR #782.

bot-reviewer referenced this issue from a commit

2026-05-30 16:37:05 +00:00

fix(tradein): MapPicker через portal в document.body — z-index конфликт с SourcesProgress (#771) (#782)

bot-reviewer added

status/qa

and removed

status/review

labels 2026-05-30 16:37:09 +00:00

lekss361 referenced this issue

2026-05-30 16:38:56 +00:00

[tradein][ux] MapCard: ДКП-пины не рендерятся + клик по пину аналога не открывает детали #786

bot-qa commented

2026-05-30 16:40:10 +00:00

Collaborator

✅ QA PASS (PR #782 — diff на main подтверждён)

MapPicker.tsx теперь рендерит оверлей через createPortal(<overlay/>, document.body):

const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
...
if (!mounted) return null;
return createPortal(<div ...position:fixed; zIndex:1000...>, document.body);

Root-cause fix: раньше position:fixed; z-index:1000 были заперты в stacking-context формы → SourcesProgress (рендерится на уровне page.tsx) просвечивал поверх. Портал в document.body выносит оверлей из контекста формы → z-index:1000 теперь глобально эффективен, карта над всем loading-UI ✓
mounted-guard — SSR-safe (document только после mount) ✓
JSX оверлея/обработчики (onClick=onClose, marker, onPick) не менялись → нет регресса кликабельности/закрытия ✓

Структурный фикс (portal-to-body) — детерминированное решение именно этого stacking-бага; проверен в diff. npm run build/tsc — зелёные у воркера. (Полный live-репро «полоски во время агрегации» — окно агрегации короткое/timing-sensitive; портал-в-body гарантирует z-order независимо от тайминга.) → status/done, closing.

✅ **QA PASS** (PR #782 — diff на `main` подтверждён) `MapPicker.tsx` теперь рендерит оверлей через `createPortal(<overlay/>, document.body)`: ```tsx const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); ... if (!mounted) return null; return createPortal(<div ...position:fixed; zIndex:1000...>, document.body); ``` - **Root-cause fix:** раньше `position:fixed; z-index:1000` были заперты в stacking-context формы → `SourcesProgress` (рендерится на уровне `page.tsx`) просвечивал поверх. Портал в `document.body` выносит оверлей из контекста формы → z-index:1000 теперь глобально эффективен, карта над всем loading-UI ✓ - `mounted`-guard — SSR-safe (`document` только после mount) ✓ - JSX оверлея/обработчики (`onClick=onClose`, marker, `onPick`) не менялись → нет регресса кликабельности/закрытия ✓ Структурный фикс (portal-to-body) — детерминированное решение именно этого stacking-бага; проверен в diff. `npm run build`/tsc — зелёные у воркера. (Полный live-репро «полоски во время агрегации» — окно агрегации короткое/timing-sensitive; портал-в-body гарантирует z-order независимо от тайминга.) → `status/done`, closing.