You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Go to or create a Time List and ensure it is in Expanded mode.
Drag this Time List into a Flexible Layout.
Drag the Flexible Layout such that you make the Time List object very small in width.
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
The text was updated successfully, but these errors were encountered:
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
Environment
Impact Check List
Additional Information
The text was updated successfully, but these errors were encountered: