From 229863d7ff25a213125f5d6b486c379fcd852017 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Thu, 16 Oct 2025 23:26:58 +0200
Subject: [PATCH] Make eventlog and email eventlog table layouts a lot more
 predictable

---
 dashboard/src/style.css                   |  6 ++++++
 dashboard/src/views/EmailEventlogView.vue | 16 ++++++++--------
 dashboard/src/views/EventlogView.vue      | 10 +++++-----
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index 40a16d16f..eb3c6a555 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -350,6 +350,12 @@ form .pankow-checkbox {
   width: 100%;
   overflow: auto;
   border-spacing: 0px;
+  table-layout: fixed;
+}
+
+.elide-table-cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .eventlog-table thead {
diff --git a/dashboard/src/views/EmailEventlogView.vue b/dashboard/src/views/EmailEventlogView.vue
index fd7727bd9..a36e8c6f5 100644
--- a/dashboard/src/views/EmailEventlogView.vue
+++ b/dashboard/src/views/EmailEventlogView.vue
@@ -76,17 +76,17 @@ onMounted(async () => {
         <table class="eventlog-table">
           <thead>
             <tr>
-              <th style="width:  5%"><!-- Icon --></th>
-              <th style="width: 14%">{{ $t('emails.eventlog.time') }}</th>
-              <th style="width: 26%">{{ $t('emails.eventlog.mailFrom') }}</th>
-              <th style="width: 25%">{{ $t('emails.eventlog.rcptTo') }}</th>
-              <th style="width: 30%">{{ $t('emails.eventlog.details') }}</th>
+              <th style="width: 25px"><!-- Icon --></th>
+              <th style="width:160px">{{ $t('emails.eventlog.time') }}</th>
+              <th style="width: 20%">{{ $t('emails.eventlog.mailFrom') }}</th>
+              <th style="width: 20%">{{ $t('emails.eventlog.rcptTo') }}</th>
+              <th>{{ $t('emails.eventlog.details') }}</th>
             </tr>
           </thead>
           <tbody>
             <template v-for="eventlog in eventlogs" :key="eventlog._id">
-              <tr  @click="eventlog.isOpen = !eventlog.isOpen" :class="{ 'active': eventlog.isOpen }" >
-                <td class="no-wrap">
+              <tr @click="eventlog.isOpen = !eventlog.isOpen" :class="{ 'active': eventlog.isOpen }" >
+                <td>
                   <i class="fas fa-arrow-circle-left" v-if="eventlog.type === 'sent'" v-tooltip="$t('emails.eventlog.type.outgoing')"></i>
                   <i class="fas fa-history" v-if="eventlog.type === 'deferred'" v-tooltip="$t('emails.eventlog.type.deferred')"></i>
                   <i class="fas fa-arrow-circle-right" v-if="eventlog.type === 'saved'" v-tooltip="$t('emails.eventlog.type.incoming')"></i>
@@ -98,7 +98,7 @@ onMounted(async () => {
                   <i class="fas fa-filter" v-if="eventlog.type === 'spam-learn'" v-tooltip="$t('emails.eventlog.type.spamFilterTrained')"></i>
                   <i class="fas fa-fill-drip" v-if="eventlog.type === 'quota'" v-tooltip="$t('emails.eventlog.type.quota')"></i>
                 </td>
-                <td class="no-wrap">{{ prettyLongDate(eventlog.ts) }}</td>
+                <td>{{ prettyLongDate(eventlog.ts) }}</td>
                 <td class="elide-table-cell">{{ prettyEmailAddresses(eventlog.mailFrom) || '-' }}</td>
                 <td class="elide-table-cell">{{ prettyEmailAddresses(eventlog.rcptTo) || eventlog.mailbox || '-' }}</td>
                 <td>
diff --git a/dashboard/src/views/EventlogView.vue b/dashboard/src/views/EventlogView.vue
index e93882ea2..cf067a2de 100644
--- a/dashboard/src/views/EventlogView.vue
+++ b/dashboard/src/views/EventlogView.vue
@@ -172,10 +172,10 @@ onUnmounted(() => {
         <table class="eventlog-table">
           <thead>
             <tr>
-              <th>{{ $t('eventlog.time') }}</th>
-              <th>{{ $t('eventlog.source') }}</th>
+              <th style="width: 160px">{{ $t('eventlog.time') }}</th>
+              <th style="width: 100px">{{ $t('eventlog.source') }}</th>
               <th>{{ $t('eventlog.details') }}</th>
-              <th></th>
+              <th style="width: 50px"></th>
             </tr>
           </thead>
           <tbody>
@@ -183,11 +183,11 @@ onUnmounted(() => {
               <tr @click="eventlog.isOpen = !eventlog.isOpen" :class="{ 'active': eventlog.isOpen }" >
                 <td style="white-space: nowrap;">{{ prettyLongDate(eventlog.raw.creationTime) }}</td>
                 <td>{{ eventlog.source }}</td>
-                <td v-html="eventlog.details"></td>
+                <td class="elide-table-cell" v-html="eventlog.details"></td>
                 <td><Button v-if="eventlog.raw.data.taskId" @click.stop plain small tool :href="`/logs.html?taskId=${eventlog.raw.data.taskId}`" target="_blank">Logs</Button></td>
               </tr>
               <tr v-show="eventlog.isOpen">
-                <td colspan="5" class="eventlog-details">
+                <td colspan="4" class="eventlog-details">
                   <div v-if="eventlog.raw.source.ip" class="eventlog-source">Source IP: <span @click="onCopySource(eventlog)">{{ eventlog.raw.source.ip }}</span></div>
                   <pre>{{ JSON.stringify(eventlog.raw.data, null, 4) }}</pre>
                 </td>