forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: reduce layout shift on package page
+30
-28
+23
-21
app/components/DateTime.vue
+23
-21
app/components/DateTime.vue
···
51
51
</script>
52
52
53
53
<template>
54
-
<ClientOnly>
55
-
<NuxtTime
56
-
v-if="relativeDates"
57
-
:datetime="datetime"
58
-
:title="titleValue"
59
-
relative
60
-
:locale="locale"
61
-
/>
62
-
<NuxtTime
63
-
v-else
64
-
:datetime="datetime"
65
-
:title="titleValue"
66
-
:date-style="dateStyle"
67
-
:year="year"
68
-
:month="month"
69
-
:day="day"
70
-
:locale="locale"
71
-
/>
72
-
<template #fallback>
54
+
<span>
55
+
<ClientOnly>
73
56
<NuxtTime
57
+
v-if="relativeDates"
58
+
:datetime="datetime"
59
+
:title="titleValue"
60
+
relative
61
+
:locale="locale"
62
+
/>
63
+
<NuxtTime
64
+
v-else
74
65
:datetime="datetime"
75
66
:title="titleValue"
76
67
:date-style="dateStyle"
···
79
70
:day="day"
80
71
:locale="locale"
81
72
/>
82
-
</template>
83
-
</ClientOnly>
73
+
<template #fallback>
74
+
<NuxtTime
75
+
:datetime="datetime"
76
+
:title="titleValue"
77
+
:date-style="dateStyle"
78
+
:year="year"
79
+
:month="month"
80
+
:day="day"
81
+
:locale="locale"
82
+
/>
83
+
</template>
84
+
</ClientOnly>
85
+
</span>
84
86
</template>
+7
-7
app/pages/[...package].vue
+7
-7
app/pages/[...package].vue
···
784
784
785
785
<!-- Stats grid -->
786
786
<dl
787
-
class="grid grid-cols-2 sm:grid-cols-5 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-border"
787
+
class="grid grid-cols-2 sm:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-border"
788
788
>
789
-
<div v-if="pkg.license" class="space-y-1">
789
+
<div v-if="pkg.license" class="space-y-1 sm:col-span-2">
790
790
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
791
791
{{ $t('package.stats.license') }}
792
792
</dt>
···
795
795
</dd>
796
796
</div>
797
797
798
-
<div class="space-y-1">
798
+
<div class="space-y-1 sm:col-span-2">
799
799
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
800
800
{{ $t('package.stats.deps') }}
801
801
</dt>
···
854
854
</dd>
855
855
</div>
856
856
857
-
<div class="space-y-1">
857
+
<div class="space-y-1 sm:col-span-3">
858
858
<dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
859
859
{{ $t('package.stats.install_size') }}
860
860
<span
···
893
893
894
894
<!-- Vulnerabilities count -->
895
895
<ClientOnly>
896
-
<div class="space-y-1">
896
+
<div class="space-y-1 sm:col-span-2">
897
897
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
898
898
{{ $t('package.stats.vulns') }}
899
899
</dt>
···
918
918
</dd>
919
919
</div>
920
920
<template #fallback>
921
-
<div class="space-y-1">
921
+
<div class="space-y-1 sm:col-span-2">
922
922
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
923
923
{{ $t('package.stats.vulns') }}
924
924
</dt>
···
927
927
</template>
928
928
</ClientOnly>
929
929
930
-
<div v-if="pkg.time?.modified" class="space-y-1">
930
+
<div v-if="pkg.time?.modified" class="space-y-1 sm:col-span-2">
931
931
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
932
932
{{ $t('package.stats.updated') }}
933
933
</dt>