[GEN-2203]: add dropdown direction handling to open upwards when near bottom of the viewport #2190
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request includes enhancements to the
Dropdown
component in thefrontend/webapp/reuseable-components/dropdown/index.tsx
file, focusing on improving its functionality and user experience. The most important changes include adding a feature to open the dropdown upwards if it is near the bottom of the screen and updating related styles and logic.Enhancements to
Dropdown
component:openUpwards
state andhandleDirection
function to determine the direction in which the dropdown should open based on its position relative to the viewport.openUpwards
state as a prop to theDropdownList
component to control its rendering direction.AbsoluteContainer
styled component to conditionally apply thetop
orbottom
style based on the$openUpwards
prop.DropdownList
component to accept theopenUpwards
prop and pass it to theAbsoluteContainer
for dynamic positioning.