🪟 🐛 Truncate Displayed External Message for Failure/Partial Failure Jobs (#15633)

* truncate error message

* add ellipses if truncated

* trim to 136 to prevent extra wrap

* use flexbox to truncate message

Author: teallarson

airbyte-webapp/src/components/JobItem/components/AttemptDetails.module.scss

@@ -5,3 +5,9 @@
   line-height: 15px;
   color: colors.$grey;
 }
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

airbyte-webapp/src/components/JobItem/components/AttemptDetails.tsx

@@ -99,7 +99,7 @@ const AttemptDetails: React.FC<IProps> = ({ attempt, className, configType }) =>
         ) : null}
       </div>
       {isFailed && (
-        <div>
+        <div className={styles.truncate}>
           {formatMessage(
             {
               id: "ui.keyValuePairV3",

airbyte-webapp/src/components/JobItem/components/MainInfo.module.scss

@@ -8,12 +8,14 @@
   .titleCell {
     display: flex;
     color: colors.$dark-blue;
+    min-width: 0;
 
     .statusIcon {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 75px;
+      min-width: 75px;
 
       & > div {
         margin: 0;
@@ -28,8 +30,10 @@
 
     .justification {
       display: flex;
+      flex-grow: 1;
       flex-direction: column;
       justify-content: center;
+      min-width: 0;
     }
   }