marcel/familienarchiv
1
0
Fork 0
Code Issues 121 Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

fix(#91): add px-4 base padding and fix admin tab overflow at 320px
Some checks failed
CI / Unit & Component Tests (pull_request) Successful in 2m42s
Details
CI / Backend Unit Tests (pull_request) Successful in 2m23s
Details
CI / E2E Tests (pull_request) Failing after 29m0s
Details
CI / Unit & Component Tests (push) Successful in 3m20s
Details
CI / Backend Unit Tests (push) Successful in 2m21s
Details
CI / E2E Tests (push) Failing after 29m37s
Details

Browse Source 
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>
This commit was merged in pull request #106.
This commit is contained in:
Marcel
2026-03-27 15:46:20 +01:00
committed by marcel
parent 1bfe0ab022
commit afebaf4c53
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/routes/+page.svelte
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}

12
frontend/src/routes/admin/+page.svelte
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'}"