Match cards: composed title, header stage from match title, equal-sized grid

- SportsMatchController syncs Video.title with SportsMatch.title on
  store/update so the "Match title" field drives the video's display
  title everywhere.
- headerData(): "championship" now prefers event_name (event title)
  and adds a dedicated "stage" key sourced from SportsMatch.title
  (shown between the yellow lines above the weight class in both the
  in-player VS overlay and the vs-mini gallery card).
- Video cards render match titles with flags + corner colours
  ("FINALS – 🇧🇭 Blue vs 🇧🇭 Red (-61 kg)"), matching the video
  page header, and clip long titles to one line.
- Video gallery grid uses repeat(N, minmax(0, 1fr)) + grid-auto-rows:1fr
  so every card thumbnail renders at exactly the same size; hover-preview
  videos use object-fit:cover to stop portrait sources looking smaller.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

resources/views/components/partials/card-styles.blade.php

@@ -3,9 +3,16 @@
      /videos?filter=playlists. Wrapped in @once so it emits only once. --}}
 @once
 <style>
-/* Base styles for video card */
+/* Base styles for video card — every card in the grid renders at the same
+   overall size regardless of type (video / shorts / match / playlist). The
+   grid handles equal widths; height parity is enforced here by making the
+   card a column-flex container, the thumb a strict 16/9 box, and every
+   text row a fixed line-height so missing channel/meta rows never shrink
+   the card.  */
 .yt-video-card {
     cursor: pointer;
+    display: flex;
+    flex-direction: column;
 }
 
 .yt-video-card .yt-video-thumb {
@@ -61,7 +68,11 @@
 .yt-video-card .yt-video-thumb video {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    /* Match the still-image thumbnail: always cover the 16/9 box so
+       portrait and landscape sources render at the same visible size,
+       instead of letterboxing (which made portrait previews look
+       smaller than landscape ones). */
+    object-fit: cover;
     position: absolute;
     top: 0;
     left: 0;
@@ -212,6 +223,19 @@
     display: flex;
     margin-top: 12px;
     gap: 12px;
+    /* Hard-cap the info block to guarantee every card has the same total
+       height (thumb + info). Overflow hidden so any accidental extra
+       row can't push the card taller than its neighbours. */
+    height: 76px;
+    overflow: hidden;
+}
+.yt-video-card .yt-video-details {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    overflow: hidden;
 }
 
 .yt-video-card .yt-channel-icon {
@@ -237,20 +261,28 @@
     font-weight: 500;
     color: #fff;
     margin: 0 0 4px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
     line-height: 1.3;
+    /* Single-line, no wrapping — overflow ellipses. */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .yt-video-card .yt-video-title a {
     color: inherit;
     text-decoration: none;
-    display: flex;
-    align-items: baseline;
-    gap: 5px;
+    /* Block-level with nowrap so ellipsis actually clips the excess.
+       Inline-flex would let the children overflow past the parent. */
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
 }
+/* Inline children (flags, corner-colored fighter spans) must not break
+   the single-line layout. */
+.yt-video-card .yt-video-title a > * { vertical-align: middle; }
+.yt-video-card .yt-video-title a .fi { display: inline-block; }
 .vc-lang-flag {
     display: inline-block;
     width: 16px;
@@ -274,6 +306,8 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: 22px;
+    height: 22px;
 }
 
 .yt-video-card a.yt-channel-name {

resources/views/components/partials/vs-mini.blade.php

@@ -27,7 +27,7 @@
     // are hidden by `.vsm-nullable:empty` / `.vsm-nullable-hide` in the
     // CSS below. Same treatment as the full-page VS.
     $vsm_event   = $vsm_str($vsm_hd['championship']    ?? '');
-    $vsm_stage   = $vsm_str($vsm_hd['division']        ?? '') ?: $vsm_str($vsm_hd['format'] ?? '');
+    $vsm_stage   = $vsm_str($vsm_hd['stage']           ?? '');
     $vsm_weight  = $vsm_str($vsm_hd['weight_category'] ?? '');
     $vsm_matchNo = $vsm_str($vsm_hd['match_number']    ?? '');
     $vsm_court   = $vsm_str($vsm_hd['court']           ?? '');

resources/views/components/video-card.blade.php

@@ -41,6 +41,38 @@ $langFlag = $forceTrackFlag ?: ($video ? Languages::flag($video->language) : nul
 
 $showUrl = $video ? route('videos.show', $video) . ($forceTrackId ? ('?track=' . $forceTrackId) : '') : '#';
 
+// Composed display title for match videos — matches the header on the
+// match page: "{match title} – {blue flag+name} vs {red flag+name}
+// ({weight})", with blue/red corner colours and inline flags. Falls
+// back to plain $video->title for non-match cards.
+$displayTitle     = $video?->title;
+$displayTitleHtml = null;
+if ($video && $video->type === 'match' && $video->sportsMatch) {
+    $hdCard = $video->sportsMatch->headerData();
+    $blueN  = $hdCard['blue']['name'] ?? null;
+    $redN   = $hdCard['red']['name']  ?? null;
+    $blueF  = $hdCard['blue']['flag'] ?? null;
+    $redF   = $hdCard['red']['flag']  ?? null;
+    if ($blueN || $redN) {
+        $flagStyle = 'width:16px;height:12px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:4px;';
+        $mkSide = function ($name, $flag, $color) use ($flagStyle) {
+            if (!$name) return '';
+            $flagHtml = $flag ? '<span class="fi fi-'.e($flag).'" style="'.$flagStyle.'"></span>' : '';
+            return '<span style="color:'.$color.';font-weight:600;">'.$flagHtml.e($name).'</span>';
+        };
+        $blueHtml = $mkSide($blueN, $blueF, '#2563eb');
+        $redHtml  = $mkSide($redN,  $redF,  '#ef4444');
+
+        $parts = [];
+        if (!empty($video->title)) $parts[] = e(strtoupper($video->title)) . ' –';
+        if ($blueHtml && $redHtml) $parts[] = $blueHtml . ' <span>vs</span> ' . $redHtml;
+        elseif ($blueHtml)         $parts[] = $blueHtml;
+        elseif ($redHtml)          $parts[] = $redHtml;
+        if (!empty($hdCard['weight_category'])) $parts[] = '(' . e($hdCard['weight_category']) . ')';
+        $displayTitleHtml = implode(' ', $parts);
+    }
+}
+
 // Size classes
 $sizeClasses = match($size) {
     'small' => 'yt-video-card-sm',
@@ -113,7 +145,11 @@ $sizeClasses = match($size) {
                     @if($langFlag)
                         <span class="fi fi-{{ $langFlag }} vc-lang-flag"></span>
                     @endif
-                    {{ $video->title ?? 'Untitled Video' }}
+                    @if($displayTitleHtml)
+                        {!! $displayTitleHtml !!}
+                    @else
+                        {{ $displayTitle ?? 'Untitled Video' }}
+                    @endif
                 </a>
             </h3>
             @if($video && $video->user)