Issue Station
Sign In
Tools hereToolbox

dify - ✅(Solved) Fix show checklist message tooltip when truncated [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#35612•Fetched 2026-04-28 06:50:28
View on GitHub
Comments
0
Participants
1
Timeline
3
Reactions
1
Author
hjlarryhjlarry
Participants
hjlarryhjlarry
Timeline (top)
closed ×1cross-referenced ×1labeled ×1

Fix Action

Fix

  • Wrap checklist sub-item messages with the Dify UI tooltip component.
  • Show the tooltip only when the message is actually truncated by checking scrollWidth > clientWidth.
  • Preserve the existing truncated inline layout and styling.
<img width="848" height="438" alt="Image" src="https://github.com/user-attachments/assets/08ff8003-7c86-4553-8c2e-877edadb6ce6" />

PR fix notes

PR #35613: fix: show full checklist message tooltip instead of truncated

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/35612

<!-- 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/header/checklist/node-group.tsx (modified, +3/-3)
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

Checklist sub-item messages in the workflow header can be truncated when the available width is limited. After truncation, users cannot read the full validation message.

Fix

  • Wrap checklist sub-item messages with the Dify UI tooltip component.
  • Show the tooltip only when the message is actually truncated by checking scrollWidth > clientWidth.
  • Preserve the existing truncated inline layout and styling.
<img width="848" height="438" alt="Image" src="https://github.com/user-attachments/assets/08ff8003-7c86-4553-8c2e-877edadb6ce6" />

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

Wrap checklist sub-item messages with the Dify UI tooltip component to prevent truncation and display full validation messages.

Guidance

  • Check the scrollWidth and clientWidth properties to determine if a message is truncated before showing the tooltip.
  • Preserve the existing inline layout and styling for non-truncated messages.
  • Use the Dify UI tooltip component to display the full message when truncated.
  • Verify the fix by testing with varying screen widths and message lengths.

Example

import { Tooltip } from '@dify/ui';

const ChecklistItem = ({ message }) => {
  const handleMessageTruncation = () => {
    const messageElement = document.getElementById('message');
    if (messageElement.scrollWidth > messageElement.clientWidth) {
      // Show tooltip with full message
      return <Tooltip title={message}>{message}</Tooltip>;
    }
    // Preserve existing layout for non-truncated messages
    return <span>{message}</span>;
  };

  return <div>{handleMessageTruncation()}</div>;
};

Notes

This solution assumes the Dify UI tooltip component is properly configured and imported. Additional styling may be required to ensure a seamless user experience.

Recommendation

Apply workaround: Wrap checklist sub-item messages with the Dify UI tooltip component, as it provides a straightforward solution to display full validation messages without altering the existing layout.

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…
#api#ssr#installation#API versioning#request timeout

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 show checklist message tooltip when truncated [1 pull requests, 1 participants]