forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: move badge to right of package name instead
+15
-27
+15
-27
app/components/PackageCard.vue
+15
-27
app/components/PackageCard.vue
···
41
41
aria-hidden="true"
42
42
/>
43
43
<div class="mb-2 flex items-baseline justify-between gap-2">
44
-
<div class="flex items-baseline gap-2 min-w-0">
45
-
<!-- Exact match badge (mobile: before name, desktop: after name) -->
46
-
<span
47
-
v-if="isExactMatch"
48
-
class="sm:hidden shrink-0 text-xs px-1.5 py-0.5 rounded bg-accent/20 border border-accent/30 text-accent font-mono"
49
-
>
50
-
{{ $t('search.exact_match') }}
51
-
</span>
52
-
<component
53
-
:is="headingLevel ?? 'h3'"
54
-
class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all"
44
+
<component
45
+
:is="headingLevel ?? 'h3'"
46
+
class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all"
47
+
>
48
+
<NuxtLink
49
+
:to="{ name: 'package', params: { package: result.package.name.split('/') } }"
50
+
:prefetch-on="prefetch ? 'visibility' : 'interaction'"
51
+
class="focus-visible:outline-none decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"
52
+
:data-result-index="index"
53
+
@focus="index != null && emit('focus', index)"
54
+
@mouseenter="index != null && emit('focus', index)"
55
+
>{{ result.package.name }}</NuxtLink
55
56
>
56
-
<NuxtLink
57
-
:to="{ name: 'package', params: { package: result.package.name.split('/') } }"
58
-
:prefetch-on="prefetch ? 'visibility' : 'interaction'"
59
-
class="focus-visible:outline-none decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"
60
-
:data-result-index="index"
61
-
@focus="index != null && emit('focus', index)"
62
-
@mouseenter="index != null && emit('focus', index)"
63
-
>
64
-
{{ result.package.name }}
65
-
</NuxtLink>
66
-
</component>
67
-
<!-- Exact match badge (desktop only) -->
68
57
<span
69
58
v-if="isExactMatch"
70
-
class="hidden sm:inline shrink-0 text-xs px-1.5 py-0.5 rounded bg-accent/20 border border-accent/30 text-accent font-mono"
59
+
class="text-xs px-1.5 py-0.5 ml-2 rounded bg-accent/20 border border-accent/30 text-accent"
60
+
>{{ $t('search.exact_match') }}</span
71
61
>
72
-
{{ $t('search.exact_match') }}
73
-
</span>
74
-
</div>
62
+
</component>
75
63
<!-- Mobile: version next to package name -->
76
64
<div class="sm:hidden text-fg-subtle flex items-center gap-1.5 shrink-0">
77
65
<span