Fix language label vertical alignment (#11061)

Co-authored-by: guillep2k <[email protected]>

Author: silverwind

templates/explore/code.tmpl

@@ -18,7 +18,7 @@
                 </h3>
 				<div>
 					{{range $term := .SearchResultLanguages}}
-					<a class="ui {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}/explore/code?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
+					<a class="ui language-label {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}/explore/code?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
 						<i class="color-icon" style="background-color: {{$term.Color}}"></i>
 						{{$term.Language}}
 						<div class="detail">{{$term.Count}}</div>

templates/repo/search.tmpl

@@ -18,7 +18,7 @@
 			</h3>
 			<div>
 				{{range $term := .SearchResultLanguages}}
-				<a class="ui {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{EscapePound $.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
+				<a class="ui language-label {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{EscapePound $.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
 					<i class="color-icon" style="background-color: {{$term.Color}}"></i>
 					{{$term.Language}}
 					<div class="detail">{{$term.Count}}</div>

web_src/less/_base.less

@@ -1228,3 +1228,12 @@ i.icon.centerlock {
     overflow-x: hidden;
     text-overflow: ellipsis;
 }
+
+.language-label {
+    display: inline-flex !important;
+    align-items: center !important;
+}
+
+.language-label .color-icon {
+    position: static !important;
+}