What-If Tool: Fix error message overflow issue #2462
Conversation
|
@tolga-b please review |
| .datapoint-right-controls-holder { | ||
| display: flex; | ||
| flex-direction: row-reverse; | ||
| overflow: hidden; |
There was a problem hiding this comment.
I think it is more correct to put flex-shrink: 0; and remove the min-width.
There was a problem hiding this comment.
I did try that but it doesn't work. With this container having flex-shrink: 0, the child div with lots of text will still cause this container to grow in width beyond the screen, leading to the issue.
There was a problem hiding this comment.
moved to flex-shrink: 0 for the two buttons as you suggested and removed the min-width setting for the button.
still need the overflow: hidden on the right-controls-holder to avoid overflow.
There was a problem hiding this comment.
Yup, understand that now.
|
Btw, I think the text/buttons should be vertically aligned :) |
adjusted margin so that status text matches alignment for left-side tab text and right side buttons. Thanks. |
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| padding-top: 16px; |
There was a problem hiding this comment.
Oh, I think the more robust solution is to use align-items: center on flex container and remove all these padding/margins.
3 participants
Long WIT error messages caused text overflow, hiding some controls.
Added correct CSS rules to avoid overflow issue and to ellipsis the status string. The full error string is already shown in a toast as well.
Fixed:
Ran demo app, added fake very long error message, verified correct visual behavior (and incorrect behavior before fix).