From 3069f9e637f23dc98ad167f074e30162cdc0787c Mon Sep 17 00:00:00 2001
From: Raz <razmig@staxriver.com>
Date: Sun, 11 May 2025 19:20:07 +0200
Subject: [PATCH] fix broadcast layout

---
 .../broadcast/broadcasted_bracket.html        | 70 +++++++++----------
 1 file changed, 34 insertions(+), 36 deletions(-)
diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html b/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html
index a1a9011..b630915 100644
--- a/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html
+++ b/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html
@@ -31,42 +31,6 @@
         g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
       })();
     </script>
-    <!-- End Matomo Code -->
-
-    <style>
-      #screen-size-overlay {
-        position: fixed;
-        left: 50%;
-        transform: translateX(-50%); /* Center it exactly */
-        color: white;
-        padding: 20px;
-        font-size: 0.6em !important;
-        z-index: 1000; /* Ensure it's on top of other elements */
-      }
-    </style>
-</head>
-
-<body>
-    <header>
-        <div id="screen-size-overlay">
-            <div class="left-content bubble-header screen-size-overlay">
-                <img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo">
-                <div class="left-margin">
-                    <h1 class="club">{{ tournament.broadcast_event_display_name }}</h1>
-                    <h1 class="event">Tableau {{ tournament.broadcast_display_name }}</h1>
-                </div>
-            </div>
-        </div>
-    </header>
-
-    <div class="wrapper">
-        <main>
-            <div class="bracket-container">
-                <div class="butterfly-bracket" id="bracket"></div>
-            </div>
-        </main>
-    </div>
-
     <script src="{% static 'tournaments/js/tournament_bracket.js' %}"></script>
     <script>
         // Simple vanilla JS to handle the bracket rendering
@@ -167,7 +131,41 @@
         // Set up the refresh interval
         setInterval(fetchAndRenderBracket, 15000);
     </script>
+    <!-- End Matomo Code -->
+
+    <style>
+      #screen-size-overlay {
+        position: fixed;
+        left: 50%;
+        transform: translateX(-50%); /* Center it exactly */
+        color: white;
+        padding: 20px;
+        font-size: 0.6em !important;
+        z-index: 1000; /* Ensure it's on top of other elements */
+      }
+    </style>
+</head>
+
+<header>
+    <div id="screen-size-overlay">
+        <div class="left-content bubble-header screen-size-overlay">
+            <img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo">
+            <div class="left-margin">
+                <h1 class="club">{{ tournament.broadcast_event_display_name }}</h1>
+                <h1 class="event">Tableau {{ tournament.broadcast_display_name }}</h1>
+            </div>
+        </div>
+    </div>
+</header>
+
+<body>
+    <div class="wrapper">
+        <div class="bracket-container">
+            <div class="butterfly-bracket" id="bracket"></div>
+        </div>
+    </div>
 </body>
+
 <footer class="footer-broadcast">
     {% if tournament.event.images.exists %}
     <div class="bubble-footer">
