From dbe3153af91f0edd0c912d79a0658cc543448155 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 20 Aug 2026 22:56:39 +0100
Subject: [PATCH] fix(webui): centre the per-tile Back up button on the tile's
 right edge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It was pinned to the tile's top-right corner, level with the app name, leaving
the status line beneath it visually unbalanced. The tile is two lines, so the
right edge's midpoint is the natural anchor.

The centring has to share `transform` with the existing reveal — the button is
opacity:0 until the tile is hovered and slides in 2px — so the hidden state is
translateY(calc(-50% - 2px)) and the revealed one translateY(-50%), rather than
the previous -2px/0 pair.

Verified under a real pointer, since the button does not exist visually without
one: hovering a tile gives opacity 1 with the tile's and the button's vertical
centres both at 571px.
---
 .../frontend/components/backup/core/css/backup.css    | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/containers/libreportal/frontend/components/backup/core/css/backup.css b/containers/libreportal/frontend/components/backup/core/css/backup.css
index 3caf37f..7dffcdb 100755
--- a/containers/libreportal/frontend/components/backup/core/css/backup.css
+++ b/containers/libreportal/frontend/components/backup/core/css/backup.css
@@ -1494,7 +1494,10 @@
 }
 .backup-app-tile-action {
     position: absolute;
-    top: 10px;
+    /* Centred on the tile's right edge rather than pinned to its top corner.
+       The tile is two lines (name over status), so a top-anchored button sat
+       against the name and left the status line visually unbalanced. */
+    top: 50%;
     right: 10px;
     padding: 4px 10px;
     font-size: 0.72rem;
@@ -1505,13 +1508,15 @@
     border-radius: 999px;
     cursor: pointer;
     opacity: 0;
-    transform: translateY(-2px);
+    /* -50% does the centring, the extra -2px is the same slide-in the reveal
+       always had — both live on transform, so they have to travel together. */
+    transform: translateY(calc(-50% - 2px));
     transition: opacity .15s ease, transform .15s ease, background .15s ease;
 }
 .backup-app-tile:hover .backup-app-tile-action,
 .backup-app-tile:focus-within .backup-app-tile-action {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(-50%);
 }
 .backup-app-tile-action:hover {
     background: rgba(var(--accent-rgb), 0.28);