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;

backend/templates/card.html

@@ -122,7 +122,7 @@
   </div>
   {{end}}
   <div class="confirm-row" id="confirm-remove-{{.Key}}" role="group" aria-live="polite" hidden>
-    <span>Remove this?</span>
+    <span>Remove “{{.Title}}”? Chapter progress is lost.</span>
     <div>
       <button class="danger-solid"
               hx-delete="/ui/bookmarks/{{.Key}}"