From 8e5aea88c7095014741f753d5eca14f8f3b6fe2f Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 30 Dec 2020 00:48:28 +0100
Subject: [PATCH] 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>
---
 modules/templates/helper.go            |  2 +-
 templates/repo/issue/labels/label.tmpl |  2 +-
 templates/shared/issuelist.tmpl        |  6 +++---
 web_src/less/_base.less                |  1 +
 web_src/less/_repository.less          | 16 ++--------------
 web_src/less/shared/issuelist.less     |  4 ++++
 6 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/modules/templates/helper.go b/modules/templates/helper.go
index 97d302983..4e767ad44 100644
--- a/modules/templates/helper.go
+++ b/modules/templates/helper.go
@@ -371,7 +371,7 @@ func NewFuncMap() []template.FuncMap {
 		"RenderLabels": func(labels []*models.Label) template.HTML {
 			html := `<span class="labels-list">`
 			for _, label := range labels {
-				html += fmt.Sprintf("<div class='ui label' style='color: %s; background-color: %s'>%s</div>",
+				html += fmt.Sprintf("<div class='ui label' style='color: %s; background-color: %s'>%s</div> ",
 					label.ForegroundColor(), label.Color, RenderEmoji(label.Name))
 			}
 			html += "</span>"
diff --git a/templates/repo/issue/labels/label.tmpl b/templates/repo/issue/labels/label.tmpl
index d76dc6af7..a6d52fe54 100644
--- a/templates/repo/issue/labels/label.tmpl
+++ b/templates/repo/issue/labels/label.tmpl
@@ -5,5 +5,5 @@
 	style="color: {{.label.ForegroundColor}}; background-color: {{.label.Color}}"
 	title="{{.label.Description | RenderEmojiPlain}}"
 >
-		{{.label.Name | RenderEmoji}}
+	{{.label.Name | RenderEmoji}}
 </a>
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 131de83f5..dcaa2474f 100644
--- a/templates/shared/issuelist.tmpl
+++ b/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}}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 23a289a8f..9ae13b8c0 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -176,6 +176,7 @@ body {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
+  overflow-wrap: break-word;
 }
 
 img {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index f0764067f..f0e180019 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2620,23 +2620,11 @@
   }
 }
 
-.labels-list {
-  display: inline-flex;
-  flex-wrap: wrap;
-}
-
 .labels-list .label {
-  margin-top: 1.5px;
-  margin-bottom: 1.5px;
-  margin-right: 3px;
-  margin-left: 0;
+  margin: 2px 0;
   display: inline-block !important;
 }
 
-.labels-list .label:last-of-type {
-  margin-right: 0;
-}
-
 tbody.commit-list {
   vertical-align: baseline;
 }
@@ -2777,7 +2765,7 @@ tbody.commit-list {
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .repo-buttons {
diff --git a/web_src/less/shared/issuelist.less b/web_src/less/shared/issuelist.less
index dec99e135..b1f688e36 100644
--- a/web_src/less/shared/issuelist.less
+++ b/web_src/less/shared/issuelist.less
@@ -29,6 +29,10 @@
       font-size: 16px;
       min-width: 0;
       font-weight: 600;
+
+      > * {
+        vertical-align: middle;
+      }
     }
 
     .issue-item-bottom-row {