fix(mera/ui): карта перестала перекрывать интерфейс, страница помещается в окно #3131

Merged

lekss361 merged 1 commit from fix/mera-ui-stacking-and-fit into main

2026-08-27 10:51:04 +00:00

lekss361 commented

2026-08-27 10:43:43 +00:00

Owner

Три правки, две причины. Всё найдено прогоном по живому проду 27.08 под аккаунтом админа, не по коду.

1. Карта поверх интерфейса — два симптома, один корень

Контейнер мини-карты в HeroBar имел position: relative без z-index. Такой блок контекст наложения не создаёт, поэтому внутренние слои Leaflet и карточка адреса конкурировали не между собой, а со всей страницей:

Слой	z-index
тайлы	200
оверлеи	400
маркер	600
карточка «АДРЕС»	750
атрибуция OSM	800
меню аккаунта (UserMenu)	200 ← проигрывало всему

Отсюда оба сообщения владельца:

меню аккаунта открывалось ПОД картой — «карта выше, чем всплывающее окно настроек аккаунта»;
карточка «АДРЕС» всплывала поверх таблицы раздела «Продажи в доме» при прокрутке — «иконка адрес налазит на другие».

Лечится изоляцией, а не гонкой чисел. isolation: isolate на контейнере карты запирает всю внутреннюю кухню Leaflet внутри рамки, не меняя положение блока среди соседей. Альтернатива — перебивать 800 у атрибуции в каждом новом элементе — вернула бы ту же гонку при следующей доработке.

Меню шапки заодно поднято 200 → 1000: оно обязано быть сверху по замыслу, а не по совпадению чисел.

2. Страница не помещалась в окно

Артборд 1536×1024 масштабируется под вьюпорт. Масштаб считался от window.innerWidth, который включает вертикальную полосу прокрутки:

рабочая область: 1425px
window.innerWidth: 1440px
артборд: 1536 × (1440/1536) = 1440px   ← на 15px шире, чем есть места

Результат — постоянный горизонтальный скролл. Воспроизводится на любом десктопе: страница длинная, вертикальная полоса есть всегда. Замер на проде показывал ровно 8px лишней прокрутки.

Теперь считаем от document.documentElement.clientWidth. Пороги isMobile / isSmallViewport намеренно оставлены на innerWidth — это классификация устройства, а не расчёт геометрии, и полоса прокрутки на неё влиять не должна.

Что проверено на проде до правок

Под admin, ширина 1440:

оценка проходит целиком: отчёт 238c4a47, адрес разрешён, карта отрисована, 6 аналогов с честным предупреждением «мало аналогов — точность снижена»;
горизонтальное переполнение — 8px, источник найден замером (артборд 1440px против рабочих 1425px);
дровер «Методика» припаркован за правым краем, но корректно обрезан родителем с overflow-x: hidden — ложный след, к переполнению отношения не имеет.

Чего в этом PR нет

Замер показал ещё одно наложение — подписи легенды «рекомендованная цена» и «ожидаемая цена сделки» перекрываются на 141×17px. Это отдельный дефект вёрстки карточки цены, к стекингу отношения не имеет; вынесу отдельно, чтобы не смешивать с исправлением слоёв.

Refs #3082

Три правки, две причины. Всё найдено прогоном по живому проду 27.08 под аккаунтом админа, не по коду. ## 1. Карта поверх интерфейса — два симптома, один корень Контейнер мини-карты в `HeroBar` имел `position: relative` **без** `z-index`. Такой блок контекст наложения **не создаёт**, поэтому внутренние слои Leaflet и карточка адреса конкурировали не между собой, а со всей страницей: | Слой | z-index | |---|---| | тайлы | 200 | | оверлеи | 400 | | маркер | 600 | | **карточка «АДРЕС»** | **750** | | атрибуция OSM | 800 | | **меню аккаунта (UserMenu)** | **200** ← проигрывало всему | Отсюда оба сообщения владельца: - **меню аккаунта открывалось ПОД картой** — «карта выше, чем всплывающее окно настроек аккаунта»; - **карточка «АДРЕС» всплывала поверх таблицы** раздела «Продажи в доме» при прокрутке — «иконка адрес налазит на другие». **Лечится изоляцией, а не гонкой чисел.** `isolation: isolate` на контейнере карты запирает всю внутреннюю кухню Leaflet внутри рамки, не меняя положение блока среди соседей. Альтернатива — перебивать 800 у атрибуции в каждом новом элементе — вернула бы ту же гонку при следующей доработке. Меню шапки заодно поднято 200 → 1000: оно обязано быть сверху **по замыслу**, а не по совпадению чисел. ## 2. Страница не помещалась в окно Артборд 1536×1024 масштабируется под вьюпорт. Масштаб считался от `window.innerWidth`, который **включает вертикальную полосу прокрутки**: ``` рабочая область: 1425px window.innerWidth: 1440px артборд: 1536 × (1440/1536) = 1440px ← на 15px шире, чем есть места ``` Результат — **постоянный горизонтальный скролл**. Воспроизводится на любом десктопе: страница длинная, вертикальная полоса есть всегда. Замер на проде показывал ровно 8px лишней прокрутки. Теперь считаем от `document.documentElement.clientWidth`. Пороги `isMobile` / `isSmallViewport` намеренно оставлены на `innerWidth` — это классификация устройства, а не расчёт геометрии, и полоса прокрутки на неё влиять не должна. ## Что проверено на проде до правок Под `admin`, ширина 1440: - оценка проходит целиком: отчёт `238c4a47`, адрес разрешён, карта отрисована, 6 аналогов с честным предупреждением «мало аналогов — точность снижена»; - горизонтальное переполнение — **8px**, источник найден замером (артборд 1440px против рабочих 1425px); - дровер «Методика» припаркован за правым краем, но корректно обрезан родителем с `overflow-x: hidden` — ложный след, к переполнению отношения не имеет. ## Чего в этом PR нет Замер показал ещё одно наложение — подписи легенды «рекомендованная цена» и «ожидаемая цена сделки» перекрываются на 141×17px. Это отдельный дефект вёрстки карточки цены, к стекингу отношения не имеет; вынесу отдельно, чтобы не смешивать с исправлением слоёв. Refs #3082

lekss361 added 1 commit 2026-08-27 10:43:43 +00:00

fix(mera/ui): карта перестала перекрывать интерфейс, страница помещается в окно

CI Trade-In / changes (pull_request) Successful in 8s

Details

CI Trade-In / backend-tests (pull_request) Has been skipped

Details

CI / changes (pull_request) Successful in 10s

Details

CI Trade-In / browser-tests (pull_request) Has been skipped

Details

CI / backend-tests (pull_request) Has been skipped

Details

CI / frontend-tests (pull_request) Has been skipped

Details

CI / openapi-codegen-check (pull_request) Has been skipped

Details

CI Trade-In / frontend-checks (pull_request) Successful in 1m6s

Details

0231338a7f

Три правки, две причины — обе найдены прогоном по живому проду 27.08 под
аккаунтом админа.

## Карта поверх всего (два симптома, один корень)

Контейнер мини-карты в HeroBar имел position: relative БЕЗ z-index. Такой
блок контекст наложения не создаёт, поэтому внутренние слои Leaflet (тайлы
200, оверлеи 400, маркер 600, атрибуция 800) и карточка адреса (750)
конкурировали не между собой, а со всей страницей. Отсюда:

  • меню аккаунта (UserMenu, z-index 200) открывалось ПОД картой;
  • карточка «АДРЕС» всплывала поверх таблицы раздела «Продажи в доме».

Лечится изоляцией контейнера (isolation: isolate), а не гонкой чисел:
перебивать 800 у атрибуции пришлось бы в каждом новом элементе, и гонка
возвращалась бы. Меню шапки заодно поднято до 1000 — оно обязано быть
сверху по замыслу, а не по совпадению.

## Страница не помещалась в окно

Масштаб артборда 1536×1024 считался от window.innerWidth, который ВКЛЮЧАЕТ
вертикальную полосу прокрутки. На рабочей области 1425px артборд выходил
1440px — страница получала постоянный горизонтальный скролл. Воспроизводится
на любом десктопе: страница длинная, вертикальная полоса есть всегда.

Считаем от document.documentElement.clientWidth. Пороги isMobile/
isSmallViewport намеренно оставлены на innerWidth: это классификация
устройства, а не расчёт геометрии.