From a7aa0505288a7958042f91eba933a29e19b2688c Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Fri, 22 May 2026 13:46:03 +0100
Subject: [PATCH] fix(backup): one config-fields grid for location fields,
 divider under config-backup banner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Render a backup location's connection fields in a single .config-fields grid like /config's renderer, instead of chunking every 3 fields. The chunking left ragged blocks whose columns stopped lining up once any field was hidden (PATH_MODE/SSH/etc.) — the grid handles row layout and drops hidden fields cleanly. Also add a config-divider below the "Keep your config backed up offline" warning banner.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../frontend/js/components/backup/backup-page.js          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/containers/libreportal/frontend/js/components/backup/backup-page.js b/containers/libreportal/frontend/js/components/backup/backup-page.js
index eb72132..c4cfdb2 100644
--- a/containers/libreportal/frontend/js/components/backup/backup-page.js
+++ b/containers/libreportal/frontend/js/components/backup/backup-page.js
@@ -772,6 +772,7 @@ class BackupPage {
                     Export Repository Passwords
                 </button>
             </div>
+            <div class="config-divider"></div>
             <div id="config-section" class="backup-embedded-config"></div>
         `;
 
@@ -1280,18 +1281,17 @@ class BackupPage {
             KEEP_YEARLY: loc.keep_yearly
         };
 
+        // Single .config-fields grid, exactly like /config's renderer — the grid
+        // (repeat(3, 1fr)) handles the row layout itself, and hidden fields
+        // (PATH_MODE/SSH/etc.) drop out cleanly without leaving column gaps.
         let html = '<div class="config-fields">';
-        let inBlock = 0;
         for (const suffix of suffixes) {
             const def = BACKUP_LOC_FIELD_DEFS[suffix];
             if (!def) continue;
             const key = `CFG_BACKUP_LOC_${idx}_${suffix}`;
             const value = (locValueLookup[suffix] ?? '').toString();
             const fieldId = `config-${key}`;
-            // Three-up grouping mirrors /config's row layout.
-            if (inBlock > 0 && inBlock % 3 === 0) html += '</div><div class="config-fields">';
             html += ConfigShared.generateField(fieldId, key, value, def.title, def.description, {}, {});
-            inBlock++;
         }
         html += '</div>';
         return html;