chore: minor update

Author: Helias

src/app/pages/events/event-detail/event-detail.component.html

@@ -100,25 +100,30 @@ <h2 class="mb-4 text-xl font-semibold">{{ 'events.speakers' | transloco }}</h2>
         <div class="mb-10">
           <h2 class="mb-4 text-xl font-semibold">{{ 'events.videos' | transloco }}</h2>
           <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            @for (videoId of event()!.videos!; track videoId) {
+            @for (video of event()!.videos!; track video.id) {
               <a
-                [href]="videoWatchUrl(videoId)"
+                [href]="videoWatchUrl(video.id)"
                 target="_blank"
                 rel="noopener"
-                class="group relative block aspect-video w-full overflow-hidden rounded-(--radius) shadow"
+                class="group relative block overflow-hidden rounded-(--radius) shadow no-underline"
               >
-                <img
-                  [src]="videoThumbnail(videoId)"
-                  alt="Video thumbnail"
-                  class="h-full w-full object-cover transition-opacity group-hover:opacity-80"
-                />
-                <div class="absolute inset-0 flex items-center justify-center">
-                  <div class="flex h-14 w-14 items-center justify-center rounded-full bg-black/60 text-white transition-colors group-hover:bg-black/80">
-                    <svg viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7 translate-x-0.5" aria-hidden="true">
-                      <path d="M8 5v14l11-7z"/>
-                    </svg>
+                <div class="relative aspect-video w-full">
+                  <img
+                    [src]="videoThumbnail(video.id)"
+                    [alt]="video.title"
+                    class="h-full w-full object-cover transition-opacity group-hover:opacity-80"
+                  />
+                  <div class="absolute inset-0 flex items-center justify-center">
+                    <div class="flex h-14 w-14 items-center justify-center rounded-full bg-black/60 text-white transition-colors group-hover:bg-black/80">
+                      <svg viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7 translate-x-0.5" aria-hidden="true">
+                        <path d="M8 5v14l11-7z"/>
+                      </svg>
+                    </div>
                   </div>
                 </div>
+                <div class="flex h-16 items-center bg-(--surface) px-3 py-2 text-base font-medium leading-snug text-white">
+                  {{ video.title }}
+                </div>
               </a>
             }
           </div>