From 7a2ff6c1621c8b1bfb24fa10bf4fa714a0882c9f Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Mon, 6 Nov 2023 18:23:50 +0900
Subject: [PATCH] Fix edit topic UI (#27925)

Before:
desktop view:

![image](https://github.com/go-gitea/gitea/assets/18380374/c04d8730-5dac-4318-9643-72801da0ca16)
mobile view:

![image](https://github.com/go-gitea/gitea/assets/18380374/187220d3-1fcc-4db8-9cf8-ee88fe92d989)
after click `Save` btn:

![image](https://github.com/go-gitea/gitea/assets/18380374/c3242470-7e6f-4ddc-a2ac-d896bbd39529)

![image](https://github.com/go-gitea/gitea/assets/18380374/82e03ba5-a6d2-4437-b074-387e7ad5b6ba)
refresh the page, you will see that `gt-m-0` is missing after save
topic:

![image](https://github.com/go-gitea/gitea/assets/18380374/26914820-9363-483c-af70-78b76de47523)


After:
desktop view:

![image](https://github.com/go-gitea/gitea/assets/18380374/12d878e1-351e-4983-b3d9-5216e9f30a19)
mobile view:

![image](https://github.com/go-gitea/gitea/assets/18380374/4adf9b0f-977b-4bbc-a42f-b9bfb2d648dd)
after click `Save` btn:

![image](https://github.com/go-gitea/gitea/assets/18380374/064c911e-d074-4432-8a55-8ff8ddb93989)
---
 templates/repo/home.tmpl         | 6 +++---
 web_src/js/features/repo-home.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index d3f0ead72..81b2ba1b0 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -35,9 +35,9 @@
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-		<div class="ui form gt-hidden gt-df gt-mt-4" id="topic_edit">
-			<div class="field gt-f1 gt-mr-3">
-				<div class="ui fluid multiple search selection dropdown" data-text-count-prompt="{{ctx.Locale.Tr "repo.topic.count_prompt"}}" data-text-format-prompt="{{ctx.Locale.Tr "repo.topic.format_prompt"}}">
+		<div class="ui form gt-hidden gt-df gt-fc gt-mt-4" id="topic_edit">
+			<div class="field gt-f1 gt-mb-2">
+				<div class="ui fluid multiple search selection dropdown gt-fw" data-text-count-prompt="{{ctx.Locale.Tr "repo.topic.count_prompt"}}" data-text-format-prompt="{{ctx.Locale.Tr "repo.topic.format_prompt"}}">
 					<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
 					{{range .Topics}}
 						{{/* keey the same layout as Fomantic UI generated labels */}}
diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js
index 70c225b4b..3603fae2e 100644
--- a/web_src/js/features/repo-home.js
+++ b/web_src/js/features/repo-home.js
@@ -43,7 +43,7 @@ export function initRepoTopicBar() {
           const topicArray = topics.split(',');
           topicArray.sort();
           for (let i = 0; i < topicArray.length; i++) {
-            const link = $('<a class="ui repo-topic large label topic"></a>');
+            const link = $('<a class="ui repo-topic large label topic gt-m-0"></a>');
             link.attr('href', `${appSubUrl}/explore/repos?q=${encodeURIComponent(topicArray[i])}&topic=1`);
             link.text(topicArray[i]);
             link.insertBefore(mgrBtn); // insert all new topics before manage button