Tweak MatchCard styles

app/features/scanner/components/MatchCard.tsx

@@ -87,8 +87,11 @@ export function MatchCard({
 					<ModeImage mode={match.mode} size={30} className="match-mode" />
 				) : null}
 				<div className="match-headline">
-					<div className="match-stage">
-						{stageLabel(match.stage) ?? "Unknown stage"}
+					<div className="match-title">
+						<div className="match-stage">
+							{stageLabel(match.stage) ?? "Unknown stage"}
+						</div>
+						<StatusChip send={send} skipReason={skipReason} live={live} />
 					</div>
 					{meta ? <div className="match-meta">{meta}</div> : null}
 					<TeamWeapons match={match} />
@@ -102,25 +105,24 @@ export function MatchCard({
 					) : (
 						<Score match={match} inProgress={inProgress} />
 					)}
-					<StatusChip send={send} skipReason={skipReason} live={live} />
 					{onSend && send?.state !== "sent" && send?.state !== "sending" ? (
 						<button type="button" onClick={onSend}>
 							{send?.state === "failed" ? "Retry" : "Send"}
 						</button>
 					) : null}
+					{children ? (
+						<SendouButton
+							variant="minimal"
+							size="small"
+							shape="circle"
+							icon={<ChevronDown />}
+							className={clsx("match-expand", { expanded })}
+							aria-expanded={expanded}
+							aria-label={expanded ? "Hide events" : "Show events"}
+							onPress={() => setExpanded(!expanded)}
+						/>
+					) : null}
 				</div>
-				{children ? (
-					<SendouButton
-						variant="minimal"
-						size="small"
-						shape="circle"
-						icon={<ChevronDown />}
-						className={clsx("match-expand", { expanded })}
-						aria-expanded={expanded}
-						aria-label={expanded ? "Hide events" : "Show events"}
-						onPress={() => setExpanded(!expanded)}
-					/>
-				) : null}
 			</div>
 			{send?.state === "failed" && send.error ? (
 				<div className="match-error">{send.error}</div>

app/features/scanner/components/styles.css

@@ -809,6 +809,13 @@ app/styles/vars.css (the emberz copies of those tokens were dropped).
 	min-width: 150px;
 }
 
+.scanner-app .match-title {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--s-1) var(--s-2);
+}
+
 .scanner-app .match-stage {
 	font-size: var(--font-sm);
 	font-weight: var(--weight-extra);
@@ -834,6 +841,7 @@ app/styles/vars.css (the emberz copies of those tokens were dropped).
 	}
 
 	& img.weapon-icon {
+		flex-shrink: 0;
 		width: 32px;
 		height: 32px;
 		border-radius: var(--radius-full);
@@ -853,6 +861,7 @@ app/styles/vars.css (the emberz copies of those tokens were dropped).
 	align-items: flex-end;
 	gap: var(--s-1-5);
 	margin-inline-start: auto;
+	align-self: stretch;
 	flex-shrink: 0;
 }
 
@@ -943,6 +952,7 @@ app/styles/vars.css (the emberz copies of those tokens were dropped).
 /* undo the scanner-wide solid button look for the banner icon button */
 .scanner-app button.match-expand {
 	flex-shrink: 0;
+	margin-block-start: auto;
 	width: 28px;
 	height: 28px;
 	padding: 0;