Popover: Prevent the Popover from going outside the browser window in some situations

[Saman-00]

Description

popover-content is positioned based on the parent element of the MudPopover component, and when this parent element is outside the browser window, the popup also goes outside the window and is partially visible or not visible at all, this seems to be a common occurrence in MudDataGrid's simple filter popover when the grid has a scroll.

This behavior can be viewed here: https://try.mudblazor.com/snippet/cOGeEScJpoYZVWLx This commit attempts to fix the issue by preventing the popover from going outside the window. It potentially fixes these issues: Fixes #8180, fixes #8173, fixes #7032, fixes #7707

This video shows how it currently is: https://github.com/MudBlazor/MudBlazor/assets/5804803/803e4884-a5b0-4452-ae4c-afe2552c3ed8 This one shows how it will behave after the change: https://github.com/MudBlazor/MudBlazor/assets/5804803/5f30914b-9bd0-4680-a603-246639298a47

How Has This Been Tested?

This change has been tested visually, I made a component out of the TryMudBlazor snippet and tested manually.

Type of Changes

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Documentation (fix or improvement to the website or code docs)

Checklist

• [x] The PR is submitted to the correct branch (dev).
• [x] My code follows the code style of this project.
• [ ] I've added relevant tests.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 90.49%. Comparing base (28bc599) to head (2fae789). Report is 176 commits behind head on dev.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## dev #8815 +/- ## ========================================== + Coverage 89.82% 90.49% +0.66% ========================================== Files 412 419 +7 Lines 11878 12189 +311 Branches 2364 2380 +16 ========================================== + Hits 10670 11030 +360 + Misses 681 627 -54 - Partials 527 532 +5 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[danielchalmers]

Strangely the notification popover still seems to get clipped (https://github.com/MudBlazor/MudBlazor/issues/7032#issuecomment-2055959684)

Shrink the window until it changes layout, click the hamburger menu, then click the notifications icon to see

[Saman-00]

Strangely the notification popover still seems to get clipped (#7032 (comment))

Shrink the window until it changes layout, click the hamburger menu, then click the notifications icon to see

Do you mean that the popover still goes outside the window after my changes? because I can't reproduce that.

But my notification area looks wrong, maybe that is the reason

[danielchalmers]

That seems to be working now, not sure if i was on the wrong branch before (🤦 )

Seems to be a miscalculation with the scrolling now:

https://github.com/MudBlazor/MudBlazor/assets/7112040/dbe6341c-a205-4f07-98b7-5f82da533c2a

See notifications:

[danielchalmers]

What do you think about this by the way https://github.com/MudBlazor/MudBlazor/issues/1167#issuecomment-2075508364? I want to get the tooltip layout fixed but something needs to be adjusted in the javascript (try settings display: contents on a tooltip then hover over it).