fix(web): empty-state cards get their top padding back
"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)
This commit is contained in:
@@ -61,7 +61,13 @@ export const LibraryGrid: FC<{
|
|||||||
>
|
>
|
||||||
{games.length === 0 ? (
|
{games.length === 0 ? (
|
||||||
<Card>
|
<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()}
|
{m.library_empty()}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -110,7 +110,10 @@ export const RecordingsCard: FC<{
|
|||||||
refetch={recordings.refetch}
|
refetch={recordings.refetch}
|
||||||
>
|
>
|
||||||
{rows.length === 0 ? (
|
{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()}
|
{m.stats_recordings_empty()}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -93,7 +93,10 @@ export const BrowseTab: FC<{
|
|||||||
>
|
>
|
||||||
{shown.length === 0 ? (
|
{shown.length === 0 ? (
|
||||||
<Card>
|
<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()}
|
{entries.length === 0 ? m.store_empty() : m.store_no_match()}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
Reference in New Issue
Block a user