From ddcc6ad65709f872fdf63943a486c59ddf54ded9 Mon Sep 17 00:00:00 2001
From: Guido <guido.schmit03@gmail.com>
Date: Thu, 6 Aug 2026 19:03:03 +0200
Subject: [PATCH] Fix Admin-Spielertabelle: Spalten richtig ausgerichtet +
 scrollbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Chips in inneren <div> statt display:flex direkt auf <td> (sonst fallen die Zellen
  aus dem Spaltenraster -> alles rutschte in die IP-Spalte, Gerät/Browser leer)
- Tabelle horizontal scrollbar (overflow-x) auf schmalen Screens

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 public/admin.html  | 2 ++
 public/js/admin.js | 3 +--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/public/admin.html b/public/admin.html
index 2c11465..b05ef1c 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -33,7 +33,9 @@
   section.tab { display:none; }
   section.tab.active { display:block; }
 
+  #players-wrap { overflow-x:auto; }
   table { width:100%; border-collapse:collapse; font-size:14px; }
+  #players-wrap table { min-width:820px; }
   th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
   th { color:var(--muted); font-weight:600; }
   .chips { display:flex; flex-wrap:wrap; gap:4px; }
diff --git a/public/js/admin.js b/public/js/admin.js
index aa240ec..2cd026e 100644
--- a/public/js/admin.js
+++ b/public/js/admin.js
@@ -66,12 +66,11 @@ async function loadPlayers() {
 
   const rows = players.map((p) => {
     const banned = bans.has(String(p.name).toLowerCase());
-    const chips = (arr) => (arr || []).map((x) => `<span class="chip"></span>`).join('');
     const tr = document.createElement('tr');
     tr.innerHTML =
       `<td><b class="pname"></b>${banned ? ' <span class="chip" style="color:#ff9bb2">gebannt</span>' : ''}</td>` +
       `<td>${p.bestScore}</td><td>${p.games}</td><td>${fmt(p.lastAt)}</td>` +
-      `<td class="ips chips"></td><td class="locs chips"></td><td class="devs chips"></td><td class="brs chips"></td>` +
+      `<td><div class="ips chips"></div></td><td><div class="locs chips"></div></td><td><div class="devs chips"></div></td><td><div class="brs chips"></div></td>` +
       `<td><button class="${banned ? '' : 'danger'} act">${banned ? 'Entbannen' : 'Bannen'}</button></td>`;
     tr.querySelector('.pname').textContent = p.name; // XSS-safe
     const fill = (sel, arr) => { const c = tr.querySelector(sel); (arr || []).forEach((x) => { const s = document.createElement('span'); s.className = 'chip'; s.textContent = x; c.appendChild(s); }); };