Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -15,7 +15,9 @@ import { jsPDF } from "jspdf";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
 import type { CourseInfo } from "../App";
 
-// Saved Chat Item Component with rename functionality
+// ================================
+// Saved Chat Item (unchanged)
+// ================================
 function SavedChatItem({
   chat,
   onLoadChat,
@@ -69,10 +71,7 @@ function SavedChatItem({
 
   const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     const relatedTarget = e.relatedTarget as HTMLElement;
-    if (
-      relatedTarget &&
-      (cancelButtonRef.current?.contains(relatedTarget) || saveButtonRef.current?.contains(relatedTarget))
-    ) {
+    if (relatedTarget && (cancelButtonRef.current?.contains(relatedTarget) || saveButtonRef.current?.contains(relatedTarget))) {
       return;
     }
     if (editTitle.trim() && editTitle !== originalTitle && onRenameSavedChat) {
@@ -166,7 +165,13 @@ function SavedChatItem({
               ) : (
                 <>
                   {onRenameSavedChat && (
-                    <Button variant="ghost" size="icon" className="h-5 w-5 flex-shrink-0 hover:bg-muted" onClick={handleStartEdit} title="Rename chat">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-5 w-5 flex-shrink-0 hover:bg-muted"
+                      onClick={handleStartEdit}
+                      title="Rename chat"
+                    >
                       <Edit2 className="h-3 w-3" />
                     </Button>
                   )}
@@ -270,6 +275,29 @@ export function LeftSidebar({
   const [isDownloading, setIsDownloading] = useState(false);
   const [copied, setCopied] = useState(false);
 
+  // ✅ NEW: ref for Saved scroll area
+  const savedScrollRef = useRef<HTMLDivElement>(null);
+
+  // ✅ NEW: hard-stop scroll chaining from Saved area to outer containers
+  useEffect(() => {
+    const el = savedScrollRef.current;
+    if (!el) return;
+
+    const onWheel = (e: WheelEvent) => {
+      e.stopPropagation();
+
+      const atTop = el.scrollTop <= 0;
+      const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+
+      if ((atTop && e.deltaY < 0) || (atBottom && e.deltaY > 0)) {
+        e.preventDefault();
+      }
+    };
+
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, []);
+
   const handleLogin = () => {
     if (!name.trim() || !email.trim()) {
       toast.error("Please fill in all fields");
@@ -424,8 +452,7 @@ export function LeftSidebar({
     }
   };
 
-  const filteredSavedItems = savedItems
-    .filter((item) => item.workspaceId === currentWorkspaceId);
+  const filteredSavedItems = savedItems.filter((item) => item.workspaceId === currentWorkspaceId);
 
   const defaultCourses = [
     { id: "course1", name: "Introduction to AI" },
@@ -494,6 +521,7 @@ export function LeftSidebar({
   const courseDisplayInfo = getCourseDisplayInfo();
 
   return (
+    // ✅ LeftSidebar itself never scrolls. Only the Saved list scrolls.
     <div className="h-full min-h-0 flex flex-col overflow-hidden">
       {/* Top fixed blocks */}
       {isLoggedIn && courseDisplayInfo && (
@@ -610,14 +638,18 @@ export function LeftSidebar({
         </div>
       )}
 
-      {/* Saved Chat: ONLY this list scrolls */}
+      {/* ✅ Saved Chat: ONLY this list scrolls */}
       {isLoggedIn && (
-        <div className="flex-1 min-h-0 flex flex-col">
+        <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
           <div className="p-4 border-b border-border flex-shrink-0">
             <h3 className="text-base font-medium">Saved Chat</h3>
           </div>
 
-          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain p-4">
+          <div
+            ref={savedScrollRef}
+            className="flex-1 min-h-0 overflow-y-auto p-4"
+            style={{ overscrollBehavior: "contain" }}
+          >
             {savedChats.length === 0 ? (
               <div className="text-sm text-muted-foreground text-center py-4">
                 <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
@@ -641,7 +673,7 @@ export function LeftSidebar({
         </div>
       )}
 
-      {/* Saved Item Dialog (保持你原逻辑) */}
+      {/* Saved Item Dialog (keep your logic) */}
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
         <DialogContent className="max-w-4xl max-h-[85vh] flex flex-col">
           <DialogHeader>