sassycrown/punktfunk
1
0
Fork 0
forked from unom/punktfunk
Code Pull Requests Activity

fix(web): tighten mobile padding so content isn't too narrow

Browse Source 
The main content wrapper used p-6 (24px) on mobile while the mobile top bar uses
px-4 (16px) — an inconsistent, oversized side gutter that ate into the usable
width on phones. Drop it to a 16px side gutter (px-4) on mobile, matching the top
bar; sm+ padding is unchanged. Also make the shared Card padding responsive
(p-4 on mobile → p-6 from sm up) so card content isn't double-inset on small
screens. Desktop layout is identical.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
enricobuehler
2026-07-18 13:50:14 +02:00
co-authored by Claude Opus 4.8
parent 3ff1973d7f
commit 770994b7aa
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/app-shell.tsx
+3 -2
View File
@@ -109,8 +109,9 @@ export function AppShell({ children }: { children: ReactNode }) {
</header>
<main className="flex-1">
{/* pb-24 leaves room for the fixed bottom nav on mobile. */}
<div className="mx-auto max-w-[1700px] p-6 pb-24 sm:p-10 sm:pb-10">
{/* Mobile: a 16px side gutter (matching the top bar) so content isn't overly narrow;
pb-24 leaves room for the fixed bottom nav. Roomier padding from sm up. */}
<div className="mx-auto max-w-[1700px] px-4 py-6 pb-24 sm:p-10 sm:pb-10">
{children}
</div>
</main>