fix: pin the sidebar only when necessary

Author: thasmo

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

@@ -52,6 +52,44 @@ onMounted(() => {
   checkHeaderPosition()
 })
 
+const windowSize = useWindowSize()
+const sidebar = useTemplateRef<HTMLDivElement>('sidebar')
+const sidebarBounds = useElementBounding(sidebar)
+const scrollState = useWindowScroll()
+const scrollDirection = shallowRef<'up' | 'down'>('down')
+
+const sidebarOverflow = computed(() => {
+  return sidebarBounds.height.value > windowSize.height.value - 120
+})
+
+const sidebarStyles = computed(() => {
+  if (!sidebarOverflow.value) {
+    return {
+      alignSelf: 'flex-start',
+      top: '80px',
+    }
+  }
+
+  if (scrollDirection.value === 'down') {
+    return {
+      alignSelf: 'flex-end',
+      bottom: '40px',
+    }
+  }
+
+  if (scrollDirection.value === 'up') {
+    return {
+      alignSelf: 'flex-start',
+      top: '80px',
+    }
+  }
+})
+
+watch(scrollState.directions, ({ bottom, top }) => {
+  if (bottom) scrollDirection.value = 'down'
+  if (top) scrollDirection.value = 'up'
+})
+
 const { packageName, requestedVersion, orgName } = usePackageRoute()
 const selectedPM = useSelectedPackageManager()
 const activePmId = computed(() => selectedPM.value ?? 'npm')
@@ -1165,10 +1203,12 @@ onKeyStroke(
           </div>
         </section>
       </section>
-      <div class="area-sidebar">
+      <div class="area-sidebar flex">
         <!-- Sidebar -->
         <div
-          class="sidebar-scroll sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pr-2.5 hover:pr-0.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(top-22 pt-2 max-h-[calc(100dvh-6rem)])"
+          ref="sidebar"
+          class="sticky space-y-6 sm:space-y-8 min-w-0 xl:(pt-2)"
+          :style="sidebarStyles"
         >
           <!-- Maintainers (with admin actions when connected) -->
           <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />