some more styling to the frontend

discord_verificiation/playtime-frontend/app/maps/period/[mapId]/page.tsx

@@ -6,6 +6,7 @@ import {
   getMapVotes,
   getAdjacentMaps,
 } from '@/lib/queries';
+import { attachAvatars } from '@/lib/steamApi';
 import { diffMinutes } from '@/lib/dates';
 import { formatMinutes, countryCodeToFlag } from '@/lib/steam';
 
@@ -26,11 +27,12 @@ export default async function MapPeriodDetailPage({
     notFound();
   }
 
-  const [players, votes, adjacent] = await Promise.all([
+  const [playersRaw, votesRaw, adjacent] = await Promise.all([
     getPlayersPresentDuringMap(mapId),
     getMapVotes(mapId),
     getAdjacentMaps(period.map_start_dt),
   ]);
+  const [players, votes] = await Promise.all([attachAvatars(playersRaw), attachAvatars(votesRaw)]);
 
   // Group vote rows by their vote event (a map can theoretically have more
   // than one vote called during its runtime).
@@ -115,6 +117,12 @@ export default async function MapPeriodDetailPage({
                   className="flex items-center justify-between py-2 text-sm hover:bg-base transition-colors px-2 -mx-2 rounded"
                 >
                   <div className="flex items-center gap-2">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={p.avatarUrl}
+                      alt=""
+                      className="w-7 h-7 rounded-full object-cover ring-1 ring-base-border shrink-0"
+                    />
                     <span aria-hidden>{countryCodeToFlag(p.current_country)}</span>
                     <span className="text-ink">{p.current_name}</span>
                   </div>
@@ -152,7 +160,16 @@ export default async function MapPeriodDetailPage({
                         href={`/players/${encodeURIComponent(c.steamid)}`}
                         className="flex items-center justify-between py-2 text-sm hover:bg-base transition-colors px-2 -mx-2 rounded"
                       >
-                        <span className="text-ink">{c.current_name}</span>
+                        <div className="flex items-center gap-2">
+                          {/* eslint-disable-next-line @next/next/no-img-element */}
+                          <img
+                            src={c.avatarUrl}
+                            alt=""
+                            className="w-7 h-7 rounded-full object-cover ring-1 ring-base-border shrink-0"
+                          />
+                          <span aria-hidden>{countryCodeToFlag(c.current_country)}</span>
+                          <span className="text-ink">{c.current_name}</span>
+                        </div>
                         <span className="text-ink-muted">
                           voted <span className="text-ink">{c.vote_choice}</span>
                           {c.vote_weight !== 1 && (