Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(UploadModel): truncate long filenames in wizard (#7939)

Browse Source 
## 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)
This commit is contained in:
Alexander Brown
2026-01-09 19:56:35 -08:00
committed by GitHub
parent 4b095f3701
commit bce4f876f4
2 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/platform/assets/components/UploadModelConfirmation.vue
View File

@@ -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>

25
src/platform/assets/components/UploadModelProgress.vue
View File

@@ -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>