From 8e48894fa8a4e81a6c9f99ae1215550caf807b9e Mon Sep 17 00:00:00 2001
From: Unsloth <michaelhan@Michaels-MacBook-Pro.local>
Date: Wed, 29 Jul 2026 01:54:35 -0700
Subject: [PATCH] Studio: widen the GPU figures to the Model downloads edge

Match the 392px of the Model downloads control so both blocks start on
the same edge, and open up the gap between the figures and the meter.
Below 992px the dialog no longer fills its width cap, so stack the row
rather than squeezing the device name.
---
 .../src/features/settings/tabs/resources-tab.tsx       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/studio/frontend/src/features/settings/tabs/resources-tab.tsx b/studio/frontend/src/features/settings/tabs/resources-tab.tsx
index 27ae34d96a..e5ed0e0fc5 100644
--- a/studio/frontend/src/features/settings/tabs/resources-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/resources-tab.tsx
@@ -495,7 +495,7 @@ export function ResourcesTab() {
               // 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"
+                className="flex min-w-0 items-center justify-between gap-x-4 gap-y-2 py-3 max-[992px]:flex-col max-[992px]:items-stretch"
               >
                 <div className="min-w-0 flex-1">
                   <div className="truncate text-sm font-medium text-foreground">
@@ -518,9 +518,11 @@ export function ResourcesTab() {
                   </div>
                 </div>
                 {/* Meter under the figures, so it spans their width instead of
-                    being squeezed into the gap beside them. The min width
-                    starts the block further left than its text alone would. */}
-                <div className="flex min-w-[19rem] shrink-0 flex-col items-stretch gap-1.5">
+                    being squeezed into the gap beside them. Same 392px as the
+                    Model downloads control, so both blocks start on one edge.
+                    Below 992px the dialog stops filling its 960px cap and the
+                    device name would truncate, so the row stacks instead. */}
+                <div className="flex w-[392px] shrink-0 flex-col items-stretch gap-2.5 max-[992px]:w-full">
                   {/* Ruled between the three readings: run together they are
                       easy to misread as one number. */}
                   <div className="flex items-center justify-between gap-3 font-mono text-ui-11 tabular-nums text-muted-foreground">