From 326958316dcbf16a4f73a57e29651aabb34e814a Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Wed, 17 Jul 2024 12:41:51 +0500
Subject: [PATCH] ui: fix issue labels

---
 .../issue/labels/labels_selector_field.tmpl   |  2 +-
 .../repo/issue/labels/labels_sidebar.tmpl     | 20 +++++++++----------
 tests/integration/issue_test.go               | 17 +++-------------
 web_src/css/modules/label.css                 |  9 +++++++++
 4 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/templates/repo/issue/labels/labels_selector_field.tmpl b/templates/repo/issue/labels/labels_selector_field.tmpl
index e5f15caca5..b4aee41da5 100644
--- a/templates/repo/issue/labels/labels_selector_field.tmpl
+++ b/templates/repo/issue/labels/labels_selector_field.tmpl
@@ -5,7 +5,7 @@
 			{{svg "octicon-gear" 16 "tw-ml-1"}}
 		{{end}}
 	</span>
-	<div class="filter menu" {{if .Issue}}data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels"{{else}}data-id="#label_ids"{{end}}>
+	<div class="filter menu ugc-labels" {{if .Issue}}data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels"{{else}}data-id="#label_ids"{{end}}>
 		{{if or .Labels .OrgLabels}}
 			<div class="ui icon search input">
 				<i class="icon">{{svg "octicon-search" 16}}</i>
diff --git a/templates/repo/issue/labels/labels_sidebar.tmpl b/templates/repo/issue/labels/labels_sidebar.tmpl
index d39c2133a7..81fc97090f 100644
--- a/templates/repo/issue/labels/labels_sidebar.tmpl
+++ b/templates/repo/issue/labels/labels_sidebar.tmpl
@@ -1,13 +1,11 @@
 <div class="ui labels list">
-	<span class="no-select item {{if .root.HasSelectedLabel}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_label"}}</span>
-	{{if .root.HasSelectedLabel}}
-		<span class="labels-list">
-			{{range .root.Labels}}
-				{{template "repo/issue/labels/label" dict "root" $.root "label" .}}
-			{{end}}
-			{{range .root.OrgLabels}}
-				{{template "repo/issue/labels/label" dict "root" $.root "label" .}}
-			{{end}}
-		</span>
-	{{end}}
+	<span class="no-select {{if .root.HasSelectedLabel}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_label"}}</span>
+	<span class="labels-list ugc-labels">
+		{{range .root.Labels}}
+			{{template "repo/issue/labels/label" dict "root" $.root "label" .}}
+		{{end}}
+		{{range .root.OrgLabels}}
+			{{template "repo/issue/labels/label" dict "root" $.root "label" .}}
+		{{end}}
+	</span>
 </div>
diff --git a/tests/integration/issue_test.go b/tests/integration/issue_test.go
index bb16cbbc44..83b75853ab 100644
--- a/tests/integration/issue_test.go
+++ b/tests/integration/issue_test.go
@@ -1129,10 +1129,11 @@ func TestIssueUnsubscription(t *testing.T) {
 
 func TestIssueLabelList(t *testing.T) {
 	defer tests.PrepareTestEnv(t)()
+	// The label list should always be present. When no labels are selected, .no-select is visible, otherwise hidden.
 	labelListSelector := ".labels.list .labels-list"
 	hiddenClass := "tw-hidden"
 
-	t.Run("Show label list", func(t *testing.T) {
+	t.Run("Test label list", func(t *testing.T) {
 		defer tests.PrintCurrentTest(t)()
 
 		req := NewRequest(t, "GET", "/user2/repo1/issues/1")
@@ -1140,18 +1141,6 @@ func TestIssueLabelList(t *testing.T) {
 		htmlDoc := NewHTMLParser(t, resp.Body)
 
 		htmlDoc.AssertElement(t, labelListSelector, true)
-		htmlDoc.AssertElement(t, ".labels.list .no-select.item."+hiddenClass, true)
-	})
-
-	t.Run("Show no label list", func(t *testing.T) {
-		defer tests.PrintCurrentTest(t)()
-		session := loginUser(t, "user2")
-
-		req := NewRequest(t, "GET", "/user2/repo2/issues/1")
-		resp := session.MakeRequest(t, req, http.StatusOK)
-		htmlDoc := NewHTMLParser(t, resp.Body)
-
-		htmlDoc.AssertElement(t, labelListSelector, false)
-		htmlDoc.AssertElement(t, ".labels.list .no-select.item:not([class*='"+hiddenClass+"'])", true)
+		htmlDoc.AssertElement(t, ".labels.list .no-select."+hiddenClass, true)
 	})
 }
diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index 2032b2c84b..bc30baafac 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -98,6 +98,15 @@ a.ui.label:hover {
   display: inline-block !important;
 }
 
+.ugc-labels .item {
+  text-overflow: unset !important;
+}
+
+.ugc-labels .item .ui.label {
+  text-wrap: auto;
+  overflow-wrap: anywhere;
+}
+
 .ui.basic.label {
   background: var(--color-button);
   border: 1px solid var(--color-light-border);