[BUG REPORT]: Dropdown Component MaxHeight Causing Offscreen Overflow

[lucasb16-exe]

Describe the bug

On certain workstations and browser configurations, even in fullscreen, dropdown component as utilized in https://github.com/USACE/instrumentation-ui/blob/develop/src/app-pages/collectiongroup/collectiongroup-timeseries-picker.js and other app-page files will cause items to be inaccessible on overflow.

Steps To Reproduce

1. Go to a collection group in a project with an amount of timeseries that would hit the 400px MaxHeight css property specified in https://github.com/USACE/instrumentation-ui/blob/develop/src/app-components/dropdown.js
2. Attempt to add a timeseries to the collection group via the timeseries picker UI component
3. Scroll down the list to the bottom of overflow
4. See error

Expected behavior

Overflow of items in dropdown component allows all items to be selectable

Actual behavior

Overflow of items in dropdown component causes certain timeseries to not be selectable.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 95.0.4638.69 (Official Build) (64-bit)

Additional context

See comment for suggested fix

[lucasb16-exe]

Suggest value of maxHeight css attribute on line 97 of src/app-components/dropdown.js : <div className={menuClass} aria-labelledby={${id}MenuButton} ref={menuRef} style={{ maxHeight: '400px', overflow: 'auto' }}>

be changed to :

<div className={menuClass} aria-labelledby={${id}MenuButton} ref={menuRef} style={{ maxHeight: '700%' overflow: 'auto' }}>

using a percentage rather than a pixel value should mitigate issue on most configurations, locally on more than one device