From 21798fa0d0a89c71ead166bf31ae5b01bda5aee8 Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Wed, 24 Sep 2025 17:45:31 +0200
Subject: [PATCH] feat(ui): improve display of repo topics (#9402)

* removed unused class `label-list`
* introduced a new class `repo-topics` to better maintain consistency across two different places - explore and repo overview
    * fixed vertical gap via flex on on explore
    * decreased usage of Tailwind in overview, decreased gaps - usually where topics or more often labels are shown in the UI they are quite dense and it makes sense as they also have padding

Explore - normal (desktop) - no changes

Before: https://codeberg.org/attachments/a4ea53b2-c38c-4dd8-adcc-bc6a3804dfe8
After: https://codeberg.org/attachments/94209a72-8b5f-45d7-b24a-5fa13ced3157

Explore - overflowing (mobile or too many tags) - fixed vertical margin

Before: https://codeberg.org/attachments/bad9531f-d4c7-4043-ac94-e57895c45b67
After: https://codeberg.org/attachments/269c39b8-939b-4dbb-af6a-938c2c2fd820

Repo - normal - decreased gap

Before: https://codeberg.org/attachments/74ce2114-7aea-47ec-883d-4115d81a96b4
After: https://codeberg.org/attachments/551ba599-a87d-4538-82c4-761e0c3098c9

Repo - overflowing - decreased gap while maintaining good gap for the manage button

Before: https://codeberg.org/attachments/a2ab2cd2-3080-475f-875a-8885981a554d
After: https://codeberg.org/attachments/8a33fe42-57e1-4aba-9e7c-da79bfe7d776

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9402
Reviewed-by: Lucas <sclu1034@noreply.codeberg.org>
---
 templates/explore/repo_list.tmpl |  4 ++--
 templates/repo/home.tmpl         | 11 +++++++----
 web_src/css/repo.css             | 13 ++++++++++++-
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
index ab5999832d..ee2fc9c9ad 100644
--- a/templates/explore/repo_list.tmpl
+++ b/templates/explore/repo_list.tmpl
@@ -11,7 +11,7 @@
 						<a class="text primary name" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
 						{{end}}
 						<a class="text primary name" href="{{.Link}}">{{.Name}}</a>
-						<span class="label-list">
+						<span>
 							{{if .IsArchived}}
 								<span class="ui label">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
 							{{end}}
@@ -56,7 +56,7 @@
 					<div class="flex-item-body">{{$description}}</div>
 				{{end}}
 				{{if .Topics}}
-					<div class="label-list">
+					<div class="repo-topics">
 					{{range .Topics}}
 						{{if ne . ""}}<a class="ui label" href="{{AppSubUrl}}/explore/repos?q={{.}}&topic=1">{{.}}</a>{{end}}
 					{{end}}
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 39d0c6c751..c87d7d0bf8 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -11,10 +11,13 @@
 				{{if .Repository.Website}}<a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>{{end}}
 			</div>
 		</div>
-		<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-my-2" id="repo-topics">
-			{{/* it should match the code in issue-home.js */}}
-			{{range .Topics}}<a class="repo-topic ui large label" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+		<div class="repo-topics tw-my-2" id="repo-topics">
+			{{range .Topics}}
+				<a class="repo-topic ui large label" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>
+			{{end}}
+			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
+				<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>
+			{{end}}
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 87fca9024a..f9e886e770 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2329,12 +2329,23 @@ tbody.commit-list {
   top: -2px;
 }
 
-#repo-topics .repo-topic {
+.repo-topics {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.repo-topics .repo-topic {
   font-weight: var(--font-weight-normal);
   cursor: pointer;
   margin: 0;
 }
 
+.repo-topics .repo-topic:last-of-type {
+  margin-right: 0.5rem;
+}
+
 #new-dependency-drop-list.ui.selection.dropdown {
   min-width: 0;
   width: 100%;