From 2fc849bfa5be99b8c28277b859bda7bfe4b2ce6c Mon Sep 17 00:00:00 2001
From: Raph <30925823+haofeng0705@users.noreply.github.com>
Date: Thu, 26 Feb 2026 17:21:32 +0800
Subject: [PATCH] fix(ui): improve file mention autocomplete display for long
 filenames (#519)

- Increased max-width of the autocomplete container from 520px to 640px.
- Updated truncatePathMiddle maxLength from 45 to 60 for better visibility.
- Added a fade-out mask to the marquee container to prevent abrupt clipping.
---
 packages/ui/src/components/chat/FileMentionAutocomplete.tsx | 4 ++--
 packages/ui/src/index.css                                   | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
index fa5fa84a..be47a5da 100644
--- a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
+++ b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
@@ -368,7 +368,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
   return (
       <div
         ref={containerRef}
-        className="absolute z-[100] min-w-0 w-full max-w-[520px] max-h-64 bg-background border-2 border-border/60 rounded-xl shadow-none bottom-full mb-2 left-0 flex flex-col"
+        className="absolute z-[100] min-w-0 w-full max-w-[640px] max-h-64 bg-background border-2 border-border/60 rounded-xl shadow-none bottom-full mb-2 left-0 flex flex-col"
         style={style}
       >
         {showTabs ? (
@@ -446,7 +446,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
             {files.map((file, index) => {
               const rowIndex = visibleAgents.length + index;
               const relativePath = file.relativePath || file.name;
-              const displayPath = truncatePathMiddle(relativePath, { maxLength: 45 });
+              const displayPath = truncatePathMiddle(relativePath, { maxLength: 60 });
               const isSelected = selectedIndex === rowIndex;
               const isOverflowing = overflowMap[rowIndex] ?? false;
               const marqueeDuration = marqueeDurations[rowIndex] ?? 2.6;
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index 93b5eb2d..9150fbba 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -300,6 +300,8 @@ textarea[data-chat-input="true"]:focus-visible {
 .file-mention-marquee-container {
   --file-mention-marquee-width: 360px;
   --file-mention-marquee-duration: 4s;
+  mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
 }
 
 .file-mention-marquee {