bug(mobile): Person directory content has no horizontal padding at 320px #97

New Issue

marcel · 2026-03-27T12:20:45+01:00

marcel commented

2026-03-27 12:20:45 +01:00

Severity: Medium — content bleeds to screen edge

On the Person directory page at 320px, the "Person directory" heading and the "Browse the index…" subtitle render flush against the left edge of the screen with zero visible margin. The page container padding is not being applied at this breakpoint.

Fix

Ensure the page content wrapper applies at minimum px-4 (16px) padding at all breakpoints, starting from 0px:

/* In Tailwind — make sure the container class includes px-4 without a breakpoint prefix */
<div class="px-4 sm:px-6 lg:px-8">

If the container already has sm:px-6 but no base px-4, adding the base value will fix it. Check both +page.svelte for the Persons route and the global layout wrapper.

## Severity: Medium — content bleeds to screen edge On the Person directory page at 320px, the "Person directory" heading and the "Browse the index…" subtitle render flush against the left edge of the screen with zero visible margin. The page container padding is not being applied at this breakpoint. --- ## Fix Ensure the page content wrapper applies at minimum `px-4` (16px) padding at all breakpoints, starting from 0px: ```css /* In Tailwind — make sure the container class includes px-4 without a breakpoint prefix */ <div class="px-4 sm:px-6 lg:px-8"> ``` If the container already has `sm:px-6` but no base `px-4`, adding the base value will fix it. Check both `+page.svelte` for the Persons route and the global layout wrapper.

marcel added the ui label 2026-03-27 12:28:18 +01:00

marcel referenced this issue from a commit

2026-03-27 16:42:22 +01:00

fix(#97): add px-4 base padding to person directory on mobile

marcel closed this issue

2026-03-27 16:43:38 +01:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: marcel/familienarchiv#97