[Mobile Support] Select button dropdowns are not lined properly

[rukmini-bose]

Summary

Select button dropdown are not lined up properly on some mobile devices. Clicking on the select button should open the dropdown right underneath, or near the  button. Instead, the options list is often scattered across the screen.

Some examples of this behavior:

Expected vs Current Behavior

When a user clicks on a button that includes a dropdown menu, the dropdown should appear right below the button.

Steps to Reproduce

1. Go to Open MCT on mobile–– either using the devtools, or on your mobile device. If you are using devtools, be sure to empty cache and hard reload.
2. Navigate to a Notebook, Plot, or any object that includes a button with a dropdown menu.
3. Click on the button.
4. Observe that the dropdown appears somewhere very far away from the button itself.

Environment

• Open MCT Version: 3.3.0
• Deployment Type: Testathon
• OS:
• Browser: Chrome

Impact Check List

• Data loss or misrepresented data?
• Regression? Did this used to work or has it always been broken?
• Is there a workaround available?
• Does this impact a critical component?
• Is this just a visual bug with no functional impact?
• Does this block the execution of e2e tests?
• Does this have an impact on Performance?

Additional Information