From 03082cdb74c1f2a75d91c984ca20b4622d3d00f2 Mon Sep 17 00:00:00 2001
From: Unsloth <michaelhan@Michaels-MacBook-Pro.local>
Date: Tue, 28 Jul 2026 23:23:03 -0700
Subject: [PATCH] Studio: keep per-GPU memory figures on narrow screens

The one-row device layout hid used, free and total below 1024px, so
tablets and small laptops were left with only the utilization
percentage. Those widths now stack the row instead of dropping the
figures, and the bar goes full width under them.
---
 .../features/settings/tabs/resources-tab.tsx  | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/studio/frontend/src/features/settings/tabs/resources-tab.tsx b/studio/frontend/src/features/settings/tabs/resources-tab.tsx
index 298d159cf9..776e643163 100644
--- a/studio/frontend/src/features/settings/tabs/resources-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/resources-tab.tsx
@@ -124,7 +124,9 @@ function MetricTile({
         <span
           className={cn(
             "shrink-0 font-mono text-xs tabular-nums",
-            percentKnown ? usageTextClass(safePercent) : "text-muted-foreground",
+            percentKnown
+              ? usageTextClass(safePercent)
+              : "text-muted-foreground",
           )}
         >
           {percentKnown ? formatPercent(safePercent) : "--"}
@@ -327,7 +329,9 @@ export function ResourcesTab() {
   const hasGpu =
     (displayedGpu?.available ?? false) && metrics.devices.length > 0;
   const backendLabel = (
-    displayedGpu?.backend ?? systemInfo.device_backend ?? "cpu"
+    displayedGpu?.backend ??
+    systemInfo.device_backend ??
+    "cpu"
   ).toUpperCase();
   const modelsFolderPath = hfCache
     ? hfCache.cacheHome
@@ -487,7 +491,7 @@ export function ResourcesTab() {
               // as a page-wide rule, so the bar is sized to the row instead.
               <div
                 key={`${device.index ?? index}-${device.name ?? "gpu"}`}
-                className="flex min-w-0 items-center gap-4 py-3 max-md:flex-col max-md:items-stretch max-md:gap-2"
+                className="flex min-w-0 items-center gap-4 py-3 max-lg:flex-col max-lg:items-stretch max-lg:gap-2"
               >
                 <div className="min-w-0 flex-1">
                   <div className="truncate text-sm font-medium text-foreground">
@@ -501,8 +505,10 @@ export function ResourcesTab() {
                         })}, ${backendLabel}`}
                   </div>
                 </div>
-                <div className="flex shrink-0 items-center gap-4 max-md:justify-between">
-                  <div className="flex shrink-0 gap-3 font-mono text-xs tabular-nums text-muted-foreground max-lg:hidden">
+                {/* Narrow screens stack instead of hiding: the used, free and
+                    total figures stay reachable on tablets and small laptops. */}
+                <div className="flex shrink-0 items-center gap-4 max-lg:flex-col max-lg:items-stretch max-lg:gap-2">
+                  <div className="flex shrink-0 gap-3 font-mono text-xs tabular-nums text-muted-foreground max-lg:justify-between">
                     <span className="truncate">
                       {t("settings.resources.gpu.used", { value: usedText })}
                     </span>
@@ -513,14 +519,17 @@ export function ResourcesTab() {
                       {t("settings.resources.gpu.total", { value: totalText })}
                     </span>
                   </div>
-                  <Progress
-                    value={safePercent}
-                    aria-label={device.name ?? "GPU"}
-                    className="h-1.5 w-40 shrink-0 rounded-full bg-muted max-md:w-full 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">
-                    {percentText} {t("settings.resources.gpu.vramUtilization")}
+                  <div className="flex min-w-0 items-center gap-4">
+                    <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"
+                      indicatorClassName={usageIndicatorClass(safePercent)}
+                    />
+                    <div className="w-[5.5rem] shrink-0 text-right font-mono text-xs tabular-nums text-muted-foreground">
+                      {percentText}{" "}
+                      {t("settings.resources.gpu.vramUtilization")}
+                    </div>
                   </div>
                 </div>
               </div>