From 58ca578f64f9d3a3ac87576acd4a23e9c549ea4a Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Sun, 9 Mar 2025 16:24:52 +0000
Subject: [PATCH] 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             | 10 ++++++----
 templates/repo/issue/milestones.tmpl     |  2 +-
 templates/user/dashboard/milestones.tmpl |  2 +-
 web_src/css/shared/milestone.css         |  7 +++++++
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
index da77f7f6fb..5a9ba004eb 100644
--- a/templates/projects/list.tmpl
+++ b/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">
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
index fab483c79d..a070a02f72 100644
--- a/templates/repo/issue/milestones.tmpl
+++ b/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>
diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
index 3d046110ae..b269c63b37 100644
--- a/templates/user/dashboard/milestones.tmpl
+++ b/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>
diff --git a/web_src/css/shared/milestone.css b/web_src/css/shared/milestone.css
index 91e6b5e387..8578a09b5b 100644
--- a/web_src/css/shared/milestone.css
+++ b/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;