Fix Pull Request comment filename word breaks (#19535)

* 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 <me@silverwind.io>
Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
parnic 2022-04-29 04:30:54 -05:00 committed by GitHub
parent 334707fee9
commit 3e2bba0803
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 2 deletions

View file

@ -505,13 +505,13 @@
{{ range $filename, $lines := .Review.CodeComments}} {{ range $filename, $lines := .Review.CodeComments}}
{{range $line, $comms := $lines}} {{range $line, $comms := $lines}}
<div class="ui segments"> <div class="ui segments">
<div class="ui segment py-3 df ac sb word-break"> <div class="ui segment py-3 df ac sb">
{{$invalid := (index $comms 0).Invalidated}} {{$invalid := (index $comms 0).Invalidated}}
{{$resolved := (index $comms 0).IsResolved}} {{$resolved := (index $comms 0).IsResolved}}
{{$resolveDoer := (index $comms 0).ResolveDoer}} {{$resolveDoer := (index $comms 0).ResolveDoer}}
{{$isNotPending := (not (eq (index $comms 0).Review.Type 0))}} {{$isNotPending := (not (eq (index $comms 0).Review.Type 0))}}
<div class="df ac"> <div class="df ac">
<a href="{{(index $comms 0).CodeCommentURL}}" class="file-comment ml-3">{{$filename}}</a> <a href="{{(index $comms 0).CodeCommentURL}}" class="file-comment ml-3 word-break">{{$filename}}</a>
{{if $invalid }} {{if $invalid }}
<span class="ui label basic small ml-3"> <span class="ui label basic small ml-3">
{{$.i18n.Tr "repo.issues.review.outdated"}} {{$.i18n.Tr "repo.issues.review.outdated"}}

View file

@ -27,6 +27,8 @@
.word-break { .word-break {
word-wrap: break-word !important; word-wrap: break-word !important;
word-break: break-word; /* compat: Safari */
overflow-wrap: anywhere;
} }
.ellipsis { .ellipsis {