fix: textarea раскрывается по высоте текста, файлы горизонтально

- textarea overlay max-height увеличен до min(85vh, 700px)
- убрана правая кнопка 'Добавить файл' (дубль левой иконки)
- файлы идут горизонтально, длинные имена обрезаются ellipsis, список занимает доступную ширину
This commit is contained in:
2026-07-14 19:50:32 +03:00
parent 800d7f0b57
commit d35d0cd1ef

View File

@@ -542,23 +542,23 @@ function FileFieldRow({
<span className="text-muted-foreground text-sm">Загрузка...</span>
) : files.length > 0 ? (
<>
<div className="inline-flex flex-wrap items-center gap-x-2 gap-y-0.5">
<div className="flex flex-1 min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">
{files.map((fileInfo, idx) => {
const vType = detectViewerType(fileInfo.url, fileInfo.name);
const canPreview = vType === 'pdf' || vType === 'word' || vType === 'excel' || vType === 'powerpoint' || vType === 'video' || vType === 'audio' || vType === 'image';
return (
<span key={idx} className="inline-flex items-center gap-1 group/file bg-muted/40 hover:bg-muted/60 rounded px-1.5 py-0.5">
<span key={idx} className="inline-flex items-center gap-1 group/file bg-muted/40 hover:bg-muted/60 rounded px-1.5 py-0.5 min-w-0 max-w-full">
{canPreview ? (
<button
type="button"
onClick={() => setViewerFile({ url: fileInfo.url, name: fileInfo.name })}
className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
className="inline-flex items-center gap-1 text-sm text-primary hover:underline min-w-0"
data-testid={`file-link-${field.code}-${idx}`}
>
<FileText className="w-3 h-3" />
{fileInfo.name}
<FileText className="w-3 h-3 shrink-0" />
<span className="truncate max-w-[200px]">{fileInfo.name}</span>
{fileInfo.size !== undefined && (
<span className="text-muted-foreground text-xs">({formatFileSize(fileInfo.size)})</span>
<span className="text-muted-foreground text-xs shrink-0">({formatFileSize(fileInfo.size)})</span>
)}
</button>
) : (
@@ -567,15 +567,15 @@ function FileFieldRow({
onClick={(e) => { e.preventDefault(); openFilePresigned(fileInfo.url); }}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
className="inline-flex items-center gap-1 text-sm text-primary hover:underline min-w-0"
data-testid={`file-link-${field.code}-${idx}`}
>
<FileText className="w-3 h-3" />
{fileInfo.name}
<FileText className="w-3 h-3 shrink-0" />
<span className="truncate max-w-[200px]">{fileInfo.name}</span>
{fileInfo.size !== undefined && (
<span className="text-muted-foreground text-xs">({formatFileSize(fileInfo.size)})</span>
<span className="text-muted-foreground text-xs shrink-0">({formatFileSize(fileInfo.size)})</span>
)}
<Download className="w-3 h-3 text-muted-foreground" />
<Download className="w-3 h-3 text-muted-foreground shrink-0" />
</a>
)}
<button
@@ -590,16 +590,6 @@ function FileFieldRow({
);
})}
</div>
{(field.maxFileCount == null || files.length < field.maxFileCount) && (
<button
onClick={() => fileInputRef.current?.click()}
disabled={isUploading}
className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground disabled:opacity-30"
>
<Upload className="w-3 h-3" />
Добавить файл
</button>
)}
</>
) : (
<span className="text-muted-foreground text-sm" data-testid={`file-empty-${field.code}`}>Нет файла</span>
@@ -1301,7 +1291,7 @@ function FieldValueRow({
onEnterEdit={handleEnterEdit}
fitOverlay={field.type !== 'textarea' && field.type !== 'rich-text'}
overlayClassName={field.type === 'textarea' || field.type === 'rich-text' ? 'flex flex-col overflow-hidden' : ''}
overlayMaxHeight={field.type === 'textarea' || field.type === 'rich-text' ? 'min(70vh, 500px)' : undefined}
overlayMaxHeight={field.type === 'textarea' || field.type === 'rich-text' ? 'min(85vh, 700px)' : undefined}
overlayMinWidth={field.type === 'textarea' || field.type === 'rich-text' ? '100%' : 180}
overlayWidth={field.type === 'textarea' || field.type === 'rich-text' ? '100%' : undefined}
className={field.type === 'textarea' || field.type === 'rich-text' ? 'items-start min-h-[24px] w-full' : 'items-center min-h-[28px]'}