Select menu width not taking border into account

[aldrichdev]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-4lhmay?file=Demo.tsx

Steps:

1. Observe the MuiFormControl-root width.
2. Open the dropdown. Observe that the menu item widths are 4px less.
3. The menu is not taking the 4px border (2px on left, 2px on right) of the select into account when calculating its width.

I am not sure why the menu appears slightly to the right under the dropdown, but I would ignore this, it is not happening in my project.

Current behavior

The width of the select menu is not calculated correctly because it does not include the select's borders in the calculation.

Expected behavior

The menu width should match the select width even if it has borders.

Context

I'm trying to get the dropdown menu to appear as the same width as the select without explicitly telling the menu to be 328px as well, and that solution isn't really viable for mobile since we want the select to be 100% of the width of the viewport.

Your environment

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (121.0.2277.112)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/core-downloads-tracker:  5.14.3
    @mui/icons-material: ^5.15.0 => 5.15.0
    @mui/material: ^5.14.3 => 5.14.3
    @mui/styled-engine:  5.13.2
    @mui/system: ^5.13.5 => 5.14.3
    @mui/types: ^7.2.4 => 7.2.4
    @mui/utils:  5.14.3
    @types/react: ^18.0.0 => 18.2.7
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^4.4.2 => 4.9.5

Search keywords: select menu width