From afebaf4c534b69fe1f321e53507f53d56a969d10 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 27 Mar 2026 15:46:20 +0100
Subject: [PATCH] fix(#91): add px-4 base padding and fix admin tab overflow at
 320px

Home and Admin had no horizontal padding below the sm breakpoint (640px),
causing content to bleed to viewport edges. Admin's flex justify-between
row with h1 + 4 tab buttons overflowed by ~110px at 320px.

- +page.svelte: add px-4 to <main> (sm:px-6 lg:px-8 unchanged)
- admin/+page.svelte: add px-4 to outer container; stack header row
  vertically on mobile (flex-col sm:flex-row); reduce tab button padding
  to px-2 on mobile (sm:px-4 on desktop)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/+page.svelte       |  2 +-
 frontend/src/routes/admin/+page.svelte | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 7fff1e51..51146422 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -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}
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 75d458f2..5ea95469 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -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'}"
-- 
2.49.1