Tweak styles

app/features/scanner/components/MatchCard.module.css

@@ -67,7 +67,7 @@
 .head {
 	display: flex;
 	flex-direction: column;
-	gap: var(--s-2);
+	gap: var(--s-4);
 	padding: var(--s-3) var(--s-4);
 }
 
@@ -120,11 +120,15 @@
 }
 
 .title {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-1);
 	font-size: var(--font-sm);
 	line-height: 1.1;
 }
 
 .modeName {
+	font-size: var(--font-2xs);
 	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 }
@@ -211,8 +215,8 @@
 }
 
 .weapon {
-	width: 28px;
-	height: 28px;
+	width: 32px;
+	height: 32px;
 	background: var(--color-bg-higher);
 	border-radius: var(--radius-full);
 	padding: 2px;

app/features/scanner/components/MatchCard.tsx

@@ -126,9 +126,6 @@ export function MatchCard({
 		(event) => event.detectedAt !== undefined,
 	)?.detectedAt;
 	const meta = [
-		kind === "vod" && match.startsAt !== null
-			? `at ${formatPosition(match.startsAt - originT)}`
-			: null,
 		match.lobby !== null && match.lobby !== "PRIVATE"
 			? lobbyLabel(match.lobby)
 			: null,
@@ -149,7 +146,13 @@ export function MatchCard({
 			<div className={styles.main}>
 				<div className={clsx(styles.numberColumn, "line-height-tight")}>
 					<span className={styles.number}>Game {number}</span>
-					{scannedAt !== undefined ? (
+					{kind === "vod" ? (
+						match.startsAt !== null ? (
+							<span className={styles.scannedAt}>
+								{formatPosition(match.startsAt - originT)}
+							</span>
+						) : null
+					) : scannedAt !== undefined ? (
 						<LocaleTime
 							date={new Date(scannedAt)}
 							options={{ timeStyle: "short" }}
@@ -163,9 +166,7 @@ export function MatchCard({
 				<div className={styles.headline}>
 					<div className={styles.title}>
 						{modeLabel(match.mode) ? (
-							<span className={styles.modeName}>
-								{modeLabel(match.mode)} ·{" "}
-							</span>
+							<span className={styles.modeName}>{modeLabel(match.mode)}</span>
 						) : null}
 						<span className={styles.stage}>
 							{stageLabel(match.stage) ?? "Unknown stage"}
@@ -361,8 +362,8 @@ function TeamWeapons({ match }: { match: ScannerMatch }) {
 							<WeaponImage
 								key={index}
 								weaponSplId={weaponId}
-								variant="build"
-								size={24}
+								variant="badge"
+								size={28}
 								className={clsx(styles.weapon, { [styles.pov]: isPov })}
 							/>
 						) : (