Fix import preview dialog close overlap and merge selection scroll layout

Author: alexphillips-dev

archive/folderview.plus-2026.03.08.8.txz

@@ -6,13 +6,19 @@
 <!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.7">
-<!ENTITY md5 "75eb1e22d1cc01b213b7ce34776088b6">
+<!ENTITY version "2026.03.08.8">
+<!ENTITY md5 "8d2498345e54795abf0112335c888025">
 ]>
 
 <PLUGIN name="&name;" author="&author;" version="&version;" launch="&launch;" pluginURL="&pluginURL;" icon="folder-open-o" support="https://github.com/alexphillips-dev/FolderView-Plus/issues" min="7.0.0">
     <CHANGES>
 
+###2026.03.08.8
+- Fix import preview dialog UI polish:
+  - stabilize import-selection scroll position while toggling items,
+  - improve selection list layout/overflow styling in merge mode,
+  - remove conflicting titlebar close button on this dialog to prevent top-right overlap with action controls.
+
 ###2026.03.08.7
 - Make Docker clone-row matching independent of table IDs/classes:
   - treat rows with `folder-preview` as canonical source rows,

folderview.plus.plg

@@ -462,6 +462,7 @@ const renderOperationSelection = () => {
         container.empty();
         return;
     }
+    const previousScrollTop = Number(container.scrollTop()) || 0;
 
     const sections = [
         { key: 'creates', title: 'Create', items: importSelectionState.creates },
@@ -479,6 +480,10 @@ const renderOperationSelection = () => {
     }).join('');
 
     container.html(html);
+    if (previousScrollTop > 0) {
+        const maxScroll = Math.max(0, container.prop('scrollHeight') - container.innerHeight());
+        container.scrollTop(Math.min(previousScrollTop, maxScroll));
+    }
 
     container.find('input[data-group-toggle]').off('change.fvimport').on('change.fvimport', (event) => {
         const group = String($(event.currentTarget).attr('data-group-toggle') || '');
@@ -546,6 +551,8 @@ const showImportPreviewDialog = (type, parsed) => new Promise((resolve) => {
         resizable: false,
         width: 760,
         modal: true,
+        dialogClass: 'fv-import-preview-modal',
+        closeText: '',
         show: { effect: 'fade', duration: 120 },
         hide: { effect: 'fade', duration: 120 },
         close: () => resolve(dialogResult),

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

@@ -353,25 +353,50 @@
 .import-selection {
     margin-bottom: 0.65rem;
     max-height: 260px;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 5px;
     padding: 0.45rem 0.55rem;
+    box-sizing: border-box;
 }
 
 .import-selection-group {
+    display: block;
+    width: 100%;
+    min-width: 0;
     margin-bottom: 0.5rem;
+    padding: 0.35rem 0.45rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.12);
+    box-sizing: border-box;
+}
+
+.import-selection-group:last-child {
+    margin-bottom: 0;
 }
 
 .import-selection-group h4 {
     margin: 0 0 0.35rem 0;
     font-size: 0.93rem;
 }
 
+.import-selection-group h4 > label {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+}
+
 .import-selection-item {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    width: 100%;
     font-size: 0.9rem;
     margin: 0.2rem 0;
+    box-sizing: border-box;
 }
 
 #import-preview-dialog .preview-meta {
@@ -422,6 +447,14 @@
     font-size: 12px;
 }
 
+.ui-dialog.fv-import-preview-modal .ui-dialog-titlebar {
+    padding-right: 14px;
+}
+
+.ui-dialog.fv-import-preview-modal .ui-dialog-titlebar-close {
+    display: none !important;
+}
+
 @media (max-width: 1080px) {
     .folder-toolbar {
         grid-template-columns: 1fr;