fix: button widths
Description
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.
Fixes #4133
Type of Change
Please delete options that are not relevant.
- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update, included: Dify Document
- [ ] Improvement, including but not limited to code refactoring, performance optimization, and UI/UX improvement
- [ ] Dependency upgrade
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
- Change your language to Japanese
- Go to the application list page ( http://localhost:3000/apps )
- Edit or delete from the menu in the lower right corner of an existing app.
Suggested Checklist:
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] My changes generate no new warnings
- [ ] I ran
dev/reformat(backend) andcd web && npx lint-staged(frontend) to appease the lint gods - [ ]
optionalI have made corresponding changes to the documentation - [ ]
optionalI have added tests that prove my fix is effective or that my feature works - [ ]
optionalNew and existing unit tests pass locally with my changes
Screenshots
Hye @tomoyuki28jp
I have a small suggestion here. If you modify it like this, you will still have this problem when using this component in other places.
It is better to deal with it in its underlying components to obtain the effect once and for all. We can easily fix it by just adding whitespace-nowrap to this line
https://github.com/langgenius/dify/blob/8137d63000fea6496e6184e30604e6f3967141c5/web/app/components/base/button/index.css#L5
The new code looks like this
.btn {
@apply inline-flex justify-center items-center content-center h-9 leading-5 rounded-lg px-4 py-2 text-base cursor-pointer whitespace-nowrap;
}
@TinsFox Thank you for your advice! I've also fixed the CSS styles.
@zxhlyh Thank you for your review, I've updated my code to use min-w-20.