dify - ✅(Solved) Fix variable display incorrect width [1 pull requests, 1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
langgenius/dify#35586Fetched 2026-04-28 06:50:44
View on GitHub
Comments
0
Participants
1
Timeline
4
Reactions
1
Author
Participants
Timeline (top)
labeled ×2closed ×1cross-referenced ×1

Fix Action

Fixed

PR fix notes

PR #35587: fix: improve variable picker text width allocation

Description (problem / solution / changelog)

[!IMPORTANT]

  1. Make sure you have read our contribution guidelines
  2. Ensure there is an associated issue and you have been assigned to it
  3. Use the correct syntax to link this PR: Fixes #<issue number>.

Summary

fix https://github.com/langgenius/dify/issues/35586

<!-- Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. --> <!-- If this PR was created by an automated agent, add `From <Tool Name>` as the final line of the description. Example: `From Codex`. -->

Screenshots

BeforeAfter
......

Checklist

  • 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 make lint && make type-check (backend) and cd web && pnpm exec vp staged (frontend) to appease the lint gods

Changed files

  • web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.helpers.spec.ts (modified, +10/-0)
  • web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.helpers.ts (modified, +6/-2)
  • web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx (modified, +4/-2)
RAW_BUFFERClick to expand / collapse

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.

Issue

The variable reference picker allocates display width based on node name, variable name, and type text. However, the allocation did not fully match the actual rendered content.

For variables that do not render a node name, such as sys.user_id, the variable name could still lose space due to the node-name priority offset, causing unnecessary truncation.

For variables with a node name but a very short variable name, such as User Input / aa / String, the computed variable-name width could become too small, making the variable name disappear entirely.

<img width="922" height="670" alt="Image" src="https://github.com/user-attachments/assets/d66003b3-40f2-4080-9401-74ac9e573813" />

Expected

<img width="876" height="632" alt="Image" src="https://github.com/user-attachments/assets/c2d10763-453d-482d-a13d-82a5f3536786" />

2. Additional context or comments

No response

3. Can you help us with this feature?

  • I am interested in contributing to this feature.

extent analysis

TL;DR

Adjust the variable reference picker's display width allocation to account for cases where node names are missing or very short, ensuring proper rendering of variable names.

Guidance

  • Review the current width allocation logic to identify where the node-name priority offset is being applied and consider adding conditions to handle cases where node names are missing.
  • Consider introducing a minimum width threshold for variable names to prevent them from disappearing when node names are present but very short.
  • Examine the rendering of variables like sys.user_id to understand how the current allocation is causing unnecessary truncation and adjust the logic accordingly.
  • Test the updated allocation logic with various scenarios, including those shown in the provided images, to ensure proper rendering of variable names.

Example

No code snippet is provided as the issue does not contain specific code references.

Notes

The solution may require adjustments to the existing UI layout or rendering logic, and thorough testing will be necessary to ensure that the changes do not introduce new issues.

Recommendation

Apply a workaround by introducing a minimum width threshold for variable names and adjusting the width allocation logic to handle cases where node names are missing or very short, as this approach directly addresses the identified issues without requiring a version upgrade.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING