From 63ad6dbd6de89fcb4212afe666fcb5689404c66b Mon Sep 17 00:00:00 2001
From: Leo Borcherding <borchborchmail@gmail.com>
Date: Wed, 1 Apr 2026 04:06:49 -0500
Subject: [PATCH] Fix OOM model styling in Studio model selectors (#4738)

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
---
 .../assistant-ui/model-selector/pickers.tsx         | 13 ++++++-------
 .../components/steps/model-selection-step.tsx       |  8 ++++----
 .../src/features/studio/sections/model-section.tsx  |  8 ++++----
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
index c072eb3096..74ca2542d4 100644
--- a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
+++ b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
@@ -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>
                 )}
diff --git a/studio/frontend/src/features/onboarding/components/steps/model-selection-step.tsx b/studio/frontend/src/features/onboarding/components/steps/model-selection-step.tsx
index f2a4796c54..1ff23cb0fc 100644
--- a/studio/frontend/src/features/onboarding/components/steps/model-selection-step.tsx
+++ b/studio/frontend/src/features/onboarding/components/steps/model-selection-step.tsx
@@ -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>
                           )}
diff --git a/studio/frontend/src/features/studio/sections/model-section.tsx b/studio/frontend/src/features/studio/sections/model-section.tsx
index 755c93c5f0..775073eb64 100644
--- a/studio/frontend/src/features/studio/sections/model-section.tsx
+++ b/studio/frontend/src/features/studio/sections/model-section.tsx
@@ -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>
                               )}