Fix UI on mobile view (#25315)

Various fixes to pages or elements which were looking ugly on mobile. <details> <summary>Screenshots</summary> ![Bildschirmfoto vom 2023-06-17 20-38-41](https://github.com/go-gitea/gitea/assets/47871822/30b5d3ce-df3b-43eb-a4c2-c3790667fb9d) ![Bildschirmfoto vom 2023-06-17 20-39-27](https://github.com/go-gitea/gitea/assets/47871822/27c07b25-3602-4fb2-b34d-d5e875e054e9) ![Bildschirmfoto vom 2023-06-17 20-41-27](https://github.com/go-gitea/gitea/assets/47871822/dacdbb4e-e3dd-4b94-abf0-c68e3d64bd3b) ![Bildschirmfoto vom 2023-06-17 20-41-48](https://github.com/go-gitea/gitea/assets/47871822/72432c35-7c4a-4c7f-a767-3562f26a5c14) ![Bildschirmfoto vom 2023-06-17 20-42-37](https://github.com/go-gitea/gitea/assets/47871822/737c26ed-1910-4467-98ef-e8769bbbe6f0) ![Bildschirmfoto vom 2023-06-17 20-42-52](https://github.com/go-gitea/gitea/assets/47871822/1813b4bc-43c0-4912-8acb-5d799c090bf3) ![Bildschirmfoto vom 2023-06-17 20-43-06](https://github.com/go-gitea/gitea/assets/47871822/136466e8-34e5-419d-97ec-5202ff819fd2) ![Bildschirmfoto vom 2023-06-17 20-43-42](https://github.com/go-gitea/gitea/assets/47871822/59270bb2-d661-4a84-8504-3e50f771f767) ![Bildschirmfoto vom 2023-06-17 20-44-44](https://github.com/go-gitea/gitea/assets/47871822/494e274d-3771-4141-9419-0a4bbd8b7f64) </details> Co-authored by @silverwind --------- Co-authored-by: silverwind <me@silverwind.io>
2023-06-18 12:31:42 +07:00 · 2023-06-18 12:31:42 +07:00 · 9e74063498
parent 57120d9969
commit 9e74063498
17 changed files with 329 additions and 201 deletions
--- a/templates/projects/list.tmpl
+++ b/templates/projects/list.tmpl
@ -35,33 +35,36 @@
 				</div>
 			</div>
 		</div>
-		<div class="milestone list">
+		<div class="milestone-list">
 			{{range .Projects}}
-				<li class="item">
-					{{svg .IconName}} <a href="{{.Link}}">{{.Title}}</a>
-					<div class="meta">
-						{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
-						{{if .IsClosed}}
-							{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
+				<li class="milestone-card">
+					<h3 class="flex-text-block gt-m-0">
+						{{svg .IconName 16}}
+						<a class="muted" href="{{.Link}}">{{.Title}}</a>
+					</h3>
+					<div class="milestone-toolbar">
+						<div class="group">
+							<div class="flex-text-block">
+								{{svg "octicon-issue-opened" 14}}
+								{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
+							</div>
+							<div class="flex-text-block">
+								{{svg "octicon-check" 14}}
+								{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
+							</div>
+						</div>
+						{{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
+						<div class="group">
+							<a class="flex-text-inline" href="{{.Link}}/edit">{{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}}</a>
+							{{if .IsClosed}}
+								<a class="link-action flex-text-inline" href data-url="{{.Link}}/open">{{svg "octicon-check" 14}}{{$.locale.Tr "repo.projects.open"}}</a>
+							{{else}}
+								<a class="link-action flex-text-inline" href data-url="{{.Link}}/close">{{svg "octicon-skip" 14}}{{$.locale.Tr "repo.projects.close"}}</a>
+							{{end}}
+							<a class="delete-button flex-text-inline" href="#" data-url="{{.Link}}/delete">{{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}} tesssst</a>
+						</div>
 						{{end}}
-						<span class="issue-stats">
-							{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
-							{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
-							{{svg "octicon-check" 16 "gt-mr-3"}}
-							{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
-						</span>
 					</div>
-					{{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
-					<div class="ui right operate">
-						<a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Title}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
-						{{if .IsClosed}}
-							<a class="link-action" href data-url="{{$.Link}}/{{.ID}}/open">{{svg "octicon-check"}} {{$.locale.Tr "repo.projects.open"}}</a>
-						{{else}}
-							<a class="link-action" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-skip"}} {{$.locale.Tr "repo.projects.close"}}</a>
-						{{end}}
-						<a class="delete-button" href="#" data-url="{{$.Link}}/{{.ID}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
-					</div>
-					{{end}}
 					{{if .Description}}
 					<div class="content">
 						{{.RenderedContent|Str2html}}
--- a/templates/projects/view.tmpl
+++ b/templates/projects/view.tmpl
@ -46,7 +46,7 @@
 			{{if $.CanWriteProjects}}
 				<div class="column right aligned">
 					<div class="ui compact right small menu">
-						<a class="item" href="{{$.Link}}/edit?redirect=project" data-id={{$.Project.ID}} data-title={{$.Project.Title}}>
+						<a class="item" href="{{$.Link}}/edit?redirect=project">
 							{{svg "octicon-pencil"}}
 							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
 						</a>
--- a/templates/repo/activity.tmpl
+++ b/templates/repo/activity.tmpl
@ -2,25 +2,24 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository commits">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<h2 class="ui header">{{DateTime "long" .DateFrom}} - {{DateTime "long" .DateUntil}}
-			<div class="ui right">
-				<!-- Period -->
-				<div class="ui floating dropdown jump filter">
-					<div class="ui basic compact button">
-						<span class="text">
-							{{.locale.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong>
-							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-						</span>
-					</div>
-					<div class="menu">
-						<a class="{{if eq .Period "daily"}}active {{end}}item" href="{{$.RepoLink}}/activity/daily">{{.locale.Tr "repo.activity.period.daily"}}</a>
-						<a class="{{if eq .Period "halfweekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/halfweekly">{{.locale.Tr "repo.activity.period.halfweekly"}}</a>
-						<a class="{{if eq .Period "weekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/weekly">{{.locale.Tr "repo.activity.period.weekly"}}</a>
-						<a class="{{if eq .Period "monthly"}}active {{end}}item" href="{{$.RepoLink}}/activity/monthly">{{.locale.Tr "repo.activity.period.monthly"}}</a>
-						<a class="{{if eq .Period "quarterly"}}active {{end}}item" href="{{$.RepoLink}}/activity/quarterly">{{.locale.Tr "repo.activity.period.quarterly"}}</a>
-						<a class="{{if eq .Period "semiyearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/semiyearly">{{.locale.Tr "repo.activity.period.semiyearly"}}</a>
-						<a class="{{if eq .Period "yearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/yearly">{{.locale.Tr "repo.activity.period.yearly"}}</a>
-					</div>
+		<h2 class="ui header activity-header">
+			<span>{{DateTime "long" .DateFrom}} - {{DateTime "long" .DateUntil}}</span>
+			<!-- Period -->
+			<div class="ui floating dropdown jump filter">
+				<div class="ui basic compact button">
+					<span class="text">
+						{{.locale.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+					</span>
+				</div>
+				<div class="menu">
+					<a class="{{if eq .Period "daily"}}active {{end}}item" href="{{$.RepoLink}}/activity/daily">{{.locale.Tr "repo.activity.period.daily"}}</a>
+					<a class="{{if eq .Period "halfweekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/halfweekly">{{.locale.Tr "repo.activity.period.halfweekly"}}</a>
+					<a class="{{if eq .Period "weekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/weekly">{{.locale.Tr "repo.activity.period.weekly"}}</a>
+					<a class="{{if eq .Period "monthly"}}active {{end}}item" href="{{$.RepoLink}}/activity/monthly">{{.locale.Tr "repo.activity.period.monthly"}}</a>
+					<a class="{{if eq .Period "quarterly"}}active {{end}}item" href="{{$.RepoLink}}/activity/quarterly">{{.locale.Tr "repo.activity.period.quarterly"}}</a>
+					<a class="{{if eq .Period "semiyearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/semiyearly">{{.locale.Tr "repo.activity.period.semiyearly"}}</a>
+					<a class="{{if eq .Period "yearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/yearly">{{.locale.Tr "repo.activity.period.yearly"}}</a>
 				</div>
 			</div>
 		</h2>
--- a/templates/repo/empty.tmpl
+++ b/templates/repo/empty.tmpl
@ -26,7 +26,7 @@
 						<div class="item">
 							<h3>{{.locale.Tr "repo.clone_this_repo"}} <small>{{.locale.Tr "repo.clone_helper" "http://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository" | Str2html}}</small></h3>

-							<div class="gt-df">
+							<div class="repo-button-row">
 								{{if and .CanWriteCode (not .Repository.IsArchived)}}
 									<a class="ui small button" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/">
 										{{.locale.Tr "repo.editor.new_file"}}
@ -44,7 +44,7 @@
 						</div>

 						{{if not .Repository.IsArchived}}
-							<div class="ui divider"></div>
+							<div class="ui divider gt-my-0"></div>

 							<div class="item">
 								<h3>{{.locale.Tr "repo.create_new_repo_command"}}</h3>
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@ -71,13 +71,13 @@
 			{{template "repo/issue/search" .}}
 			{{if not .Repository.IsArchived}}
 				{{if .PageIsIssueList}}
-					<a class="ui small green button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
+					<a class="ui small green button issue-list-new" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
 				{{else}}
-					<a class="ui small green button new-pr-button{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.Repository.Link}}/compare/{{.Repository.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{.locale.Tr "repo.pulls.new"}}</a>
+					<a class="ui small green button new-pr-button issue-list-new{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.Repository.Link}}/compare/{{.Repository.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{.locale.Tr "repo.pulls.new"}}</a>
 				{{end}}
 			{{else}}
 				{{if not .PageIsIssueList}}
-					<a class="ui small green small button{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.PullRequestCtx.BaseRepo.Link}}/compare/{{.PullRequestCtx.BaseRepo.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{$.locale.Tr "action.compare_commits_general"}}</a>
+					<a class="ui small green small button issue-list-new{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.PullRequestCtx.BaseRepo.Link}}/compare/{{.PullRequestCtx.BaseRepo.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{$.locale.Tr "action.compare_commits_general"}}</a>
 				{{end}}
 			{{end}}
 		</div>
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@ -13,7 +13,7 @@
 		{{template "base/alert" .}}

 		<div class="list-header">
-			<div class="small-menu-items ui compact tiny menu">
+			<div class="small-menu-items ui compact tiny menu list-header-toggle">
 				<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
 					{{svg "octicon-milestone" 16 "gt-mr-3"}}
 					{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
@ -53,50 +53,70 @@
 		</div>

 		<!-- milestone list -->
-		<div class="milestone list">
+		<div class="milestone-list">
 			{{range .Milestones}}
-				<li class="item">
-					<div class="gt-df gt-ac gt-sb">
-						<h3 class="gt-df gt-ac gt-m-0 gt-fw">
-							{{svg "octicon-milestone" 16 "gt-mr-3"}}<a class="muted" href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a>
+				<li class="milestone-card">
+					<div class="milestone-header">
+						<h3 class="flex-text-block gt-m-0">
+							{{svg "octicon-milestone" 16}}
+							<a class="muted" href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a>
 						</h3>
 						<div class="gt-df gt-ac">
 							<span class="gt-mr-3">{{.Completeness}}%</span>
 							<progress value="{{.Completeness}}" max="100"></progress>
 						</div>
 					</div>
-					<div class="meta">
-						{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
-						{{if .IsClosed}}
-							{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
-						{{else}}
-							{{svg "octicon-calendar"}}
-							{{if .DeadlineString}}
-								<span {{if .IsOverdue}}class="overdue"{{end}}>{{DateTime "short" .DeadlineString}}</span>
-							{{else}}
-								{{$.locale.Tr "repo.milestones.no_due_date"}}
+					<div class="milestone-toolbar">
+						<div class="group">
+							<div class="flex-text-block">
+								{{svg "octicon-issue-opened" 14}}
+								{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
+							</div>
+							<div class="flex-text-block">
+								{{svg "octicon-check" 14}}
+								{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
+							</div>
+							{{if .TotalTrackedTime}}
+								<div class="flex-text-block">
+									{{svg "octicon-clock"}}
+									{{.TotalTrackedTime|Sec2Time}}
+								</div>
 							{{end}}
-						{{end}}
-						<span class="issue-stats">
-							{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
-							{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
-							{{svg "octicon-check" 16 "gt-mr-3"}}
-							{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
-							{{if .TotalTrackedTime}}{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}{{end}}
-							{{if .UpdatedUnix}}{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}}{{end}}
-						</span>
-					</div>
-					{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
-						<div class="ui right operate">
-							<a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
-							{{if .IsClosed}}
-								<a class="link-action" href data-url="{{$.Link}}/{{.ID}}/open">{{svg "octicon-check"}} {{$.locale.Tr "repo.milestones.open"}}</a>
-							{{else}}
-								<a class="link-action" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-x"}} {{$.locale.Tr "repo.milestones.close"}}</a>
+							{{if .UpdatedUnix}}
+								<div class="flex-text-block">
+									{{svg "octicon-clock"}}
+									{{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}}
+								</div>
 							{{end}}
-							<a class="delete-button" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
+							<div class="flex-text-block">
+								{{if .IsClosed}}
+									{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
+									{{svg "octicon-clock" 14}}
+									{{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
+								{{else}}
+									{{svg "octicon-calendar" 14}}
+									{{if .DeadlineString}}
+										<span {{if .IsOverdue}}class="overdue"{{end}}>
+											{{DateTime "short" .DeadlineString}}
+										</span>
+									{{else}}
+										{{$.locale.Tr "repo.milestones.no_due_date"}}
+									{{end}}
+								{{end}}
+							</div>
 						</div>
-					{{end}}
+						{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
+							<div class="group">
+								<a class="flex-text-inline" href="{{$.Link}}/{{.ID}}/edit">{{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}}</a>
+								{{if .IsClosed}}
+									<a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/open">{{svg "octicon-check" 14}}{{$.locale.Tr "repo.milestones.open"}}</a>
+								{{else}}
+									<a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-x" 14}}{{$.locale.Tr "repo.milestones.close"}}</a>
+								{{end}}
+								<a class="delete-button flex-text-inline" href="#" data-url="{{$.RepoLink}}/milestones/delete">{{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}}</a>
+							</div>
+						{{end}}
+					</div>
 					{{if .Content}}
 						<div class="markup content">
 							{{.RenderedContent|Str2html}}
--- a/templates/repo/issue/navbar.tmpl
+++ b/templates/repo/issue/navbar.tmpl
@ -1,4 +1,4 @@
-<h2 class="ui compact small menu header small-menu-items">
+<h2 class="ui compact small menu header small-menu-items issue-list-navbar">
 	<a class="{{if .PageIsLabels}}active {{end}}item" href="{{.RepoLink}}/labels">{{.locale.Tr "repo.labels"}}</a>
 	<a class="{{if .PageIsMilestones}}active {{end}}item" href="{{.RepoLink}}/milestones">{{.locale.Tr "repo.milestones"}}</a>
 </h2>
--- a/templates/repo/issue/search.tmpl
+++ b/templates/repo/issue/search.tmpl
@ -1,4 +1,4 @@
-<form class="list-header-search ui form ignore-dirty">
+<form class="list-header-search ui form ignore-dirty issue-list-search">
 	<div class="ui small search fluid action input">
 		<input type="hidden" name="type" value="{{$.ViewType}}">
 		<input type="hidden" name="state" value="{{$.State}}">
--- a/templates/repo/projects/list.tmpl
+++ b/templates/repo/projects/list.tmpl
@ -2,7 +2,7 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository projects milestones">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="navbar gt-mb-4">
+		<div class="navbar projects-header">
 			<div>
 				<div class="small-menu-items ui compact tiny menu">
 					<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
@ -15,7 +15,7 @@
 					</a>
 				</div>
 			</div>
-			<div>
+			<div class="projects-toolbar">
 				<!-- Sort -->
 				<div class="ui small dropdown type jump item">
 					<span class="text">
@ -35,33 +35,36 @@
 		</div>
 		{{template "base/alert" .}}

-		<div class="milestone list">
+		<div class="milestone-list">
 			{{range .Projects}}
-				<li class="item">
-					{{svg .IconName}} <a href="{{.Link}}">{{.Title}}</a>
-					<div class="meta">
-						{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
-						{{if .IsClosed}}
-							{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
-						{{end}}
-						<span class="issue-stats">
-							{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
-							{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
-							{{svg "octicon-check" 16 "gt-mr-3"}}
-							{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
-						</span>
-					</div>
-					{{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
-					<div class="ui right operate">
-						<a href="{{.Link}}/edit" data-id={{.ID}} data-title={{.Title}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
-						{{if .IsClosed}}
-							<a class="link-action" href data-url="{{.Link}}/open">{{svg "octicon-check"}} {{$.locale.Tr "repo.projects.open"}}</a>
-						{{else}}
-							<a class="link-action" href data-url="{{.Link}}/close">{{svg "octicon-skip"}} {{$.locale.Tr "repo.projects.close"}}</a>
+				<li class="milestone-card">
+					<h3 class="flex-text-block gt-m-0">
+						{{svg .IconName 16}}
+						<a class="muted" href="{{.Link}}">{{.Title}}</a>
+					</h3>
+					<div class="milestone-toolbar">
+						<div class="group">
+							<div class="flex-text-block">
+								{{svg "octicon-issue-opened" 14}}
+								{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
+							</div>
+							<div class="flex-text-block">
+								{{svg "octicon-check" 14}}
+								{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
+							</div>
+						</div>
+						{{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
+						<div class="group">
+							<a class="flex-text-inline" href="{{.Link}}/edit">{{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}}</a>
+							{{if .IsClosed}}
+								<a class="link-action flex-text-inline" href data-url="{{.Link}}/open">{{svg "octicon-check" 14}}{{$.locale.Tr "repo.projects.open"}}</a>
+							{{else}}
+								<a class="link-action flex-text-inline" href data-url="{{.Link}}/close">{{svg "octicon-skip" 14}}{{$.locale.Tr "repo.projects.close"}}</a>
+							{{end}}
+							<a class="delete-button flex-text-inline" href="#" data-url="{{.Link}}/delete">{{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}}</a>
+						</div>
 						{{end}}
-						<a class="delete-button" href="#" data-url="{{.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
 					</div>
-					{{end}}
 					{{if .Description}}
 					<div class="content">
 						{{.RenderedContent|Str2html}}
--- a/templates/repo/projects/view.tmpl
+++ b/templates/repo/projects/view.tmpl
@ -50,7 +50,7 @@
 			{{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
 				<div class="column right aligned">
 					<div class="ui compact right small menu">
-						<a class="item" href="{{$.RepoLink}}/projects/{{.Project.ID}}/edit?redirect=project" data-id={{$.Project.ID}} data-title={{$.Project.Title}}>
+						<a class="item" href="{{$.RepoLink}}/projects/{{.Project.ID}}/edit?redirect=project">
 							{{svg "octicon-pencil"}}
 							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
 						</a>
--- a/templates/user/dashboard/issues.tmpl
+++ b/templates/user/dashboard/issues.tmpl
@ -61,7 +61,7 @@
 			</div>
 			<div class="twelve wide column content">
 				<div class="list-header">
-					<div class="small-menu-items ui compact tiny menu">
+					<div class="small-menu-items ui compact tiny menu list-header-toggle">
 						<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
 							{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 							{{.locale.PrettyNumber .IssueStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
--- a/templates/user/dashboard/milestones.tmpl
+++ b/templates/user/dashboard/milestones.tmpl
@ -35,7 +35,7 @@
 			</div>
 			<div class="twelve wide column content">
 				<div class="list-header">
-					<div class="small-menu-items ui compact tiny menu">
+					<div class="small-menu-items ui compact tiny menu list-header-toggle">
 						<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
 							{{svg "octicon-milestone" 16 "gt-mr-3"}}
 							{{.locale.PrettyNumber .MilestoneStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
@ -71,52 +71,73 @@
 						</div>
 					</div>
 				</div>
-				<div class="milestone list">
+				<div class="milestone-list">
 					{{range .Milestones}}
-						<li class="item">
-							<div class="gt-df gt-ac gt-sb">
-								<h3 class="gt-df gt-ac gt-m-0 gt-fw">
-									<span class="ui large label">{{.Repo.FullName}}</span>
-									{{svg "octicon-milestone" 16 "gt-mr-3"}}<a class="muted" href="{{.Repo.Link}}/milestone/{{.ID}}">{{.Name}}</a>
+						<li class="milestone-card">
+							<div class="milestone-header">
+								<h3 class="flex-text-block gt-m-0">
+									<span class="ui large label">
+										{{.Repo.FullName}}
+									</span>
+									{{svg "octicon-milestone" 16}}
+									<a class="muted" href="{{.Repo.Link}}/milestone/{{.ID}}">{{.Name}}</a>
 								</h3>
 								<div class="gt-df gt-ac">
 									<span class="gt-mr-3">{{.Completeness}}%</span>
 									<progress value="{{.Completeness}}" max="100"></progress>
 								</div>
 							</div>
-							<div class="meta">
-								{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
-								{{if .IsClosed}}
-									{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
-								{{else}}
-									{{svg "octicon-calendar"}}
-									{{if .DeadlineString}}
-										<span {{if .IsOverdue}}class="overdue"{{end}}>{{DateTime "short" .DeadlineString}}</span>
-									{{else}}
-										{{$.locale.Tr "repo.milestones.no_due_date"}}
-									{{end}}
-								{{end}}
-								<span class="issue-stats">
-									{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
-									{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
-									{{svg "octicon-check" 16 "gt-mr-3"}}
-									{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
+							<div class="milestone-toolbar">
+								<div class="group">
+									<div class="flex-text-block">
+										{{svg "octicon-issue-opened" 14}}
+										{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
+									</div>
+									<div class="flex-text-block">
+										{{svg "octicon-check" 14}}
+										{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
+									</div>
 									{{if .TotalTrackedTime}}
-										{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}
+										<div class="flex-text-block">
+											{{svg "octicon-clock"}}
+											{{.TotalTrackedTime|Sec2Time}}
+										</div>
 									{{end}}
-								</span>
-							</div>
-							{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
-								<div class="ui right operate">
-									<a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
-									{{if .IsClosed}}
-										<a href="{{$.Link}}/{{.ID}}/open" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-check"}} {{$.locale.Tr "repo.milestones.open"}}</a>
-									{{else}}
-										<a href="{{$.Link}}/{{.ID}}/close" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-x"}} {{$.locale.Tr "repo.milestones.close"}}</a>
+									{{if .UpdatedUnix}}
+										<div class="flex-text-block">
+											{{svg "octicon-clock"}}
+											{{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}}
+										</div>
 									{{end}}
-									<a class="delete-button" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
+									<div class="flex-text-block">
+										{{if .IsClosed}}
+											{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
+											{{svg "octicon-clock" 14}}
+											{{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
+										{{else}}
+											{{svg "octicon-calendar" 14}}
+											{{if .DeadlineString}}
+												<span {{if .IsOverdue}}class="overdue"{{end}}>
+													{{DateTime "short" .DeadlineString}}
+												</span>
+											{{else}}
+												{{$.locale.Tr "repo.milestones.no_due_date"}}
+											{{end}}
+										{{end}}
+									</div>
 								</div>
-							{{end}}
+								{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
+									<div class="group">
+										<a class="flex-text-inline" href="{{$.Link}}/{{.ID}}/edit">{{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}}</a>
+										{{if .IsClosed}}
+											<a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/open">{{svg "octicon-check" 14}}{{$.locale.Tr "repo.milestones.open"}}</a>
+										{{else}}
+											<a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-x" 14}}{{$.locale.Tr "repo.milestones.close"}}</a>
+										{{end}}
+										<a class="delete-button flex-text-inline" href="#" data-url="{{$.RepoLink}}/milestones/delete">{{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}}</a>
+									</div>
+								{{end}}
+							</div>
 							{{if .Content}}
 								<div class="markup content">
 									{{.RenderedContent|Str2html}}
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@ -9,6 +9,7 @@
@import "./modules/comment.css";

@import "./shared/issuelist.css";
+@import "./shared/milestone.css";
@import "./shared/repoorg.css";
@import "./shared/settings.css";

--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@ -87,6 +87,18 @@
  }
 }

+.projects-header {
+  margin-bottom: 1rem;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.projects-toolbar {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 4px;
+}
+
 .repository .issue-content-right .menu {
  overflow-x: auto;
  max-height: 500px;
@ -225,6 +237,14 @@
  align-items: center;
 }

+@media (max-width: 767.68px) {
+  .repository.file.list .repo-description {
+    flex-direction: column;
+    gap: 8px;
+    align-items: normal;
+  }
+}
+
 .repository.file.list #repo-desc {
  font-size: 1.2em;
 }
@ -1167,56 +1187,6 @@
  margin-top: -8px;
 }

-.repository .milestone.list {
-  list-style: none;
-}
-
-.repository .milestone.list > .item {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.repository .milestone.list > .item + .item {
-  border-top: 1px solid var(--color-secondary);
-}
-
-.repository .milestone.list > .item progress {
-  width: 200px;
-  height: 16px;
-}
-
-.repository .milestone.list > .item .meta {
-  color: var(--color-text-light-2);
-  padding-top: 5px;
-}
-
-.repository .milestone.list > .item .meta .issue-stats .svg {
-  padding-left: 5px;
-}
-
-.repository .milestone.list > .item .meta .overdue {
-  color: var(--color-red);
-}
-
-.repository .milestone.list > .item .operate {
-  margin-top: -15px;
-}
-
-.repository .milestone.list > .item .operate > a {
-  font-size: 15px;
-  padding-top: 5px;
-  padding-right: 10px;
-  color: var(--color-text-light-2);
-}
-
-.repository .milestone.list > .item .operate > a:hover {
-  color: var(--color-text);
-}
-
-.repository .milestone.list > .item .content {
-  padding-top: 10px;
-}
-
 .repository.new.milestone textarea {
  height: 200px;
 }
@ -1964,6 +1934,13 @@
  }
 }

+.repository .activity-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 .repository.settings.collaboration .collaborator.list {
  padding: 0;
 }
@ -3381,6 +3358,12 @@ tbody.commit-list {
  margin-bottom: 8px;
 }

+@media (max-width: 767.98px) {
+  #issue-pins {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
 .pinned-issue-card {
  border-radius: var(--border-radius);
  padding: 8px 10px;
--- a/web_src/css/repo/issue-list.css
+++ b/web_src/css/repo/issue-list.css
@ -13,3 +13,23 @@
 .issue-list-toolbar-right {
  margin-left: auto;
 }
+
+@media (max-width: 767.98px) {
+  .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;
+  }
+}
--- a/web_src/css/repo/list-header.css
+++ b/web_src/css/repo/list-header.css
@ -8,7 +8,6 @@
 .list-header-sort {
  display: flex;
  align-items: center;
-  justify-content: flex-end;
  padding-left: 1rem;
  padding-right: 1rem;
 }
@ -44,3 +43,16 @@
 .small-menu-items .item.active {
  background: var(--color-active) !important;
 }
+
+@media (max-width: 767.98px) {
+  .list-header-search {
+    order: 0;
+  }
+  .list-header-toggle {
+    order: 1;
+  }
+  .list-header-sort {
+    order: 2;
+    margin-left: auto;
+  }
+}
--- a/web_src/css/shared/milestone.css
+++ b/web_src/css/shared/milestone.css
@ -0,0 +1,66 @@
+.milestone-list {
+  list-style: none;
+}
+
+.milestone-card {
+  width: 100%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.milestone-card + .milestone-card {
+  border-top: 1px solid var(--color-secondary);
+}
+
+.milestone-card .content {
+  padding-top: 10px;
+}
+
+.milestone-header progress {
+  width: 200px;
+  height: 16px;
+}
+
+.milestone-header {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.milestone-toolbar {
+  padding-top: 5px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: space-between;
+}
+
+.milestone-toolbar .group {
+  color: var(--color-text-light-2);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.milestone-toolbar .group .overdue {
+  color: var(--color-red);
+}
+
+.milestone-toolbar .group > a {
+  font-size: 15px;
+  color: var(--color-text-light-2);
+}
+
+.milestone-toolbar .group > a:hover {
+  color: var(--color-text);
+}
+
+@media (max-width: 767.98px) {
+  .milestone-card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+}