1 files changed, 8 insertions, 7 deletions
diff --git a/web_src/js/features/repo-home.ts b/web_src/js/features/repo-home.ts
index a65a1815d2..df52b87f5a 100644
--- a/web_src/js/features/repo-home.ts
+++ b/web_src/js/features/repo-home.ts
@@ -7,7 +7,7 @@ import {fomanticQuery} from '../modules/fomantic/base.ts';
 const {appSubUrl} = window.config;
 
 export function initRepoTopicBar() {
-  const mgrBtn = document.querySelector('#manage_topic');
+  const mgrBtn = document.querySelector<HTMLButtonElement>('#manage_topic');
   if (!mgrBtn) return;
 
   const editDiv = document.querySelector('#topic_edit');
@@ -18,7 +18,7 @@ export function initRepoTopicBar() {
   mgrBtn.addEventListener('click', () => {
     hideElem(viewDiv);
     showElem(editDiv);
-    topicDropdown.querySelector('input.search').focus();
+    topicDropdown.querySelector<HTMLInputElement>('input.search').focus();
   });
 
   document.querySelector('#cancel_topic_edit').addEventListener('click', () => {
@@ -28,9 +28,9 @@ export function initRepoTopicBar() {
     mgrBtn.focus();
   });
 
-  document.querySelector('#save_topic').addEventListener('click', async (e) => {
+  document.querySelector('#save_topic').addEventListener('click', async (e: MouseEvent & {target: HTMLButtonElement}) => {
     lastErrorToast?.hideToast();
-    const topics = editDiv.querySelector('input[name=topics]').value;
+    const topics = editDiv.querySelector<HTMLInputElement>('input[name=topics]').value;
 
     const data = new FormData();
     data.append('topics', topics);
@@ -45,12 +45,13 @@ export function initRepoTopicBar() {
           const topicArray = topics.split(',');
           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
+            // !!!! it SHOULD and MUST match the code in "home_sidebar_top.tmpl" !!!!
             const link = document.createElement('a');
-            link.classList.add('repo-topic', 'ui', 'large', 'label');
+            link.classList.add('repo-topic', 'ui', 'large', 'label', 'gt-ellipsis');
             link.href = `${appSubUrl}/explore/repos?q=${encodeURIComponent(topic)}&topic=1`;
             link.textContent = topic;
-            mgrBtn.parentNode.insertBefore(link, mgrBtn); // insert all new topics before manage button
+            viewDiv.append(link);
           }
         }
         hideElem(editDiv);