Update web/src/App.tsx

web/src/App.tsx

@@ -12,7 +12,7 @@ import { Button } from "./components/ui/button";
 import { Toaster } from "./components/ui/sonner";
 import { toast } from "sonner";
 
-// ✅ NEW: backend API bindings
+// ✅ backend API bindings
 import { apiChat, apiUpload, apiMemoryline } from "./lib/api";
 
 export interface Message {
@@ -848,186 +848,193 @@ function App() {
   if (showOnboarding && user) return <Onboarding user={user} onComplete={handleOnboardingComplete} onSkip={handleOnboardingSkip} />;
 
   return (
-    <div className="h-screen overflow-hidden bg-background flex flex-col">
+    <div className="appShell bg-background">
       <Toaster />
 
-      {/* Header fixed */}
-      <div className="flex-shrink-0">
-        <Header
-          user={user}
-          onMenuClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
-          onUserClick={() => {}}
-          isDarkMode={isDarkMode}
-          onToggleDarkMode={() => setIsDarkMode(!isDarkMode)}
-          language={language}
-          onLanguageChange={setLanguage}
-          workspaces={workspaces}
-          currentWorkspace={currentWorkspace}
-          onWorkspaceChange={setCurrentWorkspaceId}
-          onCreateWorkspace={handleCreateWorkspace}
-          onLogout={() => setUser(null)}
-          availableCourses={availableCourses}
-          onUserUpdate={setUser}
-        />
-      </div>
+      {/* APP: column layout (header + main) */}
+      <div className="col flex-1 min-w-0">
+        {/* Header fixed */}
+        <div className="colFixed flex-shrink-0">
+          <Header
+            user={user}
+            onMenuClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
+            onUserClick={() => {}}
+            isDarkMode={isDarkMode}
+            onToggleDarkMode={() => setIsDarkMode(!isDarkMode)}
+            language={language}
+            onLanguageChange={setLanguage}
+            workspaces={workspaces}
+            currentWorkspace={currentWorkspace}
+            onWorkspaceChange={setCurrentWorkspaceId}
+            onCreateWorkspace={handleCreateWorkspace}
+            onLogout={() => setUser(null)}
+            availableCourses={availableCourses}
+            onUserUpdate={setUser}
+          />
+        </div>
 
-      {showProfileEditor && user && <ProfileEditor user={user} onSave={setUser} onClose={() => setShowProfileEditor(false)} />}
+        {showProfileEditor && user && <ProfileEditor user={user} onSave={setUser} onClose={() => setShowProfileEditor(false)} />}
 
-      {/* Review banner fixed */}
-      {showReviewBanner && (
-        <div className="flex-shrink-0 w-full bg-background border-b border-border relative z-50">
-          <ReviewBanner onReview={handleReviewClick} onDismiss={handleDismissReviewBanner} />
-        </div>
-      )}
-
-      {/* Main area: NO page scroll, only inner panes scroll */}
-      <div className="flex-1 min-h-0 flex overflow-hidden relative" style={{ overscrollBehavior: "none" }}>
-        {!leftPanelVisible && (
-          <Button
-            variant="secondary"
-            size="icon"
-            onClick={() => setLeftPanelVisible(true)}
-            className="hidden lg:flex absolute z-[100] h-8 w-5 shadow-lg rounded-full bg-card border border-border transition-all duration-200 ease-in-out hover:translate-x-[10px]"
-            style={{ left: "-5px", top: "1rem" }}
-            title="Open panel"
-          >
-            <ChevronRight className="h-3 w-3" />
-          </Button>
+        {/* Review banner fixed */}
+        {showReviewBanner && (
+          <div className="colFixed flex-shrink-0 w-full bg-background border-b border-border relative z-50">
+            <ReviewBanner onReview={handleReviewClick} onDismiss={handleDismissReviewBanner} />
+          </div>
         )}
 
-        {leftSidebarOpen && <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setLeftSidebarOpen(false)} />}
-
-        {/* Desktop left panel */}
-        {leftPanelVisible ? (
-          <aside className="hidden lg:flex w-80 bg-card border-r border-border flex-col min-h-0 overflow-hidden relative">
+        {/* Main area: NO page scroll, only inner panes scroll */}
+        <div className="colFlex flex min-h-0 overflow-hidden relative" style={{ overscrollBehavior: "none" }}>
+          {!leftPanelVisible && (
             <Button
               variant="secondary"
               size="icon"
-              onClick={() => setLeftPanelVisible(false)}
-              className="absolute z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
-              style={{ right: "-10px", top: "1rem" }}
-              title="Close panel"
+              onClick={() => setLeftPanelVisible(true)}
+              className="hidden lg:flex absolute z-[100] h-8 w-5 shadow-lg rounded-full bg-card border border-border transition-all duration-200 ease-in-out hover:translate-x-[10px]"
+              style={{ left: "-5px", top: "1rem" }}
+              title="Open panel"
             >
-              <ChevronLeft className="h-3 w-3" />
+              <ChevronRight className="h-3 w-3" />
             </Button>
-
-            {/* IMPORTANT: do NOT wrap LeftSidebar with another overflow container */}
-            <LeftSidebar
-              learningMode={learningMode}
-              language={language}
-              onLearningModeChange={setLearningMode}
-              onLanguageChange={setLanguage}
-              spaceType={spaceType}
-              groupMembers={groupMembers}
-              user={user}
-              onLogin={setUser}
-              onLogout={() => setUser(null)}
-              isLoggedIn={!!user}
-              onEditProfile={() => setShowProfileEditor(true)}
-              savedItems={savedItems}
-              recentlySavedId={recentlySavedId}
-              onUnsave={handleUnsave}
-              onSave={handleSave}
-              savedChats={savedChats}
-              onLoadChat={handleLoadChat}
-              onDeleteSavedChat={handleDeleteSavedChat}
-              onRenameSavedChat={handleRenameSavedChat}
-              currentWorkspaceId={currentWorkspaceId}
-              workspaces={workspaces}
-              selectedCourse={currentCourseId}
-              availableCourses={availableCourses}
-            />
+          )}
+
+          {leftSidebarOpen && <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setLeftSidebarOpen(false)} />}
+
+          {/* Desktop left panel */}
+          {leftPanelVisible ? (
+            <aside className="hidden lg:flex w-80 bg-card border-r border-border col min-h-0 overflow-hidden relative">
+              <Button
+                variant="secondary"
+                size="icon"
+                onClick={() => setLeftPanelVisible(false)}
+                className="absolute z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
+                style={{ right: "-10px", top: "1rem" }}
+                title="Close panel"
+              >
+                <ChevronLeft className="h-3 w-3" />
+              </Button>
+
+              {/* LeftSidebar 内部自己控制滚动（Saved list），外层绝不滚 */}
+              <LeftSidebar
+                learningMode={learningMode}
+                language={language}
+                onLearningModeChange={setLearningMode}
+                onLanguageChange={setLanguage}
+                spaceType={spaceType}
+                groupMembers={groupMembers}
+                user={user}
+                onLogin={setUser}
+                onLogout={() => setUser(null)}
+                isLoggedIn={!!user}
+                onEditProfile={() => setShowProfileEditor(true)}
+                savedItems={savedItems}
+                recentlySavedId={recentlySavedId}
+                onUnsave={handleUnsave}
+                onSave={handleSave}
+                savedChats={savedChats}
+                onLoadChat={handleLoadChat}
+                onDeleteSavedChat={handleDeleteSavedChat}
+                onRenameSavedChat={handleRenameSavedChat}
+                currentWorkspaceId={currentWorkspaceId}
+                workspaces={workspaces}
+                selectedCourse={currentCourseId}
+                availableCourses={availableCourses}
+              />
+            </aside>
+          ) : null}
+
+          {/* Mobile left drawer */}
+          <aside
+            className={`
+              fixed lg:hidden inset-y-0 left-0 z-50
+              w-80 bg-card border-r border-border
+              transform transition-transform duration-300 ease-in-out
+              ${leftSidebarOpen ? "translate-x-0" : "-translate-x-full"}
+              col
+              mt-16
+              h-[calc(100vh-4rem)]
+              min-h-0
+              overflow-hidden
+            `}
+          >
+            <div className="colFixed p-4 border-b border-border flex justify-between items-center flex-shrink-0">
+              <h3>Settings & Guide</h3>
+              <Button variant="ghost" size="icon" onClick={() => setLeftSidebarOpen(false)}>
+                <X className="h-5 w-5" />
+              </Button>
+            </div>
+
+            <div className="colFlex min-h-0 overflow-hidden">
+              <LeftSidebar
+                learningMode={learningMode}
+                language={language}
+                onLearningModeChange={setLearningMode}
+                onLanguageChange={setLanguage}
+                spaceType={spaceType}
+                groupMembers={groupMembers}
+                user={user}
+                onLogin={setUser}
+                onLogout={() => setUser(null)}
+                isLoggedIn={!!user}
+                onEditProfile={() => setShowProfileEditor(true)}
+                savedItems={savedItems}
+                recentlySavedId={recentlySavedId}
+                onUnsave={handleUnsave}
+                onSave={handleSave}
+                savedChats={savedChats}
+                onLoadChat={handleLoadChat}
+                onDeleteSavedChat={handleDeleteSavedChat}
+                currentWorkspaceId={currentWorkspaceId}
+                workspaces={workspaces}
+                selectedCourse={currentCourseId}
+                availableCourses={availableCourses}
+              />
+            </div>
           </aside>
-        ) : null}
-
-        {/* Mobile left drawer */}
-        <aside
-          className={`
-            fixed lg:hidden inset-y-0 left-0 z-50
-            w-80 bg-card border-r border-border
-            transform transition-transform duration-300 ease-in-out
-            ${leftSidebarOpen ? "translate-x-0" : "-translate-x-full"}
-            flex flex-col
-            mt-16
-            h-[calc(100vh-4rem)]
-            min-h-0
-            overflow-hidden
-          `}
-        >
-          <div className="p-4 border-b border-border flex justify-between items-center flex-shrink-0">
-            <h3>Settings & Guide</h3>
-            <Button variant="ghost" size="icon" onClick={() => setLeftSidebarOpen(false)}>
-              <X className="h-5 w-5" />
-            </Button>
-          </div>
 
-          <LeftSidebar
-            learningMode={learningMode}
-            language={language}
-            onLearningModeChange={setLearningMode}
-            onLanguageChange={setLanguage}
-            spaceType={spaceType}
-            groupMembers={groupMembers}
-            user={user}
-            onLogin={setUser}
-            onLogout={() => setUser(null)}
-            isLoggedIn={!!user}
-            onEditProfile={() => setShowProfileEditor(true)}
-            savedItems={savedItems}
-            recentlySavedId={recentlySavedId}
-            onUnsave={handleUnsave}
-            onSave={handleSave}
-            savedChats={savedChats}
-            onLoadChat={handleLoadChat}
-            onDeleteSavedChat={handleDeleteSavedChat}
-            currentWorkspaceId={currentWorkspaceId}
-            workspaces={workspaces}
-            selectedCourse={currentCourseId}
-            availableCourses={availableCourses}
-          />
-        </aside>
-
-        {/* Chat column: overflow hidden, ChatArea handles its own inner scroll */}
-        <main className="flex-1 min-w-0 min-h-0 flex flex-col overflow-hidden">
-          <ChatArea
-            messages={messages}
-            onSendMessage={handleSendMessage}
-            uploadedFiles={uploadedFiles}
-            onFileUpload={handleFileUpload}
-            onRemoveFile={handleRemoveFile}
-            onFileTypeChange={handleFileTypeChange}
-            memoryProgress={memoryProgress}
-            isLoggedIn={!!user}
-            learningMode={learningMode}
-            onClearConversation={() => setShowClearDialog(true)}
-            onSaveChat={handleSaveChat}
-            onLearningModeChange={setLearningMode}
-            spaceType={spaceType}
-            chatMode={chatMode}
-            onChatModeChange={setChatMode}
-            onNextQuestion={handleNextQuestion}
-            onStartQuiz={handleStartQuiz}
-            quizState={quizState}
-            isTyping={isTyping}
-            showClearDialog={showClearDialog}
-            onConfirmClear={(shouldSave) => {
-              handleClearConversation(shouldSave);
-              setShowClearDialog(false);
-            }}
-            onCancelClear={() => setShowClearDialog(false)}
-            savedChats={savedChats}
-            workspaces={workspaces}
-            currentWorkspaceId={currentWorkspaceId}
-            onSaveFile={(content, type, _format, targetWorkspaceId) =>
-              handleSave(content, type, false, (_format ?? "text") as "pdf" | "text", targetWorkspaceId)
-            }
-            leftPanelVisible={leftPanelVisible}
-            currentCourseId={currentCourseId}
-            onCourseChange={setCurrentCourseId}
-            availableCourses={availableCourses}
-            showReviewBanner={showReviewBanner}
-          />
-        </main>
+          {/* Chat column: outer never scroll, ChatArea controls internal scroll */}
+          <main className="flex-1 min-w-0 col min-h-0 overflow-hidden">
+            <div className="colFlex min-h-0 overflow-hidden">
+              <ChatArea
+                messages={messages}
+                onSendMessage={handleSendMessage}
+                uploadedFiles={uploadedFiles}
+                onFileUpload={handleFileUpload}
+                onRemoveFile={handleRemoveFile}
+                onFileTypeChange={handleFileTypeChange}
+                memoryProgress={memoryProgress}
+                isLoggedIn={!!user}
+                learningMode={learningMode}
+                onClearConversation={() => setShowClearDialog(true)}
+                onSaveChat={handleSaveChat}
+                onLearningModeChange={setLearningMode}
+                spaceType={spaceType}
+                chatMode={chatMode}
+                onChatModeChange={setChatMode}
+                onNextQuestion={handleNextQuestion}
+                onStartQuiz={handleStartQuiz}
+                quizState={quizState}
+                isTyping={isTyping}
+                showClearDialog={showClearDialog}
+                onConfirmClear={(shouldSave) => {
+                  handleClearConversation(shouldSave);
+                  setShowClearDialog(false);
+                }}
+                onCancelClear={() => setShowClearDialog(false)}
+                savedChats={savedChats}
+                workspaces={workspaces}
+                currentWorkspaceId={currentWorkspaceId}
+                onSaveFile={(content, type, _format, targetWorkspaceId) =>
+                  handleSave(content, type, false, (_format ?? "text") as "pdf" | "text", targetWorkspaceId)
+                }
+                leftPanelVisible={leftPanelVisible}
+                currentCourseId={currentCourseId}
+                onCourseChange={setCurrentCourseId}
+                availableCourses={availableCourses}
+                showReviewBanner={showReviewBanner}
+              />
+            </div>
+          </main>
+        </div>
       </div>
     </div>
   );