BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): improve file mention autocomplete display for long filenames (#519)

Browse Source 
- 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.
This commit is contained in:
Raph
2026-02-26 11:21:32 +02:00
committed by GitHub
parent f372294800
commit 2fc849bfa5
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/FileMentionAutocomplete.tsx
+2 -2
View File
@@ -368,7 +368,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
return ( return (
<div <div
ref={containerRef} 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} style={style}
> >
{showTabs ? ( {showTabs ? (
@@ -446,7 +446,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
{files.map((file, index) => { {files.map((file, index) => {
const rowIndex = visibleAgents.length + index; const rowIndex = visibleAgents.length + index;
const relativePath = file.relativePath || file.name; const relativePath = file.relativePath || file.name;
const displayPath = truncatePathMiddle(relativePath, { maxLength: 45 }); const displayPath = truncatePathMiddle(relativePath, { maxLength: 60 });
const isSelected = selectedIndex === rowIndex; const isSelected = selectedIndex === rowIndex;
const isOverflowing = overflowMap[rowIndex] ?? false; const isOverflowing = overflowMap[rowIndex] ?? false;
const marqueeDuration = marqueeDurations[rowIndex] ?? 2.6; const marqueeDuration = marqueeDurations[rowIndex] ?? 2.6;
packages/ui/src/index.css
+2
View File
@@ -300,6 +300,8 @@ textarea[data-chat-input="true"]:focus-visible {
.file-mention-marquee-container { .file-mention-marquee-container {
--file-mention-marquee-width: 360px; --file-mention-marquee-width: 360px;
--file-mention-marquee-duration: 4s; --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 { .file-mention-marquee {