From 10bbf076982bc4cae5418329189920d8687cf081 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 7 Jun 2024 05:19:22 +0200
Subject: [PATCH 01/10] Fix navbar `+` menu flashing

---
 templates/base/head_navbar.tmpl | 2 +-
 web_src/css/modules/header.css  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 2b52247303b5f..7a3e663c494f0 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -104,7 +104,7 @@
 					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
 					<span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span>
 				</span>
-				<div class="menu left">
+				<div class="menu">
 					<a class="item" href="{{AppSubUrl}}/repo/create">
 						{{svg "octicon-plus"}} {{ctx.Locale.Tr "new_repo"}}
 					</a>
diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css
index 9cec5fcbe6322..f1fec7813ef6a 100644
--- a/web_src/css/modules/header.css
+++ b/web_src/css/modules/header.css
@@ -135,7 +135,8 @@ h4.ui.header .sub.header {
 }
 
 /* open dropdown menus to the left in right-attached headers */
-.ui.attached.header > .ui.right .ui.dropdown .menu {
+.ui.attached.header > .ui.right .ui.dropdown .menu,
+.navbar-right .ui.dropdown .menu {
   right: 0;
   left: auto;
 }

From 1ed3d8e9f846304bad7acaeeb36fe14c3a57bf0b Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 7 Jun 2024 05:23:39 +0200
Subject: [PATCH 02/10] add comment

---
 web_src/css/modules/header.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css
index f1fec7813ef6a..8055026d6e095 100644
--- a/web_src/css/modules/header.css
+++ b/web_src/css/modules/header.css
@@ -135,6 +135,7 @@ h4.ui.header .sub.header {
 }
 
 /* open dropdown menus to the left in right-attached headers */
+/* this method must be used instead of "left menu" because otherwise menus will flash on page load. */
 .ui.attached.header > .ui.right .ui.dropdown .menu,
 .navbar-right .ui.dropdown .menu {
   right: 0;

From 6bae116ef9a2b8e8fc77d8ff9accacff755044cf Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 7 Jun 2024 06:08:26 +0200
Subject: [PATCH 03/10] Update web_src/css/modules/header.css

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

diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css
index 8055026d6e095..16d3ef6c6691b 100644
--- a/web_src/css/modules/header.css
+++ b/web_src/css/modules/header.css
@@ -135,7 +135,7 @@ h4.ui.header .sub.header {
 }
 
 /* open dropdown menus to the left in right-attached headers */
-/* this method must be used instead of "left menu" because otherwise menus will flash on page load. */
+/* this method must be used instead of "left menu" because otherwise the menu will flash on page load. */
 .ui.attached.header > .ui.right .ui.dropdown .menu,
 .navbar-right .ui.dropdown .menu {
   right: 0;

From 5331b2ffbb19d53f01029b6ccb85fbad6dc45565 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 7 Jun 2024 19:48:37 +0200
Subject: [PATCH 04/10] Update web_src/css/modules/header.css

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

diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css
index 16d3ef6c6691b..2620913bcc38f 100644
--- a/web_src/css/modules/header.css
+++ b/web_src/css/modules/header.css
@@ -135,7 +135,7 @@ h4.ui.header .sub.header {
 }
 
 /* open dropdown menus to the left in right-attached headers */
-/* this method must be used instead of "left menu" because otherwise the menu will flash on page load. */
+/* this method must be used instead of "left menu" because otherwise the menu will flash on page load because of `display` CSS. */
 .ui.attached.header > .ui.right .ui.dropdown .menu,
 .navbar-right .ui.dropdown .menu {
   right: 0;

From 76f5e50c71f0cafba5ef7d23d1a92cacafff5de0 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 11 Jun 2024 22:53:17 +0200
Subject: [PATCH 05/10] remove 'ui secondary menu' from navbar left/right

---
 templates/base/head_navbar.tmpl |  8 ++++----
 web_src/css/modules/header.css  |  3 +--
 web_src/css/modules/navbar.css  | 18 ++++++++++++++----
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 7a3e663c494f0..33fd618f80532 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -4,14 +4,14 @@
 {{end}}
 
 <nav id="navbar" aria-label="{{ctx.Locale.Tr "aria.navbar"}}">
-	<div class="navbar-left ui secondary menu">
+	<div class="navbar-left">
 		<!-- the logo -->
 		<a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}">
 			<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
 		</a>
 
 		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
-		<div class="ui secondary menu item navbar-mobile-right only-mobile">
+		<div class="ui secondary menu item navbar-mobile-right only-mobile tw-my-0">
 			{{if and .IsSigned EnableTimetracking .ActiveStopwatch}}
 			<a id="mobile-stopwatch-icon" class="active-stopwatch item tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
 				<div class="tw-relative">
@@ -61,7 +61,7 @@
 	</div>
 
 	<!-- the full dropdown menus -->
-	<div class="navbar-right ui secondary menu">
+	<div class="navbar-right">
 		{{if and .IsSigned .MustChangePassword}}
 			<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
 				<span class="text tw-flex tw-items-center">
@@ -104,7 +104,7 @@
 					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
 					<span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span>
 				</span>
-				<div class="menu">
+				<div class="left menu">
 					<a class="item" href="{{AppSubUrl}}/repo/create">
 						{{svg "octicon-plus"}} {{ctx.Locale.Tr "new_repo"}}
 					</a>
diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css
index 2620913bcc38f..4c86fa6151760 100644
--- a/web_src/css/modules/header.css
+++ b/web_src/css/modules/header.css
@@ -136,8 +136,7 @@ h4.ui.header .sub.header {
 
 /* open dropdown menus to the left in right-attached headers */
 /* this method must be used instead of "left menu" because otherwise the menu will flash on page load because of `display` CSS. */
-.ui.attached.header > .ui.right .ui.dropdown .menu,
-.navbar-right .ui.dropdown .menu {
+.ui.attached.header > .ui.right .ui.dropdown .menu {
   right: 0;
   left: auto;
 }
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index 848f9331d0f4c..f73cabe173432 100644
--- a/web_src/css/modules/navbar.css
+++ b/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;
 }

From 721c9ea1abf29182cc9b1fbc834fd209d896f88a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 11 Jun 2024 22:56:39 +0200
Subject: [PATCH 06/10] remove outdated comment

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

diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css
index 4c86fa6151760..9cec5fcbe6322 100644
--- a/web_src/css/modules/header.css
+++ b/web_src/css/modules/header.css
@@ -135,7 +135,6 @@ h4.ui.header .sub.header {
 }
 
 /* open dropdown menus to the left in right-attached headers */
-/* this method must be used instead of "left menu" because otherwise the menu will flash on page load because of `display` CSS. */
 .ui.attached.header > .ui.right .ui.dropdown .menu {
   right: 0;
   left: auto;

From 503c5b71c164f28974a554d2ab9f4c84c3c72400 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 11 Jun 2024 23:00:59 +0200
Subject: [PATCH 07/10] remove 'ui secondary menu' from labels list header and
 the related CSS

---
 templates/repo/issue/labels/label_list.tmpl | 24 ++++++++++-----------
 web_src/css/modules/header.css              |  6 ------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/templates/repo/issue/labels/label_list.tmpl b/templates/repo/issue/labels/label_list.tmpl
index 8d7fc2c3dbfc3..cd65376edc981 100644
--- a/templates/repo/issue/labels/label_list.tmpl
+++ b/templates/repo/issue/labels/label_list.tmpl
@@ -1,19 +1,17 @@
 <h4 class="ui top attached header">
 	{{ctx.Locale.Tr "repo.issues.label_count" .NumLabels}}
 	<div class="ui right">
-		<div class="ui secondary menu">
-			<!-- Sort -->
-			<div class="item ui jump dropdown tw-py-2">
-				<span class="text">
-					{{ctx.Locale.Tr "repo.issues.filter_sort"}}
-				</span>
-				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-				<div class="menu">
-					<a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active {{end}}item" href="?sort=alphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
-					<a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="?sort=reversealphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
-					<a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="?sort=leastissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
-					<a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="?sort=mostissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>
-				</div>
+		<!-- Sort -->
+		<div class="item ui jump dropdown tw-py-2">
+			<span class="text">
+				{{ctx.Locale.Tr "repo.issues.filter_sort"}}
+			</span>
+			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+			<div class="left menu">
+				<a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active {{end}}item" href="?sort=alphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
+				<a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="?sort=reversealphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
+				<a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="?sort=leastissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
+				<a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="?sort=mostissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>
 			</div>
 		</div>
 	</div> <!-- filter menu -->
diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css
index 9cec5fcbe6322..20f98bfbac293 100644
--- a/web_src/css/modules/header.css
+++ b/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 {

From 482fee26dddfae75091809cf5522f708e89a4841 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 12 Jun 2024 10:14:26 +0800
Subject: [PATCH 08/10] fix "left menu" in vue

---
 web_src/js/components/DiffCommitSelector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue
index c28be67e388cf..6a4a84f615fe3 100644
--- a/web_src/js/components/DiffCommitSelector.vue
+++ b/web_src/js/components/DiffCommitSelector.vue
@@ -202,7 +202,7 @@ export default {
     >
       <svg-icon name="octicon-git-commit"/>
     </button>
-    <div class="menu left transition" id="diff-commit-selector-menu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'">
+    <div class="left menu" id="diff-commit-selector-menu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'">
       <div class="loading-indicator is-loading" v-if="isLoading"/>
       <div v-if="!isLoading" class="vertical item" id="diff-commit-list-show-all" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()">
         <div class="gt-ellipsis">

From 94307ff44ac49c4cf1eef668697e7c2675383220 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 12 Jun 2024 10:50:49 +0800
Subject: [PATCH 09/10] fix menu

---
 templates/base/head_navbar.tmpl             |  4 ++--
 templates/repo/issue/labels/label_list.tmpl |  2 +-
 web_src/css/modules/navbar.css              |  2 +-
 web_src/js/modules/fomantic/dropdown.js     | 15 +++++++++++++++
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 33fd618f80532..4889924819360 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -11,7 +11,7 @@
 		</a>
 
 		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
-		<div class="ui secondary menu item navbar-mobile-right only-mobile tw-my-0">
+		<div class="ui secondary menu item navbar-mobile-right only-mobile">
 			{{if and .IsSigned EnableTimetracking .ActiveStopwatch}}
 			<a id="mobile-stopwatch-icon" class="active-stopwatch item tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
 				<div class="tw-relative">
@@ -104,7 +104,7 @@
 					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
 					<span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span>
 				</span>
-				<div class="left menu">
+				<div class="menu">
 					<a class="item" href="{{AppSubUrl}}/repo/create">
 						{{svg "octicon-plus"}} {{ctx.Locale.Tr "new_repo"}}
 					</a>
diff --git a/templates/repo/issue/labels/label_list.tmpl b/templates/repo/issue/labels/label_list.tmpl
index cd65376edc981..413d6405b22d2 100644
--- a/templates/repo/issue/labels/label_list.tmpl
+++ b/templates/repo/issue/labels/label_list.tmpl
@@ -7,7 +7,7 @@
 				{{ctx.Locale.Tr "repo.issues.filter_sort"}}
 			</span>
 			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-			<div class="left menu">
+			<div class="menu">
 				<a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active {{end}}item" href="?sort=alphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
 				<a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="?sort=reversealphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
 				<a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="?sort=leastissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index f73cabe173432..556da2df3b051 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -80,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 {
diff --git a/web_src/js/modules/fomantic/dropdown.js b/web_src/js/modules/fomantic/dropdown.js
index 82e710860dffe..ae900731e1a20 100644
--- a/web_src/js/modules/fomantic/dropdown.js
+++ b/web_src/js/modules/fomantic/dropdown.js
@@ -94,6 +94,21 @@ function delegateOne($dropdown) {
     updateSelectionLabel($label[0]);
     return $label;
   });
+
+  const oldSet = dropdownCall('internal', 'set');
+  const oldSetDirection = oldSet.direction;
+  oldSet.direction = function($menu) {
+    oldSetDirection.call(this, $menu);
+    const classNames = dropdownCall('setting', 'className');
+    $menu = $menu || $dropdown.find('> .menu');
+    const elMenu = $menu[0];
+    // detect whether the menu is outside the viewport, and adjust the position
+    elMenu.classList.add(classNames.loading);
+    if (elMenu.getBoundingClientRect().right > document.documentElement.clientWidth) {
+      elMenu.classList.add(classNames.leftward);
+    }
+    elMenu.classList.remove(classNames.loading);
+  };
 }
 
 // for static dropdown elements (generated by server-side template), prepare them with necessary aria attributes

From 0eb404f73fa2c27258ef347bc2dfa700dd57864d Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 12 Jun 2024 11:37:00 +0800
Subject: [PATCH 10/10] Update web_src/js/modules/fomantic/dropdown.js

---
 web_src/js/modules/fomantic/dropdown.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web_src/js/modules/fomantic/dropdown.js b/web_src/js/modules/fomantic/dropdown.js
index ae900731e1a20..bbffb59152517 100644
--- a/web_src/js/modules/fomantic/dropdown.js
+++ b/web_src/js/modules/fomantic/dropdown.js
@@ -103,6 +103,7 @@ function delegateOne($dropdown) {
     $menu = $menu || $dropdown.find('> .menu');
     const elMenu = $menu[0];
     // detect whether the menu is outside the viewport, and adjust the position
+    // there is a bug in fomantic's builtin `direction` function, in some cases (when the menu width is only a little larger) it wrongly opens the menu at right and triggers the scrollbar.
     elMenu.classList.add(classNames.loading);
     if (elMenu.getBoundingClientRect().right > document.documentElement.clientWidth) {
       elMenu.classList.add(classNames.leftward);