Skip to content

Incorrect wrapping on PR comments with long paths #16248

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
2 of 6 tasks
parnic-sks opened this issue Jun 25, 2021 · 3 comments · Fixed by #16272 or #19535
Closed
2 of 6 tasks

Incorrect wrapping on PR comments with long paths #16248

parnic-sks opened this issue Jun 25, 2021 · 3 comments · Fixed by #16272 or #19535
Labels
topic/ui Change the appearance of the Gitea UI

Comments

@parnic-sks
Copy link

Description

Comments on files with long paths will not wrap the file name header on a PR if there's no easily-available word boundary to wrap on. This causes the "Outdated" badge and/or "Show Resolved"/"Hide Resolved" links to either overlap other UI elements or be completely obscured, rendering them un-clickable. Note: this is not a contrived example, we ran into this on our project.

Example of a long path with available word boundaries: https://try.gitea.io/parnic-sks/long-paths-test/pulls/1
Example of a long path that doesn't currently wrap: https://try.gitea.io/parnic-sks/long-paths-test-2/pulls/1

Screenshots

Working (valid word boundaries):
image

Not working (no valid word boundaries):
image

Potential fix

Setting word-break: break-word; CSS on one of the segment bits used for PR comment filename headers is one possible way to fix the issue:
image
@noerw noerw added the topic/ui Change the appearance of the Gitea UI label Jun 27, 2021
noerw added a commit to noerw/gitea that referenced this issue Jun 27, 2021
@noerw
review comments: break-word for long file names
8f1c359 
fixes go-gitea#16248
@noerw noerw mentioned this issue Jun 27, 2021
Merged
6543 pushed a commit that referenced this issue Jun 27, 2021
@noerw @zeripath
review comments: break-word for long file names (#16272)
615001d 
* review comments: break-word for long file names

fixes #16248

Co-authored-by: zeripath <[email protected]>
@parnic-sks
Copy link
Author

image

This fix doesn't seem to have taken. The class is now applied at https://try.gitea.io/parnic-sks/long-paths-test-2/pulls/1, but the text still doesn't break.

@parnic-sks
Copy link
Author

image

Also it looks like the Outdated badge will need word-break: normal applied if the parent div has its word-break set to break-word.

@6543 6543 reopened this Jun 29, 2021
@6543
Copy link
Member

6543 commented Jun 29, 2021

#16272 did only fix firefox but in chrome it's still here :X

@6543 6543 changed the title Incorrect wrapping on PR comments with long paths Incorrect wrapping on PR comments with long paths (at Chrome) Jun 29, 2021
AbdulrhmnGhanem pushed a commit to kitspace/gitea that referenced this issue Aug 10, 2021
@noerw @zeripath @AbdulrhmnGhanem
review comments: break-word for long file names (go-gitea#16272)
416e6cf 
* review comments: break-word for long file names

fixes go-gitea#16248

Co-authored-by: zeripath <[email protected]>
parnic added a commit to parnic/gitea that referenced this issue Apr 27, 2022
@parnic
Fix word breaks in Chrome
6707481 
This fixes word wrapping on the filename for a comment on a PR. A previous commit fixed this problem in Firefox, but not Chrome.

Fixes go-gitea#16248
@parnic parnic mentioned this issue Apr 27, 2022
Merged
@parnic-sks parnic-sks changed the title Incorrect wrapping on PR comments with long paths (at Chrome) Incorrect wrapping on PR comments with long paths Apr 28, 2022
lafriks pushed a commit that referenced this issue Apr 29, 2022
@parnic @silverwind
@6543 @lunny
Fix Pull Request comment filename word breaks (#19535)
3e2bba0 
* Fix word breaks in Chrome

This fixes word wrapping on the filename for a comment on a PR. A previous commit fixed this problem in Firefox, but not Chrome.

Fixes #16248

* Don't break Outdated badge

This prevents the Outdated badge on a PR from wrapping in the middle of the word for a comment on a long filename.

* Move word break to recommended element

* Add overflow-wrap per PR review

* Update web_src/less/helpers.less

Co-authored-by: silverwind <[email protected]>
Co-authored-by: 6543 <[email protected]>
Co-authored-by: Lunny Xiao <[email protected]>
Gusted pushed a commit to Gusted/gitea that referenced this issue Apr 30, 2022
@parnic @silverwind
@6543 @lunny
Fix Pull Request comment filename word breaks (go-gitea#19535)
7834260 
* Fix word breaks in Chrome

This fixes word wrapping on the filename for a comment on a PR. A previous commit fixed this problem in Firefox, but not Chrome.

Fixes go-gitea#16248

* Don't break Outdated badge

This prevents the Outdated badge on a PR from wrapping in the middle of the word for a comment on a long filename.

* Move word break to recommended element

* Add overflow-wrap per PR review

* Update web_src/less/helpers.less

Co-authored-by: silverwind <[email protected]>
Co-authored-by: 6543 <[email protected]>
Co-authored-by: Lunny Xiao <[email protected]>
parnic-sks pushed a commit to parnic-sks/gitea that referenced this issue May 16, 2022
@parnic @silverwind
@6543 @lunny @parnic-sks
Fix Pull Request comment filename word breaks (go-gitea#19535)
d299d8f 
* Fix word breaks in Chrome

This fixes word wrapping on the filename for a comment on a PR. A previous commit fixed this problem in Firefox, but not Chrome.

Fixes go-gitea#16248

* Don't break Outdated badge

This prevents the Outdated badge on a PR from wrapping in the middle of the word for a comment on a long filename.

* Move word break to recommended element

* Add overflow-wrap per PR review

* Update web_src/less/helpers.less

Co-authored-by: silverwind <[email protected]>
Co-authored-by: 6543 <[email protected]>
Co-authored-by: Lunny Xiao <[email protected]>
AbdulrhmnGhanem pushed a commit to kitspace/gitea that referenced this issue Aug 24, 2022
@parnic @silverwind
@6543 @lunny @AbdulrhmnGhanem
Fix Pull Request comment filename word breaks (go-gitea#19535)
e4e84fa 
* Fix word breaks in Chrome

This fixes word wrapping on the filename for a comment on a PR. A previous commit fixed this problem in Firefox, but not Chrome.

Fixes go-gitea#16248

* Don't break Outdated badge

This prevents the Outdated badge on a PR from wrapping in the middle of the word for a comment on a long filename.

* Move word break to recommended element

* Add overflow-wrap per PR review

* Update web_src/less/helpers.less

Co-authored-by: silverwind <[email protected]>
Co-authored-by: 6543 <[email protected]>
Co-authored-by: Lunny Xiao <[email protected]>
@go-gitea go-gitea locked and limited conversation to collaborators May 3, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
topic/ui Change the appearance of the Gitea UI
Projects
None yet
Milestone
No milestone
3 participants
@noerw @6543 @parnic-sks