4 files changed, 26 insertions, 8 deletions
diff --git a/web_src/css/index.css b/web_src/css/index.css
index cdd0c51a54..d6ef1da9b9 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -32,6 +32,7 @@
 @import "./repository.css";
 @import "./repository/release-tag.css";
 @import "./repository/issue-label.css";
+@import "./repository/issue-list.css";
 @import "./repository/list-header.css";
 @import "./editor.css";
 @import "./editor/combomarkdowneditor.css";
diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index 6ad6ba88a8..259cfda3a1 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -141,12 +141,19 @@
   font-size: 11px;
 }
 
-.repository .filter.menu .menu {
+/* make all issue filter dropdown menus popup leftward, to avoid go out the viewport (right side) */
+.repository .filter.menu .ui.dropdown .menu {
   max-height: 500px;
   max-width: 300px;
   overflow-x: hidden;
-  right: 0 !important;
-  left: auto !important;
+  right: 0;
+  left: auto;
+}
+
+/* the label-filter is the first dropdown, it shouldn't be shown leftward, otherwise it may go out the viewport (left side) */
+.repository .filter.menu .ui.dropdown.label-filter .menu {
+  right: unset;
+  left: 0;
 }
 
 .repository .select-label .desc {
@@ -2394,10 +2401,6 @@
   margin: 6px 0;
 }
 
-#issue-actions {
-  margin-top: -1rem !important; /* counteract padding from Semantic */
-}
-
 .ui.menu .item > img:not(.ui) {
   width: auto;
 }
diff --git a/web_src/css/repository/issue-list.css b/web_src/css/repository/issue-list.css
new file mode 100644
index 0000000000..2c2d3572e0
--- /dev/null
+++ b/web_src/css/repository/issue-list.css
@@ -0,0 +1,14 @@
+.issue-list-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.issue-list-toolbar-left {
+  display: flex;
+}
+
+.issue-list-toolbar-right {
+  margin-left: auto;
+}
diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js
index 915cd2e132..af0e80af81 100644
--- a/web_src/js/features/repo-issue-list.js
+++ b/web_src/js/features/repo-issue-list.js
@@ -23,7 +23,7 @@ function initRepoIssueListCheckboxes() {
     toggleElem($('#issue-filters'), !anyChecked);
     toggleElem($('#issue-actions'), anyChecked);
     // there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
-    $('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAll);
+    $('#issue-filters, #issue-actions').filter(':visible').find('.issue-list-toolbar-left').prepend($issueSelectAll);
   };
 
   $issueCheckboxes.on('change', syncIssueSelectionState);