fix broadcast

tournaments/static/tournaments/css/broadcast.css

@@ -134,7 +134,7 @@ body {
 .left-content.bubble-header.screen-size-overlay {
     display: flex;
     align-items: top; /* Vertically align items (logo and text) */
-    height: auto; /* Allow height to adjust based on content */
+    max-height: 14vh; /* Allow height to adjust based on content */
 }
 
 .left-content.bubble-header.screen-size-overlay .left-margin h1.club,

tournaments/static/tournaments/css/tournament_bracket.css

@@ -311,7 +311,6 @@
 
     #screen-size-overlay {
         font-size: clamp(0.4em, 0.6em, 0.8em) !important;
-        max-height: 120px;
     }
 }
 

tournaments/static/tournaments/js/tournament_bracket.js

@@ -36,10 +36,12 @@ function renderBracket(options) {
 
   const screenWidth = window.innerWidth;
   let roundTotalCount = roundCount;
-  if (doubleButterflyMode == true && roundCount > 1) {
+  let initialPadding = 40;
+  if (doubleButterflyMode == true && roundCount > 4) {
     roundTotalCount = roundCount - 1;
+    initialPadding = 46;
   }
-  const padding = 46 * roundTotalCount; // Account for some padding/margin
+  const padding = initialPadding * roundTotalCount; // Account for some padding/margin
   const availableWidth = screenWidth - padding;
   let responsiveMatchWidth = Math.min(
     365,
@@ -48,10 +50,7 @@ function renderBracket(options) {
 
   let topMargin = 0;
   if (isBroadcast) {
-    responsiveMatchWidth = Math.min(
+    responsiveMatchWidth = Math.floor(availableWidth / roundTotalCount);
-      600,
-      Math.floor(availableWidth / roundTotalCount),
-    );
     let screenHeight = window.innerHeight;
     if (roundTotalCount <= 1) {
       topMargin = 240;
@@ -428,8 +427,10 @@ function renderBracket(options) {
         matchesContainer.appendChild(titleDiv);
       }
 
-      if (roundIndex == 0) {
+      if (roundIndex == 0 && roundCount > 3) {
         isIncomingLineIsDisabled = true;
+      } else if (roundIndex == 0 && roundCount < 4) {
+        isIncomingLineIsDisabled = false;
       }
       matchDiv.innerHTML = `
                 <div class="incoming-line ${isIncomingLineIsDisabled ? "disabled" : ""}"></div>

tournaments/templates/tournaments/broadcast/broadcasted_bracket.html

@@ -42,8 +42,6 @@
         color: white;
         padding: 20px;
         max-width: 45%;
-        max-height: 300px;
-        z-index: 1000; /* Ensure it's on top of other elements */
       }
     </style>
 </head>