From 35d4105491c27bc3fb94cbd83668a9402b0b15d9 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sun, 1 Feb 2026 01:40:34 +0100
Subject: [PATCH 1/6] chore(ui): make package name selectable and move copy
 button to icon

---
 app/pages/[...package].vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 7f5b066b3..e467ca72f 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -380,7 +380,6 @@ function handleClick(event: MouseEvent) {
       <!-- Package header -->
       <header class="area-header border-b border-border">
         <div class="mb-4">
-          <!-- Package name and version -->
           <div class="flex items-baseline gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
             <h1
               class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
@@ -392,13 +391,19 @@ function handleClick(event: MouseEvent) {
                 class="text-fg-muted hover:text-fg transition-colors duration-200"
                 >@{{ orgName }}</NuxtLink
               ><span v-if="orgName">/</span>
+              <span>{{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}</span>
               <AnnounceTooltip :text="$t('common.copied')" :isVisible="copiedPkgName">
                 <button
                   @click="copyPkgName()"
                   aria-describedby="copy-pkg-name"
-                  class="cursor-copy ms-1 mt-1 active:scale-95 transition-transform"
+                  class="cursor-copy ms-2 text-fg-subtle hover:text-fg transition-colors active:scale-95 inline-flex items-center justify-center align-middle"
                 >
-                  {{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
+                  <span v-if="!copiedPkgName" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
+                  <span
+                    v-else
+                    class="i-carbon:checkmark w-5 h-5 text-green-500"
+                    aria-hidden="true"
+                  />
                 </button>
               </AnnounceTooltip>
             </h1>

From 6308420769b633f5a77472ded62b6f57b3a42085 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sun, 1 Feb 2026 08:37:17 +0100
Subject: [PATCH 2/6] refactor: Improve handling of copying package name

---
 app/pages/[...package].vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index e467ca72f..5526f4137 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -370,6 +370,14 @@ function handleClick(event: MouseEvent) {
     router.push(route)
   }
 }
+
+function handleCopy() {
+  const selection = window.getSelection()
+  if (selection && selection.toString().length > 0) {
+    return
+  }
+  copyPkgName()
+}
 </script>
 
 <template>
@@ -391,20 +399,14 @@ function handleClick(event: MouseEvent) {
                 class="text-fg-muted hover:text-fg transition-colors duration-200"
                 >@{{ orgName }}</NuxtLink
               ><span v-if="orgName">/</span>
-              <span>{{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}</span>
               <AnnounceTooltip :text="$t('common.copied')" :isVisible="copiedPkgName">
-                <button
-                  @click="copyPkgName()"
-                  aria-describedby="copy-pkg-name"
-                  class="cursor-copy ms-2 text-fg-subtle hover:text-fg transition-colors active:scale-95 inline-flex items-center justify-center align-middle"
+                <span
+                  @click="handleCopy"
+                  class="cursor-copy hover:text-fg transition-colors duration-200"
+                  :class="{ 'text-fg-muted': orgName }"
                 >
-                  <span v-if="!copiedPkgName" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
-                  <span
-                    v-else
-                    class="i-carbon:checkmark w-5 h-5 text-green-500"
-                    aria-hidden="true"
-                  />
-                </button>
+                  {{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
+                </span>
               </AnnounceTooltip>
             </h1>
 

From 7294574d2b23a2c99470fbccc0617d109b54233a Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sun, 1 Feb 2026 13:01:27 +0100
Subject: [PATCH 3/6] style: Remove redundant handleCopy function and improve
 button handling

---
 app/pages/[...package].vue | 28 +++++++++++-----------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 9a837068c..24076166c 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -386,14 +386,6 @@ function handleClick(event: MouseEvent) {
     router.push(route)
   }
 }
-
-function handleCopy() {
-  const selection = window.getSelection()
-  if (selection && selection.toString().length > 0) {
-    return
-  }
-  copyPkgName()
-}
 </script>
 
 <template>
@@ -406,7 +398,7 @@ function handleCopy() {
         <div class="mb-4">
           <div class="flex items-baseline gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
             <h1
-              class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
+              class="group font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
               :title="pkg.name"
             >
               <NuxtLink
@@ -415,18 +407,20 @@ function handleCopy() {
                 class="text-fg-muted hover:text-fg transition-colors duration-200"
                 >@{{ orgName }}</NuxtLink
               ><span v-if="orgName">/</span>
+              <span :class="{ 'text-fg-muted': orgName }">
+                {{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
+              </span>
               <AnnounceTooltip :text="$t('common.copied')" :isVisible="copiedPkgName">
-                <span
-                  @click="handleCopy"
-                  class="cursor-copy hover:text-fg transition-colors duration-200"
-                  :class="{ 'text-fg-muted': orgName }"
+                <button
+                  type="button"
+                  @click="() => copyPkgName()"
+                  class="opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity p-1 rounded text-fg-muted hover:text-fg hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 align-middle ms-1"
+                  :aria-label="$t('package.copy_name')"
                 >
-                  {{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
-                </span>
+                  <span class="i-carbon:copy w-5 h-5 block" aria-hidden="true" />
+                </button>
               </AnnounceTooltip>
             </h1>
-
-            <span id="copy-pkg-name" class="sr-only">{{ $t('package.copy_name') }}</span>
             <span
               v-if="displayVersion"
               class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"

From 073caca8dd0e913a14db03c94233d273ab2524ce Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sun, 1 Feb 2026 17:34:34 +0100
Subject: [PATCH 4/6] style: Improve code formatting in package page heading

---
 app/pages/[...package].vue | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 52dc5bcf2..87fe7ec43 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -397,19 +397,21 @@ function handleClick(event: MouseEvent) {
       <header class="area-header border-b border-border">
         <div class="mb-4">
           <div class="flex items-baseline gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
-            <h1
-              class="group font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
-              :title="pkg.name"
-            >
-              <NuxtLink
-                v-if="orgName"
-                :to="{ name: 'org', params: { org: orgName } }"
-                class="text-fg-muted hover:text-fg transition-colors duration-200"
-                >@{{ orgName }}</NuxtLink
-              ><span v-if="orgName">/</span>
-              <span :class="{ 'text-fg-muted': orgName }">
-                {{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
-              </span>
+            <div class="group flex items-baseline min-w-0">
+              <h1
+                class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
+                :title="pkg.name"
+              >
+                <NuxtLink
+                  v-if="orgName"
+                  :to="{ name: 'org', params: { org: orgName } }"
+                  class="text-fg-muted hover:text-fg transition-colors duration-200"
+                  >@{{ orgName }}</NuxtLink
+                ><span v-if="orgName">/</span>
+                <span :class="{ 'text-fg-muted': orgName }">
+                  {{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
+                </span>
+              </h1>
               <TooltipAnnounce :text="$t('common.copied')" :isVisible="copiedPkgName">
                 <button
                   type="button"
@@ -420,7 +422,7 @@ function handleClick(event: MouseEvent) {
                   <span class="i-carbon:copy w-5 h-5 block" aria-hidden="true" />
                 </button>
               </TooltipAnnounce>
-            </h1>
+            </div>
             <span
               v-if="displayVersion"
               class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"

From 92c63383b44809c4e54131280be7fa2e8a327a23 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sun, 1 Feb 2026 20:52:19 +0100
Subject: [PATCH 5/6] fix: copy button

---
 app/pages/[...package].vue | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 4539bff4d..245eab59f 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -432,7 +432,7 @@ function handleClick(event: MouseEvent) {
       >
         <!-- Package name and version -->
         <div class="flex items-baseline gap-2 sm:gap-3 flex-wrap min-w-0">
-          <div class="group flex items-baseline min-w-0">
+          <div class="group relative flex flex-col items-start min-w-0">
             <h1
               class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
               :title="pkg.name"
@@ -441,24 +441,28 @@ function handleClick(event: MouseEvent) {
                 v-if="orgName"
                 :to="{ name: 'org', params: { org: orgName } }"
                 class="text-fg-muted hover:text-fg transition-colors duration-200"
-                >@{{ orgName }}</NuxtLink
-              ><span v-if="orgName">/</span>
+              >
+                @{{ orgName }}
+              </NuxtLink>
+              <span v-if="orgName">/</span>
               <span :class="{ 'text-fg-muted': orgName }">
                 {{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
               </span>
             </h1>
+
+            <!-- Floating copy button -->
             <TooltipAnnounce :text="$t('common.copied')" :isVisible="copiedPkgName">
               <button
                 type="button"
-                @click="() => copyPkgName()"
-                class="opacity-100 sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100 transition-opacity p-2 rounded text-fg-muted hover:text-fg hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 align-middle ms-1"
+                @click="copyPkgName()"
+                class="absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap text-fg-muted bg-bg border-border opacity-0 -translate-y-1 pointer-events-none transition-all duration-150 group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/40"
                 :aria-label="$t('package.copy_name')"
               >
-                <span class="i-carbon:copy w-5 h-5 block" aria-hidden="true" />
+                <span class="i-carbon:copy w-3.5 h-3.5" aria-hidden="true" />
+                {{ $t('package.copy_name') }}
               </button>
             </TooltipAnnounce>
           </div>
-
           <span
             v-if="displayVersion"
             class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"
@@ -1244,4 +1248,10 @@ function handleClick(event: MouseEvent) {
   max-width: 100%;
   min-width: 0;
 }
+
+@media (hover: none) {
+  .copy-button {
+    display: none;
+  }
+}
 </style>

From 5fcc81d5290c616febff61b9c2c5a1feee3c6d03 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sun, 1 Feb 2026 20:54:30 +0100
Subject: [PATCH 6/6] style: Update class name for copy button

---
 app/pages/[...package].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index b6a215f7f..34bf410bb 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -455,7 +455,7 @@ function handleClick(event: MouseEvent) {
               <button
                 type="button"
                 @click="copyPkgName()"
-                class="absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap text-fg-muted bg-bg border-border opacity-0 -translate-y-1 pointer-events-none transition-all duration-150 group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/40"
+                class="copy-button absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap text-fg-muted bg-bg border-border opacity-0 -translate-y-1 pointer-events-none transition-all duration-150 group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/40"
                 :aria-label="$t('package.copy_name')"
               >
                 <span class="i-carbon:copy w-3.5 h-3.5" aria-hidden="true" />