Restore compact docker folder row spacing while keeping vertical centering

Author: alexphillips-dev

archive/folderview.plus-2026.03.08.2.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.1">
-<!ENTITY md5 "76df551e15cc106d3888dde47b74fdbc">
+<!ENTITY version "2026.03.08.2">
+<!ENTITY md5 "69d5630da626645d1501eb5910717063">
 ]>
 
 <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.2
+- Tighten Docker row-height syncing to restore compact spacing:
+  - keep natural height on main folder rows (with preview content),
+  - only sync explicit height on fixed-column clone rows,
+  - clear prior forced main-row heights and remove extra minimum height on folder label wrapper.
+
 ###2026.03.08.1
 - Replace Docker folder left-column centering strategy with height-sync + flex alignment:
   - remove absolute-position centering for folder name block,

folderview.plus.plg

@@ -86,27 +86,48 @@ const getRenderedRowHeight = (row) => {
     return Math.max(Math.round(rectHeight), Math.round(offsetHeight), 0);
 };
 
+const rowHasFolderPreview = (row) => {
+    return !!(row && row.querySelector && row.querySelector('div.folder-preview'));
+};
+
 const syncFolderRowsHeight = (rows) => {
     if (!rows || !rows.length) {
         return 0;
     }
-    let maxHeight = 0;
+    let baseHeight = 0;
     rows.forEach((row) => {
-        maxHeight = Math.max(maxHeight, getRenderedRowHeight(row));
+        if (rowHasFolderPreview(row)) {
+            baseHeight = Math.max(baseHeight, getRenderedRowHeight(row));
+        }
     });
-    if (maxHeight <= 0) {
+    if (baseHeight <= 0) {
+        rows.forEach((row) => {
+            baseHeight = Math.max(baseHeight, getRenderedRowHeight(row));
+        });
+    }
+    if (baseHeight <= 0) {
         return 0;
     }
+
     rows.forEach((row) => {
-        row.style.setProperty('height', `${maxHeight}px`, 'important');
+        const shouldSyncHeight = !rowHasFolderPreview(row);
+        if (shouldSyncHeight) {
+            row.style.setProperty('height', `${baseHeight}px`, 'important');
+        } else {
+            row.style.removeProperty('height');
+        }
         Array.from(row.children || []).forEach((td) => {
             if (td && td.tagName === 'TD') {
-                td.style.setProperty('height', `${maxHeight}px`, 'important');
+                if (shouldSyncHeight) {
+                    td.style.setProperty('height', `${baseHeight}px`, 'important');
+                } else {
+                    td.style.removeProperty('height');
+                }
                 td.style.setProperty('vertical-align', 'middle', 'important');
             }
         });
     });
-    return maxHeight;
+    return baseHeight;
 };
 
 const applyFolderCellCentering = (cell, rowHeight = 0) => {
@@ -127,14 +148,16 @@ const applyFolderCellCentering = (cell, rowHeight = 0) => {
         return false;
     }
 
-    const height = Number.isFinite(rowHeight) && rowHeight > 0 ? Math.round(rowHeight) : getRenderedRowHeight(cell.parentElement);
+    const height = Number.isFinite(rowHeight) && rowHeight > 0 ? Math.round(rowHeight) : 0;
     cell.style.setProperty('vertical-align', 'middle', 'important');
     cell.style.setProperty('position', 'static', 'important');
     cell.style.setProperty('display', 'table-cell', 'important');
     cell.style.setProperty('padding-top', '0px', 'important');
     cell.style.setProperty('padding-bottom', '0px', 'important');
     if (height > 0) {
         cell.style.setProperty('height', `${height}px`, 'important');
+    } else {
+        cell.style.removeProperty('height');
     }
 
     sub.style.setProperty('position', 'relative', 'important');
@@ -144,10 +167,12 @@ const applyFolderCellCentering = (cell, rowHeight = 0) => {
     sub.style.setProperty('transform', 'none', 'important');
     sub.style.setProperty('display', 'flex', 'important');
     sub.style.setProperty('align-items', 'center', 'important');
-    sub.style.setProperty('min-height', '48px', 'important');
+    sub.style.setProperty('min-height', '0', 'important');
     sub.style.setProperty('width', '100%', 'important');
     if (height > 0) {
         sub.style.setProperty('height', `${Math.max(0, height - 2)}px`, 'important');
+    } else {
+        sub.style.removeProperty('height');
     }
 
     return true;
@@ -172,16 +197,17 @@ const forceAllFolderRowsVerticalCenter = () => {
         const syncedHeight = syncFolderRowsHeight(rows);
         rows.forEach((row) => {
             handledRows.add(row);
+            const rowHeight = rowHasFolderPreview(row) ? 0 : syncedHeight;
             row.querySelectorAll('td.ct-name.folder-name').forEach((cell) => {
-                applyFolderCellCentering(cell, syncedHeight);
+                applyFolderCellCentering(cell, rowHeight);
             });
         });
     });
 
     document.querySelectorAll('td.ct-name.folder-name').forEach((cell) => {
         const parentRow = cell.parentElement;
         if (!handledRows.has(parentRow)) {
-            applyFolderCellCentering(cell, getRenderedRowHeight(parentRow));
+            applyFolderCellCentering(cell, rowHasFolderPreview(parentRow) ? 0 : getRenderedRowHeight(parentRow));
         }
     });
 };
@@ -195,8 +221,9 @@ const forceFolderRowVerticalCenter = (id) => {
     }
     const syncedHeight = syncFolderRowsHeight(rows);
     rows.forEach((row) => {
+        const rowHeight = rowHasFolderPreview(row) ? 0 : syncedHeight;
         row.querySelectorAll('td.ct-name.folder-name').forEach((cell) => {
-            applyFolderCellCentering(cell, syncedHeight);
+            applyFolderCellCentering(cell, rowHeight);
         });
     });
 };

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

@@ -49,7 +49,7 @@ td.ct-name.folder-name > .folder-name-sub {
     left: auto;
     right: auto;
     transform: none;
-    min-height: 48px;
+    min-height: 0;
     width: 100%;
 }