From 07b075f04aaebf4a9481e86a300ff4feb3a560f9 Mon Sep 17 00:00:00 2001 From: Sulthan Zaki Date: Thu, 30 Jul 2026 19:07:05 +0700 Subject: [PATCH] Make the remove confirm name the stake and take a thumb MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The one irreversible path was defended with 40px buttons 8px apart and a question — "Remove this?" — that never said what was leaving or what it cost. Confirm buttons go to 46px with a 12px gap (all three rows), and the remove question names the series and the loss. The row wraps, so a long title takes the width it needs instead of overflowing; verified at 320 and 390 in both themes with a 90-character title. Button order is unchanged: the group is right-aligned with Cancel outermost, so the destructive button already sits further from a right thumb's arc than Cancel does, and all three rows keep the same shape. Co-Authored-By: Claude Opus 5 --- backend/static/style.css | 9 ++++++--- backend/templates/card.html | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/backend/static/style.css b/backend/static/style.css index e9595cc..e9028d9 100644 --- a/backend/static/style.css +++ b/backend/static/style.css @@ -524,14 +524,17 @@ button { cursor: pointer; } display: flex; align-items: center; justify-content: space-between; + flex-wrap: wrap; gap: 12px; padding: 14px; background: var(--danger-wash); } -.confirm-row span { font: 400 17px var(--font-display); color: var(--danger-soft); } -.confirm-row div { display: flex; gap: 8px; } +/* The remove question names the series, so it has to be able to take the row + to itself and push the buttons onto their own line. */ +.confirm-row span { flex: 1 1 16ch; font: 400 17px/1.3 var(--font-display); color: var(--danger-soft); } +.confirm-row div { display: flex; flex: none; gap: 12px; margin-left: auto; } .confirm-row button { - height: 40px; + height: 46px; padding: 0 14px; border: 1px solid var(--field-line); background: transparent; diff --git a/backend/templates/card.html b/backend/templates/card.html index 613ff62..f67434e 100644 --- a/backend/templates/card.html +++ b/backend/templates/card.html @@ -122,7 +122,7 @@ {{end}}