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

Fix toolbar safe are in experimental layout

Browse source
This commit is contained in:
Bill Thornton 2025-01-25 03:16:48 -05:00
parent 2689c51b84
commit 5a7a859b01
2 changed files with 16 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/apps/experimental/routes/video/index.tsx
View file

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

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