fix

Author: yp05327

templates/repo/home.tmpl

@@ -145,18 +145,18 @@
 									{{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}}
 								{{end}}
 								{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-									<div class="ui form tw-hidden tw-flex tw-gap-2 tw-my-2" id="topic_edit">
+									<div class="ui form tw-hidden flex-item-body tw-gap-2 tw-my-2" id="topic_edit">
 										<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
 											<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
 											{{range .Topics}}
 												{{/* keep the same layout as Fomantic UI generated labels */}}
-												<a class="ui label transition visible tw-cursor-default tw-inline-block" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
+												<a class="ui label transition visible tw-cursor-default tw-inline-block repo-topic" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
 											{{end}}
 											<div class="text"></div>
 										</div>
 										<div>
-											<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
 											<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
+											<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
 										</div>
 									</div>
 								{{end}}

web_src/js/features/repo-home.ts

@@ -46,11 +46,12 @@ export function initRepoTopicBar() {
           topicArray.sort();
           for (const topic of topicArray) {
             // it should match the code in repo/home.tmpl
+            // TODO: sort items in topicDropdown, or items in edit div will have different order to the items in view div
             const link = document.createElement('a');
             link.classList.add('repo-topic', 'ui', 'large', 'label');
             link.href = `${appSubUrl}/explore/repos?q=${encodeURIComponent(topic)}&topic=1`;
             link.textContent = topic;
-            viewDiv.append(link); // insert all new topics before manage button
+            viewDiv.append(link);
           }
         }
         hideElem(editDiv);