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>

2 files changed, 58 insertions, 37 deletions

diff --git a/templates/user/dashboard/issues.tmpl b/templates/user/dashboard/issues.tmpl
index cbb153a343..e7762c5a93 100644
--- 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"}}
diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
index 372d3c7b99..23b7b27116 100644
--- 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}}