From d0c76112c9c67f63044be8c1ac6ff8d817eaf989 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Fri, 20 Mar 2026 01:41:51 +0900
Subject: fix(frontend): fix quarter-final bracket horizontal lines
 overshooting leg positions

Replace grid-based horizontal line positioning with flex + fixed 25%
width approach. The grid calculation broke at colSpan=2 because
Math.floor(1/2)=0 couldn't express half-column offsets. Also remove
seed number display from player cards.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/app/pages/TournamentPage.tsx | 22 +++-------------------
 1 file changed, 3 insertions(+), 19 deletions(-)

(limited to 'frontend')

diff --git a/frontend/app/pages/TournamentPage.tsx b/frontend/app/pages/TournamentPage.tsx
index 3d954c9..01fcb9b 100644
--- a/frontend/app/pages/TournamentPage.tsx
+++ b/frontend/app/pages/TournamentPage.tsx
@@ -48,7 +48,6 @@ function PlayerCard({ entry }: { entry: TournamentEntry | undefined }) {
   return (
     <BorderedContainer>
       <div className="flex flex-col items-center gap-1">
-        <span className="text-gray-600 text-xs">Seed {entry.seed}</span>
         <span className="font-medium text-sm truncate max-w-full">
           {entry.user.display_name}
         </span>
@@ -106,24 +105,9 @@ function Connector({
       )}
 
       {/* Horizontal line */}
-      <div
-        className="grid"
-        style={{
-          gridTemplateColumns: `repeat(${colSpan}, 1fr)`,
-        }}
-      >
-        <div
-          className={`border-t-4 ${leftBorderColor}`}
-          style={{
-            gridColumn: `${Math.floor(leftHalf / 2) + 1} / span ${Math.ceil(leftHalf / 2)}`,
-          }}
-        />
-        <div
-          className={`border-t-4 ${rightBorderColor}`}
-          style={{
-            gridColumn: `${leftHalf + 1} / span ${Math.ceil(rightHalf / 2)}`,
-          }}
-        />
+      <div className="flex justify-center">
+        <div className={`w-1/4 border-t-4 ${leftBorderColor}`} />
+        <div className={`w-1/4 border-t-4 ${rightBorderColor}`} />
       </div>
 
       {/* Two legs going DOWN to child elements */}
-- 
cgit v1.3.1