styles update

app/routes/backups.py

@@ -19,32 +19,33 @@ def backups_page():
     for path in list_backups():
         size_mb = path.stat().st_size / 1024 / 1024
         backup_name = html.escape(path.name)
-        backup_path = html.escape(str(path))
+        backup_path = html.escape(str(path), quote=True)
 
         restore_cmd = html.escape(
-            f"sudo /home/jiri/workspace/appfactory-tools/scripts/restore-appfactory.sh --force {path}"
+            f"sudo /home/jiri/workspace/appfactory-tools/scripts/restore-appfactory.sh --force {path}",
+            quote=True,
         )
 
         rows += f"""
-        <tr>
+        <tr class="backup-row">
             <td>
                 <strong>{backup_name}</strong><br>
                 <span class="muted">{size_mb:.2f} MB</span>
             </td>
             <td>
-                <div class="cmd-row">
-                    <input readonly value="{backup_path}" id="path-{backup_name}">
-                    <button onclick="copyValue('path-{backup_name}')">Copy</button>
+                <div class="copy-row">
+                    <input readonly value="{backup_path}">
+                    <button type="button" class="copy-button" data-copy-value="{backup_path}" onclick="copyText(this)">Copy</button>
                 </div>
             </td>
             <td>
-                <div class="cmd-row">
-                    <input readonly value="{restore_cmd}" id="restore-{backup_name}">
-                    <button onclick="copyValue('restore-{backup_name}')">Copy</button>
+                <div class="copy-row">
+                    <input readonly value="{restore_cmd}">
+                    <button type="button" class="copy-button" data-copy-value="{restore_cmd}" onclick="copyText(this)">Copy</button>
                 </div>
                 <div class="muted">Restore is dangerous and must be run manually over SSH.</div>
             </td>
-            <td>
+            <td class="actions-cell">
                 <form method="post" action="/portal/backups/delete" onsubmit="return confirm('Delete backup {backup_name}?');">
                     <input type="hidden" name="backup_path" value="{backup_path}">
                     <button type="submit" class="danger">Delete</button>

app/static/portal.js

@@ -4,3 +4,14 @@ function copyValue(id) {
     el.setSelectionRange(0, 99999);
     navigator.clipboard.writeText(el.value);
 }
+
+function copyText(button) {
+    const value = button.dataset.copyValue || "";
+    navigator.clipboard.writeText(value);
+
+    const label = button.textContent;
+    button.textContent = "Copied";
+    window.setTimeout(() => {
+        button.textContent = label;
+    }, 1200);
+}

app/static/styles.css

@@ -101,6 +101,7 @@ button,
     border: 0;
     border-radius: 8px;
     padding: 8px 12px;
+    min-height: 34px;
     background: var(--primary);
     color: white;
     font-weight: 700;
@@ -158,6 +159,33 @@ input[readonly] {
     margin: 8px 0 14px;
 }
 
+.copy-row {
+    display: grid;
+    grid-template-columns: minmax(260px, 1fr) 82px;
+    gap: 8px;
+    align-items: start;
+    margin: 0 0 10px;
+}
+
+.copy-row input {
+    min-height: 34px;
+}
+
+.copy-button,
+.actions-cell button {
+    width: 82px;
+    text-align: center;
+}
+
+.actions-cell {
+    width: 110px;
+    white-space: nowrap;
+}
+
+.backup-row td {
+    vertical-align: middle;
+}
+
 details summary {
     cursor: pointer;
     font-weight: 700;