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>

8 files changed, 77 insertions, 62 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 95f83ef00a..a5a3377376 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
index eb5c5d13b8..eb5c5d13b8 100644
--- a/web_src/css/editor-markdown.css
+++ b/web_src/css/editor/combomarkdowneditor.css
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 0b4b47f560..ceb20db043 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 25643cda27..0094acc75f 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 e59f3eb02a..9d00566674 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 af2dd2be24..5ef7bd6c50 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 0000000000..a2eb0344a5
--- /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
index 6922ce5179..6922ce5179 100644
--- a/web_src/css/repository-release-tag.css
+++ b/web_src/css/repository/release-tag.css