Fix navbar + menu flashing on page load (#31281)

Fixes
https://github.com/go-gitea/gitea/pull/31273#issuecomment-2153771331.
Same method as used in https://github.com/go-gitea/gitea/pull/30215. All
left-opening dropdowns need to use it method.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>

web_src/css/modules/header.css

@@ -134,12 +134,6 @@ h4.ui.header .sub.header {
   font-weight: var(--font-weight-normal);
 }
 
-/* open dropdown menus to the left in right-attached headers */
-.ui.attached.header > .ui.right .ui.dropdown .menu {
-  right: 0;
-  left: auto;
-}
-
 /* if a .top.attached.header is followed by a .segment, add some margin */
 .ui.segments + .ui.top.attached.header,
 .ui.attached.segment + .ui.top.attached.header {

web_src/css/modules/navbar.css

@@ -19,12 +19,26 @@
   margin: 0;
   display: flex;
   align-items: center;
+  gap: 5px;
 }
 
 #navbar-logo {
   margin: 0;
 }
 
+.navbar-left > .item,
+.navbar-right > .item {
+  color: var(--color-nav-text);
+  position: relative;
+  text-decoration: none;
+  line-height: var(--line-height-default);
+  flex: 0 0 auto;
+  font-weight: var(--font-weight-normal);
+  align-items: center;
+  padding: .78571429em .92857143em;
+  border-radius: .28571429rem;
+}
+
 #navbar .item {
   min-height: 36px;
   min-width: 36px;
@@ -33,10 +47,6 @@
   display: flex;
 }
 
-#navbar > .menu > .item {
-  color: var(--color-nav-text);
-}
-
 #navbar .dropdown .item {
   justify-content: stretch;
 }
@@ -70,7 +80,7 @@
   }
   #navbar .navbar-mobile-right {
     display: flex;
-    margin-left: auto !important;
+    margin: 0 0 0 auto !important;
     width: auto !important;
   }
   #navbar .navbar-mobile-right > .item {