From 2b068024c5f4c3c17a7e188d050bce5ad77d00ff Mon Sep 17 00:00:00 2001
From: jycouet <jycouet@gmail.com>
Date: Tue, 24 Feb 2026 23:18:35 +0100
Subject: [PATCH 1/8] step 0

---
 .../Package/WeeklyDownloadStats.vue           | 81 +++++++++++--------
 1 file changed, 46 insertions(+), 35 deletions(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 4cb0242ab..3bf107c80 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 h-[110px] motion-safe:h-[140px]">
+  <div class="space-y-8 h-[110px]">
     <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
       <template #actions>
         <ButtonBase
@@ -282,46 +282,57 @@ const config = computed<VueUiSparklineConfig>(() => {
 
       <div class="w-full overflow-hidden">
         <template v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads">
-          <ClientOnly>
-            <VueUiSparkline class="w-full max-w-xs" :dataset :config>
-              <template #skeleton>
-                <!-- This empty div overrides the default built-in scanning animation on load -->
-                <div />
-              </template>
-            </VueUiSparkline>
-            <template #fallback>
-              <!-- Skeleton matching VueUiSparkline layout (title 24px + SVG aspect 500:80) -->
-              <div class="max-w-xs">
-                <!-- Title row: fontSize * 2 = 24px -->
-                <div class="h-6 flex items-center ps-3">
-                  <SkeletonInline class="h-3 w-36" />
-                </div>
-                <!-- Chart area: matches SVG viewBox 500:80 -->
-                <div class="aspect-[500/80] flex items-center">
-                  <!-- Data label (covers ~42% width, matching dataLabel.offsetX) -->
-                  <div class="w-[42%] flex items-center ps-0.5">
-                    <SkeletonInline class="h-7 w-24" />
+          <div class="relative">
+            <ClientOnly>
+              <VueUiSparkline class="w-full max-w-xs" :dataset :config>
+                <template #skeleton>
+                  <!-- This empty div overrides the default built-in scanning animation on load -->
+                  <div />
+                </template>
+              </VueUiSparkline>
+              <template #fallback>
+                <!-- Skeleton matching VueUiSparkline layout (title 24px + SVG aspect 500:80) -->
+                <div class="max-w-xs">
+                  <!-- Title row: fontSize * 2 = 24px -->
+                  <div class="h-6 flex items-center ps-3">
+                    <SkeletonInline class="h-3 w-36" />
                   </div>
-                  <!-- Sparkline line placeholder -->
-                  <div class="flex-1 flex items-end pe-3">
-                    <SkeletonInline class="h-px w-full" />
+                  <!-- Chart area: matches SVG viewBox 500:80 -->
+                  <div class="aspect-[500/80] flex items-center">
+                    <!-- Data label (covers ~42% width, matching dataLabel.offsetX) -->
+                    <div class="w-[42%] flex items-center ps-0.5">
+                      <SkeletonInline class="h-7 w-24" />
+                    </div>
+                    <!-- Sparkline line placeholder -->
+                    <div class="flex-1 flex items-end pe-3">
+                      <SkeletonInline class="h-px w-full" />
+                    </div>
                   </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>
-
-          <div v-if="hasWeeklyDownloads" class="hidden motion-safe:flex justify-end p-1">
-            <ButtonBase size="small" @click="toggleSparklineAnimation">
-              {{
+              </template>
+            </ClientOnly>
+
+            <ButtonBase
+              v-if="hasWeeklyDownloads"
+              type="button"
+              size="small"
+              class="hidden motion-safe:inline-flex absolute top-0 inset-ie-0 !p-1 !border-0 !bg-transparent hover:!bg-transparent text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
+              :title="
                 hasSparklineAnimation
                   ? $t('package.trends.pause_animation')
                   : $t('package.trends.play_animation')
-              }}
+              "
+              :classicon="hasSparklineAnimation ? 'i-lucide:pause' : 'i-lucide:play'"
+              :aria-pressed="hasSparklineAnimation"
+              @click="toggleSparklineAnimation"
+            >
+              <span class="sr-only">
+                {{
+                  hasSparklineAnimation
+                    ? $t('package.trends.pause_animation')
+                    : $t('package.trends.play_animation')
+                }}
+              </span>
             </ButtonBase>
           </div>
         </template>

From c8e0a463396eef23d9443e2f459b6924f044a2f7 Mon Sep 17 00:00:00 2001
From: jycouet <jycouet@gmail.com>
Date: Wed, 25 Feb 2026 00:54:00 +0100
Subject: [PATCH 2/8] step 7

---
 app/components/Package/WeeklyDownloadStats.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 3bf107c80..4851bcaa7 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -294,8 +294,8 @@ const config = computed<VueUiSparklineConfig>(() => {
                 <!-- Skeleton matching VueUiSparkline layout (title 24px + SVG aspect 500:80) -->
                 <div class="max-w-xs">
                   <!-- Title row: fontSize * 2 = 24px -->
-                  <div class="h-6 flex items-center ps-3">
-                    <SkeletonInline class="h-3 w-36" />
+                  <div class="h-6 flex items-center">
+                    <SkeletonInline class="h-3 w-48" />
                   </div>
                   <!-- Chart area: matches SVG viewBox 500:80 -->
                   <div class="aspect-[500/80] flex items-center">
@@ -309,6 +309,10 @@ const config = computed<VueUiSparklineConfig>(() => {
                     </div>
                   </div>
                 </div>
+                <!-- Animation toggle button placeholder (matches absolute top-right button) -->
+                <div class="hidden motion-safe:block absolute top-0 inset-ie-0 p-1">
+                  <SkeletonInline class="size-4 rounded" />
+                </div>
               </template>
             </ClientOnly>
 

From 2918c82c9825c06ebf07593264568fe85957772a Mon Sep 17 00:00:00 2001
From: "jyc.dev" <jycouet@gmail.com>
Date: Fri, 27 Feb 2026 09:52:32 +0100
Subject: [PATCH 3/8] Update app/components/Package/WeeklyDownloadStats.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/components/Package/WeeklyDownloadStats.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 2b16710ef..1bc1fd586 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -327,7 +327,6 @@ const config = computed<VueUiSparklineConfig>(() => {
                   : $t('package.trends.play_animation')
               "
               :classicon="hasSparklineAnimation ? 'i-lucide:pause' : 'i-lucide:play'"
-              :aria-pressed="hasSparklineAnimation"
               @click="toggleSparklineAnimation"
             >
               <span class="sr-only">

From 7138e3bc3388b192cd4df93115c9bc7300133bb0 Mon Sep 17 00:00:00 2001
From: "jyc.dev" <jycouet@gmail.com>
Date: Fri, 27 Feb 2026 09:52:47 +0100
Subject: [PATCH 4/8] Update app/components/Package/WeeklyDownloadStats.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/components/Package/WeeklyDownloadStats.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 1bc1fd586..fe89d7dfb 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -318,7 +318,6 @@ const config = computed<VueUiSparklineConfig>(() => {
 
             <ButtonBase
               v-if="hasWeeklyDownloads"
-              type="button"
               size="small"
               class="hidden motion-safe:inline-flex absolute top-0 inset-ie-0 !p-1 !border-0 !bg-transparent hover:!bg-transparent text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
               :title="

From a6b32ebba0659712451b52cb56c07b01bf9df7c6 Mon Sep 17 00:00:00 2001
From: jycouet <jycouet@gmail.com>
Date: Fri, 27 Feb 2026 09:55:30 +0100
Subject: [PATCH 5/8] move to tooltip

---
 .../Package/WeeklyDownloadStats.vue           | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index fe89d7dfb..ac7fd53ef 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -316,26 +316,26 @@ const config = computed<VueUiSparklineConfig>(() => {
               </template>
             </ClientOnly>
 
-            <ButtonBase
+            <TooltipApp
               v-if="hasWeeklyDownloads"
-              size="small"
-              class="hidden motion-safe:inline-flex absolute top-0 inset-ie-0 !p-1 !border-0 !bg-transparent hover:!bg-transparent text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
-              :title="
+              :text="
                 hasSparklineAnimation
                   ? $t('package.trends.pause_animation')
                   : $t('package.trends.play_animation')
               "
-              :classicon="hasSparklineAnimation ? 'i-lucide:pause' : 'i-lucide:play'"
-              @click="toggleSparklineAnimation"
             >
-              <span class="sr-only">
-                {{
+              <ButtonBase
+                size="small"
+                class="hidden motion-safe:inline-flex absolute top-0 inset-ie-0 !p-1 !border-0 !bg-transparent hover:!bg-transparent text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
+                :classicon="hasSparklineAnimation ? 'i-lucide:pause' : 'i-lucide:play'"
+                :aria-label="
                   hasSparklineAnimation
                     ? $t('package.trends.pause_animation')
                     : $t('package.trends.play_animation')
-                }}
-              </span>
-            </ButtonBase>
+                "
+                @click="toggleSparklineAnimation"
+              />
+            </TooltipApp>
           </div>
         </template>
         <p v-else class="py-2 text-sm font-mono text-fg-subtle">

From cdcd835314e3ad2fa4d940d7f7c90f17c61b974c Mon Sep 17 00:00:00 2001
From: jycouet <jycouet@gmail.com>
Date: Fri, 27 Feb 2026 10:01:51 +0100
Subject: [PATCH 6/8] fix pos

---
 .../Package/WeeklyDownloadStats.vue           | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index ac7fd53ef..96b0edaa5 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -280,7 +280,7 @@ const config = computed<VueUiSparklineConfig>(() => {
         <span v-else-if="isLoadingWeeklyDownloads" class="min-w-6 min-h-6 -m-1 p-1" />
       </template>
 
-      <div class="w-full overflow-hidden h-[110px] motion-safe:h-[140px]">
+      <div class="w-full overflow-hidden">
         <template v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads">
           <div class="relative">
             <ClientOnly>
@@ -316,26 +316,30 @@ const config = computed<VueUiSparklineConfig>(() => {
               </template>
             </ClientOnly>
 
-            <TooltipApp
+            <div
               v-if="hasWeeklyDownloads"
-              :text="
-                hasSparklineAnimation
-                  ? $t('package.trends.pause_animation')
-                  : $t('package.trends.play_animation')
-              "
+              class="hidden motion-safe:block absolute top-0 inset-ie-0"
             >
-              <ButtonBase
-                size="small"
-                class="hidden motion-safe:inline-flex absolute top-0 inset-ie-0 !p-1 !border-0 !bg-transparent hover:!bg-transparent text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
-                :classicon="hasSparklineAnimation ? 'i-lucide:pause' : 'i-lucide:play'"
-                :aria-label="
+              <TooltipApp
+                :text="
                   hasSparklineAnimation
                     ? $t('package.trends.pause_animation')
                     : $t('package.trends.play_animation')
                 "
-                @click="toggleSparklineAnimation"
-              />
-            </TooltipApp>
+              >
+                <ButtonBase
+                  size="small"
+                  class="!p-1 !border-0 !bg-transparent hover:!bg-transparent text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
+                  :classicon="hasSparklineAnimation ? 'i-lucide:pause' : 'i-lucide:play'"
+                  :aria-label="
+                    hasSparklineAnimation
+                      ? $t('package.trends.pause_animation')
+                      : $t('package.trends.play_animation')
+                  "
+                  @click="toggleSparklineAnimation"
+                />
+              </TooltipApp>
+            </div>
           </div>
         </template>
         <p v-else class="py-2 text-sm font-mono text-fg-subtle">

From d0baf75952dbf4e4ece9fa477a4bb5bfcb335969 Mon Sep 17 00:00:00 2001
From: jycouet <jycouet@gmail.com>
Date: Fri, 27 Feb 2026 10:03:40 +0100
Subject: [PATCH 7/8] bigger

---
 app/components/Package/WeeklyDownloadStats.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 96b0edaa5..6d0a09af5 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -328,7 +328,7 @@ const config = computed<VueUiSparklineConfig>(() => {
                 "
               >
                 <ButtonBase
-                  size="small"
+                  size="medium"
                   class="!p-1 !border-0 !bg-transparent hover:!bg-transparent text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
                   :classicon="hasSparklineAnimation ? 'i-lucide:pause' : 'i-lucide:play'"
                   :aria-label="

From 533839ebae0643f71275fd66793d5846e53b1476 Mon Sep 17 00:00:00 2001
From: jycouet <jycouet@gmail.com>
Date: Fri, 27 Feb 2026 10:46:42 +0100
Subject: [PATCH 8/8] btn

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

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 6d0a09af5..03664910d 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -269,7 +269,6 @@ const config = computed<VueUiSparklineConfig>(() => {
       <template #actions>
         <ButtonBase
           v-if="hasWeeklyDownloads"
-          type="button"
           @click="openChartModal"
           class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
           :title="$t('package.trends.title')"