fix css

tournaments/static/tournaments/css/style.css

@@ -547,12 +547,12 @@ h-margin {
 }
 
 .left-label {
-    align-self: flex-start;
+    /* align-self: flex-start; */
     /* Aligns the left label to the top */
 }
 
 .right-label {
-    align-self: flex-end;
+    /* align-self: flex-end; */
     /* Aligns the right label to the bottom */
 }
 
@@ -1062,32 +1062,32 @@ h-margin {
     text-decoration: line-through;
 }
 
-.status-container {
+.match-status-container {
-    margin: 0 -20px -20px -20px; /* Negative margin to counter the bubble padding, including bottom */
-    padding: 10px 20px 20px 20px; /* Add padding back to maintain text alignment, including bottom */
-    border-radius: 0 0 24px 24px; /* Match the bubble's bottom corners */
-}
-
-.status-container-bracket {
-    margin: 0px -20px -20px -20px; /* Negative margin to counter the bubble padding, including bottom */
-    padding: 10px 20px 10px 20px; /* Add padding back to maintain text alignment, including bottom */
-    border-radius: 0 0 24px 24px; /* Match the bubble's bottom corners */
     align-items: center;
+    display: flex;
+    height: 100%;
+    margin-left: -20px;
+    margin-right: -20px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
-.status-container-bracket-header {
+.match-status-container-header {
-    height: 24px;
+    margin-top: -20px;
+    height: 40px;
     text-align: left;
 }
 
-.status-container-bracket-header-bottom {
+.match-status-container-header-bottom {
-    height: 24px;
+    margin-bottom: -20px;
+    height: 40px;
     text-align: left;
 }
 
-.status-container-bracket.running,
+.match-status-container.running,
 .status-container.running {
-    background-color: #90ee90; /* Light green color */
+    background-color: #90ee90;
+    border-radius: 0 0 24px 24px;
 }
 
 .overlay-text {

tournaments/static/tournaments/css/tournament_bracket.css

@@ -44,7 +44,7 @@
     text-align: center;
     font-weight: bold;
     width: 100%; /* Change from 100% to auto */
-    padding: 5px 10px;
+    padding: 0px 10px;
 
     white-space: nowrap; /* Prevent text from wrapping */
     display: flex;
@@ -251,3 +251,7 @@
     background-color: #90ee90; /* Light green color */
     border-radius: 0 0 24px 24px; /* Match the bubble's bottom corners */
 }
+
+.match-result.broadcast-mode {
+    padding: 0px;
+}

tournaments/templates/tournaments/bracket_match_cell.html

@@ -1,9 +1,9 @@
 {% load static %}
 
-        <div class="cell medium-12 large-3 padding10">
+        <div class="cell medium-12 large-3">
             <div class="bubble">
 
-                <div class="status-container-bracket-header flex-row">
+                <div class="match-status-container-header flex-row">
                     {% if match.bracket_name %}
                     <label class="minor-info bold">{{ match.bracket_name }}</label>
                     {% endif %}
@@ -64,8 +64,8 @@
                 {% endfor %}
 
                 </div>
-                <div class="status-container-bracket-header-bottom">
+                <div class="match-status-container-header-bottom">
-                    <div class="status-container-bracket {% if not match.ended and match.started %}running{% endif %}">
+                    <div class="match-status-container {% if not match.ended and match.started %}running{% endif %}">
                         <label class="left-label minor-info bold">
                             {% if match.show_time_indication %}
                             {{ match.time_indication }}

tournaments/templates/tournaments/broadcast/broadcasted_match.html

@@ -1,6 +1,6 @@
  <div class="bubble">
 
-     <div class="flex-row">
+     <div class="match-status-container-header flex-row">
          <label class="left-label matchtitle">
              <span x-text="match.group_stage_name"></span>
              <span x-show="match.group_stage_name"> :</span>
@@ -82,11 +82,11 @@
 
          </div>
      </template>
-     <div class="status-container" :class="{'running': !match.ended && match.started}">
+     <div class="match-status-container-header-bottom">
-     <div class="top-margin flex-row">
+         <div class="match-status-container flex-row" :class="{'running': !match.ended && match.started}">
-         <label class="left-label minor-info bold"><span x-text="match.time_indication"></span></label>
+             <label class="left-label minor-info bold"><span x-text="match.time_indication"></span></label>
-         <label class="right-label minor-info semibold"><span x-text="match.format"></span></label>
+             <label class="right-label minor-info semibold"><span x-text="match.format"></span></label>
-     </div>
+         </div>
      </div>
 
  </div>

tournaments/templates/tournaments/match_cell.html

@@ -3,7 +3,7 @@
         <div class="cell medium-12 large-3 padding10">
             <div class="bubble">
 
-                <div class="flex-row">
+                <div class="match-status-container-header flex-row">
                     <label class="matchtitle">{{ match.title }}</label>
                     {% if not match.ended %}
                     <label class="right-label minor-info bold">{{ match.court }}</label>
@@ -58,8 +58,9 @@
                 {% endfor %}
 
                 </div>
-                <div class="status-container {% if not match.ended and match.started %}running{% endif %}">
+
-                    <div class="flex-row top-margin">
+                <div class="match-status-container-header-bottom">
+                    <div class="match-status-container {% if not match.ended and match.started %}running{% endif %} flex-row">
                         <label class="left-label minor-info bold">
                             {% if match.show_time_indication %}
                             {{ match.time_indication }}