Refine settings search alignment and preview centering

Author: alexphillips-dev

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

@@ -393,7 +393,7 @@ tr.folder.fv-parent-expanded div.folder-preview {
     flex: 0 0 auto;
     min-width: 0;
     margin-left: 10px;
-    margin-top: 5px;
+    margin-top: 6px;
 }
 
 .folder-preview-wrapper > span.outer {
@@ -403,7 +403,7 @@ tr.folder.fv-parent-expanded div.folder-preview {
 
 .folder-preview.fv-preview-multirow .folder-preview-wrapper {
     min-height: calc(var(--fvplus-preview-row-height) - 0.9em);
-    margin: 0 0 0 10px;
+    margin: 6px 0 0 10px;
     align-items: center;
     flex: 0 0 auto;
     min-width: max-content;

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

@@ -3788,9 +3788,6 @@ body.fv-mobile-compact .fv-setup-field-grid {
     align-items: center;
     gap: 0.22rem;
     min-width: min(360px, 42vw);
-    margin-right: 0.35rem;
-    padding-right: 0.25rem;
-    border-right: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .fv-mode-toggle {
@@ -3842,7 +3839,8 @@ body.fv-mobile-compact .fv-setup-field-grid {
     font-size: 1.03rem;
     opacity: 0.9;
     white-space: nowrap;
-    justify-self: start;
+    justify-self: end;
+    margin-left: auto;
 }
 
 .fv-search-scope input[type="checkbox"] {

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

@@ -85,10 +85,10 @@ test('docker styles support multi-row previews and member action sheet styling',
     assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-row \{[\s\S]*padding:\s*0/);
     assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-wrapper \{/);
     assert.match(dockerCss, /\.folder-preview-wrapper \{[\s\S]*margin-left:\s*10px/);
-    assert.match(dockerCss, /\.folder-preview-wrapper \{[\s\S]*margin-top:\s*5px/);
+    assert.match(dockerCss, /\.folder-preview-wrapper \{[\s\S]*margin-top:\s*6px/);
     assert.match(dockerCss, /\.folder-preview-wrapper \{[\s\S]*flex:\s*0 0 auto/);
     assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-wrapper \{[\s\S]*min-height:\s*calc\(var\(--fvplus-preview-row-height\) - 0\.9em\)/);
-    assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-wrapper \{[\s\S]*margin:\s*0 0 0 10px/);
+    assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-wrapper \{[\s\S]*margin:\s*6px 0 0 10px/);
     assert.doesNotMatch(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-wrapper \{[\s\S]*transform:\s*translateY\(/);
     assert.match(dockerCss, /\.folder-preview-divider \{/);
     assert.match(dockerCss, /\.folder-preview-divider \{[\s\S]*align-self:\s*stretch/);

tests/preview-border-toggle.test.mjs

@@ -150,7 +150,7 @@ test('server normalizes legacy chevron aliases into dropdown_style', () => {
 
 test('single-row Docker and VM previews stay vertically centered', () => {
     assert.match(dockerCss, /\.folder-preview\s*\{[\s\S]*width:\s*100%;[\s\S]*box-sizing:\s*border-box;[\s\S]*align-items:\s*center;/);
-    assert.match(dockerCss, /\.folder-preview-wrapper\s*\{[\s\S]*margin-top:\s*5px;[\s\S]*align-items:\s*center;/);
+    assert.match(dockerCss, /\.folder-preview-wrapper\s*\{[\s\S]*margin-top:\s*6px;[\s\S]*align-items:\s*center;/);
     assert.match(dockerCss, /\.folder-preview-wrapper > span\.outer\s*\{[\s\S]*display:\s*inline-flex;[\s\S]*align-items:\s*center;/);
     assert.match(vmCss, /\.folder-preview-wrapper\s*\{[\s\S]*margin-top:\s*7px;[\s\S]*align-items:\s*center;/);
     assert.match(vmCss, /\.folder-preview-wrapper > span\.outer\s*\{[\s\S]*display:\s*inline-flex;[\s\S]*align-items:\s*center;/);