UI optimizations and polish.

templates/components/opp_clan_bar.html

@@ -1,13 +1,14 @@
 {{ define "opp_clan_bar" }}
 
 <div class="row g-2">
-    <div class="col-auto">
+    <div class="col-auto pe-2">
         <label for="opponent-clan" class="col-form-label col-form-label-lg">Clans:</label>
     </div>
     <div class="col">
         <div class="input-group input-group-lg mb-3">
             <select class="form-select form-control border-secondary" id="opponent-clan" hx-get="/players_html" hx-target="#opponent-player-list" hx-vals='js:{"clan_id": getSelectedClanId("opponent-clan")}'>
                 <option disabled selected value>Auswählen...</option>
+                <!-- Options will be loaded dynamically -->
             </select>
             {{ if not (eq .UserRole "READER") }}
                 <button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="opponent-delete"
@@ -30,6 +31,11 @@
 <script lang="javascript">
     document.addEventListener('DOMContentLoaded', function() {
         setupClanButtons('opponent-clan', 'opponent-delete', 'opponent-edit');
+
+        const oppPlayerList = document.getElementById('opponent-player-list');
+        oppPlayerList.addEventListener('htmx:afterSwap', function() {
+            initTooltips(oppPlayerList);
+        });
     });
 </script>