From b04cb62d985e9eaf731169c8b592eeb268eb10dd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 19 Mar 2026 13:25:17 +0000
Subject: Fix tournament bracket horizontal lines extending beyond vertical leg
 positions

The horizontal connector lines were spanning the full width of each connector
cell (columns 1 to colSpan), but they should only span between the centers of
the left and right halves where the vertical legs are positioned.

For example, with colSpan=8, the line was drawn across all 8 columns instead
of only columns 3-6 (between the two vertical leg positions at columns 2.5
and 6.5).

https://claude.ai/code/session_01JSWpL1UdZ2r6ppSmKJJXMb
---
 frontend/app/pages/TournamentPage.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'frontend')

diff --git a/frontend/app/pages/TournamentPage.tsx b/frontend/app/pages/TournamentPage.tsx
index 87836b2..3d954c9 100644
--- a/frontend/app/pages/TournamentPage.tsx
+++ b/frontend/app/pages/TournamentPage.tsx
@@ -114,11 +114,15 @@ function Connector({
       >
         <div
           className={`border-t-4 ${leftBorderColor}`}
-          style={{ gridColumn: `1 / span ${leftHalf}` }}
+          style={{
+            gridColumn: `${Math.floor(leftHalf / 2) + 1} / span ${Math.ceil(leftHalf / 2)}`,
+          }}
         />
         <div
           className={`border-t-4 ${rightBorderColor}`}
-          style={{ gridColumn: `${leftHalf + 1} / span ${rightHalf}` }}
+          style={{
+            gridColumn: `${leftHalf + 1} / span ${Math.ceil(rightHalf / 2)}`,
+          }}
         />
       </div>
 
-- 
cgit v1.3.1