fix: kanban not loading on refresh + modal horizontal scroll + lt-kv-row CSS

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>
This commit is contained in:
2026-04-04 22:45:43 -04:00
parent 613886068d
commit 54887ffa24
2 changed files with 34 additions and 8 deletions
+25
View File
@@ -1319,7 +1319,9 @@ select option:checked {
.lt-modal-body { .lt-modal-body {
padding: var(--space-lg); padding: var(--space-lg);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
flex: 1; flex: 1;
min-width: 0;
} }
.lt-modal-footer { .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--green { color: var(--accent-green); }
.lt-kv-val--red { color: var(--accent-red); } .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 43. HERO / BANNER SECTION
+9 -8
View File
@@ -191,7 +191,7 @@ document.addEventListener('DOMContentLoaded', function() {
break; break;
// View mode toggle // View mode toggle
case 'set-view-mode': case 'set-view-mode':
if (target.dataset.mode === 'card') populateKanbanCards(); setViewMode(target.dataset.mode);
break; break;
// Settings // Settings
case 'open-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() { document.addEventListener('DOMContentLoaded', function() {
const savedMode = localStorage.getItem('ticketViewMode'); try {
if (savedMode === 'card') { const savedTab = localStorage.getItem('lt_activeTab_' + location.pathname);
const cardBtn = document.getElementById('cardViewBtn'); if (savedTab === 'tab-kanban') {
if (cardBtn) cardBtn.click(); populateKanbanCards();
else populateKanbanCards(); }
} } catch (_) {}
}); });
// ======================================== // ========================================