ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Studio: keep per-GPU memory figures on narrow screens

Browse source 
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.
This commit is contained in:
Unsloth 2026-07-28 23:23:03 -07:00
commit 03082cdb74
1 changed files with 22 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

35
studio/frontend/src/features/settings/tabs/resources-tab.tsx
View file

@ -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>