feat(05-02): upgrade PageShell spacing to gap-8 and remove rounded-* from DashboardSkeleton

- PageShell: gap-6 → gap-8 for header-to-content spacing on all pages
- DashboardSkeleton: gap-6 → gap-8 (outer flex), gap-4 → gap-6 (summary cards), gap-6 → gap-8 (chart grid)
- DashboardSkeleton: remove rounded-md from 3 chart skeleton placeholders
- DashboardSkeleton: remove rounded-md from collapsible section row divs
- DashboardSkeleton: remove rounded-full from 2 badge skeleton placeholders
This commit is contained in:
2026-04-20 17:11:20 +02:00
parent e5637511d7
commit e8f13c91c6
2 changed files with 10 additions and 10 deletions

View File

@@ -17,22 +17,22 @@ function SkeletonStatCard() {
export function DashboardSkeleton() {
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-8">
{/* Summary cards skeleton */}
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<SkeletonStatCard />
<SkeletonStatCard />
<SkeletonStatCard />
</div>
{/* 3-column chart area skeleton */}
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader>
<Skeleton className="h-5 w-40" />
</CardHeader>
<CardContent>
<Skeleton className="h-[250px] w-full rounded-md" />
<Skeleton className="h-[250px] w-full" />
</CardContent>
</Card>
<Card>
@@ -40,7 +40,7 @@ export function DashboardSkeleton() {
<Skeleton className="h-5 w-40" />
</CardHeader>
<CardContent>
<Skeleton className="h-[250px] w-full rounded-md" />
<Skeleton className="h-[250px] w-full" />
</CardContent>
</Card>
<Card>
@@ -48,7 +48,7 @@ export function DashboardSkeleton() {
<Skeleton className="h-5 w-40" />
</CardHeader>
<CardContent>
<Skeleton className="h-[250px] w-full rounded-md" />
<Skeleton className="h-[250px] w-full" />
</CardContent>
</Card>
</div>
@@ -56,12 +56,12 @@ export function DashboardSkeleton() {
{/* Collapsible sections skeleton */}
<div className="space-y-3">
{[1, 2, 3].map((i) => (
<div key={i} className="flex items-center gap-3 rounded-md border-l-4 border-muted bg-card px-4 py-3">
<div key={i} className="flex items-center gap-3 border-l-4 border-muted bg-card px-4 py-3">
<Skeleton className="size-4" />
<Skeleton className="h-4 w-32" />
<div className="ml-auto flex items-center gap-2">
<Skeleton className="h-5 w-24 rounded-full" />
<Skeleton className="h-5 w-24 rounded-full" />
<Skeleton className="h-5 w-24" />
<Skeleton className="h-5 w-24" />
<Skeleton className="h-4 w-16" />
</div>
</div>

View File

@@ -12,7 +12,7 @@ export function PageShell({
children,
}: PageShellProps) {
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-8">
<div className="flex items-start justify-between gap-4">
<div>
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>