sulthan/mangaBookmark
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Make the remove confirm name the stake and take a thumb

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Sulthan Zaki
2026-07-30 19:07:05 +07:00
parent bef1469413
commit 07b075f04a
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/static/style.css
+6 -3
View File
@@ -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;