From 791aa5352f4fd1661e943c284be647b7ba46de14 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 28 Apr 2023 11:58:58 +0800
Subject: [PATCH 1/8] fix

---
 templates/admin/dashboard.tmpl              |  22 ++--
 templates/base/footer_content.tmpl          |   4 +-
 templates/org/team/members.tmpl             |   4 +-
 templates/org/team/repositories.tmpl        |   4 +-
 templates/repo/diff/conversation.tmpl       |   4 +-
 templates/repo/issue/labels/label_list.tmpl | 123 ++++++++++----------
 web_src/css/base.css                        |  34 +-----
 web_src/css/helpers.css                     |   3 +
 web_src/css/home.css                        |   8 +-
 web_src/css/index.css                       |   1 +
 web_src/css/repository-issue-label.css      |  44 +++++++
 11 files changed, 132 insertions(+), 119 deletions(-)
 create mode 100644 web_src/css/repository-issue-label.css

diff --git a/templates/admin/dashboard.tmpl b/templates/admin/dashboard.tmpl
index 678445137660c..91a84aebf5514 100644
--- a/templates/admin/dashboard.tmpl
+++ b/templates/admin/dashboard.tmpl
@@ -23,51 +23,51 @@
 					<tbody>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.delete_inactive_accounts"}}</td>
-							<td><button type="submit" class="ui green button right" name="op" value="delete_inactive_accounts">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td class="text right"><button type="submit" class="ui green button" name="op" value="delete_inactive_accounts">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.delete_repo_archives"}}</td>
-							<td><button type="submit" class="ui green button right" name="op" value="delete_repo_archives">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td class="text right"><button type="submit" class="ui green button" name="op" value="delete_repo_archives">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.delete_missing_repos"}}</td>
-							<td><button type="submit" class="ui green button right" name="op" value="delete_missing_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td class="text right"><button type="submit" class="ui green button" name="op" value="delete_missing_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.git_gc_repos"}}</td>
-							<td><button type="submit" class="ui green button right" name="op" value="git_gc_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td class="text right"><button type="submit" class="ui green button" name="op" value="git_gc_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						{{if and (not .SSH.Disabled) (not .SSH.StartBuiltinServer)}}
 							<tr>
 								<td>{{.locale.Tr "admin.dashboard.resync_all_sshkeys"}}<br>
 								{{.locale.Tr "admin.dashboard.resync_all_sshkeys.desc"}}</td>
-								<td><button type="submit" class="ui green button right" name="op" value="resync_all_sshkeys">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+								<td class="text right"><button type="submit" class="ui green button" name="op" value="resync_all_sshkeys">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 							</tr>
 							<tr>
 								<td>{{.locale.Tr "admin.dashboard.resync_all_sshprincipals"}}<br>
 								{{.locale.Tr "admin.dashboard.resync_all_sshprincipals.desc"}}</td>
-								<td><button type="submit" class="ui green button right" name="op" value="resync_all_sshprincipals">{{svg "octicon-play" 16}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+								<td class="text right"><button type="submit" class="ui green button" name="op" value="resync_all_sshprincipals">{{svg "octicon-play" 16}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 							</tr>
 						{{end}}
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.resync_all_hooks"}}</td>
-							<td><button type="submit" class="ui green button right" name="op" value="resync_all_hooks">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td class="text right"><button type="submit" class="ui green button" name="op" value="resync_all_hooks">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.reinit_missing_repos"}}</td>
-							<td><button type="submit" class="ui green button right" name="op" value="reinit_missing_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td class="text right"><button type="submit" class="ui green button" name="op" value="reinit_missing_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.sync_external_users"}}</td>
-							<td><button type="submit" class="ui green button right" name="op" value="sync_external_users">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td class="text right"><button type="submit" class="ui green button" name="op" value="sync_external_users">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.repo_health_check"}}</td>
-							<td><button type="submit" class="ui green button right" name="op" value="repo_health_check">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td class="text right"><button type="submit" class="ui green button" name="op" value="repo_health_check">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.delete_generated_repository_avatars"}}</td>
-							<td><button type="submit" class="ui green button right" name="op" value="delete_generated_repository_avatars">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td class="text right"><button type="submit" class="ui green button" name="op" value="delete_generated_repository_avatars">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 					</tbody>
 				</table>
diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl
index 17c75c6874052..c075bf3cf9950 100644
--- a/templates/base/footer_content.tmpl
+++ b/templates/base/footer_content.tmpl
@@ -1,5 +1,5 @@
 <footer role="group" aria-label="{{.locale.Tr "aria.footer"}}">
-	<div class="ui left" role="contentinfo" aria-label="{{.locale.Tr "aria.footer.software"}}">
+	<div class="gt-float-left left-links" role="contentinfo" aria-label="{{.locale.Tr "aria.footer.software"}}">
 		<a target="_blank" rel="noopener noreferrer" href="https://gitea.io">{{.locale.Tr "powered_by" "Gitea"}}</a>
 		{{if (or .ShowFooterVersion .PageIsAdmin)}}
 			{{.locale.Tr "version"}}:
@@ -14,7 +14,7 @@
 			{{.locale.Tr "template"}}{{if .TemplateName}} {{.TemplateName}}{{end}}: <strong>{{call .TemplateLoadTimes}}</strong>
 		{{end}}
 	</div>
-	<div class="ui right links" role="group" aria-label="{{.locale.Tr "aria.footer.links"}}">
+	<div class="gt-float-right right-links" role="group" aria-label="{{.locale.Tr "aria.footer.links"}}">
 		<div class="ui dropdown upward language">
 			<span>{{svg "octicon-globe"}} {{.locale.LangName}}</span>
 			<div class="menu language-menu">
diff --git a/templates/org/team/members.tmpl b/templates/org/team/members.tmpl
index b31f2a96c583e..308083fdb7d63 100644
--- a/templates/org/team/members.tmpl
+++ b/templates/org/team/members.tmpl
@@ -50,12 +50,12 @@
 				<div class="ui bottom attached table segment members">
 					{{range .Invites}}
 						<div class="item">
+							{{.Email}}
 							<form action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/remove_invite" method="post">
 								{{$.CsrfTokenHtml}}
 								<input type="hidden" name="iid" value="{{.ID}}">
-								<button class="ui red button right">{{$.locale.Tr "org.members.remove"}}</button>
+								<button class="ui red button gt-float-right">{{$.locale.Tr "org.members.remove"}}</button>
 							</form>
-							{{.Email}}
 						</div>
 					{{end}}
 				</div>
diff --git a/templates/org/team/repositories.tmpl b/templates/org/team/repositories.tmpl
index c73f40f0541e0..9263caf48c97f 100644
--- a/templates/org/team/repositories.tmpl
+++ b/templates/org/team/repositories.tmpl
@@ -25,8 +25,8 @@
 						</div>
 						<div class="inline ui field right">
 							<form class="ui form" id="repo-multiple-form" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/repositories" method="post">
-								<button class="ui red button delete-button right" data-modal-id="org-team-remove-all-repo" data-url="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/removeall">{{.locale.Tr "remove_all"}}</button>
-								<button class="ui green button add-all-button right" data-modal-id="org-team-add-all-repo" data-url="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/addall">{{.locale.Tr "add_all"}}</button>
+								<button class="ui green button add-all-button" data-modal-id="org-team-add-all-repo" data-url="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/addall">{{.locale.Tr "add_all"}}</button>
+								<button class="ui red button delete-button" data-modal-id="org-team-remove-all-repo" data-url="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/removeall">{{.locale.Tr "remove_all"}}</button>
 							</form>
 						</div>
 					</div>
diff --git a/templates/repo/diff/conversation.tmpl b/templates/repo/diff/conversation.tmpl
index 999197f94a4cb..8d4064967e178 100644
--- a/templates/repo/diff/conversation.tmpl
+++ b/templates/repo/diff/conversation.tmpl
@@ -9,11 +9,11 @@
 				<b>{{$resolveDoer.Name}}</b> {{$.locale.Tr "repo.issues.review.resolved_by"}}
 			</div>
 			<div>
-				<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated gt-df gt-ac">
+				<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny labeled button show-outdated gt-df gt-ac">
 					{{svg "octicon-unfold" 16 "gt-mr-3"}}
 					{{$.locale.Tr "repo.issues.review.show_resolved"}}
 				</button>
-				<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button hide-outdated gt-df gt-ac gt-hidden">
+				<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny labeled button hide-outdated gt-df gt-ac gt-hidden">
 					{{svg "octicon-fold" 16 "gt-mr-3"}}
 					{{$.locale.Tr "repo.issues.review.hide_resolved"}}
 				</button>
diff --git a/templates/repo/issue/labels/label_list.tmpl b/templates/repo/issue/labels/label_list.tmpl
index b294036f0cccd..325efd1da6e4d 100644
--- a/templates/repo/issue/labels/label_list.tmpl
+++ b/templates/repo/issue/labels/label_list.tmpl
@@ -1,58 +1,59 @@
 <h4 class="ui top attached header">
-		{{.locale.Tr "repo.issues.label_count" .NumLabels}}
-		<div class="ui right">
-			<div class="ui right floated secondary filter menu">
-				<!-- Sort -->
-				<div class="ui dropdown type jump item">
-					<span class="text">
-						{{.locale.Tr "repo.issues.filter_sort"}}
-						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-					</span>
-					<div class="menu">
-						<a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active {{end}}item" href="{{$.Link}}?sort=alphabetically&state={{$.State}}">{{.locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
-						<a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="{{$.Link}}?sort=reversealphabetically&state={{$.State}}">{{.locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
-						<a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="{{$.Link}}?sort=leastissues&state={{$.State}}">{{.locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
-						<a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="{{$.Link}}?sort=mostissues&state={{$.State}}">{{.locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>
-					</div>
+	{{.locale.Tr "repo.issues.label_count" .NumLabels}}
+	<div class="ui right">
+		<div class="ui right floated secondary filter menu">
+			<!-- Sort -->
+			<div class="ui dropdown type jump item">
+				<span class="text">
+					{{.locale.Tr "repo.issues.filter_sort"}}
+					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				</span>
+				<div class="menu">
+					<a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active {{end}}item" href="{{$.Link}}?sort=alphabetically&state={{$.State}}">{{.locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
+					<a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="{{$.Link}}?sort=reversealphabetically&state={{$.State}}">{{.locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
+					<a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="{{$.Link}}?sort=leastissues&state={{$.State}}">{{.locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
+					<a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="{{$.Link}}?sort=mostissues&state={{$.State}}">{{.locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>
 				</div>
 			</div>
-		</div> <!-- filter menu -->
+		</div>
+	</div> <!-- filter menu -->
 </h4>
 
 <div class="ui attached segment">
-	<div class="labelspage">
-		{{if and (not $.PageIsOrgSettingsLabels) (or $.CanWriteIssues $.CanWritePulls) (eq .NumLabels 0) (not $.Repository.IsArchived)}}
-			{{template "repo/issue/labels/label_load_template" .}}
-			<div class="ui divider"></div>
-		{{else if and ($.PageIsOrgSettingsLabels) (eq .NumLabels 0)}}
-			{{template "repo/issue/labels/label_load_template" .}}
-		{{end}}
+	{{if and (not $.PageIsOrgSettingsLabels) (or $.CanWriteIssues $.CanWritePulls) (eq .NumLabels 0) (not $.Repository.IsArchived)}}
+		{{template "repo/issue/labels/label_load_template" .}}
+		<div class="ui divider"></div>
+	{{else if and ($.PageIsOrgSettingsLabels) (eq .NumLabels 0)}}
+		{{template "repo/issue/labels/label_load_template" .}}
+		<div class="ui divider"></div>
+	{{end}}
+
+	<ul class="issue-label-list">
 		{{range .Labels}}
-			<li class="item">
-			<div class="ui grid middle aligned">
-				<div class="eight wide column">
-					{{RenderLabel $.Context .}}
-					{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
-				</div>
-				<div class="five wide column">
-					{{if $.PageIsOrgSettingsLabels}}
-						<a class="ui left open-issues" href="{{AppSubUrl}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{$.locale.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
-					{{else}}
-						<a class="ui left open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{$.locale.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
-					{{end}}
-				</div>
-				<div class="three wide column">
-					{{if and (not $.PageIsOrgSettingsLabels) (not $.Repository.IsArchived) (or $.CanWriteIssues $.CanWritePulls)}}
-						<a class="ui right delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
-						<a class="ui right edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" {{if .Exclusive}}data-exclusive{{end}} data-num-issues="{{.NumIssues}}" data-description="{{.Description}}" data-color={{.Color}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
-					{{else if $.PageIsOrgSettingsLabels}}
-						<a class="ui right delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
-						<a class="ui right edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" {{if .Exclusive}}data-exclusive{{end}} data-num-issues="{{.NumIssues}}" data-description="{{.Description}}" data-color={{.Color}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
-					{{end}}
-				</div>
+		<li class="item">
+			<div class="label-title">
+				{{RenderLabel $.Context .}}
+				{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
 			</div>
-			</li>
+			<div class="label-issues">
+				{{if $.PageIsOrgSettingsLabels}}
+					<a class="open-issues" href="{{AppSubUrl}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{$.locale.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
+				{{else}}
+					<a class="open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{$.locale.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
+				{{end}}
+			</div>
+			<div class="label-operation">
+				{{if and (not $.PageIsOrgSettingsLabels) (not $.Repository.IsArchived) (or $.CanWriteIssues $.CanWritePulls)}}
+					<a class="edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" {{if .Exclusive}}data-exclusive{{end}} data-num-issues="{{.NumIssues}}" data-description="{{.Description}}" data-color={{.Color}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
+					<a class="delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
+				{{else if $.PageIsOrgSettingsLabels}}
+					<a class="edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" {{if .Exclusive}}data-exclusive{{end}} data-num-issues="{{.NumIssues}}" data-description="{{.Description}}" data-color={{.Color}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
+					<a class="delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
+				{{end}}
+			</div>
+		</li>
 		{{end}}
+
 		{{if and (not .PageIsOrgSettingsLabels) (.OrgLabels)}}
 			<li class="item">
 				<div class="ui grid middle aligned">
@@ -64,25 +65,19 @@
 					</div>
 				</div>
 			</li>
-			{{if (not $.PageIsOrgSettingsLabels)}}
-				<div class="orglabel">
-					{{range .OrgLabels}}
-					<li class="item">
-					<div class="ui grid middle aligned">
-						<div class="nine wide column">
-							{{RenderLabel $.Context .}}
-							{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
-						</div>
-						<div class="four wide column">
-							<a class="ui left open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{$.locale.Tr "repo.issues.label_open_issues" .NumOpenRepoIssues}}</a>
-						</div>
-						<div class="three wide column">
-						</div>
-					</div>
-					</li>
-					{{end}}
+
+			{{range .OrgLabels}}
+			<li class="item org-label">
+				<div class="label-title">
+					{{RenderLabel $.Context .}}
+					{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
 				</div>
+				<div class="label-issues">
+					<a class="open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{$.locale.Tr "repo.issues.label_open_issues" .NumOpenRepoIssues}}</a>
+				</div>
+				<div class="label-operation"></div>
+			</li>
 			{{end}}
 		{{end}}
-	</div>
+	</ul>
 </div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index c7ea0e47c8f21..ae70c8a8b84d3 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1472,10 +1472,12 @@ img.ui.avatar,
   color: var(--color-gold) !important;
 }
 
+/* FIXME: this is a serious pollution, do not use this for "float: left" anymore */
 .ui.left:not(.action) {
   float: left;
 }
 
+/* FIXME: this is a serious pollution, do not use this for "float: right" anymore */
 .ui.right:not(.action) {
   float: right;
 }
@@ -2660,38 +2662,6 @@ table th[data-sortt-desc] .svg {
   background: var(--color-secondary-dark-1) !important;
 }
 
-.labelspage {
-  list-style: none;
-  padding-top: 0;
-}
-
-.labelspage .item {
-  border-bottom: 1px solid var(--color-secondary);
-  border-top: none;
-}
-
-.labelspage .item a {
-  font-size: 12px;
-  padding-right: 10px;
-  color: var(--color-text-light);
-}
-
-.labelspage .item a:hover {
-  color: var(--color-primary-light-2);
-}
-
-.labelspage .item a.open-issues {
-  margin-right: 30px;
-}
-
-.labelspage .item:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-.labelspage .orglabel {
-  opacity: 0.7;
-}
 
 /* https://github.com/go-gitea/gitea/pull/11486 */
 .ui.sub.header {
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 22a284d43c091..37435804db873 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -76,6 +76,9 @@ Gitea's private styles use `g-` prefix.
 .gt-w-screen { width: 100vw !important; }
 .gt-h-screen { height: 100vh !important; }
 
+.gt-float-left { float: left !important; }
+.gt-float-right { float: right !important; }
+
 .gt-rounded { border-radius: var(--border-radius) !important; }
 .gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
 .gt-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
diff --git a/web_src/css/home.css b/web_src/css/home.css
index 25643cda274f7..c9bb3bcbbafaa 100644
--- a/web_src/css/home.css
+++ b/web_src/css/home.css
@@ -52,11 +52,11 @@ footer {
   padding: 0 20px;
 }
 
-footer .right.links {
+footer .right-links {
   min-width: 180px; /* make sure the menu dropdown doesn't overflow horizontally when language name is short */
 }
 
-footer .right.links > a {
+footer .right-links > a {
   border-left: 1px solid var(--color-secondary-dark-1);
   padding-left: 8px;
   margin-left: 5px;
@@ -71,8 +71,8 @@ footer .ui.dropdown.language .menu {
 
 
 @media (max-width: 880px) {
-  footer .ui.left,
-  footer .ui.right {
+  footer .left-links,
+  footer .right-right {
     width: 100%;
     display: block;
     text-align: center;
diff --git a/web_src/css/index.css b/web_src/css/index.css
index e59f3eb02abda..67a1d51c11b96 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -31,6 +31,7 @@
 @import "./form.css";
 @import "./repository.css";
 @import "./repository-release-tag.css";
+@import "./repository-issue-label.css";
 @import "./editor.css";
 @import "./editor-markdown.css";
 @import "./organization.css";
diff --git a/web_src/css/repository-issue-label.css b/web_src/css/repository-issue-label.css
new file mode 100644
index 0000000000000..a2eb0344a5013
--- /dev/null
+++ b/web_src/css/repository-issue-label.css
@@ -0,0 +1,44 @@
+.issue-label-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.issue-label-list .item {
+  border-bottom: 1px solid var(--color-secondary);
+  display: flex;
+  padding: 1em 0;
+  margin: 0;
+}
+
+.issue-label-list .item:first-child {
+  padding-top: 0;
+}
+
+.issue-label-list .item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.issue-label-list .item .label-title {
+  width: 33%;
+}
+
+.issue-label-list .item .label-issues {
+  width: 33%;
+}
+
+.issue-label-list .item .label-operation {
+  width: 33%;
+  text-align: right;
+}
+
+.issue-label-list .item a {
+  font-size: 12px;
+  padding-right: 10px;
+  color: var(--color-text-light);
+}
+
+.issue-label-list .item.org-label {
+  opacity: 0.7;
+}

From 8fe2b3b1eae69128a9ffb214b37a56e3336b9a00 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 28 Apr 2023 12:37:17 +0800
Subject: [PATCH 2/8] fix dirty hacks

---
 templates/base/footer_content.tmpl         |  6 +++---
 templates/base/head.tmpl                   |  2 +-
 templates/repo/cite/cite_modal.tmpl        |  2 +-
 templates/repo/header.tmpl                 | 14 ++++++------
 templates/repo/issue/list.tmpl             |  2 +-
 templates/repo/issue/milestone_issues.tmpl |  2 +-
 templates/user/dashboard/navbar.tmpl       |  2 +-
 web_src/css/base.css                       | 25 +++++++++-------------
 web_src/css/helpers.css                    |  5 ++++-
 web_src/css/home.css                       | 22 +++++++++----------
 10 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl
index c075bf3cf9950..f5272744846cd 100644
--- a/templates/base/footer_content.tmpl
+++ b/templates/base/footer_content.tmpl
@@ -1,5 +1,5 @@
-<footer role="group" aria-label="{{.locale.Tr "aria.footer"}}">
-	<div class="gt-float-left left-links" role="contentinfo" aria-label="{{.locale.Tr "aria.footer.software"}}">
+<footer class="page-footer" role="group" aria-label="{{.locale.Tr "aria.footer"}}">
+	<div class="left-links" role="contentinfo" aria-label="{{.locale.Tr "aria.footer.software"}}">
 		<a target="_blank" rel="noopener noreferrer" href="https://gitea.io">{{.locale.Tr "powered_by" "Gitea"}}</a>
 		{{if (or .ShowFooterVersion .PageIsAdmin)}}
 			{{.locale.Tr "version"}}:
@@ -14,7 +14,7 @@
 			{{.locale.Tr "template"}}{{if .TemplateName}} {{.TemplateName}}{{end}}: <strong>{{call .TemplateLoadTimes}}</strong>
 		{{end}}
 	</div>
-	<div class="gt-float-right right-links" role="group" aria-label="{{.locale.Tr "aria.footer.links"}}">
+	<div class="right-links" role="group" aria-label="{{.locale.Tr "aria.footer.links"}}">
 		<div class="ui dropdown upward language">
 			<span>{{svg "octicon-globe"}} {{.locale.LangName}}</span>
 			<div class="menu language-menu">
diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index cd9bbed444810..5dddc1df93340 100644
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -83,7 +83,7 @@
 		{{template "custom/body_inner_pre" .}}
 
 		{{if not .PageIsInstall}}
-			<div class="ui top secondary stackable main menu following bar light no-vertical-tabs">
+			<div class="ui top secondary stackable main menu following bar light">
 				{{template "base/head_navbar" .}}
 			</div><!-- end bar -->
 		{{end}}
diff --git a/templates/repo/cite/cite_modal.tmpl b/templates/repo/cite/cite_modal.tmpl
index 8f69f7d0ede8b..c515874a06320 100644
--- a/templates/repo/cite/cite_modal.tmpl
+++ b/templates/repo/cite/cite_modal.tmpl
@@ -3,7 +3,7 @@
 		{{.locale.Tr "repo.cite_this_repo"}}
 	</div>
 	<div class="content">
-		<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins no-vertical-tabs">
+		<div class="ui stackable secondary menu">
 			<div class="fitted item">
 				<div class="ui action input" id="citation-panel">
 					{{template "repo/cite/cite_buttons" .}}
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 9b3b2ce7948f9..3b5c4869e72ef 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -151,7 +151,7 @@
 {{end}}
 	<div class="ui tabs container">
 		{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
-			<div class="ui tabular stackable menu navbar">
+			<div class="ui tabular menu navbar gt-overflow-x-auto gt-overflow-y-hidden">
 				{{if .Permission.CanRead $.UnitTypeCode}}
 				<a class="{{if .PageIsViewCode}}active {{end}}item" href="{{.RepoLink}}{{if (ne .BranchName .Repository.DefaultBranch)}}/src/{{.BranchNameSubURL}}{{end}}">
 					{{svg "octicon-code"}} {{.locale.Tr "repo.code"}}
@@ -236,16 +236,14 @@
 				{{template "custom/extra_tabs" .}}
 
 				{{if .Permission.IsAdmin}}
-					<div class="right menu">
-						<a class="{{if .PageIsRepoSettings}}active {{end}}item" href="{{.RepoLink}}/settings">
-							{{svg "octicon-tools"}} {{.locale.Tr "repo.settings"}}
-						</a>
-					</div>
+					<a class="{{if .PageIsRepoSettings}}active {{end}}right item" href="{{.RepoLink}}/settings">
+						{{svg "octicon-tools"}} {{.locale.Tr "repo.settings"}}
+					</a>
 				{{end}}
 			</div>
 		{{else if .Permission.IsAdmin}}
-			<div class="ui tabular stackable menu navbar">
-				<div class="right menu">
+			<div class="ui tabular menu navbar">
+				<div class="right item">
 					<a class="{{if .PageIsRepoSettings}}active {{end}}item" href="{{.RepoLink}}/settings">
 						{{svg "octicon-tools"}} {{.locale.Tr "repo.settings"}}
 					</a>
diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index 9c31262355be5..a99680c024f8e 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -34,7 +34,7 @@
 				{{template "repo/issue/openclose" .}}
 			</div>
 			<div class="ten wide right aligned column">
-				<div class="ui secondary filter stackable menu labels">
+				<div class="ui secondary filter menu labels gt-overflow-x-auto gt-overflow-y-hidden">
 					<!-- Label -->
 					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto">
 						<span class="text">
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index 472bebb33face..af71d55c0f0cb 100644
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -50,7 +50,7 @@
 				{{template "repo/issue/openclose" .}}
 			</div>
 			<div class="ten wide right aligned column">
-				<div class="ui secondary filter stackable menu labels">
+				<div class="ui secondary filter menu labels">
 					<!-- Label -->
 					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto">
 						<span class="text">
diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl
index f6c86f935e37b..3eec91df3f19b 100644
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@@ -1,5 +1,5 @@
 <div class="dashboard-navbar">
-	<div class="ui secondary stackable menu">
+	<div class="ui secondary stackable menu g-menu-stackable-scrollable">
 		<div class="item">
 			<div class="ui floating dropdown jump">
 				<span class="text truncated-item-container">
diff --git a/web_src/css/base.css b/web_src/css/base.css
index ae70c8a8b84d3..dcb939fed5a02 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2766,21 +2766,16 @@ table th[data-sortt-desc] .svg {
   height: 15px;
 }
 
-@media (max-width: 767px) {
-  .ui.stackable.menu:not(.no-vertical-tabs) {
-    overflow-y: hidden;
-    overflow-x: auto;
-    flex-direction: row;
-    flex-wrap: nowrap !important;
-  }
-  .ui.stackable.menu:not(.no-vertical-tabs) .item {
-    width: initial !important;
-  }
-  .ui.stackable.menu:not(.no-vertical-tabs) > .dropdown.item {
-    position: initial;
-  }
-  .ui.stackable.menu:not(.no-vertical-tabs) .menu {
-    flex-direction: row;
+.g-menu-stackable-scrollable {
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+
+@media only screen and (max-width: 767.98px) {
+  /* also respect Fomantic's "stackable" definition */
+  .g-menu-stackable-scrollable {
+    overflow-x: unset;
+    overflow-y: unset;
   }
 }
 
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 37435804db873..1ae9c4165902c 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -66,13 +66,16 @@ Gitea's private styles use `g-` prefix.
 .gt-cursor-default { cursor: default !important; }
 .gt-invisible { visibility: hidden !important; }
 .gt-items-start { align-items: flex-start !important; }
-.gt-overflow-x-scroll { overflow-x: scroll !important; }
 .gt-pointer-events-none { pointer-events: none !important; }
 .gt-relative { position: relative !important; }
 .gt-whitespace-nowrap { white-space: nowrap !important; }
 .gt-whitespace-pre { white-space: pre !important; }
 .gt-whitespace-pre-wrap { white-space: pre-wrap !important; }
 
+.gt-overflow-x-auto { overflow-x: auto !important; }
+.gt-overflow-x-scroll { overflow-x: scroll !important; }
+.gt-overflow-y-hidden { overflow-y: hidden !important; }
+
 .gt-w-screen { width: 100vw !important; }
 .gt-h-screen { height: 100vh !important; }
 
diff --git a/web_src/css/home.css b/web_src/css/home.css
index c9bb3bcbbafaa..40cdd413f24b2 100644
--- a/web_src/css/home.css
+++ b/web_src/css/home.css
@@ -43,39 +43,39 @@
   color: var(--color-green);
 }
 
-footer {
+.page-footer {
+  width: 100vw;
+  display: flex;
   background-color: var(--color-footer);
   border-top: 1px solid var(--color-secondary);
   line-height: 39px;
-  flex-basis: 40px;
-  color: var(--color-text-light);
   padding: 0 20px;
 }
 
-footer .right-links {
+.page-footer .left-links {
+  flex: 1;
+}
+
+.page-footer .right-links {
   min-width: 180px; /* make sure the menu dropdown doesn't overflow horizontally when language name is short */
 }
 
-footer .right-links > a {
+.page-footer .right-links > a {
   border-left: 1px solid var(--color-secondary-dark-1);
   padding-left: 8px;
   margin-left: 5px;
 }
 
-footer .ui.dropdown.language .menu {
+.page-footer .ui.dropdown.language .menu {
   height: 500px;
   max-height: calc(100vh - 60px);
   overflow-y: auto;
   margin-bottom: 10px;
 }
 
-
 @media (max-width: 880px) {
-  footer .left-links,
-  footer .right-right {
-    width: 100%;
+  .page-footer {
     display: block;
     text-align: center;
-    float: none;
   }
 }

From 3893b61f3c79d9f33a1b53756ed404377c4896c4 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 28 Apr 2023 15:51:18 +0800
Subject: [PATCH 3/8] fix

---
 web_src/css/repository.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index 8b25775bb4440..7e867291bf1ad 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -160,7 +160,7 @@
 }
 
 .repository .ui.tabs.divider {
-  margin-top: 0;
+  margin-top: -1px;
   margin-bottom: 20px;
 }
 

From 1ed652c63347b6a0b4f21678b1e319963af3b35b Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 28 Apr 2023 16:18:08 +0800
Subject: [PATCH 4/8] remove unnecessary style

---
 web_src/css/home.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web_src/css/home.css b/web_src/css/home.css
index 40cdd413f24b2..0094acc75faf3 100644
--- a/web_src/css/home.css
+++ b/web_src/css/home.css
@@ -44,7 +44,6 @@
 }
 
 .page-footer {
-  width: 100vw;
   display: flex;
   background-color: var(--color-footer);
   border-top: 1px solid var(--color-secondary);

From 7b4b8f9cc4ef49f40813d595ab82e1cf25f90df0 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 29 Apr 2023 10:07:36 +0800
Subject: [PATCH 5/8] Update web_src/css/base.css

---
 web_src/css/base.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index dcb939fed5a02..3ce100632697f 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2771,7 +2771,7 @@ table th[data-sortt-desc] .svg {
   overflow-x: auto;
 }
 
-@media only screen and (max-width: 767.98px) {
+@media (max-width: 767.98px) {
   /* also respect Fomantic's "stackable" definition */
   .g-menu-stackable-scrollable {
     overflow-x: unset;

From a31bfb33f83de5b6958b6aaeef6bf92cde20512c Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 29 Apr 2023 13:33:30 +0800
Subject: [PATCH 6/8] Update web_src/css/base.css

---
 web_src/css/base.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 3ce100632697f..f813b7c390e16 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2772,7 +2772,7 @@ table th[data-sortt-desc] .svg {
 }
 
 @media (max-width: 767.98px) {
-  /* also respect Fomantic's "stackable" definition */
+  /* also respect Fomantic's "stackable" definition, use the same breakpoint to reset our styles */
   .g-menu-stackable-scrollable {
     overflow-x: unset;
     overflow-y: unset;

From 7c2b0d6a9fa49c5a1383155555c399e86771de7d Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 29 Apr 2023 13:41:27 +0800
Subject: [PATCH 7/8] fix layout

---
 templates/repo/header.tmpl                 | 10 ++++------
 templates/repo/issue/milestone_issues.tmpl |  2 +-
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 3b5c4869e72ef..ab50dd175afd1 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -242,12 +242,10 @@
 				{{end}}
 			</div>
 		{{else if .Permission.IsAdmin}}
-			<div class="ui tabular menu navbar">
-				<div class="right item">
-					<a class="{{if .PageIsRepoSettings}}active {{end}}item" href="{{.RepoLink}}/settings">
-						{{svg "octicon-tools"}} {{.locale.Tr "repo.settings"}}
-					</a>
-				</div>
+			<div class="ui tabular menu navbar gt-overflow-x-auto gt-overflow-y-hidden">
+				<a class="{{if .PageIsRepoSettings}}active {{end}}right item" href="{{.RepoLink}}/settings">
+					{{svg "octicon-tools"}} {{.locale.Tr "repo.settings"}}
+				</a>
 			</div>
 		{{end}}
 	</div>
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index af71d55c0f0cb..472bebb33face 100644
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -50,7 +50,7 @@
 				{{template "repo/issue/openclose" .}}
 			</div>
 			<div class="ten wide right aligned column">
-				<div class="ui secondary filter menu labels">
+				<div class="ui secondary filter stackable menu labels">
 					<!-- Label -->
 					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto">
 						<span class="text">

From 2d81c67620078e32ae40ff4425106d5b788547b3 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 29 Apr 2023 14:37:10 +0800
Subject: [PATCH 8/8] move css

---
 .../{editor-markdown.css => editor/combomarkdowneditor.css} | 0
 web_src/css/index.css                                       | 6 +++---
 .../issue-label.css}                                        | 0
 .../release-tag.css}                                        | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename web_src/css/{editor-markdown.css => editor/combomarkdowneditor.css} (100%)
 rename web_src/css/{repository-issue-label.css => repository/issue-label.css} (100%)
 rename web_src/css/{repository-release-tag.css => repository/release-tag.css} (100%)

diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor/combomarkdowneditor.css
similarity index 100%
rename from web_src/css/editor-markdown.css
rename to web_src/css/editor/combomarkdowneditor.css
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 67a1d51c11b96..9d00566674676 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -30,10 +30,10 @@
 @import "./install.css";
 @import "./form.css";
 @import "./repository.css";
-@import "./repository-release-tag.css";
-@import "./repository-issue-label.css";
+@import "./repository/release-tag.css";
+@import "./repository/issue-label.css";
 @import "./editor.css";
-@import "./editor-markdown.css";
+@import "./editor/combomarkdowneditor.css";
 @import "./organization.css";
 @import "./user.css";
 @import "./dashboard.css";
diff --git a/web_src/css/repository-issue-label.css b/web_src/css/repository/issue-label.css
similarity index 100%
rename from web_src/css/repository-issue-label.css
rename to web_src/css/repository/issue-label.css
diff --git a/web_src/css/repository-release-tag.css b/web_src/css/repository/release-tag.css
similarity index 100%
rename from web_src/css/repository-release-tag.css
rename to web_src/css/repository/release-tag.css