chore: update style and display

src/app/components/table/table-inspect-message-dialog.component.css

@@ -0,0 +1,15 @@
+mat-dialog-content {
+  width: 40rem;
+}
+
+section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25rem 1rem 0 1rem;
+}
+
+h2 {
+  margin: 0;
+  padding: 0 0 0.75rem 0;
+}

src/app/components/table/table-inspect-message-dialog.component.html

@@ -1,7 +1,12 @@
-<h2 mat-dialog-title>{{ label }}</h2>
+<section>
+  <h2 mat-dialog-title>{{ label }}</h2>
+  <button mat-icon-button (click)="copy()">
+    <mat-icon [fontIcon]="getIcon('copy')" />
+  </button>
+</section>
 
 <mat-dialog-content>
-  <mat-card>{{ message }}</mat-card>
+  {{ message }}
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">

src/app/components/table/table-inspect-message-dialog.component.ts

@@ -3,6 +3,7 @@ import { Component, Inject, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
 import { IconsService } from '@services/icons.service';
 import { NotificationService } from '@services/notification.service';
 
@@ -14,11 +15,13 @@ export interface TableInspectMessageDialogData {
 @Component({
   selector: 'app-inspect-message-dialog',
   templateUrl: 'table-inspect-message-dialog.component.html',
+  styleUrl: 'table-inspect-message-dialog.component.css',
   standalone: true,
   imports: [
     MatCardModule,
     MatButtonModule,
     MatDialogModule,
+    MatIconModule,
   ],
   providers: [
     NotificationService,
@@ -50,4 +53,8 @@ export class TableInspectMessageDialogComponent {
   onNoClick(): void {
     this.dialogRef.close();
   }
+
+  getIcon(name: string) {
+    return this.iconsService.getIcon(name);
+  }
 }

src/app/components/table/table-inspect-message.component.css

@@ -0,0 +1,11 @@
+section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: fit-content;
+}
+
+mat-icon {
+  cursor: pointer;
+}

src/app/components/table/table-inspect-message.component.html

@@ -1,13 +1,11 @@
-@if (message) {
-  <span>{{croppedMessage}}...</span>
-  <button mat-icon-button (click)="copy()">
-    <mat-icon [fontIcon]="getIcon('copy')" />
-  </button>
-  @if (displayEye) {
-    <button mat-icon-button (click)="onView()">
-      <mat-icon [fontIcon]="getIcon('view')" />
-    </button>
-  }
-} @else {
-  <span>-</span>
-}
+<mat-chip disableRipple>
+  <section>
+    <span>{{croppedMessage | emptyCell }}</span>
+    @if (message) {
+      <mat-icon [fontIcon]="getIcon('copy')" (click)="copy()" />
+    }
+    @if (displayEye) {
+      <mat-icon [fontIcon]="getIcon('view')" (click)="onView()" />
+    }
+  </section>
+</mat-chip>

src/app/components/table/table-inspect-message.component.ts

@@ -1,20 +1,25 @@
 import { Clipboard } from '@angular/cdk/clipboard';
 import { Component, Input, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
+import { EmptyCellPipe } from '@pipes/empty-cell.pipe';
 import { IconsService } from '@services/icons.service';
 import { NotificationService } from '@services/notification.service';
 import { TableInspectMessageDialogComponent, TableInspectMessageDialogData } from './table-inspect-message-dialog.component';
 
 @Component({
   selector: 'app-table-inspect-message',
   templateUrl: 'table-inspect-message.component.html',
+  styleUrl: 'table-inspect-message.component.css',
   standalone: true,
   imports: [
     MatDialogModule,
     MatButtonModule,
     MatIconModule,
+    MatChipsModule,
+    EmptyCellPipe,
   ],
   providers: [
     NotificationService
@@ -26,8 +31,8 @@ export class TableInspectMessageComponent {
   @Input({ required: true }) set message(entry: string | undefined) {
 
     if (entry && entry !== '') {
-      if (entry.length > 5) {
-        this._croppedMessage = entry.substring(0, 30);
+      if (entry.length > 15) {
+        this._croppedMessage = `${entry.substring(0, 14).trimEnd()}...`;
         this._message = entry;
         this._displayEye = true;
       } else {