From d683ac0548ee8476a3071891718727a39fa7602f Mon Sep 17 00:00:00 2001
From: khannurien <yo@vincentlannurien.com>
Date: Thu, 8 Oct 2026 21:23:28 +0000
Subject: [PATCH] =?UTF-8?q?v4:=20the=20dump=20title=20editor's=20Cancel=20?=
 =?UTF-8?q?is=20a=20button,=20beside=20Save=20=E2=80=94=20it=20was=20the?=
 =?UTF-8?q?=20grey=20text=20link=20of=20the=20full=20forms'=20action=20row?=
 =?UTF-8?q?s,=20next=20to=20a=20filled=20Save,=20where=20every=20other=20i?=
 =?UTF-8?q?nline=20editor=20pairs=20Save=20with=20a=20bordered=20Cancel;?=
 =?UTF-8?q?=20it=20now=20takes=20btn-secondary,=20the=20same=20height=20as?=
 =?UTF-8?q?=20btn-primary.=20Save=20and=20Cancel=20sit=20in=20.dump-title-?=
 =?UTF-8?q?actions=20and=20wrap=20together,=20so=20on=20a=20phone=20they?=
 =?UTF-8?q?=20go=20under=20the=20input=20as=20a=20pair=20instead=20of=20Ca?=
 =?UTF-8?q?ncel=20dropping=20to=20a=20line=20of=20its=20own.=2030=20Dump?=
 =?UTF-8?q?=20page=20tests=20pass,=20and=20tsc,=20eslint=20and=20deno=20fm?=
 =?UTF-8?q?t=20are=20clean;=20checked=20in=20screenshots=20in=20Smooth,=20?=
 =?UTF-8?q?Kanagawa,=20Brutalist=20and=20GeoCities=20at=201200=20and=20360?=
 =?UTF-8?q?px.?=
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        | 71 ++++++++++++++++++++--------------------------
 src/pages/Dump.tsx | 38 +++++++++++++------------
 2 files changed, 51 insertions(+), 58 deletions(-)

diff --git a/src/App.css b/src/App.css
index f30fe1ab..ca5a40dc 100644
--- a/src/App.css
+++ b/src/App.css
@@ -314,6 +314,12 @@
   font-weight: 700;
 }
 
+/* Save and Cancel wrap together, under the input on a phone. */
+.dump-title-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
 .dump-title-error {
   width: 100%;
   margin: 0;
@@ -2618,33 +2624,6 @@ body.has-player .chat-fab {
   color: var(--color-success);
 }
 
-/* ── Profile sub-pages (dumps / upvoted / playlists) ── */
-.profile-subpage-back {
-  display: inline-block;
-  font-size: var(--text-sm);
-  color: var(--color-text-muted);
-  text-decoration: none;
-  margin-bottom: 0.75rem;
-}
-
-.profile-subpage-back:hover {
-  color: var(--color-text);
-}
-
-.profile-subpage-title-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.profile-subpage-title {
-  margin: 0;
-  font-size: var(--text-2xl);
-  font-weight: 700;
-  flex: 1;
-}
-
 /* ── Profile "View all" link ── */
 .profile-view-all {
   display: inline-block;
@@ -2785,6 +2764,30 @@ body.has-player .chat-fab {
   gap: 2.5rem;
 }
 
+/* ── Page header ──
+   A page that edits nothing (settings, manage, notifications) names itself
+   with a bare h1, a size above its sections' h2, and keeps whatever goes
+   with it (a count) at the row's end. The edit forms cap their panels with
+   .form-page-header instead. */
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+}
+
+.page-title {
+  margin: 0;
+  font-size: var(--text-3xl);
+  font-weight: 700;
+  line-height: 1.15;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  overflow-wrap: anywhere;
+}
+
 .page-content--centered {
   align-items: center;
   padding-top: 2.5rem;
@@ -6579,21 +6582,9 @@ body.has-player .chat-fab {
   margin: 0 auto;
   padding: 1.5rem 1rem 3rem;
 }
-.notifications-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
+.notifications-page > .page-header {
   margin-bottom: 1.75rem;
 }
-.notifications-title {
-  font-size: var(--text-2xl);
-  font-weight: 700;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
 .notifications-title-bell {
   font-size: var(--text-lg);
 }
diff --git a/src/pages/Dump.tsx b/src/pages/Dump.tsx
index a8f03e28..59a4bd6f 100644
--- a/src/pages/Dump.tsx
+++ b/src/pages/Dump.tsx
@@ -425,24 +425,26 @@ export function Dump(): React.JSX.Element {
                       disabled={titleSaving}
                       autoFocus
                     />
-                    <button
-                      type="button"
-                      className="btn-primary"
-                      onClick={handleTitleSave}
-                      disabled={titleSaving || !titleDraft.trim()}
-                    >
-                      {titleSaving
-                        ? <Trans>Saving…</Trans>
-                        : <Trans>Save</Trans>}
-                    </button>
-                    <button
-                      type="button"
-                      className="form-cancel"
-                      onClick={() => setTitleEditing(false)}
-                      disabled={titleSaving}
-                    >
-                      <Trans>Cancel</Trans>
-                    </button>
+                    <div className="dump-title-actions">
+                      <button
+                        type="button"
+                        className="btn-primary"
+                        onClick={handleTitleSave}
+                        disabled={titleSaving || !titleDraft.trim()}
+                      >
+                        {titleSaving
+                          ? <Trans>Saving…</Trans>
+                          : <Trans>Save</Trans>}
+                      </button>
+                      <button
+                        type="button"
+                        className="btn-secondary"
+                        onClick={() => setTitleEditing(false)}
+                        disabled={titleSaving}
+                      >
+                        <Trans>Cancel</Trans>
+                      </button>
+                    </div>
                     {titleError && (
                       <p className="dump-title-error">{titleError}</p>
                     )}