fix broadcast layout

tournaments/static/tournaments/js/tournament_bracket.js

@@ -39,10 +39,9 @@ function renderBracket(options) {
   if (doubleButterflyMode == true && roundCount > 1) {
     roundTotalCount = roundCount - 1;
   }
-  const padding = 50 * roundTotalCount; // Account for some padding/margin
+  const padding = 46 * roundTotalCount; // Account for some padding/margin
   const availableWidth = screenWidth - padding;
   responsiveMatchWidth = Math.floor(availableWidth / roundTotalCount);
-
   let topMargin = 0;
   if (isBroadcast) {
     responsiveMatchWidth = Math.min(
@@ -65,7 +64,14 @@ function renderBracket(options) {
     const roundDiv = document.createElement("div");
     roundDiv.className = "butterfly-round";
     roundDiv.style.setProperty("--match-width", `${responsiveMatchWidth}px`);
-
+    if (doubleButterflyMode == true && roundCount > 3) {
+      if (roundIndex >= finalRoundIndex - 1) {
+        roundDiv.style.transform = `translateX(-50%)`;
+        if (roundIndex >= finalRoundIndex + 2) {
+          roundDiv.style.transform = `translateX(-100%)`;
+        }
+      }
+    }
     // Create title
     const titleDiv = document.createElement("div");
     titleDiv.className = "round-title";
@@ -109,14 +115,6 @@ function renderBracket(options) {
     // Create matches container
     const matchesContainer = document.createElement("div");
     matchesContainer.className = "matches-container";
-    if (doubleButterflyMode == true && roundCount > 3) {
-      if (roundIndex >= finalRoundIndex - 1) {
-        matchesContainer.style.transform = `translateX(-50%)`;
-        if (roundIndex >= finalRoundIndex + 2) {
-          matchesContainer.style.transform = `translateX(-100%)`;
-        }
-      }
-    }
     roundDiv.appendChild(matchesContainer);
     if (matchPositions[roundIndex] == undefined) {
       matchPositions[roundIndex] = {};