From 17db9edd850ed488f6105e37d5c3c7ee7b8c8d12 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 14 Aug 2025 17:29:23 -0700
Subject: [PATCH] UI - Fix image overflow in LiteLLM model (#13639)

* Improve LiteLLM model name display with better styling and overflow handling

Co-authored-by: ishaan <ishaan@berri.ai>

* Add Tooltip to LiteLLM model name for improved text display

Co-authored-by: ishaan <ishaan@berri.ai>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: ishaan <ishaan@berri.ai>
---
 .../src/components/model_info_view.tsx               | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/model_info_view.tsx b/ui/litellm-dashboard/src/components/model_info_view.tsx
index 115be00779b..34d0371bbfc 100644
--- a/ui/litellm-dashboard/src/components/model_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/model_info_view.tsx
@@ -399,9 +399,15 @@ export default function ModelInfoView({
               </Card>
               <Card>
                 <Text>LiteLLM Model</Text>
-                <pre>
-                  <Title>{modelData.litellm_model_name || "Not Set"}</Title>
-                </pre>
+                <div className="mt-2 overflow-hidden">
+                  <Tooltip title={modelData.litellm_model_name || "Not Set"}>
+                    <div 
+                      className="break-all text-sm font-medium leading-relaxed cursor-pointer"
+                    >
+                      {modelData.litellm_model_name || "Not Set"}
+                    </div>
+                  </Tooltip>
+                </div>
               </Card>
               <Card>
                 <Text>Pricing</Text>