Merge pull request #6479 from thornbill/fix-experimental-inset

Fix toolbar safe area in experimental layout

src/apps/experimental/routes/video/index.tsx

@@ -46,6 +46,7 @@ const VideoPage: FC = () => {
                     <AppToolbar
                         isDrawerAvailable={false}
                         isDrawerOpen={false}
+                        isFullscreen
                         isUserMenuAvailable={false}
                         buttons={
                             <>

src/components/toolbar/AppToolbar.tsx

@@ -17,6 +17,7 @@ interface AppToolbarProps {
     isDrawerAvailable: boolean
     isDrawerOpen: boolean
     onDrawerButtonClick?: (event: React.MouseEvent<HTMLElement>) => void,
+    isFullscreen?: boolean,
     isUserMenuAvailable?: boolean
 }
 
@@ -33,6 +34,7 @@ const AppToolbar: FC<PropsWithChildren<AppToolbarProps>> = ({
     isDrawerAvailable,
     isDrawerOpen,
     onDrawerButtonClick = () => { /* no-op */ },
+    isFullscreen = false,
     isUserMenuAvailable = true
 }) => {
     const { user } = useApi();
@@ -40,6 +42,9 @@ const AppToolbar: FC<PropsWithChildren<AppToolbarProps>> = ({
 
     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 (
         <Toolbar
             variant='dense'
@@ -47,6 +52,16 @@ const AppToolbar: FC<PropsWithChildren<AppToolbarProps>> = ({
                 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))'
                 }
             }}
         >