Harden settings CSS for theme engine compatibility

Author: alexphillips-dev

archive/folderview.plus-2026.03.08.06.txz

@@ -0,0 +1 @@
+273d3f7c702197fe62a61e4ca05617e6dcfdf256c5ed7c6e785b9e517cd92d08  folderview.plus-2026.03.08.06.txz

archive/folderview.plus-2026.03.08.06.txz.sha256

@@ -6,13 +6,20 @@
 <!ENTITY launch "Settings/FolderViewPlus">
 <!ENTITY plugdir "/usr/local/emhttp/plugins/&name;">
 <!ENTITY pluginURL "https://raw.githubusercontent.com/&github;/main/folderview.plus.plg">
-<!ENTITY version "2026.03.08.05">
-<!ENTITY md5 "0a80435be4ea2e2e2b4a03c3ebf1d8da">
+<!ENTITY version "2026.03.08.06">
+<!ENTITY md5 "9a7c8551c73f86995494c5a99c64ef72">
 ]>
 
 <PLUGIN name="&name;" author="&author;" version="&version;" launch="&launch;" pluginURL="&pluginURL;" icon="folder-icon.png" support="https://github.com/alexphillips-dev/FolderView-Plus/issues" min="7.0.0">
     <CHANGES>
 
+###2026.03.08.06
+- Theme compatibility hardening: scoped settings-page focus styling to plugin root container only.
+- Theme compatibility hardening: replaced global `body` bottom-padding rule with plugin-root scoped padding.
+- UX safety: wrapped settings content in `#fv-settings-root` to isolate styling from external theme engines.
+- Regression guard: added automated tests for theme-safe CSS selector scoping.
+
+
 ###2026.03.08.05
 - Bug fix: hardened first-install behavior when no prior folder JSON data exists.
 - Reliability: sanitize error-shaped API responses before rendering folder/state tables.

folderview.plus.plg

@@ -19,6 +19,7 @@ emitRequestTokenMetaTag();
 </script>
 <link rel="stylesheet" href="<?=autov('/plugins/folderview.plus/styles/folderviewplus.css')?>">
 
+<div id="fv-settings-root" class="fv-theme-safe">
 <div id="fv-settings-topbar"></div>
 <div id="fv-update-notes-panel" class="fv-update-notes-panel" style="display:none"></div>
 
@@ -702,6 +703,7 @@ emitRequestTokenMetaTag();
 </div>
 
 <div id="fv-settings-action-bar"></div>
+</div>
 
 <script src="<?=autov('/plugins/folderview.plus/scripts/folderviewplus.utils.js')?>"></script>
 <script src="<?=autov('/plugins/folderview.plus/scripts/folderviewplus.request.js')?>"></script>

src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/FolderViewPlus.page

@@ -1594,11 +1594,11 @@ h2[data-fv-advanced="1"] + .template-grid .rules-panel {
     }
 }
 
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-a:focus-visible {
+#fv-settings-root button:focus-visible,
+#fv-settings-root input:focus-visible,
+#fv-settings-root select:focus-visible,
+#fv-settings-root textarea:focus-visible,
+#fv-settings-root a:focus-visible {
     outline: 2px solid #4da3ff;
     outline-offset: 2px;
 }
@@ -2710,7 +2710,7 @@ h2[data-fv-section].fv-search-match {
     font-size: 1.03rem;
 }
 
-body {
+#fv-settings-root {
     padding-bottom: calc(64px + var(--fv-unraid-bottom-bar-offset) + env(safe-area-inset-bottom, 0px));
 }
 

src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/styles/folderviewplus.css

@@ -0,0 +1,34 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const repoRoot = path.resolve(process.cwd());
+const settingsPagePath = path.join(
+    repoRoot,
+    'src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/FolderViewPlus.page'
+);
+const settingsCssPath = path.join(
+    repoRoot,
+    'src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/styles/folderviewplus.css'
+);
+
+const settingsPage = fs.readFileSync(settingsPagePath, 'utf8');
+const settingsCss = fs.readFileSync(settingsCssPath, 'utf8');
+
+test('settings page wraps plugin UI in a theme-safe root container', () => {
+    assert.match(settingsPage, /<div id="fv-settings-root" class="fv-theme-safe">/);
+    assert.match(settingsPage, /<div id="fv-settings-topbar"><\/div>/);
+    assert.match(settingsPage, /<div id="fv-settings-action-bar"><\/div>/);
+});
+
+test('theme compatibility: global focus and body selectors are scoped to plugin root', () => {
+    assert.match(settingsCss, /#fv-settings-root\s*\{\s*[\s\S]*padding-bottom:\s*calc\(64px\s*\+\s*var\(--fv-unraid-bottom-bar-offset\)\s*\+\s*env\(safe-area-inset-bottom,\s*0px\)\)/);
+    assert.match(settingsCss, /#fv-settings-root button:focus-visible/);
+    assert.match(settingsCss, /#fv-settings-root input:focus-visible/);
+    assert.match(settingsCss, /#fv-settings-root select:focus-visible/);
+    assert.match(settingsCss, /#fv-settings-root textarea:focus-visible/);
+    assert.match(settingsCss, /#fv-settings-root a:focus-visible/);
+    assert.doesNotMatch(settingsCss, /\nbody\s*\{/);
+    assert.doesNotMatch(settingsCss, /\nbutton:focus-visible,\s*\ninput:focus-visible,/);
+});