From ec76ac649bee94722e9cc7572415d9418eea2bd4 Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Mon, 23 Feb 2026 08:53:33 +0800
Subject: [PATCH] Fix long model name display issues in modal and cards

- Add overflow-wrap: anywhere to modal title for proper wrapping of hyphenated names
- Add tooltip to model cards showing full filename on hover

Fixes overlap issues with long filenames like s0r4B35G_Zibv3_Prodigy_ID_Version2_Final_00800
---
 static/css/components/lora-modal/lora-modal.css | 1 +
 static/js/components/shared/ModelCard.js        | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/css/components/lora-modal/lora-modal.css b/static/css/components/lora-modal/lora-modal.css
index 71667045..f9229587 100644
--- a/static/css/components/lora-modal/lora-modal.css
+++ b/static/css/components/lora-modal/lora-modal.css
@@ -392,6 +392,7 @@
     border: 1px solid transparent;
     outline: none;
     flex: 1;
+    overflow-wrap: anywhere; /* Allow wrapping at any character, including hyphens */
 }
 
 .model-name-content:focus {
diff --git a/static/js/components/shared/ModelCard.js b/static/js/components/shared/ModelCard.js
index fbd14d1a..2dfa8f3e 100644
--- a/static/js/components/shared/ModelCard.js
+++ b/static/js/components/shared/ModelCard.js
@@ -633,7 +633,7 @@ export function createModelCard(model, modelType) {
             ` : ''}
             <div class="card-footer">
                 <div class="model-info">
-                    <span class="model-name">${getDisplayName(model)}</span>
+                    <span class="model-name" title="${getDisplayName(model).replace(/"/g, '&quot;')}">${getDisplayName(model)}</span>
                     <div>
                         ${model.civitai?.name ? `<span class="version-name">${model.civitai.name}</span>` : ''}
                         ${hasUsageCount ? `<span class="version-name" title="${translate('modelCard.usage.timesUsed', {}, 'Times used')}">${model.usage_count}×</span>` : ''}