From fee5f8b9a3ec8b3cfcebef423ce4aa5f36ea0b81 Mon Sep 17 00:00:00 2001
From: Flo Hartmann <B0rbor4d@gmail.com>
Date: Wed, 26 Aug 2026 09:03:21 +0000
Subject: [PATCH] =?UTF-8?q?P1:=20Tabellen=20=E2=80=94=20Sticky-Header,=20g?=
 =?UTF-8?q?r=C3=B6=C3=9Fere=20mobile=20Cover,=20einklappbare=20Audit-Detai?=
 =?UTF-8?q?ls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Desktop-Tabellen (Neuheiten, Planung, Archiv, Audit-Log): Scrollbox
  max-h-70vh mit sticky thead
- Mobile Cover jetzt min. 48x68 px (bereits im Icon-Commit umgesetzt)
- Audit-Log: Alt/Neu/Details-JSON per nativem <details> einklappbar,
  monospace 11px
---
 plugins/archiv/templates/archiv/index.html    |  4 ++--
 .../audit-log/templates/audit-log/index.html  | 20 ++++++++++++-------
 .../neuheiten/templates/neuheiten/_liste.html |  4 ++--
 plugins/planung/templates/planung/index.html  |  4 ++--
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/plugins/archiv/templates/archiv/index.html b/plugins/archiv/templates/archiv/index.html
index 1a283bd..2165c0e 100644
--- a/plugins/archiv/templates/archiv/index.html
+++ b/plugins/archiv/templates/archiv/index.html
@@ -108,9 +108,9 @@
   {% endfor %}
 </ul>
 
-<div class="hidden md:block overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm">
+<div class="hidden md:block overflow-auto max-h-[70vh] bg-white rounded-xl border border-slate-200 shadow-sm">
   <table class="w-full text-sm">
-    <thead class="bg-slate-50 text-left text-slate-500">
+    <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
       <tr>
         <th class="px-4 py-3 font-medium">Cover</th>
         <th class="px-4 py-3 font-medium">Spieltitel</th>
diff --git a/plugins/audit-log/templates/audit-log/index.html b/plugins/audit-log/templates/audit-log/index.html
index 6256029..e44e8b1 100644
--- a/plugins/audit-log/templates/audit-log/index.html
+++ b/plugins/audit-log/templates/audit-log/index.html
@@ -61,9 +61,9 @@
   </div>
 </form>
 
-<div class="bg-white rounded-xl border border-slate-200 overflow-x-auto">
+<div class="bg-white rounded-xl border border-slate-200 overflow-auto max-h-[70vh]">
   <table class="w-full text-sm">
-    <thead class="bg-slate-50 text-left text-slate-500">
+    <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
       <tr>
         <th class="px-4 py-2 font-medium whitespace-nowrap">Zeitpunkt</th>
         <th class="px-4 py-2 font-medium">Benutzer</th>
@@ -86,12 +86,18 @@
         </td>
         <td class="px-4 py-2 max-w-md">
           {% if e.alt or e.neu %}
-            {% if e.alt %}<div class="mb-1"><span class="text-slate-400 text-xs">Alt:</span>
-              <pre class="text-xs bg-slate-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.alt | json_schoen }}</pre></div>{% endif %}
-            {% if e.neu %}<div><span class="text-slate-400 text-xs">Neu:</span>
-              <pre class="text-xs bg-emerald-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.neu | json_schoen }}</pre></div>{% endif %}
+          <details>
+            <summary class="cursor-pointer text-xs text-emerald-700 hover:text-emerald-900 select-none">Änderungen anzeigen</summary>
+            {% if e.alt %}<div class="mt-1 mb-1"><span class="text-slate-400 text-xs">Alt:</span>
+              <pre class="font-mono text-[11px] bg-slate-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.alt | json_schoen }}</pre></div>{% endif %}
+            {% if e.neu %}<div class="mt-1"><span class="text-slate-400 text-xs">Neu:</span>
+              <pre class="font-mono text-[11px] bg-emerald-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.neu | json_schoen }}</pre></div>{% endif %}
+          </details>
           {% elif e.details %}
-            <pre class="text-xs bg-slate-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.details | json_schoen }}</pre>
+          <details>
+            <summary class="cursor-pointer text-xs text-emerald-700 hover:text-emerald-900 select-none">Details anzeigen</summary>
+            <pre class="mt-1 font-mono text-[11px] bg-slate-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.details | json_schoen }}</pre>
+          </details>
           {% else %}
             <span class="text-slate-400">&ndash;</span>
           {% endif %}
diff --git a/plugins/neuheiten/templates/neuheiten/_liste.html b/plugins/neuheiten/templates/neuheiten/_liste.html
index 69b7926..d4e3e2e 100644
--- a/plugins/neuheiten/templates/neuheiten/_liste.html
+++ b/plugins/neuheiten/templates/neuheiten/_liste.html
@@ -51,9 +51,9 @@
 </ul>
 
 <!-- Desktop/Tablet (&ge;768px): Tabellenform -->
-<div class="hidden md:block overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm">
+<div class="hidden md:block overflow-auto max-h-[70vh] bg-white rounded-xl border border-slate-200 shadow-sm">
   <table class="w-full text-sm">
-    <thead class="bg-slate-50 text-left text-slate-500">
+    <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
       <tr>
         <th class="px-4 py-3 font-medium">Cover</th>
         {% set basis = '/neuheiten?q=' ~ (q | urlencode) ~ '&status=' ~ (status_filter | urlencode) %}
diff --git a/plugins/planung/templates/planung/index.html b/plugins/planung/templates/planung/index.html
index b665cd7..a793f82 100644
--- a/plugins/planung/templates/planung/index.html
+++ b/plugins/planung/templates/planung/index.html
@@ -133,9 +133,9 @@
 </ul>
 
 <!-- Desktop/Tablet (&ge;768px): Tabellenform -->
-<div class="hidden md:block overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm">
+<div class="hidden md:block overflow-auto max-h-[70vh] bg-white rounded-xl border border-slate-200 shadow-sm">
   <table class="w-full text-sm">
-    <thead class="bg-slate-50 text-left text-slate-500">
+    <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
       <tr>
         <th class="px-4 py-3 font-medium">Cover</th>
         <th class="px-4 py-3 font-medium">Spieltitel</th>