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

Studio: let the GPU meter shrink beside its percentage

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

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

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