diff --git a/src/apps/experimental/routes/video/index.tsx b/src/apps/experimental/routes/video/index.tsx index f9322352d5..b3ded898a8 100644 --- a/src/apps/experimental/routes/video/index.tsx +++ b/src/apps/experimental/routes/video/index.tsx @@ -46,6 +46,7 @@ const VideoPage: FC = () => { diff --git a/src/components/toolbar/AppToolbar.tsx b/src/components/toolbar/AppToolbar.tsx index c06355a2db..4c34aaf3c1 100644 --- a/src/components/toolbar/AppToolbar.tsx +++ b/src/components/toolbar/AppToolbar.tsx @@ -17,6 +17,7 @@ interface AppToolbarProps { isDrawerAvailable: boolean isDrawerOpen: boolean onDrawerButtonClick?: (event: React.MouseEvent) => void, + isFullscreen?: boolean, isUserMenuAvailable?: boolean } @@ -33,6 +34,7 @@ const AppToolbar: FC> = ({ isDrawerAvailable, isDrawerOpen, onDrawerButtonClick = () => { /* no-op */ }, + isFullscreen = false, isUserMenuAvailable = true }) => { const { user } = useApi(); @@ -40,6 +42,9 @@ const AppToolbar: FC> = ({ const isBackButtonAvailable = appRouter.canGoBack(); + // Only use the left safe area padding when the drawer is not pinned or in a fullscreen view + const useSafeAreaLeft = isDrawerAvailable || isFullscreen; + return ( > = ({ flexWrap: { xs: 'wrap', lg: 'nowrap' + }, + ...(useSafeAreaLeft && { + pl: { + xs: 'max(16px, env(safe-area-inset-left))', + sm: 'max(24px, env(safe-area-inset-left))' + } + }), + pr: { + xs: 'max(16px, env(safe-area-inset-left))', + sm: 'max(24px, env(safe-area-inset-left))' } }} >