Sync docker clone row heights by folder id from main table

Author: alexphillips-dev

archive/folderview.plus-2026.03.08.5.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.4">
-<!ENTITY md5 "5eb168d1dec551f9fa7ccd54276b291c">
+<!ENTITY version "2026.03.08.5">
+<!ENTITY md5 "292969f4dacb98f9268ce80256b6324f">
 ]>
 
 <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.5
+- Rework Docker left-column centering sync to match by folder id content:
+  - derive folder id from row class or hidden `folder-(id)` marker,
+  - map source heights from real `#docker_list` rows,
+  - apply height sync only to non-main clone rows and keep main rows at natural compact height.
+
 ###2026.03.08.4
 - Fix Docker folder left-column centering regression while keeping compact spacing:
   - use absolute vertical centering for folder label block on both row render paths,

folderview.plus.plg

@@ -65,12 +65,21 @@ const escapeClassToken = (value) => {
 };
 
 const getFolderIdFromRow = (row) => {
-    if (!row || !row.classList) {
+    if (!row) {
         return '';
     }
-    for (const cls of row.classList) {
-        if (typeof cls === 'string' && cls.startsWith('folder-id-')) {
-            return cls.substring('folder-id-'.length);
+    if (row.classList) {
+        for (const cls of row.classList) {
+            if (typeof cls === 'string' && cls.startsWith('folder-id-')) {
+                return cls.substring('folder-id-'.length);
+            }
+        }
+    }
+    const label = row.querySelector && row.querySelector('td.ct-name.folder-name span.appname a');
+    if (label && typeof label.textContent === 'string') {
+        const text = label.textContent.trim();
+        if (text.startsWith('folder-') && text.length > 7) {
+            return text.substring(7);
         }
     }
     return '';
@@ -86,48 +95,30 @@ 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 isMainDockerRow = (row) => {
+    return !!(row && row.closest && row.closest('#docker_list'));
 };
 
-const syncFolderRowsHeight = (rows) => {
-    if (!rows || !rows.length) {
-        return 0;
-    }
-    let baseHeight = 0;
-    rows.forEach((row) => {
-        if (rowHasFolderPreview(row)) {
-            baseHeight = Math.max(baseHeight, getRenderedRowHeight(row));
-        }
-    });
-    if (baseHeight <= 0) {
-        rows.forEach((row) => {
-            baseHeight = Math.max(baseHeight, getRenderedRowHeight(row));
-        });
+const applyRowHeight = (row, height = 0) => {
+    if (!row || row.tagName !== 'TR') {
+        return;
     }
-    if (baseHeight <= 0) {
-        return 0;
+    const targetHeight = Number.isFinite(height) && height > 0 ? Math.round(height) : 0;
+    if (targetHeight > 0) {
+        row.style.setProperty('height', `${targetHeight}px`, 'important');
+    } else {
+        row.style.removeProperty('height');
     }
-
-    rows.forEach((row) => {
-        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') {
-                if (shouldSyncHeight) {
-                    td.style.setProperty('height', `${baseHeight}px`, 'important');
-                } else {
-                    td.style.removeProperty('height');
-                }
-                td.style.setProperty('vertical-align', 'middle', 'important');
+    Array.from(row.children || []).forEach((td) => {
+        if (td && td.tagName === 'TD') {
+            if (targetHeight > 0) {
+                td.style.setProperty('height', `${targetHeight}px`, 'important');
+            } else {
+                td.style.removeProperty('height');
             }
-        });
+            td.style.setProperty('vertical-align', 'middle', 'important');
+        }
     });
-    return baseHeight;
 };
 
 const applyFolderCellCentering = (cell, rowHeight = 0) => {
@@ -180,53 +171,40 @@ const applyFolderCellCentering = (cell, rowHeight = 0) => {
 };
 
 const forceAllFolderRowsVerticalCenter = () => {
-    const rowsByFolderId = new Map();
-    const handledRows = new Set();
-
-    document.querySelectorAll('tr[class*="folder-id-"]').forEach((row) => {
+    const mainRowHeightByFolderId = new Map();
+    document.querySelectorAll('#docker_list tr').forEach((row) => {
         const id = getFolderIdFromRow(row);
         if (!id) {
             return;
         }
-        if (!rowsByFolderId.has(id)) {
-            rowsByFolderId.set(id, []);
+        const height = getRenderedRowHeight(row);
+        if (height > 0) {
+            mainRowHeightByFolderId.set(id, height);
         }
-        rowsByFolderId.get(id).push(row);
-    });
-
-    rowsByFolderId.forEach((rows) => {
-        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, rowHeight);
-            });
-        });
     });
 
+    const processedRows = new Set();
     document.querySelectorAll('td.ct-name.folder-name').forEach((cell) => {
         const parentRow = cell.parentElement;
-        if (!handledRows.has(parentRow)) {
-            applyFolderCellCentering(cell, rowHasFolderPreview(parentRow) ? 0 : getRenderedRowHeight(parentRow));
+        if (!parentRow || processedRows.has(parentRow)) {
+            return;
         }
+        processedRows.add(parentRow);
+
+        const folderId = getFolderIdFromRow(parentRow);
+        const mainHeight = folderId ? (mainRowHeightByFolderId.get(folderId) || 0) : 0;
+        const targetHeight = !isMainDockerRow(parentRow) && mainHeight > 0 ? mainHeight : 0;
+        applyRowHeight(parentRow, targetHeight);
+        applyFolderCellCentering(cell, targetHeight);
     });
 };
 
 const forceFolderRowVerticalCenter = (id) => {
-    const escapedId = escapeClassToken(id);
-    const rows = Array.from(document.querySelectorAll(`tr.folder-id-${escapedId}`));
-    if (!rows.length) {
-        forceAllFolderRowsVerticalCenter();
+    const escapedId = escapeClassToken(id); // Keep id-specific call signature for existing call sites.
+    if (!escapedId) {
         return;
     }
-    const syncedHeight = syncFolderRowsHeight(rows);
-    rows.forEach((row) => {
-        const rowHeight = rowHasFolderPreview(row) ? 0 : syncedHeight;
-        row.querySelectorAll('td.ct-name.folder-name').forEach((cell) => {
-            applyFolderCellCentering(cell, rowHeight);
-        });
-    });
+    forceAllFolderRowsVerticalCenter();
 };
 
 let folderRowCenterObserver = null;