From 4f46be9b16395a01e0070ca812f4c07168cb8237 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 28 May 2026 23:21:36 +0100
Subject: [PATCH] ux(system): stack the storage-breakdown button under the
 range selector

Move the Disk page's "View storage breakdown" button beneath the time-range
picker (actions stack in a column, right-aligned) instead of beside it.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 containers/libreportal/frontend/css/admin.css             | 5 +++--
 .../frontend/js/components/admin/system-metric-page.js    | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/containers/libreportal/frontend/css/admin.css b/containers/libreportal/frontend/css/admin.css
index 5c60964..bc2f70f 100644
--- a/containers/libreportal/frontend/css/admin.css
+++ b/containers/libreportal/frontend/css/admin.css
@@ -415,8 +415,9 @@ table.sys-apps tr:hover td { background: rgba(var(--text-rgb), 0.03); }
 }
 .sys-metric-actions {
     display: flex;
-    align-items: center;
-    gap: 14px;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 10px;
     margin-top: 6px;
 }
 .sys-detail-range { display: inline-flex; gap: 4px; padding: 4px; background: rgba(var(--text-rgb), 0.06); border-radius: 999px; }
diff --git a/containers/libreportal/frontend/js/components/admin/system-metric-page.js b/containers/libreportal/frontend/js/components/admin/system-metric-page.js
index b75ffde..4da23d0 100644
--- a/containers/libreportal/frontend/js/components/admin/system-metric-page.js
+++ b/containers/libreportal/frontend/js/components/admin/system-metric-page.js
@@ -175,14 +175,14 @@ class SystemMetricPage {
                         <p class="sys-metric-sub">${fmt.escape(this._subline())}</p>
                     </div>
                     <div class="sys-metric-actions">
-                        ${this.metricKey === 'disk' ? `<button type="button" class="sys-storage-cta" data-go-storage title="Open the full storage breakdown">
-                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
-                            View storage breakdown
-                        </button>` : ''}
                         <div class="sys-detail-range" role="tablist" aria-label="Time range">
                             ${[[60,'1h'],[360,'6h'],[1440,'24h'],[10080,'7d']]
                                 .map(([m,l]) => `<button type="button" role="tab" class="sys-detail-range-btn ${this.rangeMin===m?'active':''}" data-rng="${m}">${l}</button>`).join('')}
                         </div>
+                        ${this.metricKey === 'disk' ? `<button type="button" class="sys-storage-cta" data-go-storage title="Open the full storage breakdown">
+                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
+                            View storage breakdown
+                        </button>` : ''}
                     </div>
                 </div>
                 <section class="sys-detail-stats">