From d3817021ff7abf9dcaae787fe15400dafdcb551c Mon Sep 17 00:00:00 2001
From: Unsloth <michaelhan@Michaels-MacBook-Pro.local>
Date: Wed, 29 Jul 2026 01:39:28 -0700
Subject: [PATCH] Studio: stack the GPU meter under its figures and tint the
 VRAM pill

The meter sat beside the used/free/total figures with only a fixed 24
width, so it read as squeezed. Move it under them where it spans their
width. The pill was muted grey and washed out in light mode; give it the
same accent fill the New tags use.
---
 .../src/features/settings/tabs/resources-tab.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/studio/frontend/src/features/settings/tabs/resources-tab.tsx b/studio/frontend/src/features/settings/tabs/resources-tab.tsx
index 6348d2066d..c1889a4168 100644
--- a/studio/frontend/src/features/settings/tabs/resources-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/resources-tab.tsx
@@ -487,9 +487,9 @@ export function ResourcesTab() {
               ? formatPercent(safePercent)
               : unknownLabel;
             return (
-              // Name over backend on the left, figures and meter beside them.
-              // The meter is deliberately short: at full width it read as a
-              // rule across the pane rather than a reading for one device.
+              // Name over backend on the left, figures over the meter on the
+              // right. The meter tracks the figures' width rather than the
+              // pane's, so it reads as one device's usage, not a rule.
               <div
                 key={`${device.index ?? index}-${device.name ?? "gpu"}`}
                 className="flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 py-3"
@@ -506,13 +506,17 @@ export function ResourcesTab() {
                             index: ordinal,
                           })}, ${backendLabel}`}
                     </span>
-                    <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 font-mono text-ui-11 tabular-nums text-muted-foreground dark:bg-white/[0.08]">
+                    {/* Same accent pill as the New tags, which stays legible
+                        on the light background. */}
+                    <span className="shrink-0 rounded-full bg-control-accent/10 px-2 py-1 text-ui-10 leading-none font-semibold tabular-nums text-control-accent">
                       {percentText}{" "}
                       {t("settings.resources.gpu.vramUtilization")}
                     </span>
                   </div>
                 </div>
-                <div className="flex shrink-0 items-center gap-4">
+                {/* Meter under the figures, so it spans their width instead of
+                    being squeezed into the gap beside them. */}
+                <div className="flex shrink-0 flex-col items-stretch gap-1.5">
                   <div className="flex gap-3 font-mono text-xs tabular-nums text-muted-foreground">
                     <span className="truncate">
                       {t("settings.resources.gpu.used", { value: usedText })}
@@ -529,7 +533,7 @@ export function ResourcesTab() {
                   <Progress
                     value={safePercent}
                     aria-label={device.name ?? "GPU"}
-                    className="h-1.5 w-24 shrink-0 rounded-full bg-muted dark:bg-black/40"
+                    className="h-1.5 w-full rounded-full bg-muted dark:bg-black/40"
                     indicatorClassName={usageIndicatorClass(safePercent)}
                   />
                 </div>