From da4bb6fc4ef552865816303fc9c0db25509ff626 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 29 Nov 2020 04:26:03 +0100
Subject: [PATCH] Fix label styles affecting shabox (#13734)

* Fix label styles affecting shabox

Add common parent .labels-list to issue labels lists to prevent
affecting other elements.

Fixes: https://github.com/go-gitea/gitea/issues/13704

* Update templates/shared/issuelist.tmpl

* Update templates/shared/issuelist.tmpl

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
---
 modules/templates/helper.go                   |  9 +++----
 .../repo/issue/labels/labels_sidebar.tmpl     | 14 +++++-----
 templates/shared/issuelist.tmpl               |  8 +++---
 web_src/less/_repository.less                 | 27 +++++--------------
 4 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/modules/templates/helper.go b/modules/templates/helper.go
index 4e5c96cd0f..bb7a3476f2 100644
--- a/modules/templates/helper.go
+++ b/modules/templates/helper.go
@@ -364,13 +364,12 @@ func NewFuncMap() []template.FuncMap {
 			return ""
 		},
 		"RenderLabels": func(labels []*models.Label) template.HTML {
-			html := ""
-
+			html := `<span class="labels-list">`
 			for _, label := range labels {
-				html = fmt.Sprintf("%s<div class='ui label' style='color: %s; background-color: %s'>%s</div>",
-					html, label.ForegroundColor(), label.Color, RenderEmoji(label.Name))
+				html += fmt.Sprintf("<div class='ui label' style='color: %s; background-color: %s'>%s</div>",
+					label.ForegroundColor(), label.Color, RenderEmoji(label.Name))
 			}
-
+			html += "</span>"
 			return template.HTML(html)
 		},
 	}}
diff --git a/templates/repo/issue/labels/labels_sidebar.tmpl b/templates/repo/issue/labels/labels_sidebar.tmpl
index bf6f98c888..1d61ecf3df 100644
--- a/templates/repo/issue/labels/labels_sidebar.tmpl
+++ b/templates/repo/issue/labels/labels_sidebar.tmpl
@@ -1,9 +1,11 @@
 <div class="ui labels list">
 	<span class="no-select item {{if .ctx.HasSelectedLabel}}hide{{end}}">{{.ctx.i18n.Tr "repo.issues.new.no_label"}}</span>
-	{{range .ctx.Labels}}
-		{{template "repo/issue/labels/label" dict "root" $ "label" .}}
-	{{end}}
-	{{range .ctx.OrgLabels}}
-		{{template "repo/issue/labels/label" dict "root" $ "label" .}}
-	{{end}}
+	<span class="labels-list">
+		{{range .ctx.Labels}}
+			{{template "repo/issue/labels/label" dict "root" $ "label" .}}
+		{{end}}
+		{{range .ctx.OrgLabels}}
+			{{template "repo/issue/labels/label" dict "root" $ "label" .}}
+		{{end}}
+	</span>
 </div>
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 9393583862..beb78a5491 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -37,9 +37,11 @@
 							{{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}}
 						{{end}}
 					{{end}}
-					{{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}}
+					<span class="labels-list">
+						{{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}}
+					</span>
 				</div>
 				<div class="desc issue-item-bottom-row df ac fw my-1">
 					<a class="index ml-0 mr-2" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 1f39cc5659..e77e9719c3 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2856,35 +2856,20 @@
   }
 }
 
-.labels.list {
-  display: flex;
+.labels-list {
+  display: inline-flex;
   flex-wrap: wrap;
 }
 
-.labels.list .item,
-.timeline-item .label {
-  padding: .3em .5em !important;
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 3px;
-}
-
-.issue-item-top-row .label {
-  margin-left: 0;
-  margin-right: 0;
+.labels-list .label {
   margin-top: 1.5px;
   margin-bottom: 1.5px;
-}
-
-.labels.list .item,
-.timeline-item .label,
-.issue-item-top-row .label {
   margin-right: 3px;
-  display: inline !important;
+  margin-left: 0;
+  display: inline-block !important;
 }
 
-.timeline-item .label:last-of-type,
-.issue-item-top-row .label:last-of-type {
+.labels-list .label:last-of-type {
   margin-right: 0;
 }