From 5519ca3f4cdaa77b6379320f308c11928507c695 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 24 Feb 2026 06:25:14 +0100
Subject: [PATCH 1/3] fix: address CLS in downloads modal

---
 app/components/Package/TrendsChart.vue         | 6 +++++-
 app/components/Package/WeeklyDownloadStats.vue | 5 +----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 50b924c0e..543289986 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/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 ? 'min-h-[260px]' : 'min-h-[567px]'"
+    >
       <ClientOnly v-if="chartData.dataset">
         <div :data-pending="pending" :data-minimap-visible="maxDatapoints > 6">
           <VueUiXy
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 905232822..780fff1e6 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -351,10 +351,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>
 

From a1fa4f21e30e0c745f824bd23e66fa183681c50c Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 24 Feb 2026 06:49:49 +0100
Subject: [PATCH 2/3] fix: address CLS, add skeleton

---
 app/components/Package/WeeklyDownloadStats.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 780fff1e6..4cb0242ab 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/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>

From 27ae458094484054a6127434f77a59161bfaa4a1 Mon Sep 17 00:00:00 2001
From: Alec Lloyd Probert <55991794+graphieros@users.noreply.github.com>
Date: Tue, 24 Feb 2026 06:55:35 +0100
Subject: [PATCH 3/3] fix: apply coderabbit suggestion

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 app/components/Package/TrendsChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 543289986..a34c69bed 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1685,7 +1685,7 @@ watch(selectedMetric, value => {
     <div
       role="region"
       aria-labelledby="trends-chart-title"
-      :class="isMobile ? 'min-h-[260px]' : 'min-h-[567px]'"
+      :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">