From 9be090f92921ce66cfbd88b605929f57e9f9f60b Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Wed, 12 Mar 2025 07:41:31 -0700
Subject: [PATCH] [Style] Improve error message in missing models dialog
 (#2997)

---
 src/components/common/FileDownload.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/common/FileDownload.vue b/src/components/common/FileDownload.vue
index 688771f7e..d5be8fcb4 100644
--- a/src/components/common/FileDownload.vue
+++ b/src/components/common/FileDownload.vue
@@ -5,9 +5,20 @@
       <div class="file-details">
         <span class="file-type" :title="hint">{{ label }}</span>
       </div>
-      <div v-if="props.error" class="file-error">
+      <Message
+        v-if="props.error"
+        severity="error"
+        icon="pi pi-exclamation-triangle"
+        size="small"
+        variant="outlined"
+        class="h-min my-2 px-1 max-w-xs"
+        :title="props.error"
+        :pt="{
+          text: { class: 'overflow-hidden text-ellipsis' }
+        }"
+      >
         {{ props.error }}
-      </div>
+      </Message>
     </div>
     <div class="file-action">
       <Button
@@ -25,6 +36,7 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import Message from 'primevue/message'
 import { computed } from 'vue'
 
 import { useDownload } from '@/composables/useDownload'