[DashboardLayout] Fix app bar items alignment (#4437)

mui · Nov 19, 2024 · 94f9652 · 94f9652
1 parent 840e8e1
commit 94f9652
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/packages/create-toolpad-app/src/index.ts b/packages/create-toolpad-app/src/index.ts
@@ -54,7 +54,6 @@ function getPackageManager(): PackageManager {
 }
 
 // From https://github.com/vercel/next.js/blob/canary/packages/create-next-app/helpers/is-folder-empty.ts
-
 async function isFolderEmpty(pathDir: string): Promise<boolean> {
   const validFiles = [
     '.DS_Store',

diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
@@ -329,7 +329,12 @@ function DashboardLayout(props: DashboardLayoutProps) {
         <Toolbar sx={{ backgroundColor: 'inherit', mx: { xs: -0.75, sm: -1.5 } }}>
           <Stack
             direction="row"
-            sx={{ flexWrap: 'wrap', justifyContent: 'space-between', width: '100%', py: 1.5 }}
+            justifyContent="space-between"
+            alignItems="center"
+            sx={{
+              flexWrap: 'wrap',
+              width: '100%',
+            }}
           >
             <Stack direction="row">
               {!hideNavigation ? (
@@ -369,7 +374,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
                 </Stack>
               </Link>
             </Stack>
-            <Stack direction="row" spacing={1} sx={{ marginLeft: 'auto' }}>
+            <Stack direction="row" alignItems="center" spacing={1} sx={{ marginLeft: 'auto' }}>
               <ToolbarActionsSlot {...slotProps?.toolbarActions} />
               <ToolbarAccountSlot {...slotProps?.toolbarAccount} />
             </Stack>

diff --git a/packages/toolpad-core/src/DashboardLayout/ToolbarActions.tsx b/packages/toolpad-core/src/DashboardLayout/ToolbarActions.tsx
@@ -14,7 +14,7 @@ import { ThemeSwitcher } from './ThemeSwitcher';
  */
 function ToolbarActions() {
   return (
-    <Stack direction="row">
+    <Stack direction="row" alignItems="center">
       <ThemeSwitcher />
     </Stack>
   );

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml