From b93c87b6fe025408777d9f2091d29941e439e58c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 27 Apr 2024 15:35:26 +0200
Subject: [PATCH] Issue card improvements (#30687)

Fixes https://github.com/go-gitea/gitea/issues/30682 and does a few
improvements:

- Use gap instead of margin/padding
- Don't render empty image div
- Remove `right floated` class that did nothing

<img width="406" alt="Screenshot 2024-04-24 at 20 21 20"
src="https://github.com/go-gitea/gitea/assets/115237/2fa88707-c2c4-40df-aee7-a684c3097ed0">

---------

Co-authored-by: KN4CK3R <admin@oldschoolhack.me>
---
 templates/repo/issue/card.tmpl  | 25 +++++++++++++++----------
 web_src/css/repo/issue-card.css |  2 +-
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl
index bb9340bb2e4..4a0ac050aa2 100644
--- a/templates/repo/issue/card.tmpl
+++ b/templates/repo/issue/card.tmpl
@@ -1,13 +1,16 @@
 {{with .Issue}}
 	{{if eq $.Page.Project.CardType 1}}{{/* Images and Text*/}}
+		{{$attachments := index $.Page.issuesAttachmentMap .ID}}
+		{{if $attachments}}
 		<div class="card-attachment-images">
-			{{range (index $.Page.issuesAttachmentMap .ID)}}
+			{{range $attachments}}
 				<img src="{{.DownloadURL}}" alt="{{.Name}}" />
 			{{end}}
 		</div>
+		{{end}}
 	{{end}}
-	<div class="content tw-p-0 tw-w-full">
-		<div class="tw-flex tw-items-start">
+	<div class="content tw-w-full">
+		<div class="tw-flex tw-items-start tw-gap-[5px]">
 			<div class="issue-card-icon">
 				{{template "shared/issueicon" .}}
 			</div>
@@ -18,7 +21,7 @@
 				</a>
 			{{end}}
 		</div>
-		<div class="meta tw-my-1">
+		<div class="meta">
 			<span class="text light grey muted-links">
 				{{if not $.Page.Repository}}{{.Repo.FullName}}{{end}}#{{.Index}}
 				{{$timeStr := TimeSinceUnix .GetLastEventTimestamp ctx.Locale}}
@@ -59,13 +62,15 @@
 	</div>
 
 	{{if or .Labels .Assignees}}
-	<div class="extra content labels-list tw-p-0 tw-pt-1">
-		{{range .Labels}}
-			<a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{RenderLabel ctx ctx.Locale .}}</a>
-		{{end}}
-		<div class="right floated">
+	<div class="tw-flex tw-justify-between">
+		<div class="labels-list tw-flex-1">
+			{{range .Labels}}
+				<a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{RenderLabel ctx ctx.Locale .}}</a>
+			{{end}}
+		</div>
+		<div class="tw-flex tw-flex-wrap tw-content-start tw-gap-1">
 			{{range .Assignees}}
-				<a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 28 "mini tw-mr-2"}}</a>
+				<a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 28}}</a>
 			{{end}}
 		</div>
 	</div>
diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css
index b9368df4f60..609b1b3dbd7 100644
--- a/web_src/css/repo/issue-card.css
+++ b/web_src/css/repo/issue-card.css
@@ -1,6 +1,7 @@
 .issue-card {
   display: flex;
   flex-direction: column;
+  gap: 4px;
   align-items: start;
   border-radius: var(--border-radius);
   padding: 8px 10px;
@@ -17,7 +18,6 @@
 .issue-card-title {
   flex: 1;
   font-size: 14px;
-  margin-left: 4px;
 }
 
 .issue-card.sortable-chosen .issue-card-title {