Customisation toolbar overlap

[ethan1141]

Steps to reproduce

Link to live example: (required) its not live

Steps:

1. provider a jsx component to slots
2. <DashboardLayout
   slots={{
   toolbarActions: Search,
   }}
   >
   3.shrink or go to mobile view - it overlaps content

Current behavior

Expected behavior

fall down below each other

Context

to add content to the right corner

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

System:
OS: macOS 13.4.1
Binaries:
Node: 21.4.0 - /opt/homebrew/bin/node
npm: 10.8.2 - /opt/homebrew/bin/npm
pnpm: Not Found
Browsers:
Chrome: 127.0.6533.120
Edge: Not Found
Safari: 16.5.2
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/base: ^5.0.0-beta.40 => 5.0.0-beta.40
@mui/core-downloads-tracker: 5.16.7
@mui/icons-material: ^6.1.0 => 6.1.0
@mui/joy: ^5.0.0-beta.48 => 5.0.0-beta.48
@mui/lab: 6.0.0-beta.9
@mui/material: ^6.1.0 => 6.1.0
@mui/private-theming: 6.1.0
@mui/styled-engine: 6.1.0
@mui/system: 6.1.0
@mui/types: 7.2.15
@mui/utils: 5.16.6
@mui/x-data-grid: ^7.16.0 => 7.16.0
@mui/x-date-pickers: ^7.15.0 => 7.15.0
@mui/x-internals: 7.16.0
@toolpad/core: ^0.6.0 => 0.6.0
@toolpad/utils: 0.6.0
@types/react: 18.3.1 => 18.3.1
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
typescript: 5.4.5 => 5.4.5

Search keywords: Customisation, overlap

[Janpot]

Link to live example: (required) its not live

You can use stackblitz/codesandbox

1. We could improve the layout to keep the title centered between the left menu button and the right actions
2. You can always use media queries to hide content on smaller screens.
3. Default behavior could be what you propose:

   fall down below each other

[apedroferreira]

For now my suggestion would be to show something smaller or nothing at all in smaller breakpoints as shown in the demo/example at https://mui.com/toolpad/core/react-dashboard-layout/#system-DashboardLayoutSlots.tsx

Will try to come up with a more "automatic solution" for this though if possible!

[apedroferreira]

Another idea that might help fix this on our side: keeping the title left-aligned instead of centering it in mobile viewports.

[ethan1141]

Screen.Recording.2024-09-19.at.1.20.23.pm.mov

i'm using a external style sheet to achieve my desired goals for the moment until there's a default option for stacking elements in the menu (see video)

@media (max-width: 600px) { div.MuiBox-root.css-1btlyma { position: relative; left: unset; -webkit-transform: unset; -moz-transform: unset; -ms-transform: unset; transform: unset; } div.css-k008qs { display: unset; } div.css-ju88wr-MuiToolbar-root { flex-wrap: wrap; } header.css-162wlvu-MuiPaper-root-MuiAppBar-root { display: contents; } div.css-jp8v2o-MuiToolbar-root { display: none; } }

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ethan1141 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.