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.

  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