More webapp changes+fixes

webapp/src/app/features/messages/message-list/message-list.component.html

@@ -67,26 +67,26 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="40%">Title</th>
+          <th>Title</th>
+          <th>Content</th>
           <th
-            nzWidth="15%"
             [nzFilters]="channelFilters()"
             [nzFilterMultiple]="true"
             (nzFilterChange)="onChannelFilterChange($event)"
           >Channel</th>
           <th
-            nzWidth="15%"
+            nzWidth="0"
             [nzFilters]="senderFilters()"
             [nzFilterMultiple]="true"
             (nzFilterChange)="onSenderFilterChange($event)"
           >Sender</th>
           <th
-            nzWidth="10%"
+            nzWidth="0"
             [nzFilters]="priorityFilters"
             [nzFilterMultiple]="false"
             (nzFilterChange)="onPriorityFilterChange($event)"
           >Priority</th>
-          <th nzWidth="20%" nzCustomFilter>
+          <th nzWidth="0" nzCustomFilter>
             Time
             <nz-filter-trigger [(nzVisible)]="dateFilterVisible" [nzActive]="!!dateRange" [nzDropdownMenu]="dateMenu">
               <span nz-icon nzType="filter" nzTheme="fill"></span>
@@ -110,12 +110,18 @@
           <tr class="clickable-row" (click)="viewMessage(message)">
             <td>
               <div class="message-title">{{ message.title }}</div>
-              @if (message.content && !message.trimmed) {
-                <div class="message-preview">{{ message.content | slice:0:100 }}{{ message.content.length > 100 ? '...' : '' }}</div>
+              <div class="message-id mono">{{ message.message_id }}</div>
+            </td>
+            <td>
+              @if (message.content) {
+                <div class="message-content">{{ message.content | slice:0:128 }}{{ message.content.length > 128 ? '...' : '' }}</div>
+              } @else {
+                <span class="text-muted"></span>
               }
             </td>
             <td>
-              <span class="mono">{{ message.channel_internal_name }}</span>
+              <div class="cell-name">{{ message.channel_internal_name }}</div>
+              <div class="cell-id">{{ message.channel_id }}</div>
             </td>
             <td>
               {{ message.sender_name || '-' }}
@@ -126,14 +132,13 @@
               </nz-tag>
             </td>
             <td>
-              <span nz-tooltip [nzTooltipTitle]="message.timestamp">
-                {{ message.timestamp | relativeTime }}
-              </span>
+              <div class="timestamp-absolute">{{ message.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+              <div class="timestamp-relative">{{ message.timestamp | relativeTime }}</div>
             </td>
           </tr>
         } @empty {
           <tr>
-            <td colspan="5">
+            <td colspan="6">
               <nz-empty nzNotFoundContent="No messages found"></nz-empty>
             </td>
           </tr>

webapp/src/app/features/messages/message-list/message-list.component.scss

@@ -41,10 +41,40 @@
   color: #333;
 }
 
-.message-preview {
+.message-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.message-content {
+  font-size: 12px;
+  color: #666;
+}
+
+.text-muted {
+  color: #999;
+}
+
+.cell-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.cell-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
   font-size: 12px;
   color: #999;
-  margin-top: 4px;
 }
 
 .pagination-controls {