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: #13704

* Update templates/shared/issuelist.tmpl

* Update templates/shared/issuelist.tmpl

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

Author: silverwind

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)
 		},
 	}}

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>

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}}">

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;
 }