Adds method that calculates space underneath KSelect before displayin…

[LianaHarris360]

…g dropdown

Description

When there is not enough space below the button to display the menu, the dropdown is partially hidden. This pr updates the KDS UiSelect component to calculate the space underneath the button to determine whether the dropdown menu will display above or below the button.

Issue addressed

Addresses #7752

Before/after screenshots

Before

After

Steps to test

Please see the corresponding Kolibri PR to test in Kolibri: learningequality/kolibri#9927

(optional) Implementation notes

At a high level, how did you implement this?

On mount, the element's nearest scrollable ancestor is found. When the button is clicked, the position, buttonHeight, maxDropdownheight, and the offsetHeight of the scrollableAncestor are used to determine if there is enough space to display the dropdown menu underneath the button. If there is not, the bottom css property of the dropdown menu is set to the buttonHeight.

Does this introduce any tech-debt items?

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change has been added to the changelog

Reviewer guidance

• Is the code clean and well-commented?
• Are all UI components LTR and RTL compliant (if applicable)?

[bjester]

Testing it on the docs demo site looks good to me