From 5a5ab8ef5ac5fbdb893707933f06ff6bcd8e834a Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 29 Apr 2023 19:35:59 +0800
Subject: [PATCH] Start cleaning the messy ".ui.left / .ui.right", improve
 label list page, fix stackable menu (#24393)

Since 2015/2016, there is a global pollution: ".ui.left" / ".ui.right".

Fomantic UI doesn't work this way, it just conflicts with many Fomantic
definitions.

This PR starts the cleaning work of such techinical debts.

And, the "label list" page has been quite messy for long time, for
example, why "li" appears in "div" ......

And fix #24296

<details>


![image](https://user-images.githubusercontent.com/2114189/235051281-54c5374c-b5fd-4b5f-9aa2-02d4bb2d9112.png)


![image](https://user-images.githubusercontent.com/2114189/235055703-2ba042e0-4db7-4e63-8646-02f390d496b5.png)


![image](https://user-images.githubusercontent.com/2114189/235056310-4f6ffdc2-5758-4927-8fb8-314d9fb72a6b.png)


![image](https://user-images.githubusercontent.com/2114189/235058400-dab1c9ec-3325-4671-8345-aee6b0b68042.png)


![image](https://user-images.githubusercontent.com/2114189/235058424-85509532-b9bc-43ad-b00f-a87184c60f22.png)

</details>
---
 templates/admin/dashboard.tmpl                |  22 ++--
 templates/base/footer_content.tmpl            |   6 +-
 templates/base/head.tmpl                      |   2 +-
 templates/org/team/members.tmpl               |   4 +-
 templates/org/team/repositories.tmpl          |   4 +-
 templates/repo/cite/cite_modal.tmpl           |   2 +-
 templates/repo/diff/conversation.tmpl         |   4 +-
 templates/repo/header.tmpl                    |  20 ++-
 templates/repo/issue/labels/label_list.tmpl   | 123 +++++++++---------
 templates/repo/issue/list.tmpl                |   2 +-
 templates/user/dashboard/navbar.tmpl          |   2 +-
 web_src/css/base.css                          |  59 ++-------
 .../combomarkdowneditor.css}                  |   0
 web_src/css/helpers.css                       |   8 +-
 web_src/css/home.css                          |  21 ++-
 web_src/css/index.css                         |   5 +-
 web_src/css/repository.css                    |   2 +-
 web_src/css/repository/issue-label.css        |  44 +++++++
 .../release-tag.css}                          |   0
 19 files changed, 168 insertions(+), 162 deletions(-)
 rename web_src/css/{editor-markdown.css => editor/combomarkdowneditor.css} (100%)
 create mode 100644 web_src/css/repository/issue-label.css
 rename web_src/css/{repository-release-tag.css => repository/release-tag.css} (100%)

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..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="ui left" 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="ui 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/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/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/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/header.tmpl b/templates/repo/header.tmpl
index 9b3b2ce7948f9..ab50dd175afd1 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,20 +236,16 @@
 				{{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">
-					<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/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/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/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 95f83ef00a1ac..a5a3377376634 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 {
@@ -2796,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 (max-width: 767.98px) {
+  /* also respect Fomantic's "stackable" definition, use the same breakpoint to reset our styles */
+  .g-menu-stackable-scrollable {
+    overflow-x: unset;
+    overflow-y: unset;
   }
 }
 
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/helpers.css b/web_src/css/helpers.css
index 0b4b47f560ffa..ceb20db043cb6 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -68,16 +68,22 @@ 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; }
 
+.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..0094acc75faf3 100644
--- a/web_src/css/home.css
+++ b/web_src/css/home.css
@@ -43,39 +43,38 @@
   color: var(--color-green);
 }
 
-footer {
+.page-footer {
+  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 .ui.left,
-  footer .ui.right {
-    width: 100%;
+  .page-footer {
     display: block;
     text-align: center;
-    float: none;
   }
 }
diff --git a/web_src/css/index.css b/web_src/css/index.css
index e59f3eb02abda..9d00566674676 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -30,9 +30,10 @@
 @import "./install.css";
 @import "./form.css";
 @import "./repository.css";
-@import "./repository-release-tag.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.css b/web_src/css/repository.css
index af2dd2be242f1..5ef7bd6c50ff8 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;
 }
 
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;
+}
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