From 79f49bda4544119354bf6991efc3a896989ee1f2 Mon Sep 17 00:00:00 2001
From: root <root@weircon.lan>
Date: Tue, 6 Oct 2026 22:51:09 +0200
Subject: [PATCH] fix(ui): tabeller pakkes i .wt-table-wrap (standardkomponent
 i base.html), portal.css cache-bustes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rettelsen i v1.5.2 nåede ikke telefonen, fordi /static/portal.css ikke sendes
med Cache-Control og Safari cacher heuristisk; nu ?v=<mtime>. Og i stedet for en
media-query på selve tabellen pakker base.html enhver tabel i hovedindholdet
(også injiceret) i et rulleområde, så bredt indhold aldrig skubber siden ud
over kanten, uanset skærmbredde.

Claude-Session: https://claude.ai/code/session_01JmhJG6JnhXfzNiKv8f2vHu
---
 main.py             |  3 +++
 static/portal.css   | 13 ++++++-------
 templates/base.html | 18 +++++++++++++++++-
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/main.py b/main.py
index af83593..81b3230 100644
--- a/main.py
+++ b/main.py
@@ -43,6 +43,9 @@ app.add_middleware(SessionMiddleware, secret_key=config.SECRET_KEY, https_only=T
                    same_site="lax", max_age=60 * 60 * 12)
 app.mount("/static", StaticFiles(directory=config.BASE / "static"), name="static")
 templates = Jinja2Templates(directory=str(config.BASE / "templates"))
+# Cache-busting af portalens eget CSS: uden Cache-Control cacher Safari heuristisk i timevis,
+# så en rettelse i portal.css nåede ikke telefonen. Versionen er filens ændringstid.
+templates.env.globals["static_v"] = str(int((config.BASE / "static" / "portal.css").stat().st_mtime))
 
 oauth = OAuth()
 oauth.register(
diff --git a/static/portal.css b/static/portal.css
index 226e0ae..9f0a542 100644
--- a/static/portal.css
+++ b/static/portal.css
@@ -174,11 +174,10 @@ th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:upperc
 .ucard.hidden { display:none; }
 
 
-/* Tabeller og andet bredt indhold må aldrig give siden vandret scroll på en telefon.
-   Standard for alle sider: på smalle skærme bliver en tabel sit eget rulleområde,
-   og lange ord/nøgler brydes. (Ops-siden har desuden sin egen kort-visning.) */
+/* Tabeller og andet bredt indhold må aldrig give siden vandret scroll.
+   base.html pakker hver tabel i .wt-table-wrap (standardkomponent, også for injiceret indhold):
+   tabellen ruller i sit eget område. Lange ord/nøgler uden for tabeller brydes. */
 .wt-main { overflow-wrap: anywhere; min-width: 0; }
-@media (max-width: 760px) {
-  .wt-main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
-  .wt-main table td, .wt-main table th { overflow-wrap: normal; }
-}
+.wt-table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
+.wt-table-wrap > table { margin-top: 0; }
+.wt-table-wrap table td, .wt-table-wrap table th { overflow-wrap: normal; }
diff --git a/templates/base.html b/templates/base.html
index 8c1b97b..145b4b0 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -11,7 +11,7 @@
 <script>(()=>{try{var t=localStorage.getItem('theme')||(matchMedia('(prefers-color-scheme: light)').matches?'light':'dark');document.documentElement.dataset.theme=t}catch(e){document.documentElement.dataset.theme='dark'}})()</script>
 <!-- shared design system (SSOT: agw/Weircon-wind) hosted on assets.weircon.dk -->
 <link rel="stylesheet" href="https://assets.weircon.dk/css/weirsoe-theme.css" />
-<link rel="stylesheet" href="/static/portal.css" />
+<link rel="stylesheet" href="/static/portal.css?v={{ static_v }}" />
 <script defer src="https://assets.weircon.dk/js/weirsoe-theme.js"></script>
 {% block head %}{% endblock %}
 </head>
@@ -56,6 +56,22 @@
   </div>
 </div>
 <script>
+// Standardkomponent: enhver tabel i hovedindholdet får et rulleområde om sig (.wt-table-wrap),
+// så en bred tabel ruller i sig selv i stedet for at skubbe siden ud over kanten. Gælder også
+// indhold, der injiceres senere (fx /admin/ops).
+(function () {
+  function pak(rod) {
+    (rod || document).querySelectorAll('main table').forEach(function (t) {
+      if (t.parentElement && t.parentElement.classList.contains('wt-table-wrap')) return;
+      var w = document.createElement('div'); w.className = 'wt-table-wrap';
+      t.parentNode.insertBefore(w, t); w.appendChild(t);
+    });
+  }
+  window.wtPakTabeller = pak;
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', function () { pak(); }); else pak();
+  var main = document.querySelector('main');
+  if (main && window.MutationObserver) new MutationObserver(function () { pak(main); }).observe(main, { childList: true, subtree: true });
+})();
 (function () {
   if (window.__palette) return; window.__palette = true;
   var index = null, items = [], sel = 0;