fix: address CLS in downloads modal (#1619)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: graphieros

app/components/Package/TrendsChart.vue

@@ -1682,7 +1682,11 @@ watch(selectedMetric, value => {
     </h2>
 
     <!-- Chart panel (active metric) -->
-    <div role="region" aria-labelledby="trends-chart-title" class="min-h-[260px]">
+    <div
+      role="region"
+      aria-labelledby="trends-chart-title"
+      :class="isMobile === false && width > 0 ? 'min-h-[567px]' : 'min-h-[260px]'"
+    >
       <ClientOnly v-if="chartData.dataset">
         <div :data-pending="pending" :data-minimap-visible="maxDatapoints > 6">
           <VueUiXy

app/components/Package/WeeklyDownloadStats.vue

@@ -264,7 +264,7 @@ const config = computed<VueUiSparklineConfig>(() => {
 </script>
 
 <template>
-  <div class="space-y-8">
+  <div class="space-y-8 h-[110px] motion-safe:h-[140px]">
     <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
       <template #actions>
         <ButtonBase
@@ -307,6 +307,10 @@ const config = computed<VueUiSparklineConfig>(() => {
                     <SkeletonInline class="h-px w-full" />
                   </div>
                 </div>
+                <!-- Animation toggle placeholder -->
+                <div class="w-full hidden motion-safe:flex flex-1 items-end justify-end">
+                  <SkeletonInline class="h-[20px] w-30" />
+                </div>
               </div>
             </template>
           </ClientOnly>
@@ -351,10 +355,7 @@ const config = computed<VueUiSparklineConfig>(() => {
 
     <!-- This placeholder bears the same dimensions as the PackageTrendsChart component -->
     <!-- Avoids CLS when the dialog has transitioned -->
-    <div
-      v-if="!hasChartModalTransitioned"
-      class="w-full aspect-[390/634.5] sm:aspect-[718/622.797]"
-    />
+    <div v-if="!hasChartModalTransitioned" class="w-full aspect-[390/634.5] sm:aspect-[718/647]" />
   </PackageChartModal>
 </template>