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

1 files changed, 6 insertions, 2 deletions

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>