From fa9acd30276f2f7c9991135887bd86147fa822e9 Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Sun, 17 May 2026 22:01:33 +0200
Subject: [PATCH] style(player-card): avatar spans full card height; name +
 meta stacked
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both current cards and recent chips now lay out as a 2-column grid:
larger avatar (36px current / 28px recent) on the left occupying both
rows, name on row 1 column 2, meta on row 2 column 2. Removes the
inline "· " prefix from recent-chip meta — it was a separator for the
old single-line layout and reads as visual noise when stacked.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 l4d2web/l4d2web/static/css/components.css     | 21 ++++++++++++-------
 l4d2web/l4d2web/templates/_live_state.html    |  2 +-
 .../templates/_recent_players_modal_body.html |  2 +-
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/l4d2web/l4d2web/static/css/components.css b/l4d2web/l4d2web/static/css/components.css
index 3690b2c..7484ba0 100644
--- a/l4d2web/l4d2web/static/css/components.css
+++ b/l4d2web/l4d2web/static/css/components.css
@@ -917,10 +917,14 @@ div.modal.modal-wide {
 .player-grid.current { grid-template-columns: repeat(4, 1fr); }
 .player-grid.recent  { grid-template-columns: repeat(5, 1fr); }
 
+/* Player card layout — avatar on left spans full card height; name + meta
+   stack on the right, both left-aligned. The avatar size is the height
+   driver for the whole card. */
 .player-card {
   display: grid;
   grid-template-columns: auto 1fr;
-  column-gap: var(--space-xs);
+  grid-template-rows: auto auto;
+  column-gap: var(--space-s);
   align-items: center;
   padding: var(--space-xs);
 }
@@ -934,12 +938,14 @@ div.modal.modal-wide {
 .player-card .avatar {
   border-radius: var(--radius-s);
   object-fit: cover;
+  grid-row: 1 / span 2;
 }
-.current-card .avatar { width: 22px; height: 22px; grid-row: 1 / span 2; }
-.recent-chip .avatar  { width: 16px; height: 16px; }
+.current-card .avatar { width: 36px; height: 36px; }
+.recent-chip .avatar  { width: 28px; height: 28px; }
 
 .player-card .name {
   grid-column: 2;
+  grid-row: 1;
   font-size: 0.9em;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -950,13 +956,14 @@ div.modal.modal-wide {
 
 .player-card .meta {
   grid-column: 2;
+  grid-row: 2;
   color: var(--color-muted);
   font-size: 0.75em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.recent-chip .meta {
-  grid-column: auto;
-  font-size: 0.8em;
-}
+.recent-chip .meta { font-size: 0.8em; }
 
 .avatar.placeholder {
   display: inline-block;
diff --git a/l4d2web/l4d2web/templates/_live_state.html b/l4d2web/l4d2web/templates/_live_state.html
index 1b115b8..3b58c2b 100644
--- a/l4d2web/l4d2web/templates/_live_state.html
+++ b/l4d2web/l4d2web/templates/_live_state.html
@@ -63,7 +63,7 @@
           {% endif %}
           <span class="name" title="{{ display_name }}">{{ display_name }}</span>
         </a>
-        <span class="meta">· {{ row.last_seen | timeago }}</span>
+        <span class="meta">{{ row.last_seen | timeago }}</span>
       </li>
     {% endfor %}
   </ul>
diff --git a/l4d2web/l4d2web/templates/_recent_players_modal_body.html b/l4d2web/l4d2web/templates/_recent_players_modal_body.html
index 0258305..bd14f57 100644
--- a/l4d2web/l4d2web/templates/_recent_players_modal_body.html
+++ b/l4d2web/l4d2web/templates/_recent_players_modal_body.html
@@ -15,7 +15,7 @@
         {% endif %}
         <span class="name" title="{{ display_name }}">{{ display_name }}</span>
       </a>
-      <span class="meta">· {{ row.last_seen | timeago }}</span>
+      <span class="meta">{{ row.last_seen | timeago }}</span>
     </li>
   {% endfor %}
 </ul>