Show seeds in bracket for all rounds

app/features/tournament-bracket/brackets-viewer.css

@@ -56,3 +56,16 @@
 .bye {
   color: var(--text-lighter);
 }
+
+.brackets-viewer .participant .name > span {
+  color: var(--theme);
+  display: none;
+}
+
+.brackets-viewer .participant .name::before {
+  content: var(--seed);
+  font-weight: initial;
+  color: var(--theme);
+  font-size: var(--fonts-xxs);
+  margin-inline-end: var(--space-after-seed);
+}

app/features/tournament-bracket/routes/to.$id.brackets.tsx

@@ -182,6 +182,21 @@ export default function TournamentBracketsPage() {
       }
     );
 
+    // my beautiful hack to show seeds
+    // clean up probably not needed as it's not harmful to append more than one
+    appendStyleTagToHead(
+      parentRouteData.teams
+        .map(
+          (team, i) => `
+      [data-participant-id="${team.id}"] {
+        --seed: "${i + 1}  ";
+        --space-after-seed: ${i < 10 ? "6px" : "0px"};
+      }
+    `
+        )
+        .join("\n")
+    );
+
     const element = ref.current;
     return () => {
       if (!element) return;
@@ -191,7 +206,7 @@ export default function TournamentBracketsPage() {
   }, [
     data.bracket,
     navigate,
-    parentRouteData.event.id,
+    parentRouteData,
     data.hasStarted,
     lessThanTwoTeamsRegistered,
   ]);
@@ -248,6 +263,16 @@ function AutoRefresher() {
   return null;
 }
 
+function appendStyleTagToHead(content: string) {
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+
+  head.appendChild(style);
+
+  style.type = "text/css";
+  style.appendChild(document.createTextNode(content));
+}
+
 function useAutoRefresh() {
   const { revalidate } = useRevalidator();
   const parentRouteData = useOutletContext<TournamentLoaderData>();