fix: use custom chart minimap reset button (#1512)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: graphieros

app/components/Package/TrendsChart.vue

@@ -1575,6 +1575,7 @@ const chartConfig = computed(() => {
       zoom: {
         maxWidth: isMobile.value ? 350 : 500,
         highlightColor: colors.value.bgElevated,
+        useResetSlot: true,
         minimap: {
           show: true,
           lineColor: '#FAFAFA',
@@ -1805,6 +1806,19 @@ watch(selectedMetric, value => {
               </div>
             </template>
 
+            <!-- Custom minimap reset button -->
+            <template #reset-action="{ reset: resetMinimap }">
+              <button
+                type="button"
+                aria-label="reset minimap"
+                class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-20 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
+                style="pointer-events: all !important"
+                @click="resetMinimap"
+              >
+                <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
+              </button>
+            </template>
+
             <template #menuIcon="{ isOpen }">
               <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
               <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />

app/components/Package/VersionDistribution.vue

@@ -243,6 +243,7 @@ const chartConfig = computed(() => {
       zoom: {
         maxWidth: isMobile.value ? 350 : 500,
         highlightColor: colors.value.bgElevated,
+        useResetSlot: true,
         minimap: {
           show: true,
           lineColor: '#FAFAFA',
@@ -521,6 +522,19 @@ const endDate = computed(() => {
               </div>
             </template>
 
+            <!-- Custom minimap reset button -->
+            <template #reset-action="{ reset: resetMinimap }">
+              <button
+                type="button"
+                aria-label="reset minimap"
+                class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-20 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
+                style="pointer-events: all !important"
+                @click="resetMinimap"
+              >
+                <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
+              </button>
+            </template>
+
             <!-- Contextual menu icon -->
             <template #menuIcon="{ isOpen }">
               <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />