From 8287f2c3a771f4a88f781e9c98830692b186c5c3 Mon Sep 17 00:00:00 2001
From: Tristan Knight <admin@snappeh.com>
Date: Mon, 24 Aug 2026 22:32:28 +0100
Subject: [PATCH] fix(web): align usage page skeleton layout (#8111)

---
 apps/web/src/components/usage/UsagePage.tsx | 24 ++++++++++++---------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 0c9239a7809383139326e090e057965a08bf9eb5..2330403dc765c29f28c2d781ad8e268074b69c63 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -212,7 +212,7 @@ export function UsagePage() {
                   staleEnvironments={merged.staleEnvironments}
                 />
 
-                <section className="grid gap-6 lg:grid-cols-[minmax(0,16rem)_minmax(0,1fr)]">
+                <section className="grid gap-6 lg:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]">
                   <div className="flex min-w-0 flex-col gap-5">
                     <div className="flex flex-col gap-1">
                       <span className="text-4xl font-semibold text-foreground tabular-nums">
@@ -582,7 +582,7 @@ function UsageDeviceStrip({
 function UsageSkeleton() {
   return (
     <>
-      <section className="grid gap-6 lg:grid-cols-[minmax(0,16rem)_minmax(0,1fr)]">
+      <section className="grid gap-6 lg:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]">
         <div className="flex flex-col gap-5">
           <div className="flex flex-col gap-1">
             <div className="h-10 w-36 rounded-sm bg-muted" />
@@ -592,12 +592,8 @@ function UsageSkeleton() {
             <div key={provider} className="flex flex-col gap-1">
               <div className="flex min-h-5 items-center justify-between gap-4">
                 <span className="flex items-center gap-2">
-                  <span
-                    aria-hidden
-                    className="size-2 shrink-0 rounded-full"
-                    style={{ backgroundColor: PROVIDER_PRESENTATION[provider].color }}
-                  />
-                  <ProviderMark provider={provider} className="size-4" />
+                  <span className="size-2 shrink-0 rounded-full bg-muted" />
+                  <span className="size-4 shrink-0 rounded-full bg-muted" />
                   <div className="h-3.5 w-20 rounded-sm bg-muted" />
                 </span>
                 <div className="h-3.5 w-14 rounded-sm bg-muted" />
@@ -611,7 +607,7 @@ function UsageSkeleton() {
           <div className="h-5 w-24 rounded-sm bg-muted" />
           <div className="flex flex-col gap-1">
             <div className="ml-16 h-56 rounded-sm bg-muted/35" />
-            <div className="ml-16 h-3 rounded-sm bg-muted/35" />
+            <div className="ml-16 h-4 rounded-sm bg-muted/35" />
           </div>
         </div>
       </section>
@@ -623,12 +619,20 @@ function UsageSkeleton() {
             (label) => (
               <div key={label} className="flex flex-col gap-0.5">
                 <span className="text-xs text-muted-foreground">{label}</span>
-                <div className="my-0.5 h-4 w-16 rounded-sm bg-muted" />
+                <div className="h-6 w-16 rounded-sm bg-muted" />
               </div>
             ),
           )}
         </div>
       </section>
+
+      <section className="flex flex-col gap-3">
+        <div className="flex items-center justify-between gap-3">
+          <h2 className="text-sm font-medium text-foreground">Breakdown</h2>
+          <div className="h-7 w-28 rounded-lg bg-input/40" />
+        </div>
+        <div className="h-44 rounded-sm bg-muted/35" />
+      </section>
     </>
   );
 }
-- 
2.54.0