Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable scrolling to address Issue#12308 #12404

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Conversation

PStarH
Copy link

@PStarH PStarH commented Jan 6, 2025

Summary of Changes Made to Enable Scrolling in VarPanel

  1. Container Structure: The main container of the VarPanel component was structured to allow scrolling by ensuring that the outer container has a defined maximum height (maxHeight: '400px') and uses overflow-y-auto to enable vertical scrolling.

  2. Scrollable Areas:

    • The inner content area that displays the variable list and uploaded images was set to be scrollable by applying overflow-y-auto and a maximum height to ensure that it can scroll when the content exceeds the visible area.
    • The value area for each variable was also given a maximum height and overflowY: 'auto' to allow scrolling for long text values.
  3. CSS Classes: Ensured that the appropriate CSS classes (overflow-y-auto, max-h-60, etc.) were applied correctly to avoid any conflicts that might prevent scrolling.

Result

These changes ensure that users can scroll through the content of the VarPanel, including the variable list and any long text values, enhancing usability and accessibility.

Close #12308

Important

Please review the checklist below before submitting your pull request.

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods

PStarH added 2 commits January 6, 2025 18:56
To address bug langgenius#12308, adding a scrolling div to make it able to scroll
@dosubot dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. 📚 documentation Improvements or additions to documentation labels Jan 6, 2025
@crazywoola
Copy link
Member

Please fix the lint errors as well. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📚 documentation Improvements or additions to documentation size:L This PR changes 100-499 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

In the logs of the text generation application, the input variable section cannot be scrolled up or down.
2 participants