dify icon indicating copy to clipboard operation
dify copied to clipboard

fix: button widths

Open tomoyuki28jp opened this issue 1 year ago • 3 comments

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

  1. Change your language to Japanese
  2. Go to the application list page ( http://localhost:3000/apps )
  3. 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) and cd web && npx lint-staged(frontend) to appease the lint gods
  • [ ] optional I have made corresponding changes to the documentation
  • [ ] optional I have added tests that prove my fix is effective or that my feature works
  • [ ] optional New and existing unit tests pass locally with my changes

Screenshots

スクリーンショット 2024-05-07 16 48 01 スクリーンショット 2024-05-07 16 48 07

tomoyuki28jp avatar May 07 '24 07:05 tomoyuki28jp

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 avatar May 08 '24 07:05 TinsFox

@TinsFox Thank you for your advice! I've also fixed the CSS styles.

tomoyuki28jp avatar May 08 '24 07:05 tomoyuki28jp

@zxhlyh Thank you for your review, I've updated my code to use min-w-20.

tomoyuki28jp avatar May 09 '24 02:05 tomoyuki28jp