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

Fix OOM model styling in Studio model selectors (#4738)

Browse source 
Replace strikethrough + opacity-50 OOM styling with gray text and red pill badge across all Studio model selectors (chat, training, onboarding).

- Use gray-500/gray-400 for OOM model names (better contrast than strikethrough)
- Red pill badge for OOM indicator with light/dark mode support
- Scope GGUF gray override to quant name only so downloaded/recommended labels keep colors
- Add !important on TIGHT/OOM badges to resist ComboboxItem hover overrides
This commit is contained in:
Leo Borcherding 2026-04-01 04:06:49 -05:00 • committed by GitHub
commit 63ad6dbd6d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 14 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

13
studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
View file

@ -127,23 +127,22 @@ function ModelRow({
className={cn(
"flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors hover:bg-accent",
selected && "bg-accent/60",
exceeds && "opacity-50",
)}
>
<span
className={cn(
"block min-w-0 flex-1 truncate",
exceeds && "line-through decoration-muted-foreground/50",
exceeds && "!text-gray-500 dark:!text-gray-400",
)}
>
{label}
</span>
<span className="ml-auto flex items-center gap-1.5 shrink-0">
{vramStatus === "exceeds" && (
<span className="text-[9px] font-medium text-red-400">OOM</span>
<span className="text-[9px] font-medium !text-red-700 !bg-red-50 dark:!text-red-400 dark:!bg-red-950 px-1.5 py-0.5 rounded">OOM</span>
)}
{vramStatus === "tight" && (
<span className="text-[9px] font-medium text-amber-400">TIGHT</span>
<span className="text-[9px] font-medium !text-amber-400">TIGHT</span>
)}
{meta ? (
<span className="text-[10px] text-muted-foreground">{meta}</span>
@ -354,7 +353,7 @@ function GgufVariantExpander({
)}
>
<span className="min-w-0 flex-1 truncate font-mono text-xs">
{v.quant}
<span className={cn(oom && "!text-gray-500 dark:!text-gray-400")}>{v.quant}</span>
{v.downloaded ? (
<span className="ml-1.5 text-[9px] font-sans font-medium text-green-400">
downloaded
@ -367,12 +366,12 @@ function GgufVariantExpander({
</span>
<span className="flex items-center gap-1.5 shrink-0">
{oom && (
<span className="text-[9px] font-medium text-red-400">
<span className="text-[9px] font-medium !text-red-700 !bg-red-50 dark:!text-red-400 dark:!bg-red-950 px-1.5 py-0.5 rounded">
OOM
</span>
)}
{tight && (
<span className="text-[9px] font-medium text-amber-400">
<span className="text-[9px] font-medium !text-amber-400">
TIGHT
</span>
)}

8
studio/frontend/src/features/onboarding/components/steps/model-selection-step.tsx
View file

@ -268,12 +268,12 @@ export function ModelSelectionStep() {
<ComboboxItem
key={id}
value={id}
className={`justify-between ${exceeds ? "opacity-50" : ""}`}
className="justify-between"
>
<Tooltip>
<TooltipTrigger asChild={true}>
<span
className={`min-w-0 flex-1 truncate ${exceeds ? "line-through decoration-muted-foreground/50" : ""}`}
className={`min-w-0 flex-1 truncate ${exceeds ? "!text-gray-500 dark:!text-gray-400" : ""}`}
>
{id}
</span>
@ -287,12 +287,12 @@ export function ModelSelectionStep() {
</Tooltip>
<span className="flex items-center gap-1.5 shrink-0">
{fitStatus === "exceeds" && (
<span className="text-[9px] font-medium text-red-400">
<span className="text-[9px] font-medium !text-red-700 !bg-red-50 dark:!text-red-400 dark:!bg-red-950 px-1.5 py-0.5 rounded">
OOM
</span>
)}
{fitStatus === "tight" && (
<span className="text-[9px] font-medium text-amber-400">
<span className="text-[9px] font-medium !text-amber-400">
TIGHT
</span>
)}

8
studio/frontend/src/features/studio/sections/model-section.tsx
View file

@ -489,12 +489,12 @@ export function ModelSection() {
<ComboboxItem
key={id}
value={id}
className={`gap-2 ${exceeds ? "opacity-50" : ""}`}
className="gap-2"
>
<Tooltip>
<TooltipTrigger asChild={true}>
<span
className={`block min-w-0 flex-1 truncate ${exceeds ? "line-through decoration-muted-foreground/50" : ""}`}
className={`block min-w-0 flex-1 truncate ${exceeds ? "!text-gray-500 dark:!text-gray-400" : ""}`}
>
{id}
</span>
@ -519,12 +519,12 @@ export function ModelSection() {
</Tooltip>
<span className="ml-auto flex items-center gap-1.5 shrink-0">
{fitStatus === "exceeds" && (
<span className="text-[9px] font-medium text-red-400">
<span className="text-[9px] font-medium !text-red-700 !bg-red-50 dark:!text-red-400 dark:!bg-red-950 px-1.5 py-0.5 rounded">
OOM
</span>
)}
{fitStatus === "tight" && (
<span className="text-[9px] font-medium text-amber-400">
<span className="text-[9px] font-medium !text-amber-400">
TIGHT
</span>
)}