From cfdb3fbc1943802c544c39bdcc28ac99016888db Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Fri, 17 Apr 2026 23:29:40 +0200
Subject: [PATCH] Fix: Admin Stats-Grid 2 Spalten auf Mobile, SQL-Code
 umbrechend

---
 backend/static/css/components.css | 13 +++++++++++++
 backend/static/js/pages/admin.js  |  7 +++----
 backend/static/sw.js              |  2 +-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/backend/static/css/components.css b/backend/static/css/components.css
index 5397526..29f0cee 100644
--- a/backend/static/css/components.css
+++ b/backend/static/css/components.css
@@ -4790,3 +4790,16 @@ textarea.form-control {
     flex-basis: 100%;
   }
 }
+
+.adm-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-3);
+  margin-bottom: var(--space-5);
+}
+@media (min-width: 480px) {
+  .adm-stats-grid { grid-template-columns: repeat(3, 1fr); }
+}
+@media (min-width: 768px) {
+  .adm-stats-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
+}
diff --git a/backend/static/js/pages/admin.js b/backend/static/js/pages/admin.js
index d57670f..6c9b6b9 100644
--- a/backend/static/js/pages/admin.js
+++ b/backend/static/js/pages/admin.js
@@ -94,8 +94,7 @@ window.Page_admin = (() => {
   async function _renderStats(el) {
     const s = await API.get('/admin/stats');
     el.innerHTML = `
-      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3);
-                  margin-bottom:var(--space-5)">
+      <div class="adm-stats-grid">
         ${_statCard('users',           'Nutzer gesamt',      s.users_total,        'var(--c-primary)')}
         ${_statCard('user-plus',       'Neu heute',          s.users_today,        'var(--c-success)')}
         ${_statCard('activity',        'Aktiv (7 Tage)',      s.active_users_7d,    'var(--c-primary)')}
@@ -116,7 +115,7 @@ window.Page_admin = (() => {
             <use href="/icons/phosphor.svg#info"></use>
           </svg>
           Ersten Admin per SQL setzen:
-          <code style="background:var(--c-surface-2);padding:2px 6px;border-radius:4px;font-size:var(--text-xs)">
+          <code style="background:var(--c-surface-2);padding:2px 6px;border-radius:4px;font-size:var(--text-xs);word-break:break-all;display:inline-block">
             UPDATE users SET rolle='admin', is_moderator=1 WHERE email='deine@email.de';
           </code>
         </p>
@@ -559,7 +558,7 @@ window.Page_admin = (() => {
     const diskPct     = s.disk_total_gb > 0 ? Math.round(diskUsedGb / s.disk_total_gb * 100) : 0;
     const uptime      = _formatUptime(s.uptime_seconds);
     el.innerHTML = `
-      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--space-3)">
+      <div class="adm-stats-grid">
         ${_statCard('database',  'Datenbank',      s.db_size_mb.toFixed(1) + ' MB',  'var(--c-primary)')}
         ${_statCard('image',     'Media-Ordner',   s.media_size_mb.toFixed(1) + ' MB','var(--c-text-secondary)')}
         ${_statCard('timer',     'Uptime',          uptime,                            'var(--c-success)')}
diff --git a/backend/static/sw.js b/backend/static/sw.js
index 12cfdad..4373142 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v153';
+const CACHE_VERSION = 'by-v154';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten