fix alignment and ellipsis

Author: wxiaoguang

modules/templates/util_render.go

@@ -137,7 +137,7 @@ func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML {
 
 	if labelScope == "" {
 		// Regular label
-		return htmlutil.HTMLFormat(`<div class="ui label %s" style="color: %s !important; background-color: %s !important;" data-tooltip-content title="%s">%s</div>`,
+		return htmlutil.HTMLFormat(`<div class="ui label %s" style="color: %s !important; background-color: %s !important;" data-tooltip-content title="%s"><span class="gt-ellipsis">%s</span></div>`,
 			extraCSSClasses, textColor, label.Color, descriptionText, ut.RenderEmoji(label.Name))
 	}
 

templates/repo/issue/card.tmpl

@@ -63,10 +63,12 @@
 
 	{{if or .Labels .Assignees}}
 	<div class="issue-card-bottom">
-		<div class="labels-list">
+		<div class="flex-text-inline tw-flex-wrap tw-overflow-hidden">
+			<div class="labels-list">
 			{{range .Labels}}
 				<a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{ctx.RenderUtils.RenderLabel .}}</a>
 			{{end}}
+			</div>
 		</div>
 		<div class="issue-card-assignees">
 			{{range .Assignees}}

web_src/css/base.css

@@ -34,6 +34,8 @@
   /* z-index */
   --z-index-modal: 1001; /* modal dialog, hard-coded from Fomantic modal.css */
   --z-index-toast: 1002; /* should be larger than modal */
+
+  --font-size-label: 14px;
 }
 
 @media (min-width: 768px) and (max-width: 1200px) {

web_src/css/modules/label.css

@@ -6,12 +6,12 @@
   align-items: center;
   gap: .25rem;
   min-width: 0;
-  vertical-align: middle;
+  max-width: 100%;
   line-height: 1;
   background: var(--color-label-bg);
   color: var(--color-label-text);
   padding: 0.3em 0.5em;
-  font-size: 0.85714286rem;
+  font-size: var(--font-size-label);
   font-weight: var(--font-weight-medium);
   border: 0 solid transparent;
   border-radius: 0.28571429rem;

web_src/css/repo.css

@@ -82,6 +82,17 @@
   visibility: hidden;
 }
 
+.issue-content-right .ui.list.labels-list {
+  display: flex;
+  gap: 0.25em;
+  flex-wrap: wrap;
+}
+
+.issue-content-right .ui.list.labels-list .item {
+  display: inline-flex;
+  min-width: 0;
+}
+
 @media (max-width: 767.98px) {
   .issue-content-left,
   .issue-content-right {
@@ -1549,18 +1560,11 @@ td .commit-summary {
   border-bottom-right-radius: 4px;
 }
 
+/* To let labels break up and wrap across multiple lines (issue title, comment event), use "display: contents here" to apply parent layout.
+If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */
 .labels-list {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 2px 0.25rem; /* 2px to make vertical gap look equal */
-  align-content: center;
-  contain: paint;
-}
-
-/* To let labels break up and wrap across multiple lines, we use display: contents here. The parent
-   element (.flex-item-title) must have 0.25rem gap for consistent label gap. */
-.flex-list .labels-list {
   display: contents;
+  font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */
 }
 
 .labels-list .label,