fix lucky loser everywhere

tournaments/static/tournaments/css/style.css

@@ -1105,3 +1105,12 @@ h-margin {
 .odd-row {
     background-color: #e6f2ff; /* Light blue */
 }
+
+.player-flex-row {
+    display: flex;
+    justify-content: space-between;
+    height: 24px;
+    align-items: center;
+    gap: 8px;
+    margin-right: 8px;
+}

tournaments/templates/tournaments/bracket_match_cell.html

@@ -17,16 +17,11 @@
                 {% for team in match.teams %}
                 <div class="match-result {% cycle 'bottom-border' '' %}">
                     <div class="player {% if team.names|length == 1 %}single-player{% else %}two-players{% endif %}">
+                        <div class="player-flex-row">
                             {% if team.id %}
                             <a href="{% url 'team-details' tournament.id team.id %}" class="player-link">
                             {% endif %}
-
-                        {% if team.is_lucky_loser or team.walk_out == 1 %}
-                        <div class="overlay-text">
-                            {% if match.should_show_lucky_loser_status and team.is_lucky_loser %}(LL){% elif team.walk_out == 1 %}(WO){% endif %}
-                        </div>
-                        {% endif %}
-
+                            <div>
                                 {% for name in team.names %}
                                 <div class="semibold{% if team.walk_out == 1 %} strikethrough{% endif %}{% if team.is_winner %} winner{% endif %}">
                                     {% if name|length > 0 %}
@@ -36,9 +31,17 @@
                                     {% endif %}
                                 </div>
                                 {% endfor %}
-                        {% if team.id %}
+                            </div>
+                            {% if team.id and team.weight %}
                             </a>
                             {% endif %}
+
+                            {% if team.is_lucky_loser or team.walk_out == 1 %}
+                            <div class="minor-info bold" style="height: 100%; padding-right: 20px;">
+                                {% if match.should_show_lucky_loser_status and team.is_lucky_loser %}(LL){% endif %}
+                            </div>
+                            {% endif %}
+                        </div>
                     </div>
 
                     {% if match.has_walk_out %}

tournaments/templates/tournaments/broadcast/broadcasted_match.html

@@ -20,14 +20,8 @@
                      'single-player': match.teams[i-1].names.length === 1,
                      'two-players': match.teams[i-1].names.length === 2
                  }">
-                    <!-- Show lucky loser or walkout status -->
-                    <template x-if="match.should_show_lucky_loser_status && match.teams[i-1].is_lucky_loser">
-                        <div class="overlay-text right-label minor-info semibold">(LL)</div>
-                    </template>
-                    <template x-if="match.teams[i-1].walk_out === 1">
-                        <div class="overlay-text right-label minor-info semibold">(WO)</div>
-                    </template>
-
+                     <div class="player-flex-row">
+                         <div>
                             <template x-for="name in match.teams[i-1].names">
                                 <div :class="{
                                         'bold': true,
@@ -38,6 +32,11 @@
                                 </div>
                             </template>
                          </div>
+                         <template x-if="match.should_show_lucky_loser_status && match.teams[i-1].is_lucky_loser">
+                             <div class="minor-info semibold">(LL)</div>
+                         </template>
+                     </div>
+                </div>
                 <div class="scores">
                     <template x-for="score in match.teams[i-1].scores">
                         <template x-if="match.has_walk_out === false ">

tournaments/templates/tournaments/match_cell.html

@@ -16,7 +16,7 @@
                 <div class="match-result {% cycle 'bottom-border' '' %}">
                     <div class="player {% if team.names|length == 1 %}single-player{% else %}two-players{% endif %}">
 
-                        <div class="flex-row">
+                        <div class="player-flex-row">
                             {% if team.id and team.weight %}
                             <a href="{% url 'team-details' tournament.id team.id %}" class="player-link">
                             {% endif %}
@@ -34,7 +34,7 @@
 
                             {% if team.is_lucky_loser or team.walk_out == 1 %}
                             <div class="minor-info bold" style="height: 100%; padding-right: 20px;">
-                                {% if match.should_show_lucky_loser_status and team.is_lucky_loser %}(LL){% elif team.walk_out == 1 %}(WO){% endif %}
+                                {% if match.should_show_lucky_loser_status and team.is_lucky_loser %}(LL){% endif %}
                             </div>
                             {% endif %}
                         </div>