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
3 changed files with 39 additions and 2 deletions

View file

@ -459,7 +459,18 @@ export default function TradeInV2Page() {
const [isSmallViewport, setIsSmallViewport] = useState(false);
useEffect(() => {
const compute = () => {
setArtboardScale(Math.min(1, window.innerWidth / 1536));
// clientWidth, а НЕ window.innerWidth. innerWidth включает вертикальную
// полосу прокрутки (~15px), поэтому артборд масштабировался под ширину,
// которой на самом деле нет: на 1425px рабочей области он выходил 1440px
// и страница получала ПОСТОЯННЫЙ горизонтальный скролл. Прод 27.08 —
// «юай не помещается»; воспроизводится на любом десктопе, потому что
// страница длинная и вертикальная полоса есть всегда.
//
// Пороги ниже намеренно остаются на innerWidth: это классификация
// устройства («телефон ли это»), а не расчёт геометрии, и полоса
// прокрутки на неё влиять не должна.
const usable = document.documentElement.clientWidth || window.innerWidth;
setArtboardScale(Math.min(1, usable / 1536));
setIsMobile(window.innerWidth < 768);
setIsSmallViewport(window.innerWidth < 1024);
};

View file

@ -195,7 +195,16 @@ export function UserMenu() {
padding: 12,
// Popover (не card) — допустимая лёгкая тень для отделения.
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
zIndex: 200,
// 1000, а не 200. Меню шапки обязано лежать поверх содержимого
// страницы: при 200 его перекрывала мини-карта отчёта, у которой
// внутренние слои Leaflet доходят до 800 (атрибуция). Найдено на
// проде 27.08 — меню аккаунта открывалось ПОД картой.
//
// Корень чинится в HeroBar (`isolation: isolate` на контейнере
// карты), эта правка — вторая половина: даже когда чужой блок снова
// начнёт соперничать за слои, шапка останется сверху по замыслу, а
// не по случайному совпадению чисел.
zIndex: 1000,
}}
>
<div

View file

@ -419,6 +419,23 @@ export default function HeroBar({
<div
style={{
position: "relative",
// ИЗОЛЯЦИЯ ОБЯЗАТЕЛЬНА. `position: relative` с `z-index: auto`
// контекст наложения НЕ создаёт: внутренние слои Leaflet (тайлы 200,
// оверлеи 400, маркер 600, атрибуция 800) и карточка адреса (750)
// конкурируют не между собой, а СО ВСЕЙ СТРАНИЦЕЙ.
//
// Прод, 27.08 — два симптома одной причины:
// • меню аккаунта (UserMenu, z-index 200) открывалось ПОД картой;
// • карточка «АДРЕС» всплывала поверх таблицы раздела «Продажи
// в доме» при прокрутке.
// Поднимать z-index у каждого пострадавшего элемента бесполезно:
// 800 у атрибуции пришлось бы перебивать везде, и гонка вернулась
// бы при следующем новом элементе.
//
// `isolation: isolate` создаёт контекст, не меняя порядок среди
// соседей: вся внутренняя кухня карты остаётся внутри рамки, а сам
// блок встаёт в потоке там же, где стоял.
isolation: "isolate",
width: 560,
height: 152,
flex: "0 0 auto",