From 8585690de0833da79c7bc9d957dc3abc1a9e5864 Mon Sep 17 00:00:00 2001
From: JiriUhlir <149317995+JiriUhlir@users.noreply.github.com>
Date: Wed, 27 May 2026 12:49:00 +0200
Subject: [PATCH] styles update

---
 app/routes/backups.py | 21 +++++++++++----------
 app/static/portal.js  | 11 +++++++++++
 app/static/styles.css | 28 ++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/app/routes/backups.py b/app/routes/backups.py
index 1687f2b..b3d5b4f 100644
--- a/app/routes/backups.py
+++ b/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>
diff --git a/app/static/portal.js b/app/static/portal.js
index bbc0671..58fd50e 100644
--- a/app/static/portal.js
+++ b/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);
+}
diff --git a/app/static/styles.css b/app/static/styles.css
index d6c2790..58ec36e 100644
--- a/app/static/styles.css
+++ b/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;