From 45f201d70fe1518e4dd7607654c4840fb4bf070a Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 2 Apr 2026 21:39:39 +0300
Subject: [PATCH] Tweak match vod popover styling

---
 .../components/Bracket/Match.tsx              | 33 +++++++++++--------
 .../tournament-bracket.module.css             | 23 +++++++++++--
 2 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/app/features/tournament-bracket/components/Bracket/Match.tsx b/app/features/tournament-bracket/components/Bracket/Match.tsx
index 0471ceeda..181ee90a5 100644
--- a/app/features/tournament-bracket/components/Bracket/Match.tsx
+++ b/app/features/tournament-bracket/components/Bracket/Match.tsx
@@ -1,5 +1,6 @@
 import clsx from "clsx";
 import { differenceInMinutes } from "date-fns";
+import { Eye } from "lucide-react";
 import * as React from "react";
 import { Link } from "react-router";
 import { Avatar } from "~/components/Avatar";
@@ -375,7 +376,7 @@ function MatchVods({ vods }: MatchVodsProps) {
 	const tournament = useTournament();
 
 	return (
-		<div className={clsx("stack md", parentStyles.streamPopover)}>
+		<div className={parentStyles.vodGrid}>
 			{vods.map((vod) => {
 				const team = vod.userId
 					? tournament.ctx.teams.find((t) =>
@@ -390,19 +391,25 @@ function MatchVods({ vods }: MatchVodsProps) {
 						href={vodUrl(vod)}
 						target="_blank"
 						rel="noopener noreferrer"
-						className={parentStyles.vodLink}
 					>
-						{user ? (
-							<>
-								<Avatar size="xxs" user={user} />
-								<span className="font-semi-bold">{user.username}</span>
-								<span className="text-theme-secondary">{team?.name}</span>
-							</>
-						) : (
-							<span className="font-semi-bold">{vod.account}</span>
-						)}
-						<span className="text-lighter text-xs">
-							{vod.viewCount.toLocaleString()} views
+						<span className={parentStyles.vodUser}>
+							{user ? (
+								<>
+									<Avatar size="xxs" user={user} />
+									<span className="font-semi-bold">{user.username}</span>
+								</>
+							) : (
+								<span className="font-semi-bold">{vod.account}</span>
+							)}
+						</span>
+						<span
+							className={clsx("text-theme-secondary", parentStyles.vodTeamName)}
+						>
+							{user ? team?.name : null}
+						</span>
+						<span className="text-lighter stack horizontal xs items-center">
+							<Eye size={12} />
+							{vod.viewCount.toLocaleString()}
 						</span>
 					</a>
 				);
diff --git a/app/features/tournament-bracket/tournament-bracket.module.css b/app/features/tournament-bracket/tournament-bracket.module.css
index 15da9945d..2e0b4c32c 100644
--- a/app/features/tournament-bracket/tournament-bracket.module.css
+++ b/app/features/tournament-bracket/tournament-bracket.module.css
@@ -513,13 +513,30 @@
 	width: 280px;
 }
 
-.vodLink {
+.vodGrid {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	gap: var(--s-1) var(--s-2);
+	align-items: center;
+	font-size: var(--font-xs);
+	white-space: nowrap;
+}
+
+.vodGrid a {
+	display: grid;
+	grid-template-columns: subgrid;
+	grid-column: 1 / -1;
+	align-items: center;
+}
+
+.vodUser {
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
-	font-size: var(--font-xs);
+}
+
+.vodTeamName {
 	overflow: hidden;
-	white-space: nowrap;
 	text-overflow: ellipsis;
 	min-width: 0;
 }