diff --git a/app/public/dashboard-ui.css b/app/public/dashboard-ui.css index 915f71f..26dd98c 100644 --- a/app/public/dashboard-ui.css +++ b/app/public/dashboard-ui.css @@ -103,3 +103,8 @@ canvas.sparkline { max-width: 100%; } .section-card { padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 640px) { .header { position: static; } } + +/* Panels are always expanded now */ +.settings-panel.always-open > summary { cursor: default; pointer-events: none; } +.settings-panel.always-open > summary::before { display: none; } +.settings-panel.always-open { margin-top: 1rem !important; } diff --git a/app/public/dashboard-ui.js b/app/public/dashboard-ui.js index 94258f5..4f99fd9 100644 --- a/app/public/dashboard-ui.js +++ b/app/public/dashboard-ui.js @@ -58,6 +58,13 @@ function renderTab(name) { document.querySelectorAll('.tab').forEach((t) => t.addEventListener('click', () => setTab(t.dataset.tab))); window.addEventListener('hashchange', () => setTab(location.hash.slice(1), false)); +// Tabs replace the collapsible panels: keep every panel open (their lazy loaders fire on toggle) +document.querySelectorAll('details.settings-panel').forEach((d) => { + d.classList.add('always-open'); + d.querySelector('summary')?.addEventListener('click', (e) => e.preventDefault()); + d.open = true; +}); + // Keep sticky tab bar flush under the (variable-height) header const headerEl = document.querySelector('.header'); if (headerEl && 'ResizeObserver' in window) {