Sidebar doesn't account for dynamic viewport height

[nicko170]

Package

filament/filament

Package Version

v3.2.5

Laravel Version

v10.41.0

Livewire Version

v3.3.5

PHP Version

8.3.0

Problem description

hey @zepfietje as discussed in Discord, menu scrolling in Chrome and Safari on iOS does not work. I haven't tested Android. If there are more than say 10 items, you cannot get to the bottom ones in the list as there isn't enough padding on the bottom. See attached video, and reproduction repository.

Originally thought this was minimal theme doing it - but it's happening in core too

https://github.com/filamentphp/filament/assets/9477420/5c7abda5-aff6-4cc9-afcb-1f3f7df2af4e

Expected behavior

The items at the botton of the menu stay on screen and can be clicked whilst using the menu on mobile devices.

Steps to reproduce

Load the dashboard with a large (say 30) number of items, and try scrolling in chrome or safari on an ios device, not in the chrome device simulator as that doesn't match the behaviour of the on device app headers.

Reproduction repository

https://github.com/nicko170/filament-demo

Relevant log output

No response

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[ziming]

can confirm this is happening on iPhone

scrolling also have issue on table slide over & modal on iPhone safari and chrome. So people can't scroll down when they click on an action on the table row & a slideover & modal shows up

[zepfietje]

Just opened an issue for that when I noticed it myself: https://github.com/filamentphp/filament/issues/11034. @ziming