[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: reduce layout shift on package page

+30 -28
+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
··· 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>