From 1aa08e2b5a5605405befe9746dfe451599a3d662 Mon Sep 17 00:00:00 2001
From: hamki <me@hamki.org>
Date: Fri, 16 Jan 2026 04:07:29 +0800
Subject: [PATCH] refactor: enhance sidebar height and visibility logic

- Dynamically calculate the maximum height of the sidebar to prevent it from extending below the segment bottom.
- Implement logic to hide the sidebar when the available height is insufficient, improving user experience.
- Ensure the sidebar's top position does not exceed the segment's top during scrolling.
---
 web_src/js/features/file-view.ts | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/web_src/js/features/file-view.ts b/web_src/js/features/file-view.ts
index 9e6348aedc..44a4fe049e 100644
--- a/web_src/js/features/file-view.ts
+++ b/web_src/js/features/file-view.ts
@@ -66,17 +66,27 @@ function updateSidebarPosition(elFileView: HTMLElement, sidebar: HTMLElement): v
 
   const headerRect = fileHeader.getBoundingClientRect();
   const segmentRect = segment.getBoundingClientRect();
-  const sidebarHeight = sidebar.offsetHeight;
 
   // Calculate top position:
   // - When file header is visible: align with file header top
   // - When file header scrolls above viewport: stick to top (12px)
-  // - Limit so sidebar bottom doesn't go below segment bottom
+  // - Ensure sidebar top doesn't go above segment top (when scrolling up)
   const minTop = 12;
-  const maxTop = Math.max(minTop, segmentRect.bottom - sidebarHeight);
   let topPos = Math.max(minTop, headerRect.top);
-  topPos = Math.min(topPos, maxTop);
+  topPos = Math.max(topPos, segmentRect.top); // Don't go above segment top
 
+  // Dynamically calculate max-height so sidebar doesn't extend below segment bottom
+  const availableHeight = Math.max(0, segmentRect.bottom - topPos);
+  const cssMaxHeight = window.innerHeight - 140; // Match CSS calc(100vh - 140px)
+  const maxHeight = Math.min(availableHeight, cssMaxHeight);
+
+  // Hide sidebar if available height is too small
+  if (maxHeight < 50) {
+    sidebar.style.opacity = '0';
+    return;
+  }
+
+  sidebar.style.maxHeight = `${maxHeight}px`;
   sidebar.style.opacity = '';
   sidebar.style.top = `${topPos}px`;