From ed9eb6ef22b7d3889da65abc04a7133b8f39ad17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Fri, 6 Mar 2026 17:08:16 +0100
Subject: [PATCH] =?UTF-8?q?style:=20fix=20admin=20table=20padding=20?=
 =?UTF-8?q?=E2=80=94=20edge-to-edge=20on=20mobile,=20no=20right=20pad=20on?=
 =?UTF-8?q?=20desktop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mobile: remove horizontal padding so tables fill full width with top/bottom
borders only. Desktop: keep left padding, table extends to right edge.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../frontend/src/routes/admin/articles/+page.svelte    |  6 +++---
 packages/frontend/src/routes/admin/users/+page.svelte  | 10 +++++-----
 packages/frontend/src/routes/admin/videos/+page.svelte |  6 +++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/routes/admin/articles/+page.svelte b/packages/frontend/src/routes/admin/articles/+page.svelte
index 6dc6a1e..219df70 100644
--- a/packages/frontend/src/routes/admin/articles/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/+page.svelte
@@ -39,15 +39,15 @@
   }
 </script>
 
-<div class="p-3 sm:p-6">
-  <div class="flex items-center justify-between mb-6">
+<div class="py-3 sm:py-6 sm:pl-6">
+  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
     <h1 class="text-2xl font-bold">{$_("admin.articles.title")}</h1>
     <Button href="/admin/articles/new">
       <span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>{$_("admin.articles.new_article")}
     </Button>
   </div>
 
-  <div class="rounded-lg border border-border/40 overflow-x-auto">
+  <div class="sm:rounded-lg border-y sm:border border-border/40 overflow-x-auto">
     <table class="w-full text-sm">
       <thead class="bg-muted/30">
         <tr>
diff --git a/packages/frontend/src/routes/admin/users/+page.svelte b/packages/frontend/src/routes/admin/users/+page.svelte
index e8d6713..6c4c23e 100644
--- a/packages/frontend/src/routes/admin/users/+page.svelte
+++ b/packages/frontend/src/routes/admin/users/+page.svelte
@@ -84,14 +84,14 @@
   }
 </script>
 
-<div class="p-3 sm:p-6">
-  <div class="flex items-center justify-between mb-6">
+<div class="py-3 sm:py-6 sm:pl-6">
+  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
     <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>
   </div>
 
   <!-- Filters -->
-  <div class="flex flex-wrap gap-3 mb-4">
+  <div class="flex flex-wrap gap-3 mb-4 px-3 sm:px-0">
     <Input
       placeholder={$_("admin.users.search_placeholder")}
       class="max-w-xs"
@@ -116,7 +116,7 @@
   </div>
 
   <!-- Table -->
-  <div class="rounded-lg border border-border/40 overflow-x-auto">
+  <div class="sm:rounded-lg border-y sm:border border-border/40 overflow-x-auto">
     <table class="w-full text-sm">
       <thead class="bg-muted/30">
         <tr>
@@ -204,7 +204,7 @@
 
   <!-- Pagination -->
   {#if data.total > data.limit}
-    <div class="flex items-center justify-between mt-4">
+    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
       <span class="text-sm text-muted-foreground">
         {$_("admin.users.showing", { values: { start: data.offset + 1, end: Math.min(data.offset + data.limit, data.total), total: data.total } })}
       </span>
diff --git a/packages/frontend/src/routes/admin/videos/+page.svelte b/packages/frontend/src/routes/admin/videos/+page.svelte
index 151de13..251b0aa 100644
--- a/packages/frontend/src/routes/admin/videos/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/+page.svelte
@@ -37,15 +37,15 @@
   }
 </script>
 
-<div class="p-3 sm:p-6">
-  <div class="flex items-center justify-between mb-6">
+<div class="py-3 sm:py-6 sm:pl-6">
+  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
     <h1 class="text-2xl font-bold">{$_("admin.videos.title")}</h1>
     <Button href="/admin/videos/new">
       <span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>{$_("admin.videos.new_video")}
     </Button>
   </div>
 
-  <div class="rounded-lg border border-border/40 overflow-x-auto">
+  <div class="sm:rounded-lg border-y sm:border border-border/40 overflow-x-auto">
     <table class="w-full text-sm">
       <thead class="bg-muted/30">
         <tr>