fix(ui): improve milestone/project header consistency (#7174)

The related CSS `milestone-card` is used in 3 places:
* global milestone view `/milestones`
* per-repo milestone view
* per-user/org projects view

The first two had gaps too small basically provided by whitespace. The latter was using an unusually large gap via tailwind.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7174
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>

templates/projects/list.tmpl

@@ -41,10 +41,12 @@
 <div class="milestone-list">
 	{{range .Projects}}
 		<li class="milestone-card">
-			<h3 class="flex-text-block tw-m-0 tw-gap-3">
-				{{svg .IconName 16}}
-				<a class="muted tw-break-anywhere" href="{{.Link ctx}}">{{.Title}}</a>
-			</h3>
+			<div class="milestone-header">
+				<h3>
+					{{svg .IconName 16}}
+					<a class="muted tw-break-anywhere" href="{{.Link ctx}}">{{.Title}}</a>
+				</h3>
+			</div>
 			<div class="milestone-toolbar">
 				<div class="group">
 					<div class="flex-text-block">

templates/repo/issue/milestones.tmpl

@@ -21,7 +21,7 @@
 			{{range .Milestones}}
 				<li class="milestone-card">
 					<div class="milestone-header">
-						<h3 class="flex-text-block tw-m-0">
+						<h3>
 							{{svg "octicon-milestone" 16}}
 							<a class="muted" href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a>
 						</h3>

templates/user/dashboard/milestones.tmpl

@@ -73,7 +73,7 @@
 					{{range .Milestones}}
 						<li class="milestone-card">
 							<div class="milestone-header">
-								<h3 class="flex-text-block tw-m-0">
+								<h3>
 									<span class="ui large label">
 										{{.Repo.FullName}}
 									</span>

web_src/css/shared/milestone.css

@@ -29,6 +29,13 @@
   justify-content: space-between;
 }
 
+.milestone-header h3 {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  gap: 0.5rem;
+}
+
 .milestone-toolbar {
   padding-top: 5px;
   display: flex;