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 <[email protected]>
Co-authored-by: 6543 <[email protected]>
Co-authored-by: Lunny Xiao <[email protected]>

Author: 4 people

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 {