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() { export function DashboardSkeleton() {
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-8">
{/* Summary cards skeleton */} {/* 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 /> <SkeletonStatCard />
<SkeletonStatCard /> <SkeletonStatCard />
</div> </div>
{/* 3-column chart area skeleton */} {/* 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> <Card>
<CardHeader> <CardHeader>
<Skeleton className="h-5 w-40" /> <Skeleton className="h-5 w-40" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Skeleton className="h-[250px] w-full rounded-md" /> <Skeleton className="h-[250px] w-full" />
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
@@ -40,7 +40,7 @@ export function DashboardSkeleton() {
<Skeleton className="h-5 w-40" /> <Skeleton className="h-5 w-40" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Skeleton className="h-[250px] w-full rounded-md" /> <Skeleton className="h-[250px] w-full" />
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
@@ -48,7 +48,7 @@ export function DashboardSkeleton() {
<Skeleton className="h-5 w-40" /> <Skeleton className="h-5 w-40" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Skeleton className="h-[250px] w-full rounded-md" /> <Skeleton className="h-[250px] w-full" />
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -56,12 +56,12 @@ export function DashboardSkeleton() {
{/* Collapsible sections skeleton */} {/* Collapsible sections skeleton */}
<div className="space-y-3"> <div className="space-y-3">
{[1, 2, 3].map((i) => ( {[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="size-4" />
<Skeleton className="h-4 w-32" /> <Skeleton className="h-4 w-32" />
<div className="ml-auto flex items-center gap-2"> <div className="ml-auto flex items-center gap-2">
<Skeleton className="h-5 w-24 rounded-full" /> <Skeleton className="h-5 w-24" />
<Skeleton className="h-5 w-24 rounded-full" /> <Skeleton className="h-5 w-24" />
<Skeleton className="h-4 w-16" /> <Skeleton className="h-4 w-16" />
</div> </div>
</div> </div>

View File

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