From 70dc3d58d06c5d8741961fb6914011185abb5884 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Sat, 22 Aug 2026 16:39:49 -0700
Subject: [PATCH] fix(ui): restore the public model name tooltip layout in the
 add model flow

The tooltip popup is an inline-flex row, so the four sibling blocks passed as a fragment laid out side by side in four columns. Wrap them in a single flex-col container instead.

The inline code samples also used bg-muted, which is defined against the page surface, not the inverted tooltip surface, so they rendered as near-white chips carrying near-white text. Tint them from the popup's own token instead.
---
 .../conditional_public_model_name.tsx         | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx b/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
index b9c128a3d511..c58b177a6e16 100644
--- a/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
@@ -34,6 +34,8 @@ const modelMappingsRule = {
   },
 };
 
+const tooltipCodeClassName = "rounded-sm bg-background/20 px-1 py-0.5 font-mono text-xs";
+
 const ConditionalPublicModelName: React.FC = () => {
   const form = useFormContext<MountedFormValues>();
 
@@ -123,22 +125,22 @@ const ConditionalPublicModelName: React.FC = () => {
   if (!showPublicModelName) return null;
 
   const publicNameTooltipContent = (
-    <>
-      <div className="mb-2 font-normal">The name you specify in your API calls to LiteLLM Proxy</div>
-      <div className="mb-2 font-normal">
+    <div className="flex flex-col gap-2 text-left font-normal">
+      <div>The name you specify in your API calls to LiteLLM Proxy</div>
+      <div>
         <strong>Example:</strong> If you name your public model{" "}
-        <code className="bg-muted px-1 py-0.5 rounded-sm text-xs">example-name</code>, and choose{" "}
-        <code className="bg-muted px-1 py-0.5 rounded-sm text-xs">openai/qwen-plus-latest</code> as the LiteLLM model
+        <code className={tooltipCodeClassName}>example-name</code>, and choose{" "}
+        <code className={tooltipCodeClassName}>openai/qwen-plus-latest</code> as the LiteLLM model
       </div>
-      <div className="mb-2 font-normal">
+      <div>
         <strong>Usage:</strong> You make an API call to the LiteLLM proxy with{" "}
-        <code className="bg-muted px-1 py-0.5 rounded-sm text-xs">model = &quot;example-name&quot;</code>
+        <code className={tooltipCodeClassName}>model = &quot;example-name&quot;</code>
       </div>
-      <div className="font-normal">
-        <strong>Result:</strong> LiteLLM sends{" "}
-        <code className="bg-muted px-1 py-0.5 rounded-sm text-xs">qwen-plus-latest</code> to the provider
+      <div>
+        <strong>Result:</strong> LiteLLM sends <code className={tooltipCodeClassName}>qwen-plus-latest</code> to the
+        provider
       </div>
-    </>
+    </div>
   );
 
   const liteLLMModelTooltipContent = <div>The model name LiteLLM will send to the LLM API</div>;