style: fix admin table padding — edge-to-edge on mobile, no right pad on desktop
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>
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user