|
|
|
@@ -51,17 +51,17 @@ const FieldItem = ({ |
|
|
|
<div |
|
|
|
ref={ref} |
|
|
|
className={cn( |
|
|
|
'flex h-8 cursor-pointer items-center justify-between gap-x-1 rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg py-1 pl-2 shadow-xs hover:shadow-sm', |
|
|
|
(isHovering && !readonly) ? 'pr-1' : 'pr-2.5', |
|
|
|
'handle flex h-8 cursor-pointer items-center justify-between gap-x-1 rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg py-1 pl-2 shadow-xs hover:shadow-sm', |
|
|
|
(isHovering && !readonly) ? 'cursor-all-scroll pr-1' : 'pr-2.5', |
|
|
|
readonly && 'cursor-default', |
|
|
|
)} |
|
|
|
onClick={handleOnClickEdit} |
|
|
|
// onClick={handleOnClickEdit} |
|
|
|
> |
|
|
|
<div className='flex grow basis-0 items-center gap-x-1'> |
|
|
|
<div className='flex grow basis-0 items-center gap-x-1 overflow-hidden'> |
|
|
|
{ |
|
|
|
(isHovering && !readonly) |
|
|
|
? <RiDraggable className='handle h-4 w-4 cursor-all-scroll text-text-quaternary' /> |
|
|
|
: <InputField className='size-4 text-text-accent' /> |
|
|
|
? <RiDraggable className='size-4 shrink-0 text-text-quaternary' /> |
|
|
|
: <InputField className='size-4 shrink-0 text-text-accent' /> |
|
|
|
} |
|
|
|
<div |
|
|
|
title={payload.variable} |
|
|
|
@@ -73,10 +73,10 @@ const FieldItem = ({ |
|
|
|
<> |
|
|
|
<div className='system-xs-regular shrink-0 text-text-quaternary'>·</div> |
|
|
|
<div |
|
|
|
title={payload.label as string} |
|
|
|
className='system-xs-medium max-w-[130px] truncate text-text-tertiary' |
|
|
|
title={payload.label} |
|
|
|
className='system-xs-medium grow truncate text-text-tertiary' |
|
|
|
> |
|
|
|
{payload.label as string} |
|
|
|
{payload.label} |
|
|
|
</div> |
|
|
|
</> |
|
|
|
)} |