fix(ui): implement clickable package table rows (#1277)

Author: RYGRIT

app/components/Package/TableRow.vue

@@ -44,15 +44,15 @@ const allMaintainersText = computed(() => {
 
 <template>
   <tr
-    class="group border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
+    class="group relative border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
     tabindex="0"
     :data-result-index="index"
   >
     <!-- Name (always visible) -->
     <td class="py-2 px-3">
       <NuxtLink
         :to="packageUrl"
-        class="font-mono text-sm text-fg hover:text-accent-fallback transition-colors duration-200"
+        class="row-link font-mono text-sm text-fg hover:text-accent-fallback transition-colors duration-200"
         dir="ltr"
       >
         {{ pkg.name }}
@@ -111,7 +111,7 @@ const allMaintainersText = computed(() => {
               name: '~username',
               params: { username: maintainer.username || maintainer.name || '' },
             }"
-            class="hover:text-accent-fallback transition-colors duration-200"
+            class="relative z-10 hover:text-accent-fallback transition-colors duration-200"
             @click.stop
             >{{ maintainer.username || maintainer.name || maintainer.email }}</NuxtLink
           ><span v-if="idx < Math.min(pkg.maintainers.length, 3) - 1">, </span>
@@ -127,7 +127,7 @@ const allMaintainersText = computed(() => {
     <td v-if="isColumnVisible('keywords')" class="py-2 px-3 text-end">
       <div
         v-if="pkg.keywords?.length"
-        class="flex flex-wrap gap-1 justify-end"
+        class="relative z-10 flex flex-wrap gap-1 justify-end"
         :aria-label="$t('package.card.keywords')"
       >
         <ButtonBase
@@ -198,3 +198,19 @@ const allMaintainersText = computed(() => {
     </td>
   </tr>
 </template>
+
+<style scoped>
+.row-link {
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    cursor: pointer;
+  }
+
+  &:focus-visible::after {
+    outline: 2px solid var(--color-fg);
+    outline-offset: -2px;
+  }
+}
+</style>