Improve label and text wrapping (#14113)

* Improve label wrapping

- Adjust issue list styles so labels can wrap on the same line as the
  text. This relies on `display: inline` with the HTML whitespace being
  used as the separator.
- Add global word-break: break-word. This should generally avoid text
  overflows in various places.

* add whitespace to history labels

* use overflow-wrap

* restore word-break rules

* use correct pre

* use better selector for middle align

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

templates/shared/issuelist.tmpl

@@ -30,8 +30,8 @@
 				</div>
 			</div>
 			<div class="issue-item-main f1 fc df">
-				<div class="issue-item-top-row df ac fw">
-					<a class="title mr-3" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+				<div class="issue-item-top-row">
+					<a class="title" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 						{{RenderEmoji .Title}}
 						{{if .IsPull }}
 							{{if (index $.CommitStatus .PullRequest.ID)}}
@@ -39,7 +39,7 @@
 							{{end}}
 						{{end}}
 					</a>
-					<span class="labels-list">
+					<span class="labels-list ml-2">
 						{{range .Labels}}
 							<a class="ui label" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
 						{{end}}