Merge pull request '[v7.0/forgejo] Fix label selector popup width (is…

…sue creation)' (#4636) from gusted/forgejo-bp-labels into v7.0/forgejo Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4636 Reviewed-by: 0ko <0ko@noreply.codeberg.org>
DennisRasey · Jul 23, 2024 · bcb9088 · bcb9088
2 parents 79a7a34 + f7499dd
commit bcb9088
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 27 deletions.
diff --git a/templates/repo/issue/labels/labels_selector_field.tmpl b/templates/repo/issue/labels/labels_selector_field.tmpl
@@ -5,11 +5,11 @@
 			{{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>
-				<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_labels"}}">
+				<input class="tw-w-auto" type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_labels"}}">
 			</div>
 		{{end}}
 		<a class="no-select item" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>

diff --git 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
@@ -942,29 +942,18 @@ 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")
 		resp := MakeRequest(t, req, http.StatusOK)
 		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
@@ -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);