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>