diff --git a/public/css/main.css b/public/css/main.css index 0391ebc..fe0e391 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -38,6 +38,8 @@ html { --radius-card: 14px; --radius-btn: 14px; --space: clamp(1rem, 4vw, 2.75rem); + /* Единый отступ fixed-элементов (FAB, плавающее меню) от краёв вьюпорта */ + --edge-pad: max(var(--space), env(safe-area-inset-right, 0px), env(safe-area-inset-bottom, 0px), env(safe-area-inset-left, 0px), env(safe-area-inset-top, 0px)); /* Контент на всю ширину экрана, поля только от --space и safe area */ --max: none; --font: "Alice", system-ui, -apple-system, serif; @@ -811,8 +813,8 @@ a:visited:not(.btn):not(.fab):not(.logo):not(.skip-link):hover { .fab-stack { position: fixed; - right: max(var(--space), env(safe-area-inset-right, 0px)); - bottom: max(1rem, env(safe-area-inset-bottom, 0px)); + right: var(--edge-pad); + bottom: var(--edge-pad); display: flex; flex-direction: column; align-items: flex-end; diff --git a/public/js/modules/header/nav-overflow.js b/public/js/modules/header/nav-overflow.js index a1f0c51..e0d5a6c 100644 --- a/public/js/modules/header/nav-overflow.js +++ b/public/js/modules/header/nav-overflow.js @@ -10,7 +10,20 @@ export function initNavOverflow() { const links = Array.from(nav.querySelectorAll("a")); const MENU_GAP = 6; - const VIEWPORT_PAD = 8; + function getEdgePad() { + const raw = getComputedStyle(document.documentElement).getPropertyValue("--edge-pad").trim(); + if (!raw) return 8; + // resolve через временный элемент, т.к. значение — max(...clamp...) + const probe = document.createElement("span"); + probe.style.all = "unset"; + probe.style.position = "fixed"; + probe.style.left = raw; + document.body.appendChild(probe); + const px = probe.getBoundingClientRect().left; + probe.remove(); + return Math.max(0, Math.round(px)); + } + let VIEWPORT_PAD = getEdgePad(); let openInFloatingMode = null; let resizeRaf = 0; @@ -139,6 +152,7 @@ export function initNavOverflow() { const onResize = () => { if (resizeRaf) cancelAnimationFrame(resizeRaf); resizeRaf = requestAnimationFrame(() => { + VIEWPORT_PAD = getEdgePad(); layoutLinks(); placeMoreMenu(); resizeRaf = 0;