Merge pull request #8195 from jellyfin/app-bar-padding

Author: thornbill

src/apps/dashboard/AppLayout.tsx

@@ -79,6 +79,7 @@ export const Component: FC = () => {
                             buttons={
                                 <HelpButton />
                             }
+                            className='dashboard-appBar'
                         >
                             {isMetadataManager && (
                                 <ServerButton />

src/apps/modern/components/AppToolbar/index.tsx

@@ -47,6 +47,7 @@ const AppToolbar: FC<AppToolbarProps> = ({
             onDrawerButtonClick={onDrawerButtonClick}
             isBackButtonAvailable={isBackButtonAvailable}
             isUserMenuAvailable={!isPublicPath}
+            className='padded-left padded-right'
         >
             {!isDrawerAvailable && (
                 <Stack

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

@@ -70,6 +70,7 @@ const VideoPage: FC = () => {
                                 <RemotePlayButton />
                             </>
                         }
+                        className='padded-left padded-right'
                     >
                         <Typography>{videoTitle}</Typography>
                     </AppToolbar>

src/components/toolbar/AppToolbar.tsx

@@ -19,6 +19,7 @@ interface AppToolbarProps {
     onDrawerButtonClick?: (event: React.MouseEvent<HTMLElement>) => void
     isBackButtonAvailable?: boolean
     isUserMenuAvailable?: boolean
+    className?: string
 }
 
 const onBackButtonClick = () => {
@@ -35,34 +36,27 @@ const AppToolbar: FC<PropsWithChildren<AppToolbarProps>> = ({
     isDrawerOpen,
     onDrawerButtonClick = () => { /* no-op */ },
     isBackButtonAvailable = false,
-    isUserMenuAvailable = true
+    isUserMenuAvailable = true,
+    className
 }) => {
     const { user } = useApi();
     const isUserLoggedIn = Boolean(user);
 
     return (
         <Toolbar
             variant='dense'
+            className={className}
             sx={{
                 flexWrap: {
                     xs: 'wrap',
                     lg: 'nowrap'
-                },
-                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))'
                 }
             }}
         >
             {isUserLoggedIn && isDrawerAvailable && (
                 <Tooltip title={globalize.translate(isDrawerOpen ? 'MenuClose' : 'MenuOpen')}>
                     <IconButton
                         size='large'
-                        edge='start'
                         color='inherit'
                         aria-label={globalize.translate(isDrawerOpen ? 'MenuClose' : 'MenuOpen')}
                         onClick={onDrawerButtonClick}
@@ -76,8 +70,6 @@ const AppToolbar: FC<PropsWithChildren<AppToolbarProps>> = ({
                 <Tooltip title={globalize.translate('ButtonBack')}>
                     <IconButton
                         size='large'
-                        // Set the edge if the drawer button is not shown
-                        edge={!(isUserLoggedIn && isDrawerAvailable) ? 'start' : undefined}
                         color='inherit'
                         aria-label={globalize.translate('ButtonBack')}
                         onClick={onBackButtonClick}

src/styles/dashboard.scss

@@ -151,7 +151,8 @@ div[data-role=controlgroup] a.ui-btn-active {
     vertical-align: middle;
 }
 
-.content-primary {
+.content-primary,
+.dashboardDocument .dashboard-appBar {
     padding-right: 1em;
     padding-left: 1em;
 }