authorgravatar for admin@snappeh.comTristan Knight <admin@snappeh.com> 2026-08-24 22:32:28+01:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-24 17:32:28-04:00
log8287f2c3a771f4a88f781e9c98830692b186c5c3
tree33a9e0b3e8ea465674cc4ae47087fc02d317389a
parent5f1147cad72197d7315a2fd073c30d7ffe1767f2
signature Signed by PGP key B5690EEEBB952194

fix(web): align usage page skeleton layout (#8111)

1 files changed, 14 insertions(+), 10 deletions(-)

apps/web/src/components/usage/UsagePage.tsx+14-10
...@@ -212,7 +212,7 @@ export function UsagePage() {...@@ -212,7 +212,7 @@ export function UsagePage() {
212 staleEnvironments={merged.staleEnvironments}212 staleEnvironments={merged.staleEnvironments}
213 />213 />
214214
215 <section className="grid gap-6 lg:grid-cols-[minmax(0,16rem)_minmax(0,1fr)]">215 <section className="grid gap-6 lg:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]">
216 <div className="flex min-w-0 flex-col gap-5">216 <div className="flex min-w-0 flex-col gap-5">
217 <div className="flex flex-col gap-1">217 <div className="flex flex-col gap-1">
218 <span className="text-4xl font-semibold text-foreground tabular-nums">218 <span className="text-4xl font-semibold text-foreground tabular-nums">
...@@ -582,7 +582,7 @@ function UsageDeviceStrip({...@@ -582,7 +582,7 @@ function UsageDeviceStrip({
582function UsageSkeleton() {582function UsageSkeleton() {
583 return (583 return (
584 <>584 <>
585 <section className="grid gap-6 lg:grid-cols-[minmax(0,16rem)_minmax(0,1fr)]">585 <section className="grid gap-6 lg:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]">
586 <div className="flex flex-col gap-5">586 <div className="flex flex-col gap-5">
587 <div className="flex flex-col gap-1">587 <div className="flex flex-col gap-1">
588 <div className="h-10 w-36 rounded-sm bg-muted" />588 <div className="h-10 w-36 rounded-sm bg-muted" />
...@@ -592,12 +592,8 @@ function UsageSkeleton() {...@@ -592,12 +592,8 @@ function UsageSkeleton() {
592 <div key={provider} className="flex flex-col gap-1">592 <div key={provider} className="flex flex-col gap-1">
593 <div className="flex min-h-5 items-center justify-between gap-4">593 <div className="flex min-h-5 items-center justify-between gap-4">
594 <span className="flex items-center gap-2">594 <span className="flex items-center gap-2">
595 <span595 <span className="size-2 shrink-0 rounded-full bg-muted" />
596 aria-hidden596 <span className="size-4 shrink-0 rounded-full bg-muted" />
597 className="size-2 shrink-0 rounded-full"
598 style={{ backgroundColor: PROVIDER_PRESENTATION[provider].color }}
599 />
600 <ProviderMark provider={provider} className="size-4" />
601 <div className="h-3.5 w-20 rounded-sm bg-muted" />597 <div className="h-3.5 w-20 rounded-sm bg-muted" />
602 </span>598 </span>
603 <div className="h-3.5 w-14 rounded-sm bg-muted" />599 <div className="h-3.5 w-14 rounded-sm bg-muted" />
...@@ -611,7 +607,7 @@ function UsageSkeleton() {...@@ -611,7 +607,7 @@ function UsageSkeleton() {
611 <div className="h-5 w-24 rounded-sm bg-muted" />607 <div className="h-5 w-24 rounded-sm bg-muted" />
612 <div className="flex flex-col gap-1">608 <div className="flex flex-col gap-1">
613 <div className="ml-16 h-56 rounded-sm bg-muted/35" />609 <div className="ml-16 h-56 rounded-sm bg-muted/35" />
614 <div className="ml-16 h-3 rounded-sm bg-muted/35" />610 <div className="ml-16 h-4 rounded-sm bg-muted/35" />
615 </div>611 </div>
616 </div>612 </div>
617 </section>613 </section>
...@@ -623,12 +619,20 @@ function UsageSkeleton() {...@@ -623,12 +619,20 @@ function UsageSkeleton() {
623 (label) => (619 (label) => (
624 <div key={label} className="flex flex-col gap-0.5">620 <div key={label} className="flex flex-col gap-0.5">
625 <span className="text-xs text-muted-foreground">{label}</span>621 <span className="text-xs text-muted-foreground">{label}</span>
626 <div className="my-0.5 h-4 w-16 rounded-sm bg-muted" />622 <div className="h-6 w-16 rounded-sm bg-muted" />
627 </div>623 </div>
628 ),624 ),
629 )}625 )}
630 </div>626 </div>
631 </section>627 </section>
628
629 <section className="flex flex-col gap-3">
630 <div className="flex items-center justify-between gap-3">
631 <h2 className="text-sm font-medium text-foreground">Breakdown</h2>
632 <div className="h-7 w-28 rounded-lg bg-input/40" />
633 </div>
634 <div className="h-44 rounded-sm bg-muted/35" />
635 </section>
632 </>636 </>
633 );637 );
634}638}