From e37ce272567d961e02e6e09c0ae3786bfb2cb28f Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 20 Mar 2026 16:52:45 -0400
Subject: [PATCH] fix settings tabs by using inline style.display instead of
 CSS class toggling

The class-based is-active/display approach was unreliable due to CSS cascade
issues. Switching to direct style.display manipulation bypasses specificity
entirely. Also added cache-busting ?v=2 to style.css link.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/templates/layout.html   |  2 +-
 app/templates/settings.html | 21 +++++++++++----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/templates/layout.html b/app/templates/layout.html
index 683659b..2ce63cd 100644
--- a/app/templates/layout.html
+++ b/app/templates/layout.html
@@ -7,7 +7,7 @@
   <link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}" type="image/svg+xml">
   <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" sizes="any">
   <link rel="apple-touch-icon" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
-  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=2">
   {% block head %}{% endblock %}
 </head>
 <body{% block body_attrs %}{% endblock %}>
diff --git a/app/templates/settings.html b/app/templates/settings.html
index 2ad19ec..5ccbe9f 100644
--- a/app/templates/settings.html
+++ b/app/templates/settings.html
@@ -1851,23 +1851,24 @@ document.addEventListener('DOMContentLoaded', () => {
 (function() {
   const tabBtns = document.querySelectorAll('.settings-tab-btn');
   const tabPanels = document.querySelectorAll('.settings-tab-panel');
+  const validTabs = ['overview', 'import', 'maintenance'];
 
   function activateTab(tabName) {
-    tabBtns.forEach(btn => btn.classList.toggle('is-active', btn.dataset.tab === tabName));
-    tabPanels.forEach(panel => panel.classList.toggle('is-active', panel.dataset.tab === tabName));
-    history.replaceState({}, '', `#${tabName}`);
+    tabBtns.forEach(function(btn) {
+      btn.classList.toggle('is-active', btn.dataset.tab === tabName);
+    });
+    tabPanels.forEach(function(panel) {
+      panel.style.display = panel.dataset.tab === tabName ? 'block' : 'none';
+    });
+    history.replaceState(null, '', '#' + tabName);
   }
 
-  tabBtns.forEach(btn => {
-    btn.addEventListener('click', () => activateTab(btn.dataset.tab));
+  tabBtns.forEach(function(btn) {
+    btn.addEventListener('click', function() { activateTab(btn.dataset.tab); });
   });
 
-  // Restore from URL hash on load
   const hash = window.location.hash.replace('#', '');
-  const validTabs = ['overview', 'import', 'maintenance'];
-  if (validTabs.includes(hash)) {
-    activateTab(hash);
-  }
+  activateTab(validTabs.includes(hash) ? hash : 'overview');
 })();
 </script>
 {% endblock %}