From 3a8fa7d8ceb518bacea7253f7ac93f689efe47d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 9 Mar 2026 18:38:38 +0100
Subject: [PATCH] style: refine admin edit forms and fix mobile padding

- Remove back button from admin entity edit pages (sidebar handles navigation)
- Remove cancel button from video/article forms, make submit button full-width
- Show actual entity title + subtitle on video/article edit pages
- Remove asterisks from Title/Slug field labels in i18n
- Remove px-3 sm:px-0 from all admin list page headers/filters (fixes mobile padding)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/frontend/src/lib/i18n/locales/en.ts  |  4 +--
 .../src/routes/admin/articles/+page.svelte    |  6 ++---
 .../routes/admin/articles/[id]/+page.svelte   | 27 +++++++++----------
 .../routes/admin/articles/new/+page.svelte    | 22 ++++++---------
 .../src/routes/admin/comments/+page.svelte    |  6 ++---
 .../src/routes/admin/queues/+page.svelte      |  6 ++---
 .../src/routes/admin/recordings/+page.svelte  |  6 ++---
 .../src/routes/admin/users/+page.svelte       |  6 ++---
 .../src/routes/admin/users/[id]/+page.svelte  |  5 +---
 .../src/routes/admin/videos/+page.svelte      |  6 ++---
 .../src/routes/admin/videos/[id]/+page.svelte | 27 +++++++++----------
 .../src/routes/admin/videos/new/+page.svelte  | 22 ++++++---------
 12 files changed, 61 insertions(+), 82 deletions(-)

diff --git a/packages/frontend/src/lib/i18n/locales/en.ts b/packages/frontend/src/lib/i18n/locales/en.ts
index 5fcf141..5bc2904 100644
--- a/packages/frontend/src/lib/i18n/locales/en.ts
+++ b/packages/frontend/src/lib/i18n/locales/en.ts
@@ -951,8 +951,8 @@ export default {
       cover_image: "Cover image",
       tags: "Tags",
       publish_date: "Publish date",
-      title_field: "Title *",
-      slug_field: "Slug *",
+      title_field: "Title",
+      slug_field: "Slug",
       title_slug_required: "Title and slug are required",
       image_uploaded: "Image uploaded",
       image_upload_failed: "Image upload failed",
diff --git a/packages/frontend/src/routes/admin/articles/+page.svelte b/packages/frontend/src/routes/admin/articles/+page.svelte
index 9e8a7e9..4562293 100644
--- a/packages/frontend/src/routes/admin/articles/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/+page.svelte
@@ -68,7 +68,7 @@
 <Meta title={$_("admin.articles.title")} description={null} />
 
 <div class="py-3 sm:py-6 lg:pl-6">
-  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+  <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.articles.title")}</h1>
     <div class="flex items-center gap-3">
       <span class="text-sm text-muted-foreground"
@@ -84,7 +84,7 @@
   </div>
 
   <!-- Filters -->
-  <div class="flex flex-wrap items-center gap-3 mb-4 px-3 sm:px-0">
+  <div class="flex flex-wrap items-center gap-3 mb-4">
     <Input
       placeholder={$_("admin.articles.search_placeholder")}
       class="max-w-xs"
@@ -204,7 +204,7 @@
 
   <!-- Pagination -->
   {#if data.total > data.limit}
-    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
+    <div class="flex items-center justify-between mt-4">
       <span class="text-sm text-muted-foreground">
         {$_("admin.users.showing", {
           values: {
diff --git a/packages/frontend/src/routes/admin/articles/[id]/+page.svelte b/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
index 7c7df4f..7ab836f 100644
--- a/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
@@ -98,11 +98,11 @@
 <Meta title={$_("admin.article_form.edit_title")} description={null} />
 
 <div class="py-3 sm:py-6 lg:pl-6">
-  <div class="flex items-center gap-4 mb-6">
-    <Button variant="ghost" href="/admin/articles" size="sm" class="shrink-0">
-      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
-    </Button>
-    <h1 class="text-2xl font-bold">{$_("admin.article_form.edit_title")}</h1>
+  <div class="mb-6">
+    <h1 class="text-2xl font-bold">{data.article.title}</h1>
+    <p class="text-xs text-muted-foreground mt-0.5">
+      {data.article.slug}{data.article.category ? " · " + data.article.category : ""}{data.article.author ? " · " + data.article.author.artist_name : ""}
+    </p>
   </div>
 
   <Card class="bg-card/50 border-primary/20 max-w-4xl">
@@ -246,16 +246,13 @@
         <span class="text-sm">{$_("admin.common.featured")}</span>
       </label>
 
-      <div class="flex gap-3 pt-2">
-        <Button
-          onclick={handleSubmit}
-          disabled={saving}
-          class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-        >
-          {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
-        </Button>
-        <Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
-      </div>
+      <Button
+        onclick={handleSubmit}
+        disabled={saving}
+        class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+      >
+        {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
+      </Button>
     </CardContent>
   </Card>
 </div>
diff --git a/packages/frontend/src/routes/admin/articles/new/+page.svelte b/packages/frontend/src/routes/admin/articles/new/+page.svelte
index 28cb63c..a19c956 100644
--- a/packages/frontend/src/routes/admin/articles/new/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/new/+page.svelte
@@ -80,10 +80,7 @@
 <Meta title={$_("admin.article_form.new_title")} description={null} />
 
 <div class="py-3 sm:py-6 lg:pl-6">
-  <div class="flex items-center gap-4 mb-6">
-    <Button variant="ghost" href="/admin/articles" size="sm" class="shrink-0">
-      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
-    </Button>
+  <div class="mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.article_form.new_title")}</h1>
   </div>
 
@@ -198,16 +195,13 @@
         <span class="text-sm">{$_("admin.common.featured")}</span>
       </label>
 
-      <div class="flex gap-3 pt-2">
-        <Button
-          onclick={handleSubmit}
-          disabled={saving}
-          class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-        >
-          {saving ? $_("admin.common.creating") : $_("admin.article_form.create")}
-        </Button>
-        <Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
-      </div>
+      <Button
+        onclick={handleSubmit}
+        disabled={saving}
+        class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+      >
+        {saving ? $_("admin.common.creating") : $_("admin.article_form.create")}
+      </Button>
     </CardContent>
   </Card>
 </div>
diff --git a/packages/frontend/src/routes/admin/comments/+page.svelte b/packages/frontend/src/routes/admin/comments/+page.svelte
index f172445..35e78bd 100644
--- a/packages/frontend/src/routes/admin/comments/+page.svelte
+++ b/packages/frontend/src/routes/admin/comments/+page.svelte
@@ -57,14 +57,14 @@
 <Meta title={$_("admin.comments.title")} description={null} />
 
 <div class="py-3 sm:py-6 lg:pl-6">
-  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+  <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.comments.title")}</h1>
     <span class="text-sm text-muted-foreground"
       >{$_("admin.users.total", { values: { total: data.total } })}</span
     >
   </div>
 
-  <div class="flex flex-wrap gap-3 mb-4 px-3 sm:px-0">
+  <div class="flex flex-wrap gap-3 mb-4">
     <Input
       placeholder={$_("admin.comments.search_placeholder")}
       class="max-w-xs"
@@ -153,7 +153,7 @@
   </div>
 
   {#if data.total > data.limit}
-    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
+    <div class="flex items-center justify-between mt-4">
       <span class="text-sm text-muted-foreground">
         {$_("admin.users.showing", {
           values: {
diff --git a/packages/frontend/src/routes/admin/queues/+page.svelte b/packages/frontend/src/routes/admin/queues/+page.svelte
index 86dbb01..6b408af 100644
--- a/packages/frontend/src/routes/admin/queues/+page.svelte
+++ b/packages/frontend/src/routes/admin/queues/+page.svelte
@@ -128,12 +128,12 @@
 <Meta title={$_("admin.queues.title")} description={null} />
 
 <div class="py-3 sm:py-6 lg:pl-6">
-  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+  <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.queues.title")}</h1>
   </div>
 
   <!-- Queue cards -->
-  <div class="flex flex-wrap gap-3 mb-6 px-3 sm:px-0">
+  <div class="flex flex-wrap gap-3 mb-6">
     {#each queues as queue (queue.name)}
       {@const isSelected = selectedQueue === queue.name}
       <div
@@ -196,7 +196,7 @@
 
   {#if selectedQueue}
     <!-- Status filter tabs -->
-    <div class="flex gap-1 mb-4 px-3 sm:px-0 flex-wrap">
+    <div class="flex gap-1 mb-4 flex-wrap">
       {#each STATUS_FILTERS as f (f.value ?? "all")}
         <Button
           variant={selectedStatus === f.value ? "default" : "outline"}
diff --git a/packages/frontend/src/routes/admin/recordings/+page.svelte b/packages/frontend/src/routes/admin/recordings/+page.svelte
index 0f8ff0b..e6725b1 100644
--- a/packages/frontend/src/routes/admin/recordings/+page.svelte
+++ b/packages/frontend/src/routes/admin/recordings/+page.svelte
@@ -67,14 +67,14 @@
 <Meta title={$_("admin.recordings.title")} description={null} />
 
 <div class="py-3 sm:py-6 lg:pl-6">
-  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+  <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.recordings.title")}</h1>
     <span class="text-sm text-muted-foreground"
       >{$_("admin.users.total", { values: { total: data.total } })}</span
     >
   </div>
 
-  <div class="flex flex-wrap items-center gap-3 mb-4 px-3 sm:px-0">
+  <div class="flex flex-wrap items-center gap-3 mb-4">
     <Input
       placeholder={$_("admin.recordings.search_placeholder")}
       class="max-w-xs"
@@ -177,7 +177,7 @@
   </div>
 
   {#if data.total > data.limit}
-    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
+    <div class="flex items-center justify-between mt-4">
       <span class="text-sm text-muted-foreground">
         {$_("admin.users.showing", {
           values: {
diff --git a/packages/frontend/src/routes/admin/users/+page.svelte b/packages/frontend/src/routes/admin/users/+page.svelte
index bf732d4..d15b1d5 100644
--- a/packages/frontend/src/routes/admin/users/+page.svelte
+++ b/packages/frontend/src/routes/admin/users/+page.svelte
@@ -88,7 +88,7 @@
 <Meta title={$_("admin.users.title")} description={null} />
 
 <div class="py-3 sm:py-6 lg:pl-6">
-  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+  <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.users.title")}</h1>
     <span class="text-sm text-muted-foreground"
       >{$_("admin.users.total", { values: { total: data.total } })}</span
@@ -96,7 +96,7 @@
   </div>
 
   <!-- Filters -->
-  <div class="flex flex-wrap items-center gap-3 mb-4 px-3 sm:px-0">
+  <div class="flex flex-wrap items-center gap-3 mb-4">
     <Input
       placeholder={$_("admin.users.search_placeholder")}
       class="max-w-xs"
@@ -228,7 +228,7 @@
 
   <!-- Pagination -->
   {#if data.total > data.limit}
-    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
+    <div class="flex items-center justify-between mt-4">
       <span class="text-sm text-muted-foreground">
         {$_("admin.users.showing", {
           values: {
diff --git a/packages/frontend/src/routes/admin/users/[id]/+page.svelte b/packages/frontend/src/routes/admin/users/[id]/+page.svelte
index 6b87344..fbb8763 100644
--- a/packages/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -130,10 +130,7 @@
 <Meta title={data.user.artist_name || data.user.email} description={null} />
 
 <div class="py-3 sm:py-6 lg:pl-6">
-  <div class="flex items-center gap-4 mb-6">
-    <Button variant="ghost" href="/admin/users" size="sm" class="shrink-0">
-      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
-    </Button>
+  <div class="mb-6">
     <div>
       <h1 class="text-2xl font-bold">{data.user.artist_name || data.user.email}</h1>
       <p class="text-xs text-muted-foreground">
diff --git a/packages/frontend/src/routes/admin/videos/+page.svelte b/packages/frontend/src/routes/admin/videos/+page.svelte
index dede427..b790134 100644
--- a/packages/frontend/src/routes/admin/videos/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/+page.svelte
@@ -65,7 +65,7 @@
 <Meta title={$_("admin.videos.title")} description={null} />
 
 <div class="py-3 sm:py-6 lg:pl-6">
-  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+  <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.videos.title")}</h1>
     <div class="flex items-center gap-3">
       <span class="text-sm text-muted-foreground"
@@ -81,7 +81,7 @@
   </div>
 
   <!-- Filters -->
-  <div class="flex flex-wrap items-center gap-3 mb-4 px-3 sm:px-0">
+  <div class="flex flex-wrap items-center gap-3 mb-4">
     <Input
       placeholder={$_("admin.videos.search_placeholder")}
       class="max-w-xs"
@@ -209,7 +209,7 @@
 
   <!-- Pagination -->
   {#if data.total > data.limit}
-    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
+    <div class="flex items-center justify-between mt-4">
       <span class="text-sm text-muted-foreground">
         {$_("admin.users.showing", {
           values: {
diff --git a/packages/frontend/src/routes/admin/videos/[id]/+page.svelte b/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
index ed44db6..895f8f6 100644
--- a/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
@@ -107,11 +107,11 @@
 <Meta title={$_("admin.video_form.edit_title")} description={null} />
 
 <div class="py-3 sm:py-6 lg:pl-6">
-  <div class="flex items-center gap-4 mb-6">
-    <Button variant="ghost" href="/admin/videos" size="sm" class="shrink-0">
-      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
-    </Button>
-    <h1 class="text-2xl font-bold">{$_("admin.video_form.edit_title")}</h1>
+  <div class="mb-6">
+    <h1 class="text-2xl font-bold">{data.video.title}</h1>
+    <p class="text-xs text-muted-foreground mt-0.5">
+      {data.video.slug}{data.video.premium ? " · premium" : ""}{data.video.featured ? " · featured" : ""}
+    </p>
   </div>
 
   <Card class="bg-card/50 border-primary/20 max-w-2xl">
@@ -231,16 +231,13 @@
         </div>
       {/if}
 
-      <div class="flex gap-3 pt-2">
-        <Button
-          onclick={handleSubmit}
-          disabled={saving}
-          class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-        >
-          {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
-        </Button>
-        <Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
-      </div>
+      <Button
+        onclick={handleSubmit}
+        disabled={saving}
+        class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+      >
+        {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
+      </Button>
     </CardContent>
   </Card>
 </div>
diff --git a/packages/frontend/src/routes/admin/videos/new/+page.svelte b/packages/frontend/src/routes/admin/videos/new/+page.svelte
index 103dfb7..bda9717 100644
--- a/packages/frontend/src/routes/admin/videos/new/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/new/+page.svelte
@@ -102,10 +102,7 @@
 <Meta title={$_("admin.video_form.new_title")} description={null} />
 
 <div class="py-3 sm:py-6 lg:pl-6">
-  <div class="flex items-center gap-4 mb-6">
-    <Button variant="ghost" href="/admin/videos" size="sm" class="shrink-0">
-      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
-    </Button>
+  <div class="mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.video_form.new_title")}</h1>
   </div>
 
@@ -209,16 +206,13 @@
         </div>
       {/if}
 
-      <div class="flex gap-3 pt-2">
-        <Button
-          onclick={handleSubmit}
-          disabled={saving}
-          class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-        >
-          {saving ? $_("admin.common.creating") : $_("admin.video_form.create")}
-        </Button>
-        <Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
-      </div>
+      <Button
+        onclick={handleSubmit}
+        disabled={saving}
+        class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+      >
+        {saving ? $_("admin.common.creating") : $_("admin.video_form.create")}
+      </Button>
     </CardContent>
   </Card>
 </div>