diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
index c47cfa2b..257190a5 100644
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -63,11 +63,25 @@ const CardDescription = React.forwardRef<
 ));
 CardDescription.displayName = "CardDescription";
 
+/**
+ * Card body. Pass `flush` for content that should meet the card's edges — a full-bleed table, most
+ * commonly — instead of trying to cancel the padding from the outside.
+ *
+ * `className="p-0"` does NOT work for that: tailwind-merge only resolves conflicts *within the same
+ * variant*, so `p-0` cancels `p-4` but leaves `sm:p-6` standing, and the padding silently returns at
+ * ≥640px. Every call site that tried it ended up with a doubled inset once a `CardHeader` (which
+ * brings its own `sm:p-6`) was nested inside — visible as one card whose title sits 24px further in
+ * than its neighbours'.
+ */
 const CardContent = React.forwardRef<
 	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn("p-4 pt-0 sm:p-6 sm:pt-0", className)} {...props} />
+	React.HTMLAttributes<HTMLDivElement> & { flush?: boolean }
+>(({ className, flush = false, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn(!flush && "p-4 pt-0 sm:p-6 sm:pt-0", className)}
+		{...props}
+	/>
 ));
 CardContent.displayName = "CardContent";
 
diff --git a/web/src/sections/Pairing/PendingDevices.tsx b/web/src/sections/Pairing/PendingDevices.tsx
index 0ec15637..76dc3aea 100644
--- a/web/src/sections/Pairing/PendingDevices.tsx
+++ b/web/src/sections/Pairing/PendingDevices.tsx
@@ -78,7 +78,7 @@ export const PendingDevices: FC<{
 
 	return (
 		<Card>
-			<CardContent className="p-0">
+			<CardContent flush>
 				<CardHeader>
 					<CardTitle>
 						<h2 className="flex items-center gap-2 text-lg font-medium">
diff --git a/web/src/sections/Stats/Recordings.tsx b/web/src/sections/Stats/Recordings.tsx
index e8741325..d96852b5 100644
--- a/web/src/sections/Stats/Recordings.tsx
+++ b/web/src/sections/Stats/Recordings.tsx
@@ -114,7 +114,7 @@ export const RecordingsCard: FC<{
 						{m.stats_recordings_empty()}
 					</CardContent>
 				) : (
-					<CardContent className="p-0">
+					<CardContent flush>
 						<Table>
 							<TableHeader>
 								<TableRow>
diff --git a/web/src/sections/Store/Installed.tsx b/web/src/sections/Store/Installed.tsx
index a76c8a8b..b03b39bc 100644
--- a/web/src/sections/Store/Installed.tsx
+++ b/web/src/sections/Store/Installed.tsx
@@ -49,7 +49,7 @@ export const InstalledList: FC<{
 	const rows = installed.data ?? [];
 	return (
 		<Card>
-			<CardContent className="p-0">
+			<CardContent flush>
 				<CardHeader>
 					<CardTitle>{m.store_installed_title()}</CardTitle>
 				</CardHeader>