Keep settings search left of mode toggle

Author: alexphillips-dev

src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/scripts/folderviewplus.chrome.js

@@ -6,10 +6,6 @@
                 <span class="fv-settings-subtitle">Plugin settings</span>
             </div>
             <div class="fv-settings-right">
-                <span class="fv-mode-toggle" title="Settings mode">
-                    <button type="button" class="fv-mode-btn" data-mode="basic" aria-label="Use basic settings mode">Basic</button>
-                    <button type="button" class="fv-mode-btn" data-mode="advanced" aria-label="Use advanced settings mode">Advanced</button>
-                </span>
                 <div class="fv-settings-search-block">
                     <div class="fv-settings-search-wrap">
                         <input type="text" id="fv-settings-search" placeholder="Search settings" aria-label="Search settings">
@@ -19,6 +15,10 @@
                         Search all advanced
                     </label>
                 </div>
+                <span class="fv-mode-toggle" title="Settings mode">
+                    <button type="button" class="fv-mode-btn" data-mode="basic" aria-label="Use basic settings mode">Basic</button>
+                    <button type="button" class="fv-mode-btn" data-mode="advanced" aria-label="Use advanced settings mode">Advanced</button>
+                </span>
                 <button type="button" id="fv-run-wizard" title="Run setup assistant"><i class="fa fa-magic"></i> Wizard</button>
             </div>
         </div>

src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/scripts/folderviewplus.js

@@ -2584,10 +2584,6 @@ const initSettingsControls = () => {
                     <span class="fv-settings-subtitle">Plugin settings</span>
                 </div>
                 <div class="fv-settings-right">
-                    <span class="fv-mode-toggle" title="Settings mode">
-                        <button type="button" class="fv-mode-btn" data-mode="basic" aria-label="Use basic settings mode">Basic</button>
-                        <button type="button" class="fv-mode-btn" data-mode="advanced" aria-label="Use advanced settings mode">Advanced</button>
-                    </span>
                     <div class="fv-settings-search-block">
                         <div class="fv-settings-search-wrap">
                             <input type="text" id="fv-settings-search" placeholder="Search settings" aria-label="Search settings">
@@ -2597,6 +2593,10 @@ const initSettingsControls = () => {
                             Search all advanced
                         </label>
                     </div>
+                    <span class="fv-mode-toggle" title="Settings mode">
+                        <button type="button" class="fv-mode-btn" data-mode="basic" aria-label="Use basic settings mode">Basic</button>
+                        <button type="button" class="fv-mode-btn" data-mode="advanced" aria-label="Use advanced settings mode">Advanced</button>
+                    </span>
                     <button type="button" id="fv-run-wizard" title="Run setup assistant"><i class="fa fa-magic"></i> Wizard</button>
                 </div>
             </div>

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

@@ -3788,9 +3788,9 @@ body.fv-mobile-compact .fv-setup-field-grid {
     align-items: center;
     gap: 0.22rem;
     min-width: min(360px, 42vw);
-    margin-left: 0.35rem;
-    padding-left: 0.25rem;
-    border-left: 1px solid rgba(255, 255, 255, 0.08);
+    margin-right: 0.35rem;
+    padding-right: 0.25rem;
+    border-right: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .fv-mode-toggle {
@@ -3853,12 +3853,6 @@ body.fv-mobile-compact .fv-setup-field-grid {
     opacity: 0.45;
 }
 
-#fv-settings-clear-search {
-    min-width: 32px;
-    width: 32px;
-    padding: 0;
-}
-
 #fv-run-wizard {
     min-height: 32px;
     padding: 0.3rem 0.55rem;
@@ -6071,8 +6065,9 @@ tr.is-long-press-active {
         min-width: 0;
         grid-column: 1 / -1;
         margin-left: 0;
-        padding-left: 0;
-        border-left: 0;
+        margin-right: 0;
+        padding-right: 0;
+        border-right: 0;
     }
 
     .fv-settings-search-wrap input[type="text"] {

tests/ui-smoke-layout.test.mjs

@@ -679,9 +679,9 @@ test('settings runtime uses extracted chrome module and shared request wrapper',
     assert.match(settingsCss, /\.folder-metric-chip\.is-danger\s*\{/);
     assert.match(settingsCss, /\.folder-metric-chip\s*\{/);
     assert.match(settingsCss, /\.folder-pin-state,\s*[\s\S]*\.folder-metric-chip\s*\{/);
-    assert.match(settingsJs, /class="fv-mode-toggle"[\s\S]*class="fv-settings-search-block"/);
-    assert.match(settingsCss, /\.fv-settings-search-block\s*\{[\s\S]*margin-left:\s*0\.35rem/);
-    assert.match(settingsCss, /\.fv-settings-search-block\s*\{[\s\S]*border-left:\s*1px solid rgba\(255,\s*255,\s*255,\s*0\.08\)/);
+    assert.match(settingsJs, /class="fv-settings-search-block"[\s\S]*class="fv-mode-toggle"/);
+    assert.match(settingsCss, /\.fv-settings-search-block\s*\{[\s\S]*margin-right:\s*0\.35rem/);
+    assert.match(settingsCss, /\.fv-settings-search-block\s*\{[\s\S]*border-right:\s*1px solid rgba\(255,\s*255,\s*255,\s*0\.08\)/);
     assert.doesNotMatch(settingsJs, /fv-settings-clear-search/);
     assert.match(settingsCss, /\.backup-compare-row\s*\{/);
     assert.match(settingsCss, /\.ui-dialog\.fv-backup-compare-modal #backup-compare-dialog/);