From 459609a35b1303126e01626e1b8bcfb998a30636 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Sat, 23 May 2026 15:07:19 +0100
Subject: [PATCH] =?UTF-8?q?style(backup):=20polish=20location=20tabs=20?=
 =?UTF-8?q?=E2=80=94=20drop=20stray=20descriptions,=20pad=20panels,=20roun?=
 =?UTF-8?q?d=20corners?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove the per-tab 'How LibrePortal connects…' description lines; the tab
  labels already say what each panel is, and the paragraphs read as misplaced
  titles.
- Give the tab panels even, comfortable padding (tabs-content padding zeroed so
  the panel owns it) instead of the cramped 2px sides.
- Round the tab strip's top corners (.tabs-list) so the strip + content read as
  one card — .tabs-content already rounds the bottom, leaving the top square.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 containers/libreportal/frontend/css/backup.css | 18 +++++++++++-------
 .../js/components/backup/backup-page.js        |  3 ---
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/containers/libreportal/frontend/css/backup.css b/containers/libreportal/frontend/css/backup.css
index bab47c4..4212c5d 100755
--- a/containers/libreportal/frontend/css/backup.css
+++ b/containers/libreportal/frontend/css/backup.css
@@ -724,15 +724,19 @@
 }
 
 /* The location editor reuses the app-detail tab design (.tabs-wrapper /
-   .tab-button / .tab-panel from style.css). Only trim the panel padding so it
-   sits inside the backup row's own padding instead of doubling it. */
-.backup-location-details .tab-panel {
-    padding: 16px 2px 2px;
+   .tab-button / .tab-panel from style.css). Round the strip's top corners so
+   it reads as a card (.tabs-content already rounds the bottom), and let the
+   panel own a comfortable, even padding around the config fields. */
+.backup-location-details .tabs-list {
+    border-radius: 12px 12px 0 0;
 }
 
-.backup-location-details .tab-panel > .category-description {
-    margin-top: 0;
-    margin-bottom: 12px;
+.backup-location-details .tabs-content {
+    padding: 0;
+}
+
+.backup-location-details .tab-panel {
+    padding: 20px 22px;
 }
 
 .backup-form-footer {
diff --git a/containers/libreportal/frontend/js/components/backup/backup-page.js b/containers/libreportal/frontend/js/components/backup/backup-page.js
index d5c0dc8..ec67c31 100644
--- a/containers/libreportal/frontend/js/components/backup/backup-page.js
+++ b/containers/libreportal/frontend/js/components/backup/backup-page.js
@@ -696,19 +696,16 @@ class BackupPage {
                     </div>
                     <div class="tabs-content">
                         <div class="tab-panel active" data-tab-panel="connection" data-loc="${idx}">
-                            <p class="category-description">How LibrePortal connects to this storage location.</p>
                             <div class="backup-location-connection-fields" id="backup-location-${idx}-connection">
                                 ${this.renderLocFields(idx, groups.connection, l)}
                             </div>
                         </div>
                         <div class="tab-panel" data-tab-panel="retention" data-loc="${idx}">
-                            <p class="category-description">When to delete old backups from this location.</p>
                             <div id="backup-location-${idx}-retention">
                                 ${this.formRetention(`CFG_BACKUP_LOC_${idx}_`, retentionValues, true)}
                             </div>
                         </div>
                         <div class="tab-panel" data-tab-panel="advanced" data-loc="${idx}">
-                            <p class="category-description">Overrides most locations don't need.</p>
                             <div id="backup-location-${idx}-advanced">
                                 ${this.renderLocFields(idx, groups.advanced, l)}
                             </div>