fix(web): flush card content, so a full-bleed table stops doubling its inset

`<CardContent className="p-0">` never removed the padding it looked like it
removed: tailwind-merge resolves conflicts within a variant, so `p-0` cancels
`p-4` but leaves `sm:p-6` standing. Every call site that used it nests a
CardHeader inside, which brings its own `sm:p-6` — so at >=640px the title sat
24px further in than its neighbours'. Visible on the Plugins page as 'Installed
plugins' not lining up with 'Plugin runner'.

Give CardContent a `flush` prop that omits the padding outright, and use it at
the three call sites (Store, Pairing, Stats) rather than fixing the symptom
three times and leaving the footgun in place.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

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>
+	React.HTMLAttributes<HTMLDivElement> & { flush?: boolean }
->(({ className, ...props }, ref) => (
+>(({ className, flush = false, ...props }, ref) => (
-	<div ref={ref} className={cn("p-4 pt-0 sm:p-6 sm:pt-0", className)} {...props} />
+	<div
+		ref={ref}
+		className={cn(!flush && "p-4 pt-0 sm:p-6 sm:pt-0", className)}
+		{...props}
+	/>
 ));
 CardContent.displayName = "CardContent";
 

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">

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>

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>