From 40714317a81134462ec9502e67ca72209c03d410 Mon Sep 17 00:00:00 2001
From: enricobuehler <buehler@unom.io>
Date: Mon, 27 Jul 2026 20:48:25 +0200
Subject: [PATCH] fix(web): empty-state cards get their top padding back
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"No games found yet." sat flush against the top edge of its card on any
screen ≥640px. The call sites overrode CardContent's padding with a bare
`p-8`, but tailwind-merge only resolves conflicts within a variant: `p-8`
cancels `p-4` and leaves `sm:p-6 sm:pt-0` standing, so the desktop
breakpoint kept the zero top inset that exists for cards WITH a header.
These three have none.

Uses `flush` — the escape hatch CardContent documents for exactly this —
so the padding is owned outright at every breakpoint instead of fought
from the outside. The library grid is the one that was reported; the
store catalogue and the recordings list are the same idiom with the same
bug. PairedDevices deliberately keeps its `p-6`: it is a table under a
header, where pt-0 is the intended look.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
(cherry picked from commit 71fc47f32af7c74327a26425035298f8e6464c96)
---
 web/src/sections/Library/LibraryGrid.tsx | 8 +++++++-
 web/src/sections/Stats/Recordings.tsx    | 5 ++++-
 web/src/sections/Store/Browse.tsx        | 5 ++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/src/sections/Library/LibraryGrid.tsx b/web/src/sections/Library/LibraryGrid.tsx
index 89e31d97..f3584799 100644
--- a/web/src/sections/Library/LibraryGrid.tsx
+++ b/web/src/sections/Library/LibraryGrid.tsx
@@ -61,7 +61,13 @@ export const LibraryGrid: FC<{
 		>
 			{games.length === 0 ? (
 				<Card>
-					<CardContent className="p-8 text-center text-sm text-muted-foreground">
+					{/* `flush`, not a bare `p-8`: the default `sm:pt-0` would survive the override
+					    (tailwind-merge only resolves conflicts within a variant) and eat the top
+					    inset at ≥640px — see the CardContent doc comment. */}
+					<CardContent
+						flush
+						className="p-8 text-center text-sm text-muted-foreground"
+					>
 						{m.library_empty()}
 					</CardContent>
 				</Card>
diff --git a/web/src/sections/Stats/Recordings.tsx b/web/src/sections/Stats/Recordings.tsx
index d96852b5..7f26b070 100644
--- a/web/src/sections/Stats/Recordings.tsx
+++ b/web/src/sections/Stats/Recordings.tsx
@@ -110,7 +110,10 @@ export const RecordingsCard: FC<{
 				refetch={recordings.refetch}
 			>
 				{rows.length === 0 ? (
-					<CardContent className="p-8 text-center text-sm text-muted-foreground">
+					<CardContent
+						flush
+						className="p-8 text-center text-sm text-muted-foreground"
+					>
 						{m.stats_recordings_empty()}
 					</CardContent>
 				) : (
diff --git a/web/src/sections/Store/Browse.tsx b/web/src/sections/Store/Browse.tsx
index 43554e51..2c72edfa 100644
--- a/web/src/sections/Store/Browse.tsx
+++ b/web/src/sections/Store/Browse.tsx
@@ -93,7 +93,10 @@ export const BrowseTab: FC<{
 			>
 				{shown.length === 0 ? (
 					<Card>
-						<CardContent className="p-8 text-center text-sm text-muted-foreground">
+						<CardContent
+							flush
+							className="p-8 text-center text-sm text-muted-foreground"
+						>
 							{entries.length === 0 ? m.store_empty() : m.store_no_match()}
 						</CardContent>
 					</Card>