fix(mera/ui): карта перестала перекрывать интерфейс, страница помещается в окно
All checks were successful
CI Trade-In / changes (pull_request) Successful in 8s
CI Trade-In / backend-tests (pull_request) Has been skipped
CI / changes (pull_request) Successful in 10s
CI Trade-In / browser-tests (pull_request) Has been skipped
CI / backend-tests (pull_request) Has been skipped
CI / frontend-tests (pull_request) Has been skipped
CI / openapi-codegen-check (pull_request) Has been skipped
CI Trade-In / frontend-checks (pull_request) Successful in 1m6s
All checks were successful
CI Trade-In / changes (pull_request) Successful in 8s
CI Trade-In / backend-tests (pull_request) Has been skipped
CI / changes (pull_request) Successful in 10s
CI Trade-In / browser-tests (pull_request) Has been skipped
CI / backend-tests (pull_request) Has been skipped
CI / frontend-tests (pull_request) Has been skipped
CI / openapi-codegen-check (pull_request) Has been skipped
CI Trade-In / frontend-checks (pull_request) Successful in 1m6s
Три правки, две причины — обе найдены прогоном по живому проду 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: это классификация устройства, а не расчёт геометрии.
This commit is contained in:
parent
51c779c092
commit
0231338a7f
3 changed files with 39 additions and 2 deletions
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue