From 60d692c08553f0f8b138c4dcad63a0368bd9af9a Mon Sep 17 00:00:00 2001
From: Christian <christian@blaahund.dk>
Date: Wed, 18 Mar 2026 09:46:33 +0100
Subject: [PATCH] Fix SAG tab pane top rendering fallback

---
 RELEASE_NOTES_v2.2.61.md              | 15 ++++++
 app/modules/sag/templates/detail.html | 71 ++++++++++++++++++---------
 2 files changed, 63 insertions(+), 23 deletions(-)
 create mode 100644 RELEASE_NOTES_v2.2.61.md

diff --git a/RELEASE_NOTES_v2.2.61.md b/RELEASE_NOTES_v2.2.61.md
new file mode 100644
index 0000000..465bb24
--- /dev/null
+++ b/RELEASE_NOTES_v2.2.61.md
@@ -0,0 +1,15 @@
+# Release Notes v2.2.61
+
+Dato: 18. marts 2026
+
+## Fixes
+
+- Rettet SAG-fanevisning i sag-detaljesiden, så kun den aktive fane vises i toppen.
+- Tilføjet direkte klik-fallback på faneknapper (`onclick`) for robust aktivering, også hvis Bootstrap tab-events fejler.
+- Sat eksplicit start-visibility på tab-panes for at undgå "lang side"-effekten med indhold langt nede.
+- Fjernet to ødelagte CSS-blokke i toppen af templaten, som kunne skabe ustabil styling/parsing.
+
+## Berørte filer
+
+- `app/modules/sag/templates/detail.html`
+- `RELEASE_NOTES_v2.2.61.md`
diff --git a/app/modules/sag/templates/detail.html b/app/modules/sag/templates/detail.html
index 708e1ee..17de9fd 100644
--- a/app/modules/sag/templates/detail.html
+++ b/app/modules/sag/templates/detail.html
@@ -4,9 +4,6 @@
 
 {% block extra_css %}
 <style>
-        text-decoration: underline;
-    }
-
     .info-row {
         display: flex;
         justify-content: space-between;
@@ -960,14 +957,6 @@
         margin-right: 8px;
         font-weight: 500;
     }
-        border-radius: 999px;
-        background: rgba(15, 76, 117, 0.12);
-        color: var(--accent);
-        font-weight: 600;
-        margin-right: 0.35rem;
-        text-transform: uppercase;
-        letter-spacing: 0.03em;
-    }
 
     .right-modules-grid {
         display: grid;
@@ -1305,12 +1294,12 @@
     <!-- Tabs Navigation -->
     <ul class="nav nav-tabs mb-4" id="caseTabs" role="tablist">
         <li class="nav-item" role="presentation">
-            <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab">
+            <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" onclick="forceCaseTabActivation('details', this)">
                 <i class="bi bi-card-text me-2"></i>Sagsdetaljer
             </button>
         </li>
         <li class="nav-item" role="presentation">
-            <button class="nav-link" id="solution-tab" data-bs-toggle="tab" data-bs-target="#solution" type="button" role="tab" data-module-tab="solution">
+            <button class="nav-link" id="solution-tab" data-bs-toggle="tab" data-bs-target="#solution" type="button" role="tab" data-module-tab="solution" onclick="forceCaseTabActivation('solution', this)">
                 <i class="bi bi-lightbulb me-2"></i>Løsning
                 {% if solution %}
                 <span class="badge bg-success ms-1 rounded-pill"><i class="bi bi-check"></i></span>
@@ -1318,22 +1307,22 @@
             </button>
         </li>
         <li class="nav-item" role="presentation">
-            <button class="nav-link" id="emails-tab" data-bs-toggle="tab" data-bs-target="#emails" type="button" role="tab" data-module-tab="emails">
+            <button class="nav-link" id="emails-tab" data-bs-toggle="tab" data-bs-target="#emails" type="button" role="tab" data-module-tab="emails" onclick="forceCaseTabActivation('emails', this)">
                 <i class="bi bi-envelope me-2"></i>E-mail
             </button>
         </li>
         <li class="nav-item" role="presentation">
-            <button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales" type="button" role="tab" data-module-tab="sales">
+            <button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales" type="button" role="tab" data-module-tab="sales" onclick="forceCaseTabActivation('sales', this)">
                 <i class="bi bi-basket3 me-2"></i>Varekøb & Salg
             </button>
         </li>
         <li class="nav-item" role="presentation">
-            <button class="nav-link" id="subscription-tab" data-bs-toggle="tab" data-bs-target="#subscription" type="button" role="tab" data-module-tab="subscription">
+            <button class="nav-link" id="subscription-tab" data-bs-toggle="tab" data-bs-target="#subscription" type="button" role="tab" data-module-tab="subscription" onclick="forceCaseTabActivation('subscription', this)">
                 <i class="bi bi-repeat me-2"></i>Abonnement
             </button>
         </li>
         <li class="nav-item" role="presentation">
-            <button class="nav-link" id="reminders-tab" data-bs-toggle="tab" data-bs-target="#reminders" type="button" role="tab" data-module-tab="reminders">
+            <button class="nav-link" id="reminders-tab" data-bs-toggle="tab" data-bs-target="#reminders" type="button" role="tab" data-module-tab="reminders" onclick="forceCaseTabActivation('reminders', this)">
                 <i class="bi bi-bell me-2"></i>Påmindelser
             </button>
         </li>
@@ -1341,7 +1330,7 @@
 
     <div class="tab-content" id="caseTabsContent">
         <!-- Tab: Sagsdetaljer (Existing Content) -->
-        <div class="tab-pane fade show active" id="details" role="tabpanel" tabindex="0">
+        <div class="tab-pane fade show active" id="details" role="tabpanel" tabindex="0" style="display:block;">
         <div class="row g-4">
         <div class="col-xl-9 col-lg-8" id="case-left-column">
 <div class="row g-4">
@@ -2217,6 +2206,27 @@
         let selectedRelationCaseId = null;
         const caseTypeKey = "{{ (case.template_key or case.type or 'ticket')|lower }}";
 
+        function forceCaseTabActivation(tabId) {
+            if (!tabId) return;
+
+            const tabContent = document.getElementById('caseTabsContent');
+            const targetPane = document.getElementById(tabId);
+            if (!tabContent || !targetPane) return;
+
+            tabContent.querySelectorAll(':scope > .tab-pane').forEach((pane) => {
+                pane.classList.remove('show', 'active');
+                pane.style.display = 'none';
+            });
+
+            targetPane.classList.add('show', 'active');
+            targetPane.style.display = 'block';
+
+            const tabButtons = document.querySelectorAll('#caseTabs [data-bs-target]');
+            tabButtons.forEach((btn) => {
+                btn.classList.toggle('active', btn.getAttribute('data-bs-target') === `#${tabId}`);
+            });
+        }
+
         window.moduleDisplayNames = {
             'relations': 'Relationer',
             'call-history': 'Opkaldshistorik',
@@ -2302,6 +2312,8 @@
                     const targetSelector = event?.target?.getAttribute('data-bs-target') || '';
                     const tabId = targetSelector.startsWith('#') ? targetSelector.slice(1) : targetSelector;
 
+                    forceCaseTabActivation(tabId);
+
                     try {
                         if (tabId === 'sales' && typeof loadVarekobSalg === 'function') {
                             await loadVarekobSalg();
@@ -2315,8 +2327,20 @@
                         console.error('Tab data reload failed:', tabLoadError);
                     }
                 });
+
+                caseTabs.addEventListener('click', (event) => {
+                    const btn = event.target.closest('[data-bs-target]');
+                    if (!btn) return;
+                    const targetSelector = btn.getAttribute('data-bs-target') || '';
+                    const tabId = targetSelector.startsWith('#') ? targetSelector.slice(1) : targetSelector;
+                    if (tabId) {
+                        setTimeout(() => forceCaseTabActivation(tabId), 0);
+                    }
+                });
             }
 
+            forceCaseTabActivation('details');
+
             // Focus on title when create modal opens
             const createModalEl = document.getElementById('createRelatedCaseModal');
             if (createModalEl) {
@@ -3572,7 +3596,7 @@
     </div> <!-- End Details Tab -->
 
     <!-- E-mail Tab -->
-    <div class="tab-pane fade" id="emails" role="tabpanel" tabindex="0" data-module="emails" data-has-content="unknown">
+    <div class="tab-pane fade" id="emails" role="tabpanel" tabindex="0" data-module="emails" data-has-content="unknown" style="display:none;">
         <div class="card mb-3">
             <div class="card-header d-flex justify-content-between align-items-center">
                 <h6 class="mb-0 text-primary"><i class="bi bi-envelope me-2"></i>E-mail på sagen</h6>
@@ -3675,7 +3699,7 @@
     </div>
 
     <!-- Solution Tab -->
-    <div class="tab-pane fade" id="solution" role="tabpanel" tabindex="0" data-module="solution" data-has-content="{{ 'true' if solution or is_nextcloud else 'false' }}">
+    <div class="tab-pane fade" id="solution" role="tabpanel" tabindex="0" data-module="solution" data-has-content="{{ 'true' if solution or is_nextcloud else 'false' }}" style="display:none;">
             <!-- Nextcloud Integration Box -->
             {% if is_nextcloud %}
             <div class="card mb-3">
@@ -3771,7 +3795,7 @@
     </div>
 
     <!-- Varekøb & Salg Tab -->
-    <div class="tab-pane fade" id="sales" role="tabpanel" tabindex="0" data-module="sales" data-has-content="unknown">
+    <div class="tab-pane fade" id="sales" role="tabpanel" tabindex="0" data-module="sales" data-has-content="unknown" style="display:none;">
         <div class="row g-3 mb-3">
             <div class="col-lg-8">
                 <div class="card mb-3">
@@ -3914,7 +3938,7 @@
     </div>
 
     <!-- Subscription Tab -->
-    <div class="tab-pane fade" id="subscription" role="tabpanel" tabindex="0" data-module="subscription" data-has-content="unknown">
+    <div class="tab-pane fade" id="subscription" role="tabpanel" tabindex="0" data-module="subscription" data-has-content="unknown" style="display:none;">
         <div class="row g-3">
             <div class="col-lg-8">
                 <div class="card mb-3">
@@ -4124,7 +4148,7 @@
     </div>
 
     <!-- Reminders Tab -->
-    <div class="tab-pane fade" id="reminders" role="tabpanel" tabindex="0" data-module="reminders" data-has-content="unknown">
+    <div class="tab-pane fade" id="reminders" role="tabpanel" tabindex="0" data-module="reminders" data-has-content="unknown" style="display:none;">
         <div class="row g-3">
             <div class="col-lg-8">
                 <div class="card mb-3">
@@ -7711,6 +7735,7 @@
                 if (tabBtn) {
                     setTimeout(() => {
                         bootstrap.Tab.getOrCreateInstance(tabBtn).show();
+                        forceCaseTabActivation(tabParam);
                     }, 300);
                 }
             }