fix: reduce layout shift on package page

Author: danielroe

app/components/DateTime.vue

@@ -51,26 +51,17 @@ const titleValue = computed(() => {
 </script>
 
 <template>
-  <ClientOnly>
-    <NuxtTime
-      v-if="relativeDates"
-      :datetime="datetime"
-      :title="titleValue"
-      relative
-      :locale="locale"
-    />
-    <NuxtTime
-      v-else
-      :datetime="datetime"
-      :title="titleValue"
-      :date-style="dateStyle"
-      :year="year"
-      :month="month"
-      :day="day"
-      :locale="locale"
-    />
-    <template #fallback>
+  <span>
+    <ClientOnly>
       <NuxtTime
+        v-if="relativeDates"
+        :datetime="datetime"
+        :title="titleValue"
+        relative
+        :locale="locale"
+      />
+      <NuxtTime
+        v-else
         :datetime="datetime"
         :title="titleValue"
         :date-style="dateStyle"
@@ -79,6 +70,17 @@ const titleValue = computed(() => {
         :day="day"
         :locale="locale"
       />
-    </template>
-  </ClientOnly>
+      <template #fallback>
+        <NuxtTime
+          :datetime="datetime"
+          :title="titleValue"
+          :date-style="dateStyle"
+          :year="year"
+          :month="month"
+          :day="day"
+          :locale="locale"
+        />
+      </template>
+    </ClientOnly>
+  </span>
 </template>

app/pages/[...package].vue

@@ -784,9 +784,9 @@ function handleClick(event: MouseEvent) {
 
         <!-- Stats grid -->
         <dl
-          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"
+          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"
         >
-          <div v-if="pkg.license" class="space-y-1">
+          <div v-if="pkg.license" class="space-y-1 sm:col-span-2">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider">
               {{ $t('package.stats.license') }}
             </dt>
@@ -795,7 +795,7 @@ function handleClick(event: MouseEvent) {
             </dd>
           </div>
 
-          <div class="space-y-1">
+          <div class="space-y-1 sm:col-span-2">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider">
               {{ $t('package.stats.deps') }}
             </dt>
@@ -854,7 +854,7 @@ function handleClick(event: MouseEvent) {
             </dd>
           </div>
 
-          <div class="space-y-1">
+          <div class="space-y-1 sm:col-span-3">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
               {{ $t('package.stats.install_size') }}
               <span
@@ -893,7 +893,7 @@ function handleClick(event: MouseEvent) {
 
           <!-- Vulnerabilities count -->
           <ClientOnly>
-            <div class="space-y-1">
+            <div class="space-y-1 sm:col-span-2">
               <dt class="text-xs text-fg-subtle uppercase tracking-wider">
                 {{ $t('package.stats.vulns') }}
               </dt>
@@ -918,7 +918,7 @@ function handleClick(event: MouseEvent) {
               </dd>
             </div>
             <template #fallback>
-              <div class="space-y-1">
+              <div class="space-y-1 sm:col-span-2">
                 <dt class="text-xs text-fg-subtle uppercase tracking-wider">
                   {{ $t('package.stats.vulns') }}
                 </dt>
@@ -927,7 +927,7 @@ function handleClick(event: MouseEvent) {
             </template>
           </ClientOnly>
 
-          <div v-if="pkg.time?.modified" class="space-y-1">
+          <div v-if="pkg.time?.modified" class="space-y-1 sm:col-span-2">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider">
               {{ $t('package.stats.updated') }}
             </dt>