forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: improve package card component on mobile (#110)
+9
-6
+9
-6
app/components/PackageCard.vue
+9
-6
app/components/PackageCard.vue
···
31
31
@focus="index != null && emit('focus', index)"
32
32
@mouseenter="index != null && emit('focus', index)"
33
33
>
34
-
<header class="flex items-start justify-between gap-4 mb-2">
34
+
<header class="flex items-start justify-between gap-2 sm:gap-4 mb-2">
35
35
<component
36
36
:is="headingLevel ?? 'h3'"
37
-
class="font-mono text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all"
37
+
class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-words"
38
38
>
39
39
{{ result.package.name }}
40
40
</component>
41
-
<div class="flex items-center gap-1.5 shrink-0 max-w-32">
41
+
<div class="flex items-center gap-1.5 shrink-0">
42
42
<span
43
43
v-if="result.package.version"
44
-
class="font-mono text-xs text-fg-subtle truncate"
44
+
class="font-mono text-xs text-fg-subtle truncate max-w-20 sm:max-w-32"
45
45
:title="result.package.version"
46
46
>
47
47
v{{ result.package.version }}
···
56
56
</div>
57
57
</header>
58
58
59
-
<p v-if="result.package.description" class="text-fg-muted text-sm line-clamp-2 mb-3">
59
+
<p
60
+
v-if="result.package.description"
61
+
class="text-fg-muted text-xs sm:text-sm line-clamp-2 mb-2 sm:mb-3"
62
+
>
60
63
<MarkdownText :text="result.package.description" />
61
64
</p>
62
65
63
-
<footer class="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-fg-subtle">
66
+
<footer class="flex flex-wrap items-center gap-x-3 sm:gap-x-4 gap-y-2 text-xs text-fg-subtle">
64
67
<dl v-if="showPublisher || result.package.date" class="flex items-center gap-4 m-0">
65
68
<div
66
69
v-if="showPublisher && result.package.publisher?.username"