fix: update ethnicities dropdown ⛳️

[gxsoto]

Description ✏️

Closes #468

This PR updates the components that are in charge of rendering the ethnicities dropdown. Specifically these components where updated to:

• render a list of countries that does not spill over past the height of the window screen.
• dynamically update the dropdown size and number of countries the component/dropdown renders to consistently have 30 px between the bottom of the window screen and the bottom of the ethnicities dropdown.

This update was tested on both Chrome and Safari as seen in screenshots below.

Type of Change 🐞

• Feature - A non-breaking change which adds functionality.
• Fix - A non-breaking change which fixes an issue.
• Refactor - A change that neither fixes a bug nor adds a feature.
• Documentation - A change only to in-code or markdown documentation.
• Tests - A change that adds missing unit/integration tests.
• Chore - A change that is likely none of the above.

Checklist ✅

• I have done a self-review of my code.
• I have manually tested my code (if applicable).
• I have added/updated any relevant documentation (if applicable).

[marcelo-cm]

just lurking here—out of curiosity could useLayoutEffect achieve this effect before the component is painted on render?

for the record, im asking bc ive never seen anyone actually use useLayoutEffect, because the method u implemented works well. would love to hear your thoughts :)

[ramiAbdou]

Apologies for the delay on this @gxsoto! It looks like this solution works well in most cases, but:

• When you select an option the display input gets bigger and the popover spills over the screen again (original issue).
• When you click on the input while there is little room at the bottom, then the popover height seems to be 0 (unless you refresh the page)

Screen.Recording.2024-12-11.at.8.35.27.AM.mov

I'm thinking that the best way to handle this issue is to actually just display the popover on the top of the input instead of the bottom? I think this would give some more room to display all the options instead of having to scroll as much.