feat: mobile-optimize admin section

- Layout: sidebar hidden on mobile, replaced with horizontal top nav strip
- Tables: overflow-x-auto + hide secondary columns (email/category/dates/
  plays/likes) on small screens; show email inline under name on mobile
- Forms: grid-cols-2 → grid-cols-1 sm:grid-cols-2 on all admin forms
- Markdown editor: Write/Preview tab toggle on mobile, side-by-side on sm+
- Padding: p-3 sm:p-6 on all admin pages for tighter mobile layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-06 14:36:52 +01:00
parent a7fafaf7c5
commit 648123fab5
9 changed files with 105 additions and 46 deletions

View File

@@ -35,7 +35,7 @@
}
</script>
<div class="p-6">
<div class="p-3 sm:p-6">
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold">Videos</h1>
<Button href="/admin/videos/new">
@@ -43,14 +43,14 @@
</Button>
</div>
<div class="rounded-lg border border-border/40 overflow-hidden">
<div class="rounded-lg border border-border/40 overflow-x-auto">
<table class="w-full text-sm">
<thead class="bg-muted/30">
<tr>
<th class="px-4 py-3 text-left font-medium text-muted-foreground">Video</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground">Badges</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground">Plays</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground">Likes</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">Badges</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">Plays</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">Likes</th>
<th class="px-4 py-3 text-right font-medium text-muted-foreground">Actions</th>
</tr>
</thead>
@@ -78,7 +78,7 @@
</div>
</div>
</td>
<td class="px-4 py-3">
<td class="px-4 py-3 hidden sm:table-cell">
<div class="flex gap-1">
{#if video.premium}
<span
@@ -93,8 +93,8 @@
{/if}
</div>
</td>
<td class="px-4 py-3 text-muted-foreground">{video.plays_count ?? 0}</td>
<td class="px-4 py-3 text-muted-foreground">{video.likes_count ?? 0}</td>
<td class="px-4 py-3 text-muted-foreground hidden md:table-cell">{video.plays_count ?? 0}</td>
<td class="px-4 py-3 text-muted-foreground hidden md:table-cell">{video.likes_count ?? 0}</td>
<td class="px-4 py-3 text-right">
<div class="flex items-center justify-end gap-1">
<Button size="sm" variant="ghost" href="/admin/videos/{video.id}">