v4: the playlist and dump edit forms end in one bar of actions, a panel of its own — the playlist editor drew rules between its fields and its actions, and on a phone its Delete, Cancel and Save wrapped into a staircase, then stacked (a0c8b1d), neither of which held together. Both forms are now built as DumpEdit was: surface panels 3px apart (.form-panel, from .dump-edit-panel), the last a bar (.form-panel--bar, from .dump-edit-footer) holding Delete on the left and Cancel and Save on the right, compact (btn-sm), on one line. The new DeleteButton says "Delete" and names what goes to assistive tech ("Delete playlist", "Delete dump"); in a bar too narrow for the three labels in every face and language (a container query, under 18rem), it shows 🗑 instead. While edited, the playlist's header drops its own card for the form's panels. The phone stacking rule is gone. An auto-sized editor also re-fits when its width changes with its text unchanged: opening the form makes the page tall enough for a scrollbar, which narrowed the description after it was measured, so it overflowed; and it hides its overflow below its max-height, where a scrollbar could only come of rounding, and drops the resize grip, which the next keystroke would undo. 669 frontend tests pass, and tsc, eslint, deno fmt, doc:lint and i18n:compile --strict are clean; checked in screenshots in Kanagawa dark (French, 385 and 360px), Smooth light at 1000px and DumpEdit in Smooth at 390px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/App.css

@@ -164,8 +164,7 @@
 .dump-post-header,
 .dump-rich-content,
 .form-page-header,
-.dump-edit-panel,
-.dump-edit-footer,
+.form-panel,
 .playlist-detail-header,
 .comment-node-inner {
   box-shadow: var(--panel-ring), var(--card-shadow);
@@ -3374,7 +3373,7 @@ body.has-player .chat-fab {
   }
   .form-page--two-col .form-page-header,
   .dump-edit-form,
-  .dump-edit-footer {
+  .dump-edit-form > .form-panel--bar {
     grid-column: 1 / -1;
   }
   /* "Why?" soaks up whatever height the source column adds, so a tall
@@ -3422,7 +3421,10 @@ body.has-player .chat-fab {
   word-break: break-word;
 }
 
-.dump-edit-panel {
+/* A form split into panels, a few pixels apart (as on the page's grid), in
+   place of rules between its parts: the fields, then a bar of actions, which
+   ends the card. */
+.form-panel {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -3435,18 +3437,35 @@ body.has-player .chat-fab {
   overflow: hidden;
 }
 
-.dump-edit-footer {
+.form-panel--bar {
   padding: 0.875rem 1.25rem;
-  background: var(--color-surface);
   border-radius: 0 0 var(--radius-xl) var(--radius-xl);
+  container: form-bar / inline-size;
 }
 
-.dump-edit-footer .form-actions {
+.form-panel--bar .form-actions {
+  flex-wrap: nowrap;
   padding-top: 0;
   border-top: 0;
   margin-top: 0;
 }
 
+/* Too narrow for Delete, Cancel and Save side by side in every face and
+   language, the bar shows Delete as its icon. */
+.form-delete-icon {
+  display: none;
+}
+
+@container form-bar (max-width: 18rem) {
+  .form-delete-icon {
+    display: inline;
+  }
+
+  .form-delete-label {
+    display: none;
+  }
+}
+
 .dump-edit-refresh {
   margin-top: 0.75rem;
 }
@@ -3481,25 +3500,6 @@ body.has-player .chat-fab {
   margin-left: auto;
 }
 
-/* A destructive action, Cancel and Save don't fit a phone side by side in
-   every face, and wrapped they would make a staircase. On a phone they stack:
-   Cancel and Save across the top, Save taking the room left, the destructive
-   action the full width under them. */
-@media (max-width: 512px) {
-  .form-actions:has(> .btn-danger) {
-    flex-direction: column-reverse;
-    align-items: stretch;
-  }
-
-  .form-actions:has(> .btn-danger) > .form-actions-right {
-    margin-left: 0;
-  }
-
-  .form-actions:has(> .btn-danger) > .form-actions-right > :last-child {
-    flex: 1;
-  }
-}
-
 /* Subtle text action. Resets the global <button> chrome so it looks the same
    whether rendered as a <button> (modal/page forms) or a <Link> (DumpEdit). */
 .form-cancel {
@@ -5327,6 +5327,21 @@ body.has-player .chat-fab {
   padding: 1.25rem;
 }
 
+/* While edited, the header gives way to the form's own panels. */
+.playlist-detail-header--editing {
+  padding: 0;
+  background: none;
+  box-shadow: none;
+}
+
+.playlist-edit-form {
+  gap: 3px;
+}
+
+.playlist-edit-form > .form-panel:first-child {
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+}
+
 .playlist-detail-header-top {
   display: flex;
   align-items: flex-start;