forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: move exact match badge to left of package name on mobile
+30
-21
+30
-21
app/components/PackageCard.vue
+30
-21
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
-
<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)"
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"
55
+
>
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
+
<span
69
+
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"
55
71
>
56
-
{{ result.package.name }}
57
-
</NuxtLink>
58
-
</component>
59
-
<!-- Exact match badge -->
60
-
<span
61
-
v-if="isExactMatch"
62
-
class="shrink-0 text-xs px-1.5 py-0.5 rounded bg-accent/20 border border-accent/30 text-accent font-mono"
63
-
>
64
-
{{ $t('search.exact_match') }}
65
-
</span>
72
+
{{ $t('search.exact_match') }}
73
+
</span>
74
+
</div>
66
75
<!-- Mobile: version next to package name -->
67
76
<div class="sm:hidden text-fg-subtle flex items-center gap-1.5 shrink-0">
68
77
<span