Improved styling

ui-ngx/src/app/modules/home/components/event/event-table-config.ts

@@ -356,10 +356,11 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
         );
         break;
       case DebugEventType.DEBUG_CALCULATED_FIELD:
-        this.columns[0].width = '160px';
+        this.columns[0].width = '80px';
+        this.columns[1].width = '20%';
         this.columns.push(
           new EntityTableColumn<Event>('entityId', 'event.entity-id', '85px',
-            (entity) => entity.body.entityId,
+            (entity) => `<span style="display: inline-block; width: 7ch">${entity.body.entityId.substring(0, 6)}…</span>`,
             () => ({padding: '0 12px 0 0'}),
             false,
             () => ({padding: '0 12px 0 0'}),
@@ -379,7 +380,7 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
             }
           ),
           new EntityTableColumn<Event>('messageId', 'event.message-id', '85px',
-            (entity) => entity.body.msgId,
+            (entity) => `<span style="display: inline-block; width: 7ch">${entity.body.msgId?.substring(0, 6)}…</span>`,
             () => ({padding: '0 12px 0 0'}),
             false,
             () => ({padding: '0 12px 0 0'}),