From 54887ffa243ce8a1d17c87f5c6be89c80793a0fc Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sat, 4 Apr 2026 22:45:43 -0400
Subject: [PATCH] fix: kanban not loading on refresh + modal horizontal scroll
 + lt-kv-row CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Kanban restore bug:
- set-view-mode click handler called populateKanbanCards() directly but never
  called setViewMode(), so ticketViewMode was never saved to localStorage
- DOMContentLoaded restore checked ticketViewMode (never written) — it should
  check lt_activeTab_<path> which lt.tabs.init() actually saves
- Fix: delegate to setViewMode() from the click handler; DOMContentLoaded
  reads lt_activeTab_<path> and calls populateKanbanCards() when tab-kanban

Settings modal horizontal scroll:
- .lt-modal-body was missing overflow-x: hidden; content wider than the modal
  (e.g. kbd elements with white-space: nowrap) caused horizontal scrollbar
- Added overflow-x: hidden + min-width: 0 to .lt-modal-body

Missing lt-kv-row / lt-kv-label / lt-kv-value CSS:
- These classes were used in TicketView, DashboardView, admin views but had
  no primary CSS rules (only a light-theme color override existed)
- Without rules, lt-kv-row divs were block-level grid children consuming one
  grid cell each, making lt-kv-label/value stack inside wrong columns
- Added display:contents on lt-kv-row so children participate directly in
  the lt-kv-grid 2-column grid; lt-kv-label/value get padding, border, and
  min-width:0 + overflow-wrap:break-word to prevent grid column blowout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/css/base.css    | 25 +++++++++++++++++++++++++
 assets/js/dashboard.js | 17 +++++++++--------
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/assets/css/base.css b/assets/css/base.css
index 11363b2..0d6dd6c 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -1319,7 +1319,9 @@ select option:checked {
 .lt-modal-body {
   padding: var(--space-lg);
   overflow-y: auto;
+  overflow-x: hidden;
   flex: 1;
+  min-width: 0;
 }
 
 .lt-modal-footer {
@@ -3187,6 +3189,29 @@ input[type="range"].lt-range::-moz-range-thumb {
 .lt-kv-val--green  { color: var(--accent-green); }
 .lt-kv-val--red    { color: var(--accent-red); }
 
+/* lt-kv-row / lt-kv-label / lt-kv-value — alternate KV row pattern */
+.lt-kv-row {
+  display: contents; /* children become direct grid items of lt-kv-grid */
+}
+.lt-kv-label {
+  padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
+  color: var(--text-dim);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--border-dim);
+  align-self: center;
+}
+.lt-kv-value {
+  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border-dim);
+  min-width: 0;
+  overflow-wrap: break-word;
+  align-self: center;
+}
+
 
 /* ----------------------------------------------------------------
    43. HERO / BANNER SECTION
diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js
index 465d78d..95f4524 100644
--- a/assets/js/dashboard.js
+++ b/assets/js/dashboard.js
@@ -191,7 +191,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 break;
             // View mode toggle
             case 'set-view-mode':
-                if (target.dataset.mode === 'card') populateKanbanCards();
+                setViewMode(target.dataset.mode);
                 break;
             // Settings
             case 'open-settings':
@@ -1245,14 +1245,15 @@ function populateKanbanCards() {
     }
 }
 
-// Restore view mode on page load — click the kanban tab button to trigger lt.tabs
+// Restore view mode on page load — lt.tabs already restores the active panel visually
+// via lt_activeTab_<path>; we just need to populate kanban cards if that panel is active
 document.addEventListener('DOMContentLoaded', function() {
-    const savedMode = localStorage.getItem('ticketViewMode');
-    if (savedMode === 'card') {
-        const cardBtn = document.getElementById('cardViewBtn');
-        if (cardBtn) cardBtn.click();
-        else populateKanbanCards();
-    }
+    try {
+        const savedTab = localStorage.getItem('lt_activeTab_' + location.pathname);
+        if (savedTab === 'tab-kanban') {
+            populateKanbanCards();
+        }
+    } catch (_) {}
 });
 
 // ========================================