containers/libreportal/frontend/css/backup.css

@@ -724,19 +724,15 @@
 }
 
 /* The location editor reuses the app-detail tab design (.tabs-wrapper /
-   .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 .tabs-content {
-    padding: 0;
-}
-
+   .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: 20px 22px;
+    padding: 16px 2px 2px;
+}
+
+.backup-location-details .tab-panel > .category-description {
+    margin-top: 0;
+    margin-bottom: 12px;
 }
 
 .backup-form-footer {

containers/libreportal/frontend/js/components/backup/backup-page.js

@@ -696,16 +696,19 @@ 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>