From 937919b17f3ec304a0dba86a9a1b77606a7a65b4 Mon Sep 17 00:00:00 2001
From: Unsloth <michaelhan@Michaels-MacBook-Pro.local>
Date: Tue, 28 Jul 2026 23:47:47 -0700
Subject: [PATCH] Studio: let the GPU meter shrink beside its percentage

The stacked layout gave the meter the full row width while keeping it
shrink-0, so each device row ran wider than its container once the
figures moved onto their own line. It now fills whatever the percentage
label leaves, and keeps the fixed width at lg and above.
---
 studio/frontend/src/features/settings/tabs/resources-tab.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/studio/frontend/src/features/settings/tabs/resources-tab.tsx b/studio/frontend/src/features/settings/tabs/resources-tab.tsx
index 776e643163..496432c7a4 100644
--- a/studio/frontend/src/features/settings/tabs/resources-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/resources-tab.tsx
@@ -520,10 +520,12 @@ export function ResourcesTab() {
                     </span>
                   </div>
                   <div className="flex min-w-0 items-center gap-4">
+                    {/* Fills the space left by the percentage rather than
+                        claiming the full row, which overflowed once stacked. */}
                     <Progress
                       value={safePercent}
                       aria-label={device.name ?? "GPU"}
-                      className="h-1.5 w-40 shrink-0 rounded-full bg-muted max-lg:w-full dark:bg-black/40"
+                      className="h-1.5 min-w-0 flex-1 rounded-full bg-muted lg:w-40 lg:flex-none dark:bg-black/40"
                       indicatorClassName={usageIndicatorClass(safePercent)}
                     />
                     <div className="w-[5.5rem] shrink-0 text-right font-mono text-xs tabular-nums text-muted-foreground">