Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -340,7 +340,7 @@ export function LeftSidebar({
   const courseDisplayInfo = getCourseDisplayInfo();
 
   return (
-    // ✅ Ensure the sidebar fills its parent height; only the Saved Chat area scrolls.
+    // ✅ fills parent; NO outer scroll
     <div className="h-full w-full min-h-0 flex flex-col overflow-hidden">
       {/* ========== FIXED TOP (no scroll) ========== */}
       {isLoggedIn && courseDisplayInfo && (
@@ -465,17 +465,19 @@ export function LeftSidebar({
         </div>
       )}
 
-      {/* ========== SCROLL AREA (Saved Chats) ========== */}
-      <div className="flex-1 min-h-0 overflow-y-auto">
-        <div className="h-full min-h-0">
-          <SavedChatSection
-            isLoggedIn={isLoggedIn}
-            savedChats={savedChats}
-            onLoadChat={onLoadChat}
-            onDeleteSavedChat={onDeleteSavedChat}
-            onRenameSavedChat={onRenameSavedChat}
-          />
-        </div>
+      {/* ========== ONLY SCROLL AREA (Saved Chats) ========== */}
+      <div
+        className="flex-1 min-h-0 overflow-y-auto overscroll-contain"
+        style={{ overscrollBehavior: "contain" }}
+      >
+        {/* IMPORTANT: keep SavedChatSection as a normal block; do NOT nest another overflow-y-auto inside it */}
+        <SavedChatSection
+          isLoggedIn={isLoggedIn}
+          savedChats={savedChats}
+          onLoadChat={onLoadChat}
+          onDeleteSavedChat={onDeleteSavedChat}
+          onRenameSavedChat={onRenameSavedChat}
+        />
       </div>
 
       {/* Saved Item Dialog (unchanged) */}