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);