fix issues

Author: silverwind

templates/repo/issue/card.tmpl

@@ -68,7 +68,6 @@
 				<a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{ctx.RenderUtils.RenderLabel .}}</a>
 			{{end}}
 		</div>
-		<div class="tw-flex-1"></div>
 		<div class="issue-card-assignees">
 			{{range .Assignees}}
 				<a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 24}}</a>

web_src/css/repo.css

@@ -81,13 +81,6 @@
   visibility: hidden;
 }
 
-.issue-sidebar-combo > .ui.list.labels-list {
-  display: flex;
-  flex-wrap: wrap;
-  overflow: hidden;
-  gap: 0.25em;
-}
-
 @media (max-width: 767.98px) {
   .issue-content-left,
   .issue-content-right {
@@ -1556,13 +1549,27 @@ td .commit-summary {
 }
 
 .labels-list {
-  display: contents; /* let parent to layout, recommended to use flex gap */
+  display: inline-flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  gap: 0.25rem;
+  line-height: 1;
+}
+
+/* To let labels break up and wrap across multiple line, we use display: contents here. The parent
+   element (.flex-item .flex-item-title) must have 0.25rem gap for consistent label gap. */
+.flex-list .labels-list {
+  display: contents;
+}
+
+.issue-content-right .labels-list {
+  max-width: 100%;
 }
 
-.labels-list .label, .scope-parent > .label {
+.labels-list .label,
+.scope-parent > .label {
   padding: 0 6px;
   min-height: 20px;
-  line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */
 }
 
 /* Scoped labels with different colors on left and right */

web_src/css/repo/issue-card.css

@@ -28,9 +28,7 @@
 .issue-card-bottom {
   display: flex;
   width: 100%;
-  flex-wrap: wrap;
-  gap: 0.5em 0.25em;
-  align-items: center;
+  gap: 0.25em;
 }
 
 .issue-card-assignees {