[docs-infra] Fix layout shift demo toolbar (#42743)

mui · Jun 24, 2024 · 7a47edd · 7a47edd
1 parent 3d10564
commit 7a47edd
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -45,7 +45,7 @@ function DemoToolbarFallback() {
   const t = useTranslate();
 
   // Sync with styles from DemoToolbar, we can't import the styles
-  return <Box sx={{ height: 40 }} aria-busy aria-label={t('demoToolbarLabel')} role="toolbar" />;
+  return <Box sx={{ height: 42 }} aria-busy aria-label={t('demoToolbarLabel')} role="toolbar" />;
 }
 
 function getDemoName(location) {

diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
@@ -60,7 +60,7 @@ const Root = styled('div')(({ theme }) => [
 function DemoTooltip(props) {
   return (
     <Tooltip
-      componentsProps={{
+      slotProps={{
         popper: {
           sx: {
             zIndex: (theme) => theme.zIndex.appBar - 1,

diff --git a/docs/src/modules/components/DemoToolbarRoot.ts b/docs/src/modules/components/DemoToolbarRoot.ts
@@ -15,7 +15,7 @@ const DemoToolbarRoot = styled('div', {
       maxHeight: 50,
       display: 'block',
       marginTop: -1,
-      padding: theme.spacing(0.5, 1),
+      padding: theme.spacing('2px', 1),
       border: `1px solid ${(theme.vars || theme).palette.divider}`,
       borderTopWidth: 0,
       backgroundColor: alpha(theme.palette.grey[50], 0.2),
@@ -54,4 +54,5 @@ const DemoToolbarRoot = styled('div', {
     },
   }),
 ]);
+
 export default DemoToolbarRoot;