Update web/src/App.tsx

web/src/App.tsx

@@ -348,7 +348,7 @@ function App() {
     localStorage.setItem("theme", isDarkMode ? "dark" : "light");
   }, [isDarkMode]);
 
-  // ✅ 额外保险：锁 body 滚动（避免某些情况下仍出现页面滚动条）
+  // ✅ lock body scroll (avoid outer page scrollbars)
   useEffect(() => {
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -575,18 +575,19 @@ function App() {
     setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
   };
 
+  // ✅ FIX: use the same "next" array for state update and for uploading; do NOT read stale `uploadedFiles`
   const handleFileTypeChange = async (index: number, type: FileType) => {
-    setUploadedFiles((prev) => prev.map((file, i) => (i === index ? { ...file, type } : file)));
-
     if (!user) return;
 
-    const target = uploadedFiles[index];
+    const next = uploadedFiles.map((f, i) => (i === index ? { ...f, type } : f));
+    setUploadedFiles(next);
+
+    const target = next[index];
     const file = target?.file;
     if (!file) return;
 
     const fp = `${file.name}::${file.size}::${file.lastModified}`;
     if (uploadedFingerprintsRef.current.has(fp)) return;
-
     uploadedFingerprintsRef.current.add(fp);
 
     try {
@@ -858,17 +859,18 @@ function App() {
   if (showOnboarding && user) return <Onboarding user={user} onComplete={handleOnboardingComplete} onSkip={handleOnboardingSkip} />;
 
   return (
-    <div className="appShell bg-background">
+    // ✅ CRITICAL: make the whole app fill viewport and avoid page scroll
+    <div className="h-screen w-full overflow-hidden bg-background">
       <Toaster />
 
-      {/* APP: column layout (header + main) */}
-      <div className="col flex-1 min-w-0">
+      {/* APP column layout (header + main) */}
+      <div className="flex flex-col h-full min-h-0 min-w-0">
         {/* Header fixed */}
-        <div className="colFixed flex-shrink-0">
+        <div className="flex-shrink-0">
           <Header
             user={user}
             onMenuClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
-            onUserClick={() => setShowProfileEditor(true)} // ✅ open profile editor
+            onUserClick={() => setShowProfileEditor(true)}
             isDarkMode={isDarkMode}
             onToggleDarkMode={() => setIsDarkMode(!isDarkMode)}
             language={language}
@@ -883,17 +885,19 @@ function App() {
           />
         </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="colFixed flex-shrink-0 w-full bg-background border-b border-border relative z-50">
+          <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="colFlex flex min-h-0 overflow-hidden relative" style={{ overscrollBehavior: "none" }}>
+        <div className="flex-1 min-h-0 min-w-0 flex overflow-hidden relative" style={{ overscrollBehavior: "none" }}>
           {!leftPanelVisible && (
             <Button
               variant="secondary"
@@ -907,11 +911,13 @@ function App() {
             </Button>
           )}
 
-          {leftSidebarOpen && <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setLeftSidebarOpen(false)} />}
+          {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">
+            <aside className="hidden lg:flex w-80 h-full min-h-0 min-w-0 bg-card border-r border-border overflow-hidden relative">
               <Button
                 variant="secondary"
                 size="icon"
@@ -923,32 +929,34 @@ function App() {
                 <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}
-              />
+              {/* LeftSidebar controls internal scroll (Saved list), outer never scrolls */}
+              <div className="flex-1 min-h-0 min-w-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}
+                  onRenameSavedChat={handleRenameSavedChat}
+                  currentWorkspaceId={currentWorkspaceId}
+                  workspaces={workspaces}
+                  selectedCourse={currentCourseId}
+                  availableCourses={availableCourses}
+                />
+              </div>
             </aside>
           ) : null}
 
@@ -959,21 +967,21 @@ function App() {
               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
+              flex flex-col
             `}
           >
-            <div className="colFixed p-4 border-b border-border flex justify-between items-center flex-shrink-0">
+            <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>
 
-            <div className="colFlex min-h-0 overflow-hidden">
+            <div className="flex-1 min-h-0 overflow-hidden">
               <LeftSidebar
                 learningMode={learningMode}
                 language={language}
@@ -993,7 +1001,7 @@ function App() {
                 savedChats={savedChats}
                 onLoadChat={handleLoadChat}
                 onDeleteSavedChat={handleDeleteSavedChat}
-                onRenameSavedChat={handleRenameSavedChat} // ✅ 补齐：避免 LeftSidebar props TS 报错
+                onRenameSavedChat={handleRenameSavedChat}
                 currentWorkspaceId={currentWorkspaceId}
                 workspaces={workspaces}
                 selectedCourse={currentCourseId}
@@ -1003,8 +1011,8 @@ function App() {
           </aside>
 
           {/* 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">
+          <main className="flex-1 min-w-0 min-h-0 overflow-hidden flex flex-col">
+            <div className="flex-1 min-h-0 overflow-hidden">
               <ChatArea
                 messages={messages}
                 onSendMessage={handleSendMessage}