diff --git a/packages/pl-fe/src/components/ui/layout.tsx b/packages/pl-fe/src/components/ui/layout.tsx index e5edfa5ab..0f8c6964d 100644 --- a/packages/pl-fe/src/components/ui/layout.tsx +++ b/packages/pl-fe/src/components/ui/layout.tsx @@ -140,7 +140,8 @@ const Main: React.FC> = ({ children, classN const Aside: React.FC = ({ children }) => { const isVisible = useMinWidth(`(min-width: ${breakpoints.xl})`); const wcoRect = useWindowControlsOverlay(); - const offsetTop = wcoRect && wcoRect.x + wcoRect.width < window.innerWidth ? 16 + wcoRect.y : 16; + const offsetTop = + wcoRect && wcoRect.x + wcoRect.width < window.innerWidth ? 16 + wcoRect.height : 16; if (!isVisible) { return null; diff --git a/packages/pl-fe/src/init/pl-fe-head.tsx b/packages/pl-fe/src/init/pl-fe-head.tsx index ebcb55fb1..73dc2eefa 100644 --- a/packages/pl-fe/src/init/pl-fe-head.tsx +++ b/packages/pl-fe/src/init/pl-fe-head.tsx @@ -26,6 +26,7 @@ const PlFeHead = () => { const frontendConfig = useFrontendConfig(); const theme = useTheme(); const [wcoVisible, setWcoVisible] = React.useState(false); + const [wcoRight, setWcoRight] = React.useState(false); const withModals = useHasModals(); @@ -50,7 +51,16 @@ const PlFeHead = () => { const overlay = navigator.windowControlsOverlay; if (!overlay) return; - const update = () => setWcoVisible(overlay.visible); + const update = () => { + setWcoVisible(overlay.visible); + if (overlay.visible) { + const rect = overlay.getTitlebarAreaRect(); + setWcoRight(rect.x + rect.width < window.innerWidth); + } else { + setWcoRight(false); + } + }; + update(); overlay.addEventListener('geometrychange', update); return () => overlay.removeEventListener('geometrychange', update); }, []); @@ -60,7 +70,7 @@ const PlFeHead = () => { return window.getComputedStyle(document.body, null).getPropertyValue('background-color'); } return frontendConfig.brandColor; - }, [frontendConfig.brandColor, theme, wcoVisible]); + }, [frontendConfig.brandColor, theme, wcoVisible, wcoRight]); return ( <> @@ -71,6 +81,7 @@ const PlFeHead = () => { dark: theme === 'dark', 'black dark': theme === 'black', 'window-controls-overlay': wcoVisible, + 'window-controls-overlay--right': wcoRight, })} /> diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss index d827c779a..d12db461b 100644 --- a/packages/pl-fe/src/styles/new/layout.scss +++ b/packages/pl-fe/src/styles/new/layout.scss @@ -379,7 +379,9 @@ body { padding-top: env(titlebar-area-height); @media (min-width: variables.$breakpoint-lg) { - padding-top: 0; + &:is(.window-controls-overlay:not(.window-controls-overlay--right) *) { + padding-top: 0; + } } } }