Fix missing separator + center scores in broadcast

tournaments/static/tournaments/css/style.css

@@ -208,7 +208,7 @@ tr {
 .match-result {
     display: flex;
     align-items: center;
-    margin-bottom: 10px; /* Adjust as needed */
+    padding: 8px 0px;
 }
 
 .player {

tournaments/templates/tournaments/broadcasted_match.html

@@ -8,45 +8,39 @@
      <template x-for="i in match.teams.length">
 
          <div>
-             <div class="table-row-3-colums team-names-box padding-bottom-small">
-
-                 <div class="table-cell table-cell-large">
-                     <template x-for="name in match.teams[i-1].names">
-
-                         <div class="ws" x-data="{
-                             showName(name, team) {
-                                 let html = `<span class='`
-                                 if (team.is_winner) html += `winner`
-                                 html += `'>`
-                                 html += name
-                                 html += `</span>`
-                                 return html
-                             },
-                             }" x-html="showName(name, match.teams[i-1])">
-                         </div>
-
-                     </template>
-                 </div>
-                 <div class="table-cell alignright">
-                     <template x-for="score in match.teams[i-1].scores">
-
-                         <span class="score ws" x-data="{
-                             showScore(score, team) {
-                                 let html = `<span class='`
-                                 if (team.is_winner) html += `winner`
-                                 html += `'>`
-                                 html += score
-                                 html += `</span>`
-                                 return html
-                             },
-                             }" x-html="showScore(score, match.teams[i-1])">
-                         </span>
-
-                         <!-- <span class="score ws" x-text="score"></span> -->
-                     </template>
-                 </div>
 
-             </div>
+             <div class="match-result">
+                <div class="player">
+                    <template x-for="name in match.teams[i-1].names">
+                        <div class="ws" x-data="{
+                            showName(name, team) {
+                                let html = `<span class='`
+                                if (team.is_winner) html += `winner`
+                                html += `'>`
+                                html += name
+                                html += `</span>`
+                                return html
+                            },
+                            }" x-html="showName(name, match.teams[i-1])">
+                    </template>
+                </div>
+                <div class="scores">
+                    <template x-for="score in match.teams[i-1].scores">
+
+                        <span class="score ws" x-data="{
+                            showScore(score, team) {
+                                let html = `<span class='`
+                                if (team.is_winner) html += `winner`
+                                html += `'>`
+                                html += score
+                                html += `</span>`
+                                return html
+                            },
+                            }" x-html="showScore(score, match.teams[i-1])">
+                        </span>
+                    </template>
+                </div>
+            </div>
 
              <div x-show="i === 1">
                  <div class="bottom-border"></div>

tournaments/templates/tournaments/match_cell.html

@@ -12,7 +12,7 @@
 
                                 {% for team in match.teams %}
 
-                                <div class="match-result">
+                                <div class="match-result {% cycle 'bottom-border' '' %}">
                                     <div class="player">
                                         {% for name in team.names %}
                                         <div class="semibold {% if team.is_winner %}winner{% endif %}">