langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 12:05:30 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

node single run panel show the node panel scrollbar #4252

New Issue
Closed
opened 2026-02-21 18:05:24 -05:00 by yindo · 2 comments
yindo commented 2026-02-21 18:05:24 -05:00
Owner
Copy Link
Copy Source

Originally created by @xinghuo-assistant on GitHub (Jun 25, 2024).

Originally assigned to: @iamjoel on GitHub.

Self Checks

  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
  • Please do not modify this template :) and fill in all the required fields.

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
scrollbar show error
scrollbar

Originally created by @xinghuo-assistant on GitHub (Jun 25, 2024). Originally assigned to: @iamjoel on GitHub. ### Self Checks - [X] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [X] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [X] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [X] Please do not modify this template :) and fill in all the required fields. ### 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 ![scrollbar show error](https://github.com/langgenius/dify/assets/143053515/c415a6a8-c86c-4156-917e-5ca0b525de1d) ![scrollbar](https://github.com/langgenius/dify/assets/143053515/2e738643-a901-4e84-9545-02acfb64d8c9)
yindo added the 🐞 bug label 2026-02-21 18:05:24 -05:00
yindo closed this issue 2026-02-21 18:05:24 -05:00
yindo commented 2026-02-21 18:05:25 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Jun 25, 2024):

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.

@dosubot[bot] commented on GitHub (Jun 25, 2024): <!-- Greeting --> 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. <!-- Answer --> 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: ```tsx 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 <sup>[[1]](https://github.com/langgenius/dify/blob/main/web/app/components/workflow/nodes/_base/panel.tsx)</sup><sup>[[2]](https://github.com/langgenius/dify/blob/main/web/app/components/workflow/nodes/code/panel.tsx)</sup>. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
yindo commented 2026-02-21 18:05:25 -05:00
Author
Owner
Copy Link
Copy Source

@zxhlyh commented on GitHub (Jun 25, 2024):

fixed #5574

@zxhlyh commented on GitHub (Jun 25, 2024): fixed #5574
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label 🐞 bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#4252
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?