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

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
Conversation 0 Commits 1 Files Changed 2 +7 -7
marcel commented 2026-03-27 15:47:22 +01:00
Owner
Copy Link

Closes #91

Summary

  • Home and Admin pages had no horizontal padding below sm (640px) — sm:px-6 lg:px-8 with no mobile base caused content to bleed edge-to-edge
  • Admin's header row (flex justify-between with h1 + 4 tab buttons) overflowed by ~110px at 320px viewport
  • Home +page.svelte: added px-4 base to <main>
  • Admin +page.svelte: added px-4 base to outer container; header row now stacks vertically on mobile (flex-col sm:flex-row); tab button padding reduced to px-2 on mobile (sm:px-4 on desktop)

Test plan

  • At 320px: Home page has no horizontal scrollbar
  • At 320px: Admin page has no horizontal scrollbar
  • At 320px: Admin heading and tab bar stack vertically, both fully visible
  • At 640px+: Admin heading and tab bar are side-by-side as before
  • Tab buttons remain functional on all viewport sizes
  • No visual regression at 768px, 1024px, 1440px
Closes #91 ## Summary - Home and Admin pages had no horizontal padding below `sm` (640px) — `sm:px-6 lg:px-8` with no mobile base caused content to bleed edge-to-edge - Admin's header row (`flex justify-between` with h1 + 4 tab buttons) overflowed by ~110px at 320px viewport - Home `+page.svelte`: added `px-4` base to `<main>` - Admin `+page.svelte`: added `px-4` base to outer container; header row now stacks vertically on mobile (`flex-col sm:flex-row`); tab button padding reduced to `px-2` on mobile (`sm:px-4` on desktop) ## Test plan - [ ] At 320px: Home page has no horizontal scrollbar - [ ] At 320px: Admin page has no horizontal scrollbar - [ ] At 320px: Admin heading and tab bar stack vertically, both fully visible - [ ] At 640px+: Admin heading and tab bar are side-by-side as before - [ ] Tab buttons remain functional on all viewport sizes - [ ] No visual regression at 768px, 1024px, 1440px
marcel added 1 commit 2026-03-27 15:50:05 +01:00
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
afebaf4c53 
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>
marcel force-pushed feature/91-fix-horizontal-scroll-320px from 9bf88b3321 to afebaf4c53 2026-03-27 15:50:05 +01:00 Compare
marcel merged commit afebaf4c53 into main 2026-03-27 15:50:19 +01:00
marcel deleted branch feature/91-fix-horizontal-scroll-320px 2026-03-27 15:50:20 +01:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
P0-critical
Blocks a core user journey, causes data loss, or is a security/accessibility barrier. Work on this before P1+.
 P1-high
Significant friction on a main user journey; workaround exists but is non-obvious. Next up after P0.
 P2-medium
Noticeable improvement; doesn't block anything; schedule opportunistically.
 P3-later
Cosmetic or parking-lot work; fine to stay open indefinitely.
 audit
Read-only audit / assessment work; produces a report rather than changing code
 bug
Something isn't working
 cleanup
Removal of dead code, vague comments, naming violations, and scratch artifacts
 collaboration
We want to extend the family archive to have more collaboration tools
 conversation
descoped
We will do that later
 devops
documentation
README, ARCHITECTURE, GLOSSARY, CONTRIBUTING, per-domain docs
 epic
Marker for epic-level issues that group multiple child issues
 feature
file-upload
legibility
Codebase Legibility Refactor — preparing the codebase for human evaluation and bus-factor reduction
 notification
person
phase-1: security
Security hygiene — must be done first
 phase-2: container-images
Production-ready multi-stage Docker images
 phase-3: prod-compose
Production compose overlay + Caddy reverse proxy
 phase-4: spring-prod-profile
Spring Boot production configuration profile
 phase-5: backups
Database and object storage backup strategy
 phase-6: deployment-docs
.env.example, DEPLOYMENT.md, runbook
 phase-7: monitoring
Prometheus, Loki, Grafana, Alertmanager
 refactor
Code restructuring without behaviour change
 security
test
ui
UI/UX and accessibility issues
 user
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
Jens marcel
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: marcel/familienarchiv#106
Delete Branch "feature/91-fix-horizontal-scroll-320px"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?