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)

1 files changed, 8 insertions, 1 deletions

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 96fa8a7dd2..89e277ac84 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();