feat: add and improve more-keywords badge

Author: alexdln

app/components/Package/Card.vue

@@ -173,6 +173,13 @@ const pkgDescription = useMarkdown(() => ({
       >
         {{ keyword }}
       </button>
+      <span
+        v-if="result.package.keywords.length > 5"
+        class="tag text-fg-subtle text-xs border-none bg-transparent pointer-events-auto"
+        :title="result.package.keywords.slice(5).join(', ')"
+      >
+        +{{ result.package.keywords.length - 5 }}
+      </span>
     </div>
   </BaseCard>
 </template>

app/components/Package/TableRow.vue

@@ -134,7 +134,11 @@ const allMaintainersText = computed(() => {
         >
           {{ keyword }}
         </button>
-        <span v-if="pkg.keywords.length > 3" class="text-fg-subtle text-xs">
+        <span
+          v-if="pkg.keywords.length > 3"
+          class="tag text-fg-subtle text-xs border-none bg-transparent"
+          :title="pkg.keywords.slice(3).join(', ')"
+        >
           +{{ pkg.keywords.length - 3 }}
         </span>
       </div>