Fixing issue filter

templates/repo/issue/list.tmpl

@@ -81,14 +81,14 @@
 				{{end}}
 			{{end}}
 		</div>
-		<div id="issue-filters" class="issue-list-toolbar">
-			<div class="issue-list-toolbar-left">
+		<div id="issue-filters" class="ui grid">
+			<div class="six wide column issue-list-toolbar-left">
 				{{if and ($.CanWriteIssuesOrPulls) (gt (len .Issues) 0)}}
 					<input type="checkbox" autocomplete="off" class="issue-checkbox-all gt-mr-4" title="{{.locale.Tr "repo.issues.action_check_all"}}">
 				{{end}}
 				{{template "repo/issue/openclose" .}}
 			</div>
-			<div class="issue-list-toolbar-right">
+			<div class="ten wide column issue-list-toolbar-right">
 				<div class="ui secondary filter stackable menu labels">
 					<!-- Label -->
 					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter">
@@ -273,24 +273,21 @@
 			</div>
 		</div>
 
-		<div id="issue-actions" class="issue-list-toolbar gt-hidden">
-			<div class="issue-list-toolbar-left">
+		<div id="issue-actions" class="ui grid issue-list-toolbar gt-hidden">
+			<div class="six wide column issue-list-toolbar-left">
 				{{template "repo/issue/openclose" .}}
 			</div>
-			<div class="issue-list-toolbar-right">
+			<div class="ten wide column  issue-list-toolbar-right">
 				<div class="ui secondary filter stackable menu">
 					{{if not .Repository.IsArchived}}
 					<!-- Action Button -->
 					{{if .IsShowClosed}}
-						<button class="ui green basic button issue-action gt-ml-auto" data-action="open" data-url="{{$.RepoLink}}/issues/status">{{.locale.Tr "repo.issues.action_open"}}</button>
+						<button class="ui green active basic button issue-action" data-action="open" data-url="{{$.RepoLink}}/issues/status">{{.locale.Tr "repo.issues.action_open"}}</button>
 					{{else}}
-						<button class="ui red basic button issue-action gt-ml-auto" data-action="close" data-url="{{$.RepoLink}}/issues/status">{{.locale.Tr "repo.issues.action_close"}}</button>
+						<button class="ui red active basic button issue-action" data-action="close" data-url="{{$.RepoLink}}/issues/status">{{.locale.Tr "repo.issues.action_close"}}</button>
 					{{end}}
 					{{if $.IsRepoAdmin}}
-						<button class="ui red button issue-action gt-ml-auto"
-							data-action="delete" data-url="{{$.RepoLink}}/issues/delete"
-							data-action-delete-confirm="{{.locale.Tr "confirm_delete_selected"}}"
-						>{{.locale.Tr "repo.issues.delete"}}</button>
+						<button class="ui red button issue-action " data-action="delete" data-url="{{$.RepoLink}}/issues/delete" data-action-delete-confirm="{{.locale.Tr "confirm_delete_selected"}}">{{.locale.Tr "repo.issues.delete"}}</button>
 					{{end}}
 					<!-- Labels -->
 					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item">

web_src/css/repo/issue-list.css

@@ -1,35 +1,133 @@
-.issue-list-toolbar {
+#issue-filters > .issue-list-toolbar-left,
+#issue-actions > .issue-list-toolbar-left {
+  flex-direction: row;
   display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 1rem;
-  margin-top: 1rem;
 }
 
-.issue-list-toolbar-left {
-  display: flex;
+#issue-actions {
+  margin-top: 0;
 }
 
-.issue-list-toolbar-right {
-  margin-left: auto;
+@media only screen and (min-width: 1200px) {
+  #issue-filters {
+    margin-top: 0;
+    margin-left: auto;
+    padding-right: 0;
+  }
+
+  .issue-list-toolbar-right > .filter.menu {
+    justify-content: flex-end;
+  }
+
+  #issue-filters > .issue-list-toolbar-left {
+    padding-left: 0;
+  }
 }
 
-@media (max-width: 767.98px) {
+@media only screen and  (max-width: 769px) {
+  #issue-filters {
+    margin-right: 0;
+  }
+
+  #issue-filters > .issue-list-toolbar-right {
+    margin-right: auto;
+    width: 100% !important;
+    padding-top: 0;
+  }
+
+  .issue-list-toolbar-right > .filter.menu {
+    flex-direction: row;
+    overflow-x: scroll;
+  }
+
+  .issue-list-toolbar-right > .filter.menu > .item {
+    max-width: fit-content;
+  }
+
+  #issue-filters > .issue-list-toolbar-left {
+    margin-top: 14px !important;
+  }
+
+  .ui.stackable.menu > .dropdown.item {
+    position: initial;
+  }
+
   .issue-list-toolbar {
     flex-direction: column-reverse;
   }
+
   .issue-list-toolbar-right {
     margin-right: auto;
     width: 100%;
   }
+
   .issue-list-navbar {
     order: 0;
   }
+
   .issue-list-new {
     order: 1;
     margin-left: auto !important;
   }
+
   .issue-list-search {
     order: 2 !important;
   }
+
+  #issue-actions {
+    flex-direction: column;
+    margin-right: 0;
+  }
+
+  #issue-actions > .issue-list-toolbar-right {
+    width: 100% !important;
+    padding-top: 0 !important;
+    padding-bottom: 0;
+  }
+
+  #issue-actions > .issue-list-toolbar-right > .filter.menu {
+    padding-left: .5rem;
+  }
+
+  .repository .filter.menu .ui.dropdown.label-filter .menu,
+  .repository .filter.menu .ui.dropdown .menu {
+    left: 8px;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+  #issue-filters {
+    flex-direction: column;
+    margin-top: 0;
+  }
+
+  #issue-filters > .issue-list-toolbar-right {
+    margin-top: 0;
+    padding: 0 1rem;
+  }
+
+  #issue-actions {
+    justify-content: flex-end;
+  }
+
+  #issue-actions > .issue-list-toolbar-right .filter.menu {
+    justify-content: flex-end;
+  }
+}
+
+@media only screen and (min-width: 1024px) and (max-width: 1200px) {
+  #issue-filters {
+    flex-direction: column;
+    margin-top: 0;
+  }
+
+  #issue-filters > .issue-list-toolbar-right {
+    margin-top: 0;
+    padding: 0 1rem;
+  }
+
+  #issue-actions > .issue-list-toolbar-right {
+    display: flex;
+    justify-content: flex-end;
+  }
 }