Fix overflow issue in eventlog

dashboard/src/components/EventlogList.vue

@@ -202,8 +202,8 @@ defineExpose({ refresh: onRefresh, setHighlight });
       <table class="eventlog-table">
         <thead>
           <tr>
-            <th style="width: 160px;">{{ $t('eventlog.time') }}</th>
-            <th style="width: 15%;">{{ $t('eventlog.source') }}</th>
+            <th style="width: 190px;">{{ $t('eventlog.time') }}</th>
+            <th style="width: 100px;">{{ $t('eventlog.source') }}</th>
             <th>{{ $t('eventlog.details') }}</th>
             <th style="width: 40px;"></th>
           </tr>
@@ -211,9 +211,9 @@ defineExpose({ refresh: onRefresh, setHighlight });
         <tbody>
           <template v-for="(eventlog, index) in eventlogs" :key="eventlog.id">
             <tr :data-index="index" :class="{ 'active': eventlog.isOpen, 'eventlog-match': highlight && isMatch(eventlog, highlight), 'eventlog-match-current': matchIndices[currentMatchPosition] === index }" @click="eventlog.isOpen = !eventlog.isOpen">
-              <td style="white-space: nowrap;">{{ prettyLongDate(eventlog.raw.creationTime) }}</td>
+              <td>{{ prettyLongDate(eventlog.raw.creationTime) }}</td>
               <td class="eventlog-source">{{ eventlog.source }}</td>
-              <td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" v-html="eventlog.details"></td>
+              <td v-html="eventlog.details"></td>
               <td><Button v-if="eventlog.raw.data.taskId" @click.stop plain small tool :href="app ? `/logs.html?appId=${app.id}&taskId=${eventlog.raw.data.taskId}` : `/logs.html?taskId=${eventlog.raw.data.taskId}`" target="_blank">Logs</Button></td>
             </tr>
             <tr v-show="eventlog.isOpen">
@@ -243,6 +243,9 @@ defineExpose({ refresh: onRefresh, setHighlight });
 .eventlog-table th,
 .eventlog-table td {
   padding: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .eventlog-table tbody tr.active,