fix: update sticky package header logic

alexdln · alexdln · commit 897244e6ad50 · 2026-03-12T12:56:50.000Z
diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
@@ -248,7 +248,7 @@ const likeAction = async () => {
 
 <template>
   <!-- Package header -->
-  <header class="bg-bg pt-2">
+  <header class="bg-bg pt-2 w-full container">
     <!-- Package name and version -->
     <div class="flex items-baseline justify-between gap-x-2 gap-y-1 flex-wrap min-w-0">
       <CopyToClipboardButton
@@ -320,112 +320,116 @@ const likeAction = async () => {
   </header>
   <div
     ref="header"
-    class="bg-bg sticky top-14 z-1 border-b border-border flex flex-col md:flex-row-reverse items-baseline justify-between gap-x-2 gap-y-1 flex-wrap min-w-0 pt-2"
+    class="w-full bg-bg sticky top-14 z-1 border-b border-border pt-2"
     :class="[$style.packageHeader]"
     data-testid="package-subheader"
   >
     <div
-      class="flex items-center max-md:justify-between max-md:w-full max-md:flex-row-reverse gap-2"
+      class="w-full container flex flex-col md:flex-row-reverse items-baseline justify-between gap-x-2 gap-y-1 flex-wrap"
     >
-      <ButtonBase
-        variant="secondary"
-        :aria-label="$t('common.scroll_to_top')"
-        @click="scrollToTop"
-        classicon="i-lucide:arrow-up"
-        :class="showScrollToTop ? '' : 'opacity-0 pointer-events-none select-none'"
-        class="py-1.5 px-2.5 sm:me-2"
-        :tabindex="showScrollToTop ? 0 : -1"
-      />
-      <div class="flex-inline items-center flex-nowrap gap-1 font-mono text-fg-muted">
-        <template v-if="displayVersion && hasProvenance(displayVersion)">
-          <TooltipApp
-            :text="
-              provenanceData && provenanceStatus !== 'pending'
-                ? $t('package.provenance_section.built_and_signed_on', {
-                    provider: provenanceData.providerLabel,
-                  })
-                : $t('package.verified_provenance')
-            "
-            position="bottom"
-            strategy="fixed"
-          >
-            <LinkBase
-              variant="button-secondary"
-              :to="packageRoute(packageName, resolvedVersion, '#provenance')"
-              :aria-label="$t('package.provenance_section.view_more_details')"
-              classicon="i-lucide:shield-check"
-              class="py-1.5 px-2.5 me-2"
-            />
-          </TooltipApp>
-        </template>
-        <!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
-        <template v-if="requestedVersion && resolvedVersion !== requestedVersion">
-          <TooltipApp
-            :text="requestedVersion"
-            position="bottom"
-            strategy="fixed"
-            class="vertical-middle"
-          >
-            <span class="i-lucide:cable rtl-flip min-w-3 w-3 h-3 mx-1" aria-hidden="true" />
-          </TooltipApp>
-        </template>
-        <!-- Version selector -->
-        <VersionSelector
-          v-if="resolvedVersion && pkg?.versions && pkg?.['dist-tags']"
-          :package-name="packageName"
-          :current-version="resolvedVersion"
-          :versions="pkg.versions"
-          :dist-tags="pkg['dist-tags']"
-          :url-pattern="versionUrlPattern"
+      <div
+        class="flex items-center max-md:justify-between max-md:w-full max-md:flex-row-reverse gap-2"
+      >
+        <ButtonBase
+          variant="secondary"
+          :aria-label="$t('common.scroll_to_top')"
+          @click="scrollToTop"
+          classicon="i-lucide:arrow-up"
+          :class="showScrollToTop ? '' : 'opacity-0 pointer-events-none select-none'"
+          class="py-1.5 px-2.5 sm:me-2"
+          :tabindex="showScrollToTop ? 0 : -1"
         />
+        <div class="flex-inline items-center flex-nowrap gap-1 font-mono text-fg-muted">
+          <template v-if="displayVersion && hasProvenance(displayVersion)">
+            <TooltipApp
+              :text="
+                provenanceData && provenanceStatus !== 'pending'
+                  ? $t('package.provenance_section.built_and_signed_on', {
+                      provider: provenanceData.providerLabel,
+                    })
+                  : $t('package.verified_provenance')
+              "
+              position="bottom"
+              strategy="fixed"
+            >
+              <LinkBase
+                variant="button-secondary"
+                :to="packageRoute(packageName, resolvedVersion, '#provenance')"
+                :aria-label="$t('package.provenance_section.view_more_details')"
+                classicon="i-lucide:shield-check"
+                class="py-1.5 px-2.5 me-2"
+              />
+            </TooltipApp>
+          </template>
+          <!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
+          <template v-if="requestedVersion && resolvedVersion !== requestedVersion">
+            <TooltipApp
+              :text="requestedVersion"
+              position="bottom"
+              strategy="fixed"
+              class="vertical-middle"
+            >
+              <span class="i-lucide:cable rtl-flip min-w-3 w-3 h-3 mx-1" aria-hidden="true" />
+            </TooltipApp>
+          </template>
+          <!-- Version selector -->
+          <VersionSelector
+            v-if="resolvedVersion && pkg?.versions && pkg?.['dist-tags']"
+            :package-name="packageName"
+            :current-version="resolvedVersion"
+            :versions="pkg.versions"
+            :dist-tags="pkg['dist-tags']"
+            :url-pattern="versionUrlPattern"
+          />
+        </div>
       </div>
-    </div>
-    <!-- Docs + Code — inline on desktop, floating bottom bar on mobile -->
-    <nav
-      v-if="resolvedVersion"
-      :aria-label="$t('package.navigation')"
-      class="flex gap-4 me-auto -mb-px"
-      :style="navExtraOffsetStyle"
-      :class="$style.packageNav"
-    >
-      <LinkBase
-        v-if="mainLink"
-        :to="mainLink"
-        aria-keyshortcuts="m"
-        class="decoration-none border-b-2 p-1 hover:border-accent/50 lowercase"
-        :class="page === 'main' ? 'border-accent text-accent!' : 'border-transparent'"
-      >
-        {{ $t('package.links.main') }}
-      </LinkBase>
-      <LinkBase
-        v-if="docsLink"
-        :to="docsLink"
-        aria-keyshortcuts="d"
-        class="decoration-none border-b-2 p-1 hover:border-accent/50"
-        :class="page === 'docs' ? 'border-accent text-accent!' : 'border-transparent'"
-      >
-        {{ $t('package.links.docs') }}
-      </LinkBase>
-      <LinkBase
-        v-if="codeLink"
-        :to="codeLink"
-        aria-keyshortcuts="."
-        class="decoration-none border-b-2 p-1 hover:border-accent/50"
-        :class="page === 'code' ? 'border-accent text-accent!' : 'border-transparent'"
+      <!-- Docs + Code — inline on desktop, floating bottom bar on mobile -->
+      <nav
+        v-if="resolvedVersion"
+        :aria-label="$t('package.navigation')"
+        class="flex gap-4 me-auto -mb-px"
+        :style="navExtraOffsetStyle"
+        :class="$style.packageNav"
       >
-        {{ $t('package.links.code') }}
-      </LinkBase>
-      <LinkBase
-        v-if="diffLink"
-        :to="diffLink"
-        :title="$t('compare.compare_versions_title')"
-        aria-keyshortcuts="f"
-        class="decoration-none border-b-2 p-1 hover:border-accent/50"
-        :class="page === 'diff' ? 'border-accent text-accent!' : 'border-transparent'"
-      >
-        {{ $t('compare.compare_versions') }}
-      </LinkBase>
-    </nav>
+        <LinkBase
+          v-if="mainLink"
+          :to="mainLink"
+          aria-keyshortcuts="m"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 lowercase"
+          :class="page === 'main' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.main') }}
+        </LinkBase>
+        <LinkBase
+          v-if="docsLink"
+          :to="docsLink"
+          aria-keyshortcuts="d"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          :class="page === 'docs' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.docs') }}
+        </LinkBase>
+        <LinkBase
+          v-if="codeLink"
+          :to="codeLink"
+          aria-keyshortcuts="."
+          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          :class="page === 'code' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.code') }}
+        </LinkBase>
+        <LinkBase
+          v-if="diffLink"
+          :to="diffLink"
+          :title="$t('compare.compare_versions_title')"
+          aria-keyshortcuts="f"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          :class="page === 'diff' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('compare.compare_versions') }}
+        </LinkBase>
+      </nav>
+    </div>
   </div>
 </template>
 
diff --git a/app/components/VersionSelector.vue b/app/components/VersionSelector.vue
@@ -74,7 +74,6 @@ const versionToTags = computed(() => buildVersionToTagsMap(props.distTags))
 
 /** Get URL for a specific version */
 function getVersionUrl(version: string): string {
-  console.log('props.urlPattern', props.urlPattern)
   return props.urlPattern.replace('{version}', version)
 }
 
diff --git a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
@@ -125,17 +125,14 @@ useSeoMeta({
 
 <template>
   <main class="flex-1 flex flex-col min-h-0">
-    <div class="w-full container -mb-px">
-      <PackageHeader
-        :pkg="pkg"
-        :resolved-version="fromVersion"
-        :display-version="pkg?.requestedVersion"
-        :latest-version="latestVersionDetailed"
-        :version-url-pattern="fromVersionUrlPattern"
-        page="diff"
-      />
-    </div>
-    <span class="block h-px w-full bg-border" />
+    <PackageHeader
+      :pkg="pkg"
+      :resolved-version="fromVersion"
+      :display-version="pkg?.requestedVersion"
+      :latest-version="latestVersionDetailed"
+      :version-url-pattern="fromVersionUrlPattern"
+      page="diff"
+    />
 
     <!-- Error: invalid route -->
     <div v-if="!versionRange" class="container py-20 text-center">
diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -338,17 +338,14 @@ defineOgImageComponent('Default', {
 
 <template>
   <main class="flex-1 flex flex-col">
-    <div class="w-full container -mb-px">
-      <PackageHeader
-        :pkg="pkg"
-        :resolved-version="version"
-        :display-version="pkg?.requestedVersion"
-        :latest-version="latestVersion"
-        :version-url-pattern="versionUrlPattern"
-        page="code"
-      />
-    </div>
-    <span class="block h-px w-full bg-border" />
+    <PackageHeader
+      :pkg="pkg"
+      :resolved-version="version"
+      :display-version="pkg?.requestedVersion"
+      :latest-version="latestVersion"
+      :version-url-pattern="versionUrlPattern"
+      page="code"
+    />
 
     <!-- Error: no version -->
     <div v-if="!version" class="container py-20 text-center">
@@ -376,7 +373,7 @@ defineOgImageComponent('Default', {
     <div v-else-if="fileTree" class="flex flex-1" dir="ltr">
       <!-- File tree sidebar - sticky with internal scroll -->
       <aside
-        class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
+        class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-25 self-start h-[calc(100vh-7rem)] overflow-y-auto"
       >
         <CodeFileTree
           :tree="fileTree.tree"
@@ -388,7 +385,7 @@ defineOgImageComponent('Default', {
 
       <!-- File content / Directory listing - sticky with internal scroll on desktop -->
       <div
-        class="flex-1 min-w-0 overflow-x-hidden sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
+        class="flex-1 min-w-0 overflow-x-hidden sticky top-25 self-start overflow-y-auto"
         ref="contentContainer"
       >
         <!-- File viewer -->
@@ -419,14 +416,40 @@ defineOgImageComponent('Default', {
                   {{ mode.label }}
                 </button>
               </div>
-              <div class="flex items-center gap-3 text-sm">
+              <!-- Breadcrumb navigation -->
+              <nav
+                :aria-label="$t('code.file_path')"
+                class="flex items-center gap-0.5 font-mono text-sm overflow-x-auto"
+                dir="ltr"
+              >
+                <NuxtLink
+                  v-if="filePath"
+                  :to="getCurrentCodeUrlWithPath()"
+                  class="text-fg-muted hover:text-fg transition-colors shrink-0"
+                >
+                  {{ $t('code.root') }}
+                </NuxtLink>
+                <span v-else class="text-fg shrink-0">{{ $t('code.root') }}</span>
+                <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
+                  <span class="text-fg-subtle">/</span>
+                  <NuxtLink
+                    v-if="i < breadcrumbs.length - 1"
+                    :to="getCurrentCodeUrlWithPath(crumb.path)"
+                    class="text-fg-muted hover:text-fg transition-colors"
+                  >
+                    {{ crumb.name }}
+                  </NuxtLink>
+                  <span v-else class="text-fg">{{ crumb.name }}</span>
+                </template>
+              </nav>
+              <!-- <div class="flex items-center gap-3 text-sm">
                 <span class="text-fg-muted" dir="auto">{{
                   $t('code.lines', { count: fileContent.lines })
                 }}</span>
                 <span v-if="currentNode?.size" class="text-fg-subtle">{{
                   bytesFormatter.format(currentNode.size)
                 }}</span>
-              </div>
+              </div> -->
             </div>
             <div class="flex items-center gap-2">
               <button
diff --git a/app/pages/package-docs/[...path].vue b/app/pages/package-docs/[...path].vue
@@ -134,17 +134,14 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 
 <template>
   <div class="docs-page flex-1 flex flex-col">
-    <div class="w-full container -mb-px">
-      <PackageHeader
-        :pkg="pkg"
-        :resolved-version="resolvedVersion"
-        :display-version="pkg?.requestedVersion"
-        :latest-version="latestVersionDetailed"
-        :version-url-pattern="versionUrlPattern"
-        page="docs"
-      />
-    </div>
-    <span class="block h-px w-full bg-border" />
+    <PackageHeader
+      :pkg="pkg"
+      :resolved-version="resolvedVersion"
+      :display-version="pkg?.requestedVersion"
+      :latest-version="latestVersionDetailed"
+      :version-url-pattern="versionUrlPattern"
+      page="docs"
+    />
 
     <div class="flex" dir="ltr">
       <!-- Sidebar TOC -->
@@ -198,8 +195,8 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 <style>
 /* Layout constants - must match AppHeader height */
 .docs-page {
-  --app-header-height: 57px;
-  --docs-header-height: 57px;
+  --app-header-height: 56px;
+  --docs-header-height: 44px;
   --combined-header-height: calc(var(--app-header-height) + var(--docs-header-height));
 }
 
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue

Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,6 @@ const versionToTags = computed(() => buildVersionToTagsMap(props.distTags))`
`74`	`74`
`75`	`75`	`/** Get URL for a specific version */`
`76`	`76`	`function getVersionUrl(version: string): string {`
`77`		`- console.log('props.urlPattern', props.urlPattern)`
`78`	`77`	`return props.urlPattern.replace('{version}', version)`
`79`	`78`	`}`
`80`	`79`