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; } }