Popover is too tall. Hardcoded `max-height` ignores `marginThreshold` prop

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Currently when a Popover component is given a marginThreshold prop that differs from 16 (the default value), the popover can exceed the height of the screen because the Popover Paper element has a static style of max-height: calc(100% - 32px). The 32px here represents 2 * 16 which is twice the default marginThreshold value (once for the space at the top and once for the space at the bottom).

The problematic lines are here:
https://github.com/mui-org/material-ui/blob/4c7937336675657fca87481f2fa0991449c15605/packages/mui-material/src/Popover/Popover.js#L90,L91

Expected behavior 🤔

Instead, the max-height should be calculated dynamically based on the marginThreshold prop.

Steps to reproduce 🕹

Minimal reproduction case

Minimal reproduction case with a marginThreshold of 50 for example and content set to a height of 200vh:
https://codesandbox.io/s/popover-margin-threshold-lmgdl?file=/src/App.js

In this example, if you change the marginThreshold back to 16, it no longer exceeds the screen.

Taking into account the anchorEl

As a second improvement, the Popover should ideally also calculate its height based on the anchor origin and the anchorEl given to it. For example, take a look at the following screenshot:

The max-height should respect the following design if possible. My current workaround is the followinig:

const MARGIN_THRESHOLD = 50;
<Popover
      anchorEl={anchorEl}
      sx={{
        maxHeight: `calc(100% - ${MARGIN_THRESHOLD + anchorEl?.getBoundingClientRect().bottom}px)`,
      }}
      marginThreshold={MARGIN_THRESHOLD}
      // ... other props
      />

Context 🔦

No response

Your environment 🌎

Tested on Chrome 96. Though this isn't a browser issue, it's a bug in the height calculation logic.

  System:
    OS: Linux 5.10 Ubuntu 20.04 LTS (Focal Fossa)
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: Not Found
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.60 
    @mui/icons-material: ^5.2.5 => 5.2.5 
    @mui/lab: ^5.0.0-alpha.62 => 5.0.0-alpha.62 
    @mui/material: ^5.2.4 => 5.2.4 
    @mui/private-theming:  5.2.3 
    @mui/styled-engine:  5.2.6 
    @mui/system:  5.2.4 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.3 
    @types/react: 17.0.37 => 17.0.37 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.5.4 => 4.5.4 

Start with packages/mui-material/src/Popover/Popover.js at the lines linked in the issue and inspect how the Paper max-height is set relative to marginThreshold. Reproduce the problem with the linked CodeSandbox using marginThreshold 50 and 200vh content; done means the popover no longer exceeds the screen when the prop differs from 16, with the anchorEl behavior considered separately.