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>
web/src/components/ui/card.tsx
+3 -3
View File
@@ -33,7 +33,7 @@ const CardHeader = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
className={cn("flex flex-col space-y-1.5 p-4 sm:p-6", className)}
{...props}
/>
));
@@ -67,7 +67,7 @@ const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
<div ref={ref} className={cn("p-4 pt-0 sm:p-6 sm:pt-0", className)} {...props} />
));
CardContent.displayName = "CardContent";
@@ -77,7 +77,7 @@ const CardFooter = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
className={cn("flex items-center p-4 pt-0 sm:p-6 sm:pt-0", className)}
{...props}
/>
));