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

Big popover overflows from viewport #16466

New Issue
Closed
opened 2026-02-21 19:26:12 -05:00 by yindo · 5 comments
yindo commented 2026-02-21 19:26:12 -05:00
Owner
Copy Link
Copy Source

Originally created by @DavideDelbianco on GitHub (Aug 26, 2025).

Originally assigned to: @zyileven on GitHub.

Self Checks

  • I have read the Contributing Guide and Language Policy.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report, otherwise it will be closed.
  • Please do not modify this template :) and fill in all the required fields.

1. Is this request related to a challenge you're experiencing? Tell me about your story.

If possible the popover should be kept inside the viewport:

Image

In this case I cannot select the top part of the variables because they are out of my viewport

2. Additional context or comments

No response

3. Can you help us with this feature?

  • I am interested in contributing to this feature.
Originally created by @DavideDelbianco on GitHub (Aug 26, 2025). Originally assigned to: @zyileven on GitHub. ### Self Checks - [x] I have read the [Contributing Guide](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) and [Language Policy](https://github.com/langgenius/dify/issues/1542). - [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, otherwise it will be closed. - [x] Please do not modify this template :) and fill in all the required fields. ### 1. Is this request related to a challenge you're experiencing? Tell me about your story. If possible the popover should be kept inside the viewport: <img width="215" height="1087" alt="Image" src="https://github.com/user-attachments/assets/036e50c8-0ce5-4f3e-bd61-eef567bcad78" /> In this case I cannot select the top part of the variables because they are out of my viewport ### 2. Additional context or comments _No response_ ### 3. Can you help us with this feature? - [ ] I am interested in contributing to this feature.
yindo added the 💪 enhancementgood first issue labels 2026-02-21 19:26:12 -05:00
yindo closed this issue 2026-02-21 19:26:12 -05:00
yindo commented 2026-02-21 19:26:12 -05:00
Author
Owner
Copy Link
Copy Source

@zyileven commented on GitHub (Aug 27, 2025):

I am interested in contributing to this feature. Could you assign this task to me? @crazywoola

@zyileven commented on GitHub (Aug 27, 2025): I am interested in contributing to this feature. Could you assign this task to me? @crazywoola
yindo commented 2026-02-21 19:26:13 -05:00
Author
Owner
Copy Link
Copy Source

@crazywoola commented on GitHub (Aug 27, 2025):

Sure @zyileven

@crazywoola commented on GitHub (Aug 27, 2025): Sure @zyileven
yindo commented 2026-02-21 19:26:13 -05:00
Author
Owner
Copy Link
Copy Source

@zyileven commented on GitHub (Aug 27, 2025):

@DavideDelbianco Hi,I didn't reproduce this bug. Could you provide more information? For example, a video

@zyileven commented on GitHub (Aug 27, 2025): @DavideDelbianco Hi,I didn't reproduce this bug. Could you provide more information? For example, a video
yindo commented 2026-02-21 19:26:13 -05:00
Author
Owner
Copy Link
Copy Source

@DavideDelbianco commented on GitHub (Aug 28, 2025):

Yes sure.
The bug is related to the popover calculating its width based on the input text width.
This calculation is not dynamic, it is done when the editor is loaded.
You must enlarge the side panel to its max width.

After reloading the page, with the node editor open, it will cache a big width.
This will make the width of the popover too large to fit on the left side of the input, and it will choose the right side.
Now, depending on the position of the input and the node scroll position, the popover will either anchor to the top right or bottom right.
It will not calculate its max height, and this will make top or bottom variables unreachable depending on whether it opened above or below the input.

Image

@DavideDelbianco commented on GitHub (Aug 28, 2025): Yes sure. The bug is related to the popover calculating its width based on the input text width. This calculation is not dynamic, it is done when the editor is loaded. You must enlarge the side panel to its max width. After reloading the page, with the node editor open, it will cache a big width. This will make the width of the popover too large to fit on the left side of the input, and it will choose the right side. Now, depending on the position of the input and the node scroll position, the popover will either anchor to the top right or bottom right. It will not calculate its max height, and this will make top or bottom variables unreachable depending on whether it opened above or below the input. ![Image](https://github.com/user-attachments/assets/1c87c4dc-c44e-4f80-a173-810c8db9725d)
yindo commented 2026-02-21 19:26:13 -05:00
Author
Owner
Copy Link
Copy Source

@zyileven commented on GitHub (Aug 28, 2025):

@DavideDelbianco Thank you for providing a video to fix the bug. Width is not the main issue of our problem

Image Image

When you click on the first input box and then scroll down to the last one, at this point, the element of the first input box is already outside the viewport, and the popover follows the element that triggered it, so the part of the popover also moves outside the viewport.

My solution is：
Monitor whether the input box element that triggers the popover leaves the view. If it does, hide the popover and display it again when it scrolls back

@zyileven commented on GitHub (Aug 28, 2025): @DavideDelbianco Thank you for providing a video to fix the bug. _Width_ is not the main issue of our problem <img width="478" height="867" alt="Image" src="https://github.com/user-attachments/assets/d9d4a72b-7394-4237-88ee-40fc985f3a38" /> <img width="409" height="926" alt="Image" src="https://github.com/user-attachments/assets/9b566842-91e3-4b10-959c-5f83c8fc6645" /> When you click on the first input box and then scroll down to the last one, at this point, the element of the first input box is already outside the viewport, and the popover follows the element that triggered it, so the part of the popover also moves outside the viewport. **My solution is：** Monitor whether the input box element that triggers the popover leaves the view. If it does, hide the popover and display it again when it scrolls back
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 good first issue 💪 enhancement
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#16466
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?