From 770994b7aa771e2c67f910a44ddf643cc3e0d111 Mon Sep 17 00:00:00 2001
From: enricobuehler <buehler@unom.io>
Date: Sat, 18 Jul 2026 13:50:14 +0200
Subject: [PATCH] fix(web): tighten mobile padding so content isn't too narrow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 web/src/components/app-shell.tsx | 5 +++--
 web/src/components/ui/card.tsx   | 6 +++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/src/components/app-shell.tsx b/web/src/components/app-shell.tsx
index c748ba01..5a563b5a 100644
--- a/web/src/components/app-shell.tsx
+++ b/web/src/components/app-shell.tsx
@@ -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>
diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
index 0a8c44e3..c47cfa2b 100644
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -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}
 	/>
 ));