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>

Changes

2 changed files (+4/-2)

• templates/repo/issue/view_content/comments.tmpl
  • @@ -505,13 +505,13 @@
    {{ range $filename, $lines := .Review.CodeComments}} {{range $line, $comms := $lines}} <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}} {{$resolved := (index $comms 0).IsResolved}} {{$resolveDoer := (index $comms 0).ResolveDoer}} {{$isNotPending := (not (eq (index $comms 0).Review.Type 0))}} <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 }} <span class="ui label basic small ml-3"> {{$.i18n.Tr "repo.issues.review.outdated"}}
• web_src/less/helpers.less
  • @@ -27,6 +27,8 @@
    .word-break { word-wrap: break-word !important; + word-break: break-word; /* compat: Safari */ + overflow-wrap: anywhere; } .ellipsis {