mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

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

Browse source 
Fix toolbar safe area in experimental layout
This commit is contained in:
Bill Thornton 2025-02-13 16:19:14 -05:00 • committed by GitHub
commit 8b0358f033
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/toolbar/AppToolbar.tsx
View file

@ -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))'
}
}}
>