Merge branch 'main' into chore/minor-cleanups

Author: OrbisK

app/components/Compare/PackageSelector.vue

@@ -92,10 +92,17 @@ function handleKeydown(e: KeyboardEvent) {
   }
 }
 
+const { start, stop } = useTimeoutFn(() => {
+  isInputFocused.value = false
+}, 200)
+
 function handleBlur() {
-  useTimeoutFn(() => {
-    isInputFocused.value = false
-  }, 200)
+  start()
+}
+
+function handleFocus() {
+  stop()
+  isInputFocused.value = true
 }
 </script>
 
@@ -151,7 +158,7 @@ function handleBlur() {
           size="medium"
           class="w-full min-w-25 ps-7"
           aria-autocomplete="list"
-          @focus="isInputFocused = true"
+          @focus="handleFocus"
           @blur="handleBlur"
           @keydown="handleKeydown"
         />

app/components/Package/ListToolbar.vue

@@ -146,7 +146,7 @@ function getSortKeyLabelKey(key: SortKey): string {
           $t(
             'filters.count.showing_paginated',
             {
-              pageSize: pageSize === 'all' ? $n(filteredCount) : pageSize,
+              pageSize: pageSize === 'all' ? $n(filteredCount) : Math.min(pageSize, filteredCount),
               count: $n(filteredCount),
             },
             filteredCount,

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>

app/pages/about.vue

@@ -52,7 +52,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
           </h1>
           <button
             type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
             @click="router.back()"
             v-if="canGoBack"
           >

app/pages/compare.vue

@@ -117,7 +117,7 @@ useSeoMeta({
           </h1>
           <button
             type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
             @click="router.back()"
             v-if="canGoBack"
           >

app/pages/privacy.vue

@@ -29,7 +29,7 @@ const { locale } = useI18n()
           </h1>
           <button
             type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
             @click="router.back()"
             v-if="canGoBack"
           >

app/pages/search.vue

@@ -654,7 +654,10 @@ defineOgImageComponent('Default', {
                 $t(
                   'filters.count.showing_paginated',
                   {
-                    pageSize: preferredPageSize === 'all' ? $n(effectiveTotal) : preferredPageSize,
+                    pageSize:
+                      preferredPageSize === 'all'
+                        ? $n(effectiveTotal)
+                        : Math.min(preferredPageSize, effectiveTotal),
                     count: $n(effectiveTotal),
                   },
                   effectiveTotal,

app/pages/settings.vue

@@ -51,7 +51,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
           </h1>
           <button
             type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"
+            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"
             @click="router.back()"
             v-if="canGoBack"
           >