Improve issue list filter (#24425)

Partial regression of #24393, not only regression, but broken for long
time, 24393 didn't really improve it but used wrong `overflow: scroll`.

Actually, that "ui secondary filter menu labels" shouldn't be set as
scrollable (I missed that at that time), the problem is: if a "ui menu"
has "dropdown" items, then it should not be scrollable. Otherwise the
dropdown menu can't be shown correctly.

And there are more problems:

* The "issue-filters" shouldn't be used anywhere else (copying&pasting
problem again ....)
* There is also an "issue-actions" container, it should also be fixed.
* There are similar problems on the milestone page.
* The old comment in code: "grid column" doesn't work well.

The major changes of this PR are: use "flex: 1" instead of "ui grid
column".

After this PR, not 100% perfect but much better than before.

2 files changed, 23 insertions, 29 deletions

diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index fb2d8ee3bd..8e553ee7bb 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -17,18 +17,20 @@
 				{{end}}
 			{{end}}
 		</div>
+
 		<div class="ui divider"></div>
-		<div id="issue-filters" class="ui stackable grid">
-			<div class="six wide column">
+
+		<div id="issue-filters" class="issue-list-toolbar">
+			<div class="issue-list-toolbar-left">
 				{{if $.CanWriteIssuesOrPulls}}
-					<input type="checkbox" autocomplete="off" class="issue-checkbox-all gt-vm gt-mr-4" title="{{.locale.Tr "repo.issues.action_check_all"}}">
+					<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="ten wide right aligned column">
-				<div class="ui secondary filter menu labels gt-overflow-x-auto gt-overflow-y-hidden">
+			<div class="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" style="margin-left: auto">
+					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter">
 						<span class="text">
 							{{.locale.Tr "repo.issues.filter_label"}}
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
@@ -206,15 +208,12 @@
 				</div>
 			</div>
 		</div>
-		<div id="issue-actions" class="ui stackable grid gt-hidden">
-			<div class="six wide column">
+
+		<div id="issue-actions" class="issue-list-toolbar gt-hidden">
+			<div class="issue-list-toolbar-left">
 				{{template "repo/issue/openclose" .}}
 			</div>
-			{{/* Ten wide does not cope well and makes the columns stack.
-			This seems to be related to jQuery's hide/show: in fact, switching
-			issue-actions and issue-filters and having this ten wide will show
-			this one correctly, but not the other one. */}}
-			<div class="nine wide right aligned right floated column">
+			<div class="issue-list-toolbar-right">
 				<div class="ui secondary filter stackable menu">
 					{{if not .Repository.IsArchived}}
 					<!-- Action Button -->
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index 472bebb33f..a1fc245887 100644
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -2,12 +2,10 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository milestone-issue-list">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="ui two column stackable grid">
-			<div class="column">
-				<h1>{{.Milestone.Name}}</h1>
-			</div>
+		<div class="gt-df">
+			<h1>{{.Milestone.Name}}</h1>
 			{{if not .Repository.IsArchived}}
-				<div class="column right aligned">
+				<div class="text right gt-f1">
 					{{if or .CanWriteIssues .CanWritePulls}}
 						{{if .Milestone.IsClosed}}
 							<a class="ui green basic button link-action" href data-url="{{$.RepoLink}}/milestones/{{.MilestoneID}}/open">{{$.locale.Tr "repo.milestones.open"}}
@@ -45,11 +43,12 @@
 			</div>
 		</div>
 		<div class="ui divider"></div>
-		<div id="issue-filters" class="ui stackable grid">
-			<div class="six wide column">
+
+		<div id="issue-filters" class="issue-list-toolbar">
+			<div class="issue-list-toolbar-left">
 				{{template "repo/issue/openclose" .}}
 			</div>
-			<div class="ten wide right aligned column">
+			<div class="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" style="margin-left: auto">
@@ -145,16 +144,12 @@
 				</div>
 			</div>
 		</div>
-		<div id="issue-actions" class="ui stackable grid gt-hidden">
-			<div class="six wide column">
+
+		<div id="issue-actions" class="issue-list-toolbar gt-hidden">
+			<div class="issue-list-toolbar-left">
 				{{template "repo/issue/openclose" .}}
 			</div>
-
-			{{/* Ten wide does not cope well and makes the columns stack.
-			This seems to be related to jQuery's hide/show: in fact, switching
-			issue-actions and issue-filters and having this ten wide will show
-			this one correctly, but not the other one. */}}
-			<div class="nine wide right aligned right floated column">
+			<div class="issue-list-toolbar-right">
 				<div class="ui secondary filter stackable menu">
 					<!-- Action Button -->
 					{{if .IsShowClosed}}