Replace edit button with a Material icon, adjust styles, and add MatIconModule to component imports.

frontend/src/app/pages/reference/bans/history/history.component.html

@@ -14,7 +14,7 @@
         <th class="historyDate">Date</th>
         <th class="historyDate">Expires</th>
         @if (canEdit()) {
-          <th class="historyActions">Actions</th>
+          <th class="historyActions"></th>
         }
       </tr>
       </thead>
@@ -51,8 +51,8 @@
               {{ this.historyFormat.getExpiredTime(entry) }}
             </td>
             @if (canEdit()) {
-              <td class="historyActions">
-                <button (click)="$event.stopPropagation(); openEdit(entry)">Edit</button>
+              <td class="historyActions" (click)="openEdit(entry)">
+                <mat-icon>edit</mat-icon>
               </td>
             }
           </tr>

frontend/src/app/pages/reference/bans/history/history.component.scss

@@ -111,3 +111,8 @@ img {
 .historyDate {
   width: 170px;
 }
+
+.historyActions {
+  width: 100px;
+  padding: 0 10px 0 10px;
+}

frontend/src/app/pages/reference/bans/history/history.component.ts

@@ -11,12 +11,14 @@ import {Router} from '@angular/router';
 import {AuthService} from '@services/auth.service';
 import {MatDialog} from '@angular/material/dialog';
 import {EditPunishmentDialogComponent} from '../edit-punishment-dialog/edit-punishment-dialog.component';
+import {MatIconModule} from '@angular/material/icon';
 
 @Component({
   selector: 'app-history',
   imports: [
     NgOptimizedImage,
-    RemoveTrailingPeriodPipe
+    RemoveTrailingPeriodPipe,
+    MatIconModule,
   ],
   templateUrl: './history.component.html',
   styleUrl: './history.component.scss',