Larger text hides the options button in AccountPreview

[HVish]

Steps to reproduce

Scenario-1, Steps:

1. Open this link, look for "User account in layout sidebar" example
2. Try changing the user's name (demoSession.user.name) to a larger text, e.g. "Bharat Kashyap fdfdsf asdfdsfs sdfadsfsd asdfsdfsdfa"
3. Look the sidebar footer in the demo

Scenario-2, Steps (related to the same issue):

1. Open this link, look for "User account in layout sidebar" example

2. Replace NAVIGATION object with following values:

   const NAVIGATION: Navigation = [ ... ];

   const NAVIGATION: Navigation = [
     {
       kind: 'header',
       title: 'Main items',
     },
     {
       segment: 'dashboard',
       title: 'Dashboard',
       icon: <DashboardIcon />,
     },
     {
       segment: 'orders',
       title: 'Orders',
       icon: <ShoppingCartIcon />,
     },
     {
       segment: 'dashboard',
       title: 'Dashboard',
       icon: <DashboardIcon />,
     },
     {
       segment: 'orders',
       title: 'Orders',
       icon: <ShoppingCartIcon />,
     },
     {
       segment: 'dashboard',
       title: 'Dashboard',
       icon: <DashboardIcon />,
     },
     {
       segment: 'orders',
       title: 'Orders',
       icon: <ShoppingCartIcon />,
     },
     {
       segment: 'dashboard',
       title: 'Dashboard',
       icon: <DashboardIcon />,
     },
     {
       segment: 'orders',
       title: 'Orders',
       icon: <ShoppingCartIcon />,
     },
     {
       segment: 'dashboard',
       title: 'Dashboard',
       icon: <DashboardIcon />,
     },
     {
       segment: 'orders',
       title: 'Orders',
       icon: <ShoppingCartIcon />,
     },
     {
       segment: 'dashboard',
       title: 'Dashboard',
       icon: <DashboardIcon />,
     },
     {
       segment: 'orders',
       title: 'Orders',
       icon: <ShoppingCartIcon />,
     },
     {
       segment: 'dashboard',
       title: 'Dashboard',
       icon: <DashboardIcon />,
     },
     {
       segment: 'orders',
       title: 'Orders',
       icon: <ShoppingCartIcon />,
     },
     {
       segment: 'dashboard',
       title: 'Dashboard',
       icon: <DashboardIcon />,
     },
     {
       segment: 'orders',
       title: 'Orders',
       icon: <ShoppingCartIcon />,
     },
     {
       segment: 'dashboard',
       title: 'Dashboard',
       icon: <DashboardIcon />,
     },
     {
       segment: 'orders',
       title: 'Orders',
       icon: <ShoppingCartIcon />,
     },
   ];

3. Look the demo again and try scrolling to bottom of sidebar.

Current behavior

In scenario-1: The options button (three dots) gets hidden.
In scenario-2: The whole account preview section gets hidden.

Expected behavior

In both scenario the account preview and options menu should not hide.

Context

I'm trying to add account preview section in sidebar.

Your environment

I've used google chrome browser.

npx @mui/envinfo

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

  System:
    OS: macOS 15.2
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.205
    Edge: Not Found
    Safari: 18.2
  npmPackages:
    @emotion/react: ^11 => 11.14.0 
    @emotion/styled: ^11 => 11.14.0 
    @mui/base:  5.0.0-beta.66 
    @mui/core-downloads-tracker:  6.2.1 
    @mui/icons-material: ^6 => 6.2.1 
    @mui/lab:  6.0.0-beta.19 
    @mui/material: ^6 => 6.2.1 
    @mui/private-theming:  6.2.1 
    @mui/styled-engine:  6.2.1 
    @mui/system:  6.2.1 
    @mui/types:  7.2.20 
    @mui/utils:  6.2.1 
    @toolpad/core: latest => 0.11.0 
    @toolpad/utils:  0.11.0 
    @types/react: ^18 => 18.3.18 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1 
    typescript: ^5 => 5.7.2 

Search keywords: AccountPreview, Account Preview

[HVish]

I tried fixing it locally for my use-case, I had to apply following styles:

<Stack direction="column" p={0}> {/* removed overflow style from here */}
  <Divider />
  <AccountPreview
    variant={mini ? 'condensed' : 'expanded'}
    handleClick={handleClick}
    open={open}
    sx={{
      '& .MuiStack-root': {
        overflow: 'hidden', // added it here
      },
    }}
  />
</Stack>

So I think, the issue is with this line, it should have the overflow-hidden style applied. And we should remove the overflow style from the root level Stack component in the documentation example.

[bharatkashyap]

Thanks for the great issue report! Makes sense to me, the overflow="hidden" can be removed from the demo Stack and added on the component root Stack.

We'd need to make sure that larger text doesn't hide the options button even with the overflow="hidden" on the parent Stack - while there is a noWrap on the name and email Typography elements, it isn't working as intended without a provided width. I think setting a maxWidth on both those elements so that larger text can be shown as truncated will complete this fix.

I'll open a PR 👍🏻

[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

@HVish 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.