Fix bracket display for seeds over 99 Closes #2041

Sendouc · Jan 23, 2025 · 1321597 · 1321597
1 parent 54d30a3
commit 1321597
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/app/features/tournament-bracket/components/Bracket/Match.tsx b/app/features/tournament-bracket/components/Bracket/Match.tsx
@@ -172,6 +172,8 @@ function MatchRow({
 	const logoSrc =
 		!simulated && team ? tournament.tournamentTeamLogoSrc(team) : null;
 
+	const isBigSeedNumber = team?.seed && team.seed > 99;
+
 	return (
 		<div
 			className={clsx("stack horizontal", { "text-lighter": isLoser })}
@@ -181,6 +183,7 @@ function MatchRow({
 			<div
 				className={clsx("bracket__match__seed", {
 					"text-lighter-important italic opaque": simulated,
+					bracket__match__seed__wide: isBigSeedNumber,
 				})}
 			>
 				{team?.seed}
@@ -191,7 +194,11 @@ function MatchRow({
 					"text-theme-secondary":
 						!simulated && ownTeam && ownTeam?.id === team?.id,
 					"text-lighter italic opaque": simulated,
-					"bracket__match__team-name__narrow": logoSrc,
+					"bracket__match__team-name__narrow":
+						// either but not both
+						(logoSrc || isBigSeedNumber) && !(logoSrc && isBigSeedNumber),
+					// both
+					"bracket__match__team-name__narrowest": logoSrc && isBigSeedNumber,
 					invisible: !team,
 				})}
 			>

diff --git a/app/features/tournament-bracket/components/Bracket/bracket.css b/app/features/tournament-bracket/components/Bracket/bracket.css
@@ -83,6 +83,11 @@ a.bracket__match:hover {
 	max-width: 15px;
 }
 
+.bracket__match__seed__wide {
+	min-width: 20px;
+	max-width: 20px;
+}
+
 .bracket__match__team-name {
 	max-width: 95px;
 	overflow: hidden;
@@ -94,6 +99,10 @@ a.bracket__match:hover {
 	max-width: 75px;
 }
 
+.bracket__match__team-name__narrowest {
+	max-width: 70px;
+}
+
 .bracket__match__score {
 	margin-inline-start: auto;
 }