From 6500493314fefc608feee0d0fa868be8a4d52f77 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 5 Nov 2025 08:49:27 +0100
Subject: [PATCH] Enhance TournamentsView with diagonal cell styling for match
 rankings

Updated the TournamentsView to include a new CSS class for diagonal cells, improving the visual representation of match rankings. The diagonal cells now have distinct styling to indicate active matches, enhancing user interaction and clarity in tournament displays.
---
 frontend/src/views/TournamentsView.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/TournamentsView.vue b/frontend/src/views/TournamentsView.vue
index 2a9cfad..9499683 100644
--- a/frontend/src/views/TournamentsView.vue
+++ b/frontend/src/views/TournamentsView.vue
@@ -133,7 +133,7 @@
                                 </td>
                                 <td v-for="(opponent, oppIdx) in groupRankings[group.groupId]" 
                                     :key="`match-${pl.id}-${opponent.id}`"
-                                    :class="['match-cell', { 'clickable': idx !== oppIdx, 'active-group-cell': activeGroupCells.includes(`match-${pl.id}-${opponent.id}`) }]"
+                                    :class="['match-cell', { 'clickable': idx !== oppIdx, 'active-group-cell': activeGroupCells.includes(`match-${pl.id}-${opponent.id}`), 'diagonal-cell': idx === oppIdx }]"
                                     @click="idx !== oppIdx ? highlightMatch(pl.id, opponent.id, group.groupId) : null">
                                     <span v-if="idx === oppIdx" class="diagonal"></span>
                                     <span v-else-if="getMatchLiveResult(pl.id, opponent.id, group.groupId)" 
@@ -1774,13 +1774,22 @@ button {
     margin-left: 0.5em;
 }
 
+.match-cell.diagonal-cell {
+    position: relative;
+    padding: 0;
+}
+
 .diagonal {
     background-color: #000;
     color: #000;
     display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     width: 100%;
     height: 100%;
-    min-height: 20px;
 }
 
 .match-result {