diff --git a/tournaments/static/tournaments/js/tournament_bracket.js b/tournaments/static/tournaments/js/tournament_bracket.js
index ea8b1ad..a62be46 100644
--- a/tournaments/static/tournaments/js/tournament_bracket.js
+++ b/tournaments/static/tournaments/js/tournament_bracket.js
@@ -41,10 +41,7 @@ function renderBracket(options) {
   }
   const padding = 50 * roundTotalCount; // Account for some padding/margin
   const availableWidth = screenWidth - padding;
-  responsiveMatchWidth = Math.min(
-    365,
-    Math.max(365, Math.floor(availableWidth / roundTotalCount)),
-  );
+  responsiveMatchWidth = Math.floor(availableWidth / roundTotalCount);
 
   if (isBroadcast) {
     responsiveMatchWidth = Math.min(
diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html b/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html
index 2894747..84d1c23 100644
--- a/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html
+++ b/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html
@@ -32,6 +32,36 @@
       })();
     </script>
     <!-- End Matomo Code -->
+
+    <style>
+      #screen-size-overlay {
+        position: fixed;
+        top: 10px;
+        left: 10px;
+        background-color: rgba(0, 0, 0, 0.7);
+        color: white;
+        padding: 10px;
+        border-radius: 5px;
+        font-size: 1em;
+        z-index: 1000; /* Ensure it's on top of other elements */
+      }
+    </style>
+
+    <div id="screen-size-overlay"></div>
+
+    <script>
+      const overlay = document.getElementById('screen-size-overlay');
+
+      function updateScreenSize() {
+        overlay.textContent = `Width: ${window.innerWidth}px, Height: ${window.innerHeight}px`;
+      }
+
+      // Update on initial load
+      updateScreenSize();
+
+      // Update on window resize (optional, but can be useful if the window size changes)
+      window.addEventListener('resize', updateScreenSize);
+    </script>
 </head>
 
 <body>
diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_planning.html b/tournaments/templates/tournaments/broadcast/broadcasted_planning.html
index b253302..ee9bff9 100644
--- a/tournaments/templates/tournaments/broadcast/broadcasted_planning.html
+++ b/tournaments/templates/tournaments/broadcast/broadcasted_planning.html
@@ -202,7 +202,7 @@
         <div class="wrapper">
             <main>
                 <div class="grid-x">
-                    <div class="cell large-12">
+                    <div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}">
                         <div style="display: flex; margin-bottom: 20px;">
                             <div class="bubble-footer" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 20px; width: 8rem;">
                                 <h1 class="event">00:00</h1>
@@ -226,7 +226,7 @@
                             <div x-show="currentPageIndex === pageIndex">
                                 <div class="grid-x">
                                     <template x-for="(group, groupIndex) in groupPage" :key="groupIndex">
-                                        <div class="cell large-12">
+                                        <div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}">
                                             <div style="display: flex; margin-bottom: 20px;">
                                                 <div class="bubble-footer" style="align-items: center; justify-content: center; margin-right: 20px; width: 8rem;">
                                                     <h1 class="event" x-text="group.name.slice(-5)"></h1>
