fix: dropdowns should have a max-height & padding from screen

[harshrajeevsingh]

Fixes: #6105

Problem

• The dropdown gets clipped when the number of filters increases.

Solution

• Added scroll property to the DropdownMenu
• Added size middleware to the floating UI hook.
• Provided padding of 20px to the size middleware, so that it maintains distance from the bottom of the screen.

Screencast.from.2024-10-25.13-47-04.webm

[FelixMalfait]

/award 500
I'm not confident enough to approve but rewarding the effort at least! Thanks!

[oss-gg]

Awarding harshrajeevsingh: 500 points 🕹️ Well done! Check out your new contribution on oss.gg/harshrajeevsingh

[harshrajeevsingh]

@FelixMalfait Thanks for your constant support :)

[martmull]

LGTM, thank you that's nice fix. I have just updated the padding value so it matches figma design

[harshrajeevsingh]

@martmull Thanks for the merge. But due to some recent changes to this component (before raising this PR), I found an issue with this solution. In the attached screencast, you can see that at some point, the dropdown behaves weirdly.
However, I found a solution for this. Can you raise an issue? Then, I can make a PR with a different solution.

Screencast.from.2024-10-29.13-51-57.webm

[martmull]

@harshrajeevsingh ok thank you for checking that. I will revert that merge and then open a new issue so you can add a proper solution to that issue