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 /> - - +
+ + +
{titleError && (

{titleError}

)}