Status bar needs a better collapse strategy

[charlesh88]

Is your feature request related to a problem? Please describe. The status bar wraps in a manner that takes up an undesirable amount of vertical space.

Describe the solution you'd like A better design that doesn't increase vertical space usage.

Describe alternatives you've considered There are no other alternatives.

[depperm]

Would hiding with no indication be best?

&__indicators {
    flex: 1 1 auto;
    justify-content: flex-end;
    overflow-x: hidden;

Or hide but have a scroll so everything can be accessed?

&__indicators {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-height: 34px;
    overflow-y: scroll;

[charlesh88]

Testing Notes

The Status area 'Indicators' are now allows explicit toggling of a single-line or multi-line display strategy independent of the pre-existing toggle for icon-only or icon-and-label display modes. Single-line mode will clip and hide Indicators when there is not enough room due to browser window width; in this state, the multi/single-line toggle button will highlight to indicate that Indicators are being hidden.

Before loading Open MCT:

1. Stretch your browser window as wide as you can.
2. In dev tools, find the localstorage value for openmct-shell-head and delete it.

Testing steps:

1. Go to an Open MCT URL and verify that the Status area and indicators appear similar to below. Indicators should be displaying icon and text. Verify that the single/multi-line toggle button (orange arrow) displays an icon with one horizontal line and the expand/collapse indicators toggle button (yellow arrow) shows arrows pointing in.
2. Hover over the single/multi-line toggle button and verify the tooltip reads as 'Display as single line'.
3. Hover over the expand/collapse indicators toggle button and verify the tooltip reads as 'Show icon only'.
4. Shrink the browser window such that the Indicators wrap and look similar to below:
5. Click the single/multi-line toggle button. Verify that the Indicators are displayed in a single line, and if overflowing, that the button visually highlights and displays with a blue background and white icon with two lines:
6. Reload the browser and verify that the single/multi-line setting was stored locally and displays the same as it was before reload.
7. Expand the browser window, watching the single/multi-line toggle button. As soon as the Indicators can fit in their available space, the button should de-highlight back to its initial state.
8. Shrink the browser window again and watch the single/multi-line toggle button. As soon as the Indicators cannot fit in their available space, the button should highlight as before.
9. Click the expand/collapse indicators toggle button: verify that Indicators now display as icons only:
10. Reload the browser and verify that the expand/collapse indicators toggle setting was stored locally and displays the same as it was before reload.

[jvigliotta]

Verified Fixed - Testathon: 12/17/2025