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>` : ''}