By default force vertical tabs on mobile (#19486)

* By default force vertical tabs on mobile

- While experimenting with using vertical tabs instead of horizontal
tabs on gitea for a better mobile experience, I made a recent
PR(https://github.com/go-gitea/gitea/pull/19468) in order to see if
there was any objections to this new behavior for the repo headers(one
of the most annoying horizontal tabs). This PR had no objections and
even a user commenting that this change is brilliant.
- This PR now improves upon the previous PR by making this the de-facto
behavior for all menu's on mobile. The only exemption is the navbar
which also uses the menu but caught some layout errors with the changes.

* Fix organisation

* Fix repo/wiki buttons

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

2 files changed, 13 insertions, 29 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index deb129c7ce..5584a6c353 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1350,12 +1350,6 @@ footer {
   overflow: auto;
 }
 
-@media @mediaSm {
-  .ui.menu.new-menu {
-    overflow: visible !important;
-  }
-}
-
 .ui.menu.new-menu .new-menu-inner {
   display: flex;
   margin-left: auto;
@@ -1363,14 +1357,6 @@ footer {
   overflow-x: auto;
 }
 
-@media @mediaSm {
-  .ui.menu.new-menu .new-menu-inner {
-    flex-wrap: wrap;
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
 .ui.menu.new-menu::after {
   position: absolute;
   display: block;
@@ -2194,3 +2180,16 @@ table th[data-sortt-desc] {
     height: 15px;
   }
 }
+
+@media @mediaSm {
+  .ui.stackable.menu:not(.no-vertical-tabs) {
+    overflow-y: hidden;
+    overflow-x: auto;
+    flex-direction: row;
+    flex-wrap: nowrap !important;
+
+    .item {
+      width: initial !important;
+    }
+  }
+}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 70f8b077de..67a79d45e5 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -3237,18 +3237,3 @@ td.blob-excerpt {
   transform: scale(105%);
   box-shadow: 0 .5rem 1rem var(--color-shadow) !important;
 }
-
-@media @mediaSm {
-  .repo-header-container {
-    overflow-x: auto;
-    overflow-y: hidden;
-
-    .ui.stackable.menu {
-      flex-direction: row;
-
-      .item {
-        width: initial !important;
-      }
-    }
-  }
-}