From a0c8b1d509d02d35d5599c71007fe8e71a6ee14b Mon Sep 17 00:00:00 2001
From: khannurien <yo@vincentlannurien.com>
Date: Thu, 8 Oct 2026 21:51:38 +0000
Subject: [PATCH] =?UTF-8?q?v4:=20auto-sized=20text=20editors=20no=20longer?=
 =?UTF-8?q?=20scroll,=20and=20on=20a=20phone=20an=20action=20row=20with=20?=
 =?UTF-8?q?a=20destructive=20button=20stacks=20=E2=80=94=20an=20autoResize?=
 =?UTF-8?q?=20editor=20set=20its=20height=20to=20scrollHeight,=20which=20l?=
 =?UTF-8?q?eaves=20out=20the=20borders=20that=20a=20border-box=20height=20?=
 =?UTF-8?q?counts,=20so=20the=20text=20always=20overflowed=20by=20a=20coup?=
 =?UTF-8?q?le=20of=20pixels:=20a=20playlist's=20description,=20a=20.form?=
 =?UTF-8?q?=20textarea=20since=20cf89c18,=20showed=20a=20scrollbar=20that?=
 =?UTF-8?q?=20ran=20under=20the=20emoji=20button.=20The=20height=20now=20a?=
 =?UTF-8?q?dds=20the=20borders.=20On=20a=20phone,=20Delete,=20Cancel=20and?=
 =?UTF-8?q?=20Save=20didn't=20fit=20one=20line=20in=20French=20or=20in=20a?=
 =?UTF-8?q?=20wide=20face,=20and=20wrapped=20into=20a=20staircase:=20Delet?=
 =?UTF-8?q?e=20alone=20on=20the=20left,=20Cancel=20and=20Save=20under=20it?=
 =?UTF-8?q?=20on=20the=20right.=20A=20.form-actions=20row=20with=20a=20.bt?=
 =?UTF-8?q?n-danger=20now=20stacks=20under=20512px,=20with=20Cancel=20and?=
 =?UTF-8?q?=20Save=20across=20the=20top=20(Save=20taking=20the=20room=20le?=
 =?UTF-8?q?ft)=20and=20the=20destructive=20button=20full=20width=20under?=
 =?UTF-8?q?=20them;=20the=20playlist=20editor=20and=20DumpEdit's=20footer?=
 =?UTF-8?q?=20both=20take=20it.=20669=20frontend=20tests=20pass,=20and=20t?=
 =?UTF-8?q?sc=20and=20deno=20fmt=20are=20clean;=20checked=20in=20screensho?=
 =?UTF-8?q?ts=20in=20Kanagawa=20(French,=20385px,=20with=20a=20long=20desc?=
 =?UTF-8?q?ription)=20and=20DumpEdit's=20footer=20in=20Smooth=20at=20390px?=
 =?UTF-8?q?.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/App.css                          | 21 +++++++++++++++++++--
 src/components/editor/TextEditor.tsx |  6 +++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index d9049f42..155f0e3f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3438,8 +3438,6 @@ body.has-player .chat-fab {
 
 .form-actions {
   display: flex;
-  /* A destructive action, Cancel and Save don't fit a phone side by side in
-     every face; the right group then drops to its own line, still right. */
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
@@ -3456,6 +3454,25 @@ 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 {
diff --git a/src/components/editor/TextEditor.tsx b/src/components/editor/TextEditor.tsx
index 0403f39f..58eb0e83 100644
--- a/src/components/editor/TextEditor.tsx
+++ b/src/components/editor/TextEditor.tsx
@@ -278,7 +278,11 @@ export const TextEditor: React.ForwardRefExoticComponent<
       const el = textareaRef.current;
       if (!el) return;
       el.style.height = "auto";
-      el.style.height = `${el.scrollHeight}px`;
+      // A border-box height counts the borders, which scrollHeight leaves
+      // out; without them the text overflows by a few pixels and scrolls.
+      el.style.height = `${
+        el.scrollHeight + el.offsetHeight - el.clientHeight
+      }px`;
     }, [value, autoResize]);
 
     // The textarea is read-only while images upload, so the spot they go to