[Mobile Support] Different views causes Open MCT to sometimes go blank.

[rukmini-bose]

Summary

Sometimes when you are on mobile Open MCT and navigating between objects, the main screen goes blank.

EDIT 3/28/2024: After further investigation, this is occuring because every pane class contains a header class called l-pane__expand-button. This class is used for the button that is clicked to expand the panes that are collapsable, such as Recent Objects, Tree, Inspector, etc. However, it is hidden on default because we want the panes to be expanded and visible. However, we also do not want this class to exist for our main pane, which is where our Open MCT objects are viewed. This is because we do not ever want that pane to be collapsed.

Currently, in mobile, that class is being exposed by default in the main pane. We have it hidden on default in desktop, but not for mobile. However, while its being exposed, the CSS styling on it makes it invisible to a user's eye. This means that the button to collapse a pane is clickable, but invisible. This is the problem that gets us in the weird state of this issue.

The main problem is that without knowing, users might accidentally click on this invisible button which collapses the entire main frame. Because the button is not visible, they are unable to expand the pane anymore, making Open MCT unusable.

Check out this example:
https://github.com/nasa/openmct/assets/48999852/9bffa9f4-4926-4af2-badb-9994ad22a87c

Expected vs Current Behavior

There should not exist an invisible collapse button in Open MCT's main frame.

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. Expand the to view main frame for Open MCT (This is where the meat of Open MCT is).
3. Above the currently-navigated object's name, click around until you have somehow triggered a button that collapses the main frame.

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