fix(#91): add px-4 base padding and fix admin tab overflow at 320px #106

Merged
marcel merged 1 commits from feature/91-fix-horizontal-scroll-320px into main 2026-03-27 15:50:19 +01:00
2 changed files with 7 additions and 7 deletions

View File

@@ -67,7 +67,7 @@ $effect(() => {
});
</script>
<main class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
<main class="mx-auto max-w-7xl px-4 py-8 font-sans sm:px-6 lg:px-8">
<SearchFilterBar
bind:q={q}
bind:from={from}

View File

@@ -11,35 +11,35 @@ let { data, form } = $props();
let activeTab = $state('users');
</script>
<div class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
<div class="mb-8 flex items-center justify-between">
<div class="mx-auto max-w-7xl px-4 py-8 font-sans sm:px-6 lg:px-8">
<div class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<h1 class="font-serif text-3xl text-ink">{m.admin_heading()}</h1>
<!-- Tabs -->
<div class="flex rounded-lg border border-line bg-surface p-1 shadow-sm">
<button
class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
'users'
? 'bg-primary text-white'
: 'text-ink-2 hover:text-ink'}"
onclick={() => (activeTab = 'users')}>{m.admin_tab_users()}</button
>
<button
class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
'groups'
? 'bg-primary text-white'
: 'text-ink-2 hover:text-ink'}"
onclick={() => (activeTab = 'groups')}>{m.admin_tab_groups()}</button
>
<button
class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
'tags'
? 'bg-primary text-white'
: 'text-ink-2 hover:text-ink'}"
onclick={() => (activeTab = 'tags')}>{m.admin_tab_tags()}</button
>
<button
class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
'system'
? 'bg-primary text-white'
: 'text-ink-2 hover:text-ink'}"