fix labels list page

Author: wxiaoguang

templates/repo/issue/labels/label_list.tmpl

@@ -26,7 +26,7 @@
 		<div class="divider"></div>
 	{{end}}
 
-	<ul class="issue-label-list">
+	<ul class="issue-label-list muted-links">
 		{{$canEditLabel := and (not $.PageIsOrgSettingsLabels) (not $.Repository.IsArchived) (or $.CanWriteIssues $.CanWritePulls)}}
 		{{$canEditLabel = or $canEditLabel $.PageIsOrgSettingsLabels}}
 		{{range .Labels}}
@@ -42,9 +42,8 @@
 					<a class="open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
 				{{end}}
 			</div>
-			<div class="label-operation tw-flex">
+			<div class="label-operation">
 				{{template "repo/issue/labels/label_archived" .}}
-				<div class="tw-flex tw-ml-auto">
 					{{if $canEditLabel}}
 						<a class="edit-label-button" href="#"
 							data-label-id="{{.ID}}" data-label-name="{{.Name}}" data-label-color="{{.Color}}"
@@ -57,7 +56,6 @@
 							data-modal-confirm-content="{{ctx.Locale.Tr "repo.issues.label_deletion_desc"}}"
 						>{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
 					{{end}}
-				</div>
 			</div>
 		</li>
 		{{end}}

web_src/css/modules/label.css

@@ -16,6 +16,8 @@
   border: 0 solid transparent;
   border-radius: 0.28571429rem;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 a.ui.label {

web_src/css/repo/issue-label.css

@@ -4,41 +4,45 @@
   margin: 0;
 }
 
-.issue-label-list .item {
+.issue-label-list > .item {
   border-bottom: 1px solid var(--color-secondary);
   display: flex;
   padding: 1em 0;
   margin: 0;
 }
 
-.issue-label-list .item:first-child {
+.issue-label-list > .item:first-child {
   padding-top: 0;
 }
 
-.issue-label-list .item:last-child {
+.issue-label-list > .item:last-child {
   border-bottom: none;
   padding-bottom: 0;
 }
 
-.issue-label-list .item .label-title {
+.issue-label-list > .item .label-title {
   width: 33%;
+  padding-right: 1em;
 }
 
-.issue-label-list .item .label-issues {
+.issue-label-list > .item .label-issues {
   width: 33%;
+  padding-right: 1em;
 }
 
-.issue-label-list .item .label-operation {
+.issue-label-list > .item .label-operation {
   width: 33%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  justify-content: end;
 }
 
-.issue-label-list .item a {
+.issue-label-list > .item .label-operation a {
   font-size: 12px;
-  padding-right: 10px;
-  color: var(--color-text-light);
 }
 
-.issue-label-list .item.org-label {
+.issue-label-list > .item.org-label {
   opacity: 0.7;
 }