From 087693877d96b5192baa5db829a704e1f9607e3d Mon Sep 17 00:00:00 2001 From: vladtechno Date: Mon, 25 May 2026 12:04:08 +1000 Subject: [PATCH] fix(pwa): respect iOS safe-area-inset on body + sticky/fixed headers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit В iOS PWA при viewport-fit=cover и apple-mobile-web-app-status-bar-style= black-translucent статус-бар прозрачно накладывается на шапки страниц (пользователи жаловались скринами с overlap «11:37» поверх «Ремонт #12»). Body теперь имеет padding-top/bottom env(safe-area-inset-*) — fix initial- рендер и нижних кнопок. Для sticky/fixed .top-0 хедеров отдельно overrid'им top: env(safe-area-inset-top), т.к. sticky прилипает к top:0 viewport, а не к содержимому body. Селектор узкий (.sticky.top-0 / .fixed.top-0) — не задевает .fixed.inset-0 полноэкранные модалки. --- mechanic-pwa/frontend/src/index.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/mechanic-pwa/frontend/src/index.css b/mechanic-pwa/frontend/src/index.css index 90fffd9..6f8cbf4 100644 --- a/mechanic-pwa/frontend/src/index.css +++ b/mechanic-pwa/frontend/src/index.css @@ -31,5 +31,20 @@ * { @apply border-border; } body { @apply bg-background text-foreground font-sans; + /* iOS PWA: status bar (status-bar-style=black-translucent) и home-indicator + перекрывают контент при viewport-fit=cover. Сдвигаем body content вниз + на высоту safe-area, чтобы шапки/кнопки не уезжали под системные зоны. */ + padding-top: env(safe-area-inset-top); + padding-bottom: env(safe-area-inset-bottom); + } +} + +@layer utilities { + /* iOS PWA: position:sticky + top:0 прилипает к самому верху viewport, + т.е. под статус-бар (containing-block тут не помогает). Переопределяем + top у всех Tailwind .top-0, чтобы шапки залипали ниже notch. */ + .sticky.top-0, + .fixed.top-0 { + top: env(safe-area-inset-top); } }