Enhance user and punisher avatar display in history table

Refactored the layout for player and punisher avatars by adding a container around usernames and aligning elements vertically. Updated the `getAvatarUrl` method to accept only UUID strings, streamlining its usage. Improved styling for better alignment and presentation.

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

@@ -21,11 +21,19 @@
       <tr *ngFor="let entry of history">
         <td class="historyType">{{ getType(entry) }}</td>
         <td class="historyPlayer">
-          <img class="avatar" [ngSrc]="getAvatarUrl(entry)" width="25"
-               height="25" alt="">
-          {{ entry.username }}
+          <div class="playerContainer">
+            <img class="avatar" [ngSrc]="getAvatarUrl(entry.uuid)" width="25" height="25"
+                 alt="{{entry.username}}'s Minecraft skin">
+            <span class="username">{{ entry.username }}</span>
+          </div>
+        </td>
+        <td class="historyPlayer">
+          <div class="playerContainer">
+            <img class="avatar" [ngSrc]="getAvatarUrl(entry.punishedByUuid)" width="25" height="25"
+                 alt="{{entry.punishedBy}}'s Minecraft skin">
+            <span>{{ entry.punishedBy }}</span>
+          </div>
         </td>
-        <td class="historyPlayer">{{ entry.punishedBy }}</td>
         <td class="historyReason">{{ entry.reason }}</td>
         <td class="historyDate">{{ getPunishmentTime(entry) }}</td>
         <td class="historyDate">{{ getExpiredTime(entry) }}</td>