diff --git a/templates/repo/issue/labels/labels_selector_field.tmpl b/templates/repo/issue/labels/labels_selector_field.tmpl index e5f15caca5..9e54e7a649 100644 --- 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 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 6a0a9c2934..e43347a069 100644 --- a/tests/integration/issue_test.go +++ b/tests/integration/issue_test.go @@ -942,10 +942,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") @@ -953,18 +954,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 0512c5fddb..1bb35c2715 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);