dify - ✅(Solved) Fix the chat variable object edit area disalignment [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#35615Fetched 2026-04-29 06:36:34
View on GitHub
Comments
0
Participants
1
Timeline
3
Reactions
1
Author
Participants
Timeline (top)
closed ×1cross-referenced ×1labeled ×1

Root Cause

The remove button in the chat variable object value row was not aligned with the value input. It could wrap to a new line or overflow vertically because the shared RemoveButton uses a larger button size than the object value row height.

Fix Action

Fix

  • Use a local ActionButton with a smaller size for the object value row.
  • Position the button inside the value cell so it stays aligned with the corresponding row.
  • Add right padding to the value input to prevent the text from overlapping the delete button.

PR fix notes

PR #35616: fix: align object value remove button of chat variable

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

<!-- 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`. -->

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

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/panel/chat-variable-panel/components/object-value-item.tsx (modified, +11/-6)
RAW_BUFFERClick to expand / collapse

Self Checks

  • I have read the Contributing Guide and Language Policy.
  • 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, otherwise it will be closed.
  • 【中文用户 & Non English User】请使用英语提交,否则会被关闭 :)
  • Please do not modify this template :) and fill in all the required fields.

Dify version

latest main

Cloud or Self Hosted

Self Hosted (Source)

Steps to reproduce

Issue

The remove button in the chat variable object value row was not aligned with the value input. It could wrap to a new line or overflow vertically because the shared RemoveButton uses a larger button size than the object value row height.

<img width="1334" height="1222" alt="Image" src="https://github.com/user-attachments/assets/41a1a196-df0b-4119-b096-b0683a6f26ec" />

Fix

  • Use a local ActionButton with a smaller size for the object value row.
  • Position the button inside the value cell so it stays aligned with the corresponding row.
  • Add right padding to the value input to prevent the text from overlapping the delete button.

✔️ Expected Behavior

<img width="982" height="872" alt="Image" src="https://github.com/user-attachments/assets/25bab8ff-021f-4147-9a66-550c3cce3ecc" />

❌ Actual Behavior

No response

extent analysis

TL;DR

Use a local ActionButton with a smaller size and adjust positioning to align the remove button with the object value row.

Guidance

  • Replace the shared RemoveButton with a local ActionButton to allow for size customization.
  • Position the button inside the value cell to maintain alignment with the corresponding row.
  • Add right padding to the value input to prevent text overlap with the delete button.
  • Verify the fix by checking the alignment and overflow behavior of the remove button in different scenarios.

Example

No code snippet is provided as the issue does not include specific code details.

Notes

This solution assumes that the ActionButton component can be customized to a smaller size and that the value cell can accommodate the button without affecting the overall layout.

Recommendation

Apply workaround: Use a local ActionButton with a smaller size and adjust positioning to align the remove button with the object value row, as this approach directly addresses the reported issue.

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

dify - ✅(Solved) Fix the chat variable object edit area disalignment [1 pull requests, 1 participants]