From c20eb72285efd256b4725015202071fe67056071 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 31 Mar 2023 01:53:51 +0800
Subject: [PATCH] Fix dropdown direction behavior (#23806)

Close #23803

More details in the comment.


![image](https://user-images.githubusercontent.com/2114189/228728786-7ec942b0-1f21-432d-93eb-575c77508b14.png)


![image](https://user-images.githubusercontent.com/2114189/228728825-62afb85e-7bfb-4702-a8bc-6c2160429978.png)
---
 templates/repo/issue/list.tmpl       | 4 ++--
 web_src/js/features/common-global.js | 9 ++++++++-
 web_src/js/modules/fomantic.js       | 4 ----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index c8d186bbf..80d1bec57 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -177,12 +177,12 @@
 					{{end}}
 
 					<!-- Sort -->
-					<div class="ui dropdown type jump item">
+					<div class="ui dropdown downward type jump item">
 						<span class="text">
 							{{.locale.Tr "repo.issues.filter_sort"}}
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
-						<div class="menu">
+						<div class="left menu">
 							<a class="{{if or (eq .SortType "latest") (not .SortType)}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=latest&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_sort.latest"}}</a>
 							<a class="{{if eq .SortType "oldest"}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=oldest&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_sort.oldest"}}</a>
 							<a class="{{if eq .SortType "recentupdate"}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=recentupdate&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_sort.recentupdate"}}</a>
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 96fa8a7dd..89e277ac8 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -111,8 +111,15 @@ export function initGlobalCommon() {
     },
   });
 
-  // special popup-directions
+  // Special popup-directions, prevent Fomantic from guessing the popup direction.
+  // With default "direction: auto", if the viewport height is small, Fomantic would show the popup upward,
+  //   if the dropdown is at the beginning of the page, then the top part would be clipped by the window view.
+  //   eg: Issue List "Sort" dropdown
+  // But we can not set "direction: downward" for all dropdowns, because there is a bug in dropdown menu positioning when calculating the "left" position,
+  //   which would make some dropdown popups slightly shift out of the right viewport edge in some cases.
+  //   eg: the "Create New Repo" menu on the navbar.
   $uiDropdowns.filter('.upward').dropdown('setting', 'direction', 'upward');
+  $uiDropdowns.filter('.downward').dropdown('setting', 'direction', 'downward');
 
   $('.ui.checkbox').checkbox();
 
diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js
index 218166249..2109ff172 100644
--- a/web_src/js/modules/fomantic.js
+++ b/web_src/js/modules/fomantic.js
@@ -9,10 +9,6 @@ export function initGiteaFomantic() {
   // Disable the behavior of fomantic to toggle the checkbox when you press enter on a checkbox element.
   $.fn.checkbox.settings.enableEnterKey = false;
 
-  // Prevent Fomantic from guessing the popup direction.
-  // Otherwise, if the viewport height is small, Fomantic would show the popup upward,
-  // if the dropdown is at the beginning of the page, then the top part would be clipped by the window view, eg: Issue List "Sort" dropdown
-  $.fn.dropdown.settings.direction = 'downward';
   // By default, use "exact match" for full text search
   $.fn.dropdown.settings.fullTextSearch = 'exact';
   // Do not use "cursor: pointer" for dropdown labels