[FLINK-22543][runtime-web] Fix Exception History table layout broken by long exception strings

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 2 people

flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.html

@@ -35,22 +35,23 @@
         [nzData]="exceptionHistory"
         [nzShowPagination]="false"
         [nzFrontPagination]="false"
+        nzTableLayout="fixed"
       >
         <thead>
           <tr>
-            <th nzWidth="60px"></th>
-            <th>Time</th>
+            <th nzWidth="4%"></th>
+            <th nzWidth="12%">Time</th>
             <th>Exception</th>
-            <th>Task Name</th>
-            <th>Location</th>
+            <th nzWidth="18%">Task Name</th>
+            <th nzWidth="12%">Location</th>
           </tr>
         </thead>
         <tbody>
           <ng-container *ngFor="let item of exceptionHistory; trackBy: trackByTimestamp">
             <tr>
               <td nzShowExpand [(nzExpand)]="item.expand"></td>
               <td>{{ item.selected.timestamp | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
-              <td>
+              <td class="exception-cell">
                 <div class="name">{{ item.selected.exceptionName }}</div>
                 <nz-tag
                   *ngFor="let label of item.selected.failureLabels | keyvalue"

flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.less

@@ -47,6 +47,18 @@
 
   nz-table {
     margin-top: -@margin-md;
+
+    .exception-cell {
+      word-break: break-all;
+
+      nz-tag {
+        max-width: 100%;
+        white-space: normal;
+        word-break: break-all;
+        height: auto;
+        line-height: 1.4;
+      }
+    }
   }
 
   nz-tag {
@@ -59,6 +71,6 @@
   }
 
   .exception-select {
-    width: 300px;
+    width: 100%;
   }
 }