From d5584a1d39d8ebab6244d0a37e83a88acf68a7b4 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Mon, 19 Aug 2024 21:45:49 -0400
Subject: [PATCH] Fix node source chip alignment (#549)

---
 src/components/searchbox/NodeSearchBox.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 91f42858d..cbf629ae3 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -31,14 +31,14 @@
             <span
               v-html="highlightQuery(option.display_name, currentQuery)"
             ></span>
-            <NodeSourceChip
-              v-if="option.python_module !== undefined"
-              :python_module="option.python_module"
-            />
-          </div>
-          <div v-if="showCategory" class="option-category">
-            {{ option.category.replaceAll('/', ' > ') }}
+            <div v-if="showCategory" class="option-category">
+              {{ option.category.replaceAll('/', ' > ') }}
+            </div>
           </div>
+          <NodeSourceChip
+            v-if="option.python_module !== undefined"
+            :python_module="option.python_module"
+          />
         </div>
       </template>
       <!-- FilterAndValue -->
@@ -158,15 +158,15 @@ const setHoverSuggestion = (index: number) => {
 }
 
 .option-container {
-  @apply flex flex-col px-2 py-0 cursor-pointer overflow-hidden w-full;
+  @apply flex justify-between items-center px-2 py-0 cursor-pointer overflow-hidden w-full;
 }
 
 .option-display-name {
-  @apply font-semibold flex justify-between items-center;
+  @apply font-semibold flex flex-col;
 }
 
 .option-category {
-  @apply text-sm text-gray-400 overflow-hidden text-ellipsis;
+  @apply font-light text-sm text-gray-400 overflow-hidden text-ellipsis;
   /* Keeps the text on a single line by default */
   white-space: nowrap;
 }