refactor: simplify version display with muted text instead of badge

Author: danielroe

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

@@ -283,7 +283,7 @@ defineOgImageComponent('Package', {
       <header class="mb-8 pb-8 border-b border-border">
         <div class="mb-4">
           <!-- Package name and version -->
-          <div class="flex items-center gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
+          <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"
               :title="pkg.name"
@@ -296,51 +296,46 @@ defineOgImageComponent('Package', {
               ><span v-if="orgName">/</span
               >{{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
             </h1>
-            <a
+            <span
               v-if="displayVersion"
-              :href="
-                hasProvenance(displayVersion)
-                  ? `https://www.npmjs.com/package/${pkg.name}/v/${displayVersion.version}#provenance`
-                  : undefined
-              "
-              :target="hasProvenance(displayVersion) ? '_blank' : undefined"
-              :rel="hasProvenance(displayVersion) ? 'noopener noreferrer' : undefined"
-              class="inline-flex items-center gap-1.5 px-3 py-1 font-mono text-sm bg-bg-muted border border-border rounded-md transition-colors duration-200 max-w-full shrink-0"
-              :class="
-                hasProvenance(displayVersion)
-                  ? 'hover:border-border-hover cursor-pointer'
-                  : 'cursor-default'
-              "
-              :title="`v${displayVersion.version}`"
+              class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"
             >
-              <span class="truncate max-w-24 sm:max-w-32 md:max-w-48">
+              <a
+                v-if="hasProvenance(displayVersion)"
+                :href="`https://www.npmjs.com/package/${pkg.name}/v/${displayVersion.version}#provenance`"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="inline-flex items-center gap-1.5 text-fg-muted hover:text-fg-muted/80 transition-colors duration-200"
+                title="Verified provenance"
+              >
                 v{{ displayVersion.version }}
-              </span>
+                <span
+                  class="i-solar-shield-check-outline w-3.5 h-3.5 shrink-0"
+                  aria-hidden="true"
+                />
+              </a>
+              <span v-else>v{{ displayVersion.version }}</span>
               <span
                 v-if="
                   requestedVersion &&
                   latestVersion &&
                   displayVersion.version !== latestVersion.version
                 "
-                class="text-fg-subtle shrink-0"
+                class="text-fg-subtle text-sm shrink-0"
                 >(not latest)</span
               >
-              <span
-                v-if="hasProvenance(displayVersion)"
-                class="i-solar-shield-check-outline w-4 h-4 text-fg-muted shrink-0"
-                aria-label="Verified provenance"
-              />
-            </a>
+            </span>
 
             <!-- Package metrics (module format, types) -->
             <ClientOnly>
               <PackageMetricsBadges
                 v-if="displayVersion"
                 :package-name="pkg.name"
                 :version="displayVersion.version"
+                class="self-center ml-1 sm:ml-2"
               />
               <template #fallback>
-                <ul class="flex items-center gap-1.5">
+                <ul class="flex items-center gap-1.5 self-center ml-1 sm:ml-2">
                   <li class="skeleton w-8 h-5 rounded" />
                   <li class="skeleton w-12 h-5 rounded" />
                 </ul>
@@ -351,7 +346,7 @@ defineOgImageComponent('Package', {
               :href="`https://www.npmjs.com/package/${pkg.name}`"
               target="_blank"
               rel="noopener noreferrer"
-              class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ml-auto shrink-0"
+              class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ml-auto shrink-0 self-center"
               title="View on npm"
             >
               <span class="i-carbon-logo-npm w-4 h-4" aria-hidden="true" />