fix: wrap DownloadButton in ClientOnly to prevent hydration mismatch

useId() generates different IDs on server vs client, and the component
uses browser-only APIs (useMediaQuery, document, Teleport). Wrapping
in ClientOnly avoids the hydration mismatch entirely.

Author: Adebesin-Cell

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

@@ -773,13 +773,15 @@ const showSkeleton = shallowRef(false)
             </h2>
             <!-- Package manager dropdown + Download button -->
             <div class="flex items-center gap-2">
-              <PackageDownloadButton
-                v-if="displayVersion"
-                :package-name="pkg.name"
-                :version="displayVersion"
-                :install-size="installSize ?? null"
-                size="small"
-              />
+              <ClientOnly>
+                <PackageDownloadButton
+                  v-if="displayVersion"
+                  :package-name="pkg.name"
+                  :version="displayVersion"
+                  :install-size="installSize ?? null"
+                  size="small"
+                />
+              </ClientOnly>
               <PackageManagerSelect />
             </div>
           </div>