langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 03:55:25 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #16894] fix(ui): improve chart text spacing and prevent unnecessary truncation #28598

New Issue
Closed
opened 2026-02-21 20:43:45 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:43:45 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/16894

State: closed
Merged: Yes

Summary

Resolves #16624

Problem

In the application overview charts, there was no space between the numeric values and their units (e.g. "19.461Tokens/sec"). Additionally, text was being unnecessarily truncated even when there was sufficient space available for display due to a fixed width constraint.

Solution

  1. Added a space between numeric values and their units to improve readability
  2. Optimized the AppBasic component's text container styles to adapt to available space:
    • Changed from max-w-[180px] truncate to min-w-0 overflow-hidden text-ellipsis break-normal
    • Added w-full to container to utilize available space properly
  3. Improved line breaking behavior to allow text to wrap naturally when needed instead of being cut off
  4. Added min-w-0 class to Chart components to ensure proper container size response

Screenshots

Before After
image image
image image

Checklist

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
**Original Pull Request:** https://github.com/langgenius/dify/pull/16894 **State:** closed **Merged:** Yes --- # Summary Resolves #16624 ## Problem In the application overview charts, there was no space between the numeric values and their units (e.g. "19.461Tokens/sec"). Additionally, text was being unnecessarily truncated even when there was sufficient space available for display due to a fixed width constraint. ## Solution 1. Added a space between numeric values and their units to improve readability 2. Optimized the `AppBasic` component's text container styles to adapt to available space: - Changed from `max-w-[180px] truncate` to `min-w-0 overflow-hidden text-ellipsis break-normal` - Added `w-full` to container to utilize available space properly 3. Improved line breaking behavior to allow text to wrap naturally when needed instead of being cut off 4. Added `min-w-0` class to Chart components to ensure proper container size response # Screenshots | Before | After | |--------|-------| | ![image](https://github.com/user-attachments/assets/f5b62f85-c5a7-4114-8c94-0c57e1800eb9) | ![image](https://github.com/user-attachments/assets/215463b5-0baf-4a46-a905-72fce65b26b3) | | ![image](https://github.com/user-attachments/assets/a5e9d673-f3ce-44e8-a8a4-5cdc19ad1da9) | ![image](https://github.com/user-attachments/assets/8a39e9b1-d828-498b-8009-323143e6590b) | # Checklist > [!IMPORTANT] > Please review the checklist below before submitting your pull request. - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:43:45 -05:00
yindo closed this issue 2026-02-21 20:43:45 -05:00
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 pull-request
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#28598
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?