design page: AI card Duplicate/Edit buttons always visible (was hidden until hover — broken UX on touch + low discoverability). Edit gets gold pill, Duplicate gets black pill, both at top-right with z-index:3 and icon prefix
Files touched
M server.js
Diff
commit ab7d5d584435be7caf7520370190cf8c475265de
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date: Wed May 13 13:52:56 2026 -0700
design page: AI card Duplicate/Edit buttons always visible (was hidden until hover — broken UX on touch + low discoverability). Edit gets gold pill, Duplicate gets black pill, both at top-right with z-index:3 and icon prefix
---
server.js | 26 +++++++++++++-------------
1 file changed, 13 insertions(+), 13 deletions(-)
diff --git a/server.js b/server.js
index 2902b06..4cc8ddc 100644
--- a/server.js
+++ b/server.js
@@ -7903,23 +7903,23 @@ ${htmlHeader('/designs')}
.pw-ctrl-val { font-variant-numeric: tabular-nums; color: #1a1a1a;
font-size: 12px; font-weight: 600; min-width: 64px; text-align: right; }
- /* ── AI card actions (Duplicate / Edit) ──────────────────────────────── */
+ /* ── AI card actions (Duplicate / Edit) — always visible, touch-friendly ─ */
.pairs-well__card { position: relative; }
.pw-card-actions {
- position: absolute; top: 6px; right: 6px;
- display: flex; gap: 4px; opacity: 0; transition: opacity .15s;
- pointer-events: none;
+ position: absolute; top: 6px; right: 6px; z-index: 3;
+ display: flex; gap: 4px;
}
- .pairs-well__card:hover .pw-card-actions,
- .pairs-well__card:focus-within .pw-card-actions { opacity: 1; pointer-events: auto; }
.pw-card-actions button {
- background: rgba(20,20,20,0.85); color: #fff; border: 0;
- font: 600 10px/1 ui-sans-serif, system-ui, sans-serif;
+ background: rgba(20,20,20,0.92); color: #fff; border: 0;
+ font: 700 10px/1 ui-sans-serif, system-ui, sans-serif;
letter-spacing:.08em; text-transform: uppercase;
- padding: 5px 8px; border-radius: 999px; cursor: pointer;
- backdrop-filter: blur(2px);
+ padding: 6px 9px; border-radius: 999px; cursor: pointer;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+ transition: background .12s ease, transform .12s ease;
}
- .pw-card-actions button:hover { background: #000; }
+ .pw-card-actions button:hover { background: #000; transform: translateY(-1px); }
+ .pw-card-actions button.pw-edit { background: rgba(176,138,58,0.95); }
+ .pw-card-actions button.pw-edit:hover { background: #8a6a2a; }
.pw-pitch-chip {
display: inline-block; padding: 1px 6px; margin-left: 4px;
background: #eef0ee; color: #2a4a2a; border-radius: 999px;
@@ -8072,8 +8072,8 @@ ${htmlHeader('/designs')}
var href = p.url ? esc(p.url) : (p.handle ? 'https://www.designerwallcoverings.com/products/'+esc(p.handle) : '#');
var aiOnly = isAi
? '<div class="pw-card-actions">'
- + (IS_ADMIN ? '<button type="button" data-card-action="edit" data-idx="'+idx+'">Edit</button>' : '')
- + '<button type="button" data-card-action="duplicate" data-idx="'+idx+'">Duplicate</button>'
+ + (IS_ADMIN ? '<button type="button" class="pw-edit" data-card-action="edit" data-idx="'+idx+'">✎ Edit</button>' : '')
+ + '<button type="button" class="pw-dup" data-card-action="duplicate" data-idx="'+idx+'">⎘ Duplicate</button>'
+ '</div>'
: '';
// For AI cards the href doesn't lead anywhere (placeholder) — use a div instead of an <a>