dosubot[bot]
commented
2 weeks ago Hello @xinghuo-assistant! I'm a bot here to help you with bug fixes, questions, and contributions. Let me know how I can assist you with the issue you've posted.
To resolve the issue of the scrollbar appearing in the node panel when the node single run panel is displayed in Dify version 0.6.11, you need to adjust the CSS class for the container div to ensure that the overflow is hidden when isShowSingleRun is true.
Here's the relevant part of the code with the necessary adjustment:
return (
<div className={cn(
'relative mr-2 h-full',
isShowSingleRun && '!absolute !mr-0 w-[384px] overflow-hidden -top-[5px] right-[416px] z-0 shadow-lg border-[0.5px] border-gray-200 rounded-2xl transition-all',
)}>
<div
ref={triggerRef}
className='absolute top-1/2 -translate-y-1/2 -left-2 w-3 h-6 cursor-col-resize resize-x'>
<div className='w-1 h-6 bg-gray-300 rounded-sm'></div>
</div>
<div
ref={containerRef}
className={cn(
'relative h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl',
isShowSingleRun ? 'overflow-hidden' : 'overflow-y-auto'
)}
style={{
width: `${panelWidth}px`,
}}
>
<div className='sticky top-0 bg-white border-b-[0.5px] border-black/5 z-10'>
<div className='flex items-center px-4 pt-4 pb-1'>
<BlockIcon
className='shrink-0 mr-1'
type={data.type}
toolIcon={toolIcon}
size='md'
/>
<TitleInput
value={data.title || ''}
onBlur={handleTitleBlur}
/>
<div className='shrink-0 flex items-center text-gray-500'>
{
canRunBySingle(data.type) && !nodesReadOnly && (
<TooltipPlus
popupContent={t('workflow.panel.runThisStep')}
>
<div
className='flex items-center justify-center mr-1 w-6 h-6 rounded-md hover:bg-black/5 cursor-pointer'
onClick={() => {
handleNodeDataUpdate({ id, data: { _isSingleRun: true } })
handleSyncWorkflowDraft(true)
}}
>
<Play className='w-4 h-4 text-gray-500' />
</div>
</TooltipPlus>
)
}
<HelpLink nodeType={data.type} />
<PanelOperator id={id} data={data} showHelpLink={false} />
<div className='mx-3 w-[1px] h-3.5 bg-gray-200' />
<div
className='flex items-center justify-center w-6 h-6 cursor-pointer'
onClick={() => handleNodeSelect(id, true)}
>
<XClose className='w-4 h-4' />
</div>
</div>
</div>
<div className='p-2'>
<DescriptionInput
value={data.desc || ''}
onChange={handleDescriptionChange}
/>
</div>
</div>
<div className='py-2'>
{cloneElement(children, { id, data })}
</div>
{
!!availableNextBlocks.length && (
<div className='p-4 border-t-[0.5px] border-t-black/5'>
<div className='flex items-center mb-1 text-gray-700 text-[13px] font-semibold'>
{t('workflow.panel.nextStep').toLocaleUpperCase()}
</div>
<div className='mb-2 text-xs text-gray-400'>
{t('workflow.panel.addNextStep')}
</div>
<NextStep selectedNode={{ id, data } as Node} />
</div>
)
}
</div>
</div>
)
}By adding the conditional class overflow-hidden when isShowSingleRun is true, you can prevent the scrollbar from appearing in the node panel [1][2].
To continue talking to Dosu, mention @dosu.
zxhlyh
Self Checks
Dify version
0.6.11
Cloud or Self Hosted
Cloud, Self Hosted (Docker), Self Hosted (Source)
Steps to reproduce
node single run panel show the node panel scrollbar
✔️ Expected Behavior
when node single run panel show, the node panel should be overflow-hidden.
❌ Actual Behavior
node single run panel show the node panel scrollbar
