From cae7da6f914395c9e0b46408cd44e25a3507f47e Mon Sep 17 00:00:00 2001
From: dvd233 <111864431+dvd233@users.noreply.github.com>
Date: Thu, 10 Sep 2026 23:50:37 +0800
Subject: [PATCH] fix(ui): account for sticky headers in sidebar height

Signed-off-by: dvd233 <111864431+dvd233@users.noreply.github.com>
---
 app/components/Package/Sidebar.vue           | 9 ++++++---
 test/nuxt/components/Package/Sidebar.spec.ts | 7 +++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/components/Package/Sidebar.vue b/app/components/Package/Sidebar.vue
index 9733e6bd99..68bf4415d1 100644
--- a/app/components/Package/Sidebar.vue
+++ b/app/components/Package/Sidebar.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
+const APP_HEADER_HEIGHT = 56
+
 const viewport = useWindowSize()
 const scroll = useWindowScroll()
 const container = useTemplateRef<HTMLDivElement>('container')
 const content = useTemplateRef<HTMLDivElement>('content')
 const bounds = useElementBounding(content)
+const packageHeaderHeight = usePackageHeaderHeight()
+const stickyTop = computed(() => APP_HEADER_HEIGHT + packageHeaderHeight.value)
 
 const active = computed(() => {
-  return bounds.height.value > viewport.height.value
+  return bounds.height.value > viewport.height.value - stickyTop.value
 })
 
 const direction = computed((previous = 'up'): string => {
@@ -23,9 +27,8 @@ const offset = computed(() => {
     ? content.value.offsetTop
     : container.value.offsetHeight - content.value.offsetTop - content.value.offsetHeight
 })
-const packageHeaderHeight = usePackageHeaderHeight()
 const stickyStyle = computed(() =>
-  direction.value === 'up' ? { top: `${56 + packageHeaderHeight.value}px` } : { bottom: `32px` },
+  direction.value === 'up' ? { top: `${stickyTop.value}px` } : { bottom: `32px` },
 )
 
 const style = computed(() => {
diff --git a/test/nuxt/components/Package/Sidebar.spec.ts b/test/nuxt/components/Package/Sidebar.spec.ts
index bfccedb9bc..7a84afc0c0 100644
--- a/test/nuxt/components/Package/Sidebar.spec.ts
+++ b/test/nuxt/components/Package/Sidebar.spec.ts
@@ -40,6 +40,13 @@ describe('PackageSidebar', () => {
     expect(wrapper.attributes('data-active')).toBe('true')
   })
 
+  it('sets active=true when sticky headers leave less space than the content needs', async () => {
+    wrapper = await mountSidebar(VIEWPORT_HEIGHT - 40)
+    await nextTick()
+
+    expect(wrapper.attributes('data-active')).toBe('true')
+  })
+
   it('renders with direction=up by default', async () => {
     wrapper = await mountSidebar()