[Time List] Expanded Mode does not handle small horizontal spaces well

[rukmini-bose]

Summary

When a Time List is in a Display or Flexible Layout, and the horizontal space is small enough, the components begin to spill out of the frame, causing all the elements to stop lining up correctly. Referencing the image below, notice that the countdowns are spilling out of the Time List wrapper, and that users would have to horizontally scroll to see its entire contents. Also, this is causing the state icons (such as the clock visualization) to stop being lined up.

From an initial investigation, it looks like this is because the countdown element doesn't wrap properly. Additionally, the class that holds the time bounds (.c-tli__bounds) has a dynamic width that is calculated based off its own event. So each of these classes end up having different widths, causing the elements to stop lining up.

This might be a regression, but its hard to say. There's been minimal testing of the new SA tool in layouts.

Expected vs Current Behavior

When a Time List view has a small horizontal space, we should have the components either wrap down or be truncated. We should also probably add a maximum width to the wrappers that hold the components together to maintain a consistent layout.

Steps to Reproduce

1. Go to or create a Time List and ensure it is in Expanded mode.
2. Drag this Time List into a Flexible Layout.
3. Drag the Flexible Layout such that you make the Time List object very small in width.
4. Observe that the countdown (right-most element) is spilling out of the Time List element. Also notice that components stop being lined up.

Environment

• Open MCT Version: 4.0.0-next, VIPER 9.0.0-next
• 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