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() {
212212 staleEnvironments={merged.staleEnvironments}
213213 />
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)]">
216216 <div className="flex min-w-0 flex-col gap-5">
217217 <div className="flex flex-col gap-1">
218218 <span className="text-4xl font-semibold text-foreground tabular-nums">
......@@ -582,7 +582,7 @@ function UsageDeviceStrip({
582582function UsageSkeleton() {
583583 return (
584584 <>
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)]">
586586 <div className="flex flex-col gap-5">
587587 <div className="flex flex-col gap-1">
588588 <div className="h-10 w-36 rounded-sm bg-muted" />
......@@ -592,12 +592,8 @@ function UsageSkeleton() {
592592 <div key={provider} className="flex flex-col gap-1">
593593 <div className="flex min-h-5 items-center justify-between gap-4">
594594 <span className="flex items-center gap-2">
595 <span
596 aria-hidden
597 className="size-2 shrink-0 rounded-full"
598 style={{ backgroundColor: PROVIDER_PRESENTATION[provider].color }}
599 />
600 <ProviderMark provider={provider} className="size-4" />
595 <span className="size-2 shrink-0 rounded-full bg-muted" />
596 <span className="size-4 shrink-0 rounded-full bg-muted" />
601597 <div className="h-3.5 w-20 rounded-sm bg-muted" />
602598 </span>
603599 <div className="h-3.5 w-14 rounded-sm bg-muted" />
......@@ -611,7 +607,7 @@ function UsageSkeleton() {
611607 <div className="h-5 w-24 rounded-sm bg-muted" />
612608 <div className="flex flex-col gap-1">
613609 <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" />
615611 </div>
616612 </div>
617613 </section>
......@@ -623,12 +619,20 @@ function UsageSkeleton() {
623619 (label) => (
624620 <div key={label} className="flex flex-col gap-0.5">
625621 <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" />
627623 </div>
628624 ),
629625 )}
630626 </div>
631627 </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>
632636 </>
633637 );
634638}