Fix multi-row measurement and settings search layout

Author: alexphillips-dev

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

@@ -517,6 +517,7 @@ const layoutFolderPreviewRows = ($preview, settings = {}) => {
                 maxHeight: 'none',
                 overflow: 'visible',
                 display: 'flex',
+                flexDirection: 'row',
                 flexWrap: 'wrap',
                 alignItems: 'center',
                 alignContent: 'flex-start',

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

@@ -6,20 +6,19 @@
                 <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">
-                        <button type="button" id="fv-settings-clear-search" title="Clear search" aria-label="Clear search"><i class="fa fa-times"></i></button>
                     </div>
                     <label class="fv-search-scope" title="Limit search to currently selected advanced tab">
                         <input type="checkbox" id="fv-search-all-advanced">
                         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,20 +2584,19 @@ 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">
-                            <button type="button" id="fv-settings-clear-search" title="Clear search" aria-label="Clear search"><i class="fa fa-times"></i></button>
                         </div>
                         <label class="fv-search-scope" title="Limit search to currently selected advanced tab">
                             <input type="checkbox" id="fv-search-all-advanced">
                             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>
@@ -2633,10 +2632,6 @@ const initSettingsControls = () => {
     $('#fv-search-all-advanced').off('change.fvui').on('change.fvui', (event) => {
         setSearchAllAdvanced($(event.currentTarget).prop('checked') === true);
     });
-    $('#fv-settings-clear-search').off('click.fvui').on('click.fvui', () => {
-        $('#fv-settings-search').val('');
-        setSettingsSearchQuery('');
-    });
     $('#fv-action-save').off('click.fvui').on('click.fvui', () => {
         void saveActionBarChanges(false);
     });

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

@@ -3788,6 +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);
 }
 
 .fv-mode-toggle {
@@ -3821,9 +3824,9 @@ body.fv-mobile-compact .fv-setup-field-grid {
 
 .fv-settings-search-wrap {
     display: inline-grid;
-    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-columns: minmax(0, 1fr);
     align-items: center;
-    gap: 0.35rem;
+    gap: 0;
     width: 100%;
 }
 
@@ -6067,6 +6070,9 @@ tr.is-long-press-active {
         width: 100%;
         min-width: 0;
         grid-column: 1 / -1;
+        margin-left: 0;
+        padding-left: 0;
+        border-left: 0;
     }
 
     .fv-settings-search-wrap input[type="text"] {

tests/docker-preview-overflow-feature.test.mjs

@@ -44,6 +44,7 @@ test('docker runtime applies preview row layout limits and enhanced member actio
     assert.match(dockerJs, /const \$measurement = availableWidth > 0/);
     assert.match(dockerJs, /fv-preview-multirow fv-preview-row-measure/);
     assert.match(dockerJs, /\.appendTo\(document\.body\)/);
+    assert.match(dockerJs, /flexDirection:\s*'row'/);
     assert.match(dockerJs, /const measurementWrappers = wrappers\.map\(\(wrapper,\s*index\) =>/);
     assert.match(dockerJs, /const wrapperTop = Number\(measurementWrapper\?\.offsetTop \?\? 0\)/);
     assert.match(dockerJs, /const startsNewRow = currentRow\.length > 0/);

tests/ui-smoke-layout.test.mjs

@@ -679,6 +679,10 @@ 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.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/);
     assert.match(settingsCss, /\.module-empty-note\s*\{/);