fix: textarea overlay шире и заметнее, усилена рамка редактируемых полей

- FieldOverlay: border-2 border-primary/50 + shadow-lg для заметной границы
- TaskDetail textarea/rich-text: overlay растянут на всю ширину контентной области, max-height min(70vh, 500px)
- AutoResizeTextarea в TaskDetail: maxRows увеличен до 25
This commit is contained in:
2026-07-14 17:00:26 +03:00
parent 751fd79727
commit 800d7f0b57
3 changed files with 15 additions and 6 deletions

View File

@@ -12,6 +12,8 @@ export interface FieldOverlayProps {
minWidth?: number | string;
/** Максимальная высота оверлея. */
maxHeight?: number | string;
/** Ширина оверлея. */
width?: number | string;
}
export function FieldOverlay({
@@ -21,6 +23,7 @@ export function FieldOverlay({
fitContainer = true,
minWidth,
maxHeight,
width,
}: FieldOverlayProps) {
const [mounted, setMounted] = useState(false);
@@ -34,11 +37,12 @@ export function FieldOverlay({
const style: React.CSSProperties = {};
if (minWidth !== undefined) style.minWidth = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;
if (maxHeight !== undefined) style.maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
if (width !== undefined) style.width = typeof width === 'number' ? `${width}px` : width;
return createPortal(
<div
className={cn(
'absolute z-50 rounded-md border border-input bg-background shadow-sm overflow-hidden',
'absolute z-50 rounded-md border-2 border-primary/50 bg-background shadow-lg overflow-hidden',
fitContainer ? 'inset-0' : 'left-0 top-0 min-w-full',
className
)}

View File

@@ -31,6 +31,8 @@ export interface InlineFieldProps {
overlayMinWidth?: number | string;
/** Максимальная высота оверлея. */
overlayMaxHeight?: number | string;
/** Ширина оверлея. */
overlayWidth?: number | string;
/** Не блокировать клик по интерактивным элементам внутри read-view. */
allowInteractiveReadView?: boolean;
/** Закрывать редактор по клику вне (по умолчанию true). */
@@ -51,6 +53,7 @@ export function InlineField({
fitOverlay = true,
overlayMinWidth = 200,
overlayMaxHeight,
overlayWidth,
allowInteractiveReadView = true,
closeOnClickOutside = true,
activateOnClick = false,
@@ -148,6 +151,7 @@ export function InlineField({
fitContainer={fitOverlay}
minWidth={overlayMinWidth}
maxHeight={overlayMaxHeight}
width={overlayWidth}
>
{editor}
</FieldOverlay>

View File

@@ -986,9 +986,9 @@ function FieldValueRow({
if (field.type === 'textarea' || field.type === 'rich-text') {
return (
<AutoResizeTextarea
className={cn(textareaClass, 'font-mono text-xs')}
className={cn(textareaClass, 'font-mono text-xs min-h-full')}
minRows={2}
maxRows={10}
maxRows={25}
value={editorValue === null || editorValue === undefined ? '' : String(editorValue)}
onChange={e => onDraftChange?.(e.target.value)}
onClick={e => e.stopPropagation()}
@@ -1301,9 +1301,10 @@ 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' ? 320 : undefined}
overlayMinWidth={field.type === 'textarea' || field.type === 'rich-text' ? 300 : 180}
className={field.type === 'textarea' || field.type === 'rich-text' ? 'items-start min-h-[24px]' : 'items-center min-h-[28px]'}
overlayMaxHeight={field.type === 'textarea' || field.type === 'rich-text' ? 'min(70vh, 500px)' : 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]'}
/>
) : readViewNode;
})()}