diff --git a/src/components/status.jsx b/src/components/status.jsx index 51ec51eb..d544d2f5 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -570,7 +570,7 @@ function Status({ onContextMenu={(e) => { if (size === 'l') return; if (e.metaKey) return; - console.log('context menu', e); + // console.log('context menu', e); const link = e.target.closest('a'); if (link && /^https?:\/\//.test(link.getAttribute('href'))) return; e.preventDefault(); @@ -602,7 +602,7 @@ function Status({ }, }} overflow="auto" - boundingBoxPadding="8 8 8 8" + boundingBoxPadding={safeBoundingBoxPadding()} unmountOnClose > {StatusMenuItems} @@ -1601,4 +1601,25 @@ function getHTMLText(html) { return div.innerText.replace(/[\r\n]{3,}/g, '\n\n').trim(); } +const root = document.documentElement; +const defaultBoundingBoxPadding = 8; +function safeBoundingBoxPadding() { + // Get safe area inset variables from root + const style = getComputedStyle(root); + const safeAreaInsetTop = style.getPropertyValue('--sai-top'); + const safeAreaInsetRight = style.getPropertyValue('--sai-right'); + const safeAreaInsetBottom = style.getPropertyValue('--sai-bottom'); + const safeAreaInsetLeft = style.getPropertyValue('--sai-left'); + const str = [ + safeAreaInsetTop, + safeAreaInsetRight, + safeAreaInsetBottom, + safeAreaInsetLeft, + ] + .map((v) => parseInt(v, 10) || defaultBoundingBoxPadding) + .join(' '); + // console.log(str); + return str; +} + export default memo(Status); diff --git a/src/index.css b/src/index.css index f26c71e4..339df71f 100644 --- a/src/index.css +++ b/src/index.css @@ -2,6 +2,11 @@ @custom-media --viewport-medium (min-width: 40em); :root { + --sai-top: env(safe-area-inset-top); + --sai-right: env(safe-area-inset-right); + --sai-bottom: env(safe-area-inset-bottom); + --sai-left: env(safe-area-inset-left); + --text-size: 16px; --main-width: 40em; text-size-adjust: none;