From bce4f876f497df0fa89486b52626cbf9377160b1 Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Fri, 9 Jan 2026 19:56:35 -0800
Subject: [PATCH] fix(UploadModel): truncate long filenames in wizard (#7939)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Truncate long filenames in the model upload wizard to prevent dialog
overflow.

## Changes

- **UploadModelConfirmation**: Added `min-w-0 flex-1 truncate` to model
filename display
- **UploadModelProgress**: Added truncation to both processing and
success state filename displays

## Testing

1. Import a model with a very long filename
2. Verify the filename truncates with ellipsis instead of expanding the
dialog

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7939-fix-UploadModel-truncate-long-filenames-in-wizard-2e46d73d365081a0a60bd6326129b9a4)
by [Unito](https://www.unito.io)
---
 .../components/UploadModelConfirmation.vue    |  6 ++---
 .../assets/components/UploadModelProgress.vue | 25 +++++++++++--------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/platform/assets/components/UploadModelConfirmation.vue b/src/platform/assets/components/UploadModelConfirmation.vue
index ceef74930..881b47d32 100644
--- a/src/platform/assets/components/UploadModelConfirmation.vue
+++ b/src/platform/assets/components/UploadModelConfirmation.vue
@@ -5,15 +5,15 @@
         {{ $t('assetBrowser.modelAssociatedWithLink') }}
       </p>
       <div
-        class="flex items-center gap-3 bg-secondary-background p-3 rounded-lg"
+        class="flex items-center gap-3 rounded-lg bg-secondary-background p-3"
       >
         <img
           v-if="previewImage"
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
-          class="w-14 h-14 rounded object-cover flex-shrink-0"
+          class="size-14 flex-shrink-0 rounded object-cover"
         />
-        <p class="m-0 text-base-foreground">
+        <p class="m-0 min-w-0 flex-1 truncate text-base-foreground">
           {{ metadata?.filename || metadata?.name }}
         </p>
       </div>
diff --git a/src/platform/assets/components/UploadModelProgress.vue b/src/platform/assets/components/UploadModelProgress.vue
index e541e9bc0..eb9ea7f3c 100644
--- a/src/platform/assets/components/UploadModelProgress.vue
+++ b/src/platform/assets/components/UploadModelProgress.vue
@@ -10,19 +10,21 @@
       </p>
 
       <div
-        class="flex flex-row items-center gap-3 p-4 bg-modal-card-background rounded-lg"
+        class="flex flex-row items-center gap-3 rounded-lg bg-modal-card-background p-4"
       >
         <img
           v-if="previewImage"
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
-          class="w-14 h-14 rounded object-cover flex-shrink-0"
+          class="size-14 flex-shrink-0 rounded object-cover"
         />
-        <div class="flex flex-col justify-center items-start gap-1 flex-1">
-          <p class="text-base-foreground m-0">
+        <div
+          class="flex min-w-0 flex-1 flex-col items-start justify-center gap-1"
+        >
+          <p class="m-0 w-full truncate text-base-foreground">
             {{ metadata?.filename || metadata?.name }}
           </p>
-          <p class="text-sm text-muted m-0">
+          <p class="m-0 text-sm text-muted">
             {{ modelType }}
           </p>
         </div>
@@ -39,20 +41,21 @@
       </p>
 
       <div
-        class="flex flex-row items-center gap-3 p-4 bg-modal-card-background rounded-lg"
+        class="flex flex-row items-center gap-3 rounded-lg bg-modal-card-background p-4"
       >
         <img
           v-if="previewImage"
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
-          class="w-14 h-14 rounded object-cover flex-shrink-0"
+          class="size-14 flex-shrink-0 rounded object-cover"
         />
-        <div class="flex flex-col justify-center items-start gap-1 flex-1">
-          <p class="text-base-foreground m-0">
+        <div
+          class="flex min-w-0 flex-1 flex-col items-start justify-center gap-1"
+        >
+          <p class="m-0 w-full truncate text-base-foreground">
             {{ metadata?.filename || metadata?.name }}
           </p>
-          <p class="text-sm text-muted m-0">
-            <!-- Going to want to add another translation here to get a nice display name. -->
+          <p class="m-0 text-sm text-muted">
             {{ modelType }}
           </p>
         </div>