From 23469c20f0b0da673053bfbf7319145d125d853c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 16 Jan 2026 17:42:20 +0000
Subject: [PATCH] Truncate long filenames in Blossom upload dialog via CSS

Uses CSS truncation (w-full, overflow-hidden, truncate) to display
long filenames with ellipsis in the upload dialog UI.
---
 src/components/BlossomUploadDialog.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/BlossomUploadDialog.tsx b/src/components/BlossomUploadDialog.tsx
index c28ef9e..4fd4359 100644
--- a/src/components/BlossomUploadDialog.tsx
+++ b/src/components/BlossomUploadDialog.tsx
@@ -343,7 +343,7 @@ export function BlossomUploadDialog({
               disabled={uploading}
             />
             {selectedFile ? (
-              <div className="flex flex-col items-center gap-2">
+              <div className="flex flex-col items-center gap-2 w-full overflow-hidden">
                 {previewUrl ? (
                   <img
                     src={previewUrl}
@@ -356,7 +356,7 @@ export function BlossomUploadDialog({
                     "size-12 text-muted-foreground",
                   )
                 )}
-                <p className="font-medium text-sm truncate max-w-full">
+                <p className="font-medium text-sm truncate w-full text-center">
                   {selectedFile.name}
                 </p>
                 <p className="text-xs text-muted-foreground">