🪟 🐛 Truncate Displayed External Message for Failure/Partial Failure Jobs #15633
Conversation
github-actions
bot
added
area/platform
teallarson
changed the title
|
I think it would be better if we'd try using CSS text truncation to truncate this line here, instead of cutting it off after some specific amount of characters. That would also help having the text actually still in the DOM for accessibility purposes and it's just cut design wise. Given how much nesting we have in this form, cutting that inner line of might require to change some parent components width/flex properties to properly get styled. Could we give this a try? |
airbyte-webapp/src/components/JobItem/components/AttemptDetails.tsx
Outdated
Show resolved
Hide resolved
|
Updated |
teallarson
force-pushed
the
teal/truncate-log-error-message
branch
from
de5b4ce to
21d4334
Compare
| @@ -8,12 +8,14 @@ | |||
| .titleCell { | |||
| display: flex; | |||
| color: colors.$dark-blue; | |||
| min-width: 0; | |||
There was a problem hiding this comment.
In order to keep this item from growing to overflow its parents. Same thing below in .justification
|
|
||
| .statusIcon { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 75px; | ||
| min-width: 75px; |
There was a problem hiding this comment.
Flexbox handles min-width in an odd way. This prevents it from resizing the statusIcon and messing up the flow when the content of the title cell is very long.
There was a problem hiding this comment.
Found this thread helpful if anyone is curious on why min-width is somehow the secret sauce here and above: https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container
…obs (#15633) * truncate error message * add ellipses if truncated * trim to 136 to prevent extra wrap * use flexbox to truncate message
What
Limit error message to not overflow the default cell size on the Jobs Log page.
Note: this does not guarantee a useful error message (see example).
I imagine we may want to approach this on the back end to parse the body of the external message as something more useful.
BEFORE:
AFTER:
How
Use CSS to truncate the message at the width of the cell it's within.