Update web/src/App.tsx

web/src/App.tsx

@@ -118,7 +118,9 @@ function App() {
 
   const [user, setUser] = useState<User | null>(null);
 
-  const [currentCourseId, setCurrentCourseId] = useState<string>(() => localStorage.getItem("myspace_selected_course") || "course1");
+  const [currentCourseId, setCurrentCourseId] = useState<string>(
+    () => localStorage.getItem("myspace_selected_course") || "course1"
+  );
 
   const availableCourses: CourseInfo[] = [
     {
@@ -161,7 +163,8 @@ function App() {
     {
       id: "review-1",
       role: "assistant",
-      content: "📚 Welcome to Review mode! I'll help you review and consolidate your learning. Let's go through what you've learned!",
+      content:
+        "📚 Welcome to Review mode! I'll help you review and consolidate your learning. Let's go through what you've learned!",
       timestamp: new Date(),
     },
   ]);
@@ -170,7 +173,8 @@ function App() {
     {
       id: "quiz-1",
       role: "assistant",
-      content: "🎯 Welcome to Quiz mode! I'll test your understanding with personalized questions based on your learning history. Ready to start?",
+      content:
+        "🎯 Welcome to Quiz mode! I'll test your understanding with personalized questions based on your learning history. Ready to start?",
       timestamp: new Date(),
     },
   ]);
@@ -200,7 +204,9 @@ function App() {
 
     const hasUserMessages = currentMessages.some((msg) => msg.role === "user");
     const expectedWelcomeId = chatMode === "ask" ? "1" : chatMode === "review" ? "review-1" : "quiz-1";
-    const hasWelcomeMessage = currentMessages.some((msg) => msg.id === expectedWelcomeId && msg.role === "assistant");
+    const hasWelcomeMessage = currentMessages.some(
+      (msg) => msg.id === expectedWelcomeId && msg.role === "assistant"
+    );
     const modeChanged = prevChatModeRef.current !== chatMode;
 
     if ((modeChanged || currentMessages.length === 0 || !hasWelcomeMessage) && !hasUserMessages) {
@@ -218,7 +224,8 @@ function App() {
           {
             id: "review-1",
             role: "assistant",
-            content: "📚 Welcome to Review mode! I'll help you review and consolidate your learning. Let's go through what you've learned!",
+            content:
+              "📚 Welcome to Review mode! I'll help you review and consolidate your learning. Let's go through what you've learned!",
             timestamp: new Date(),
           },
         ],
@@ -226,7 +233,8 @@ function App() {
           {
             id: "quiz-1",
             role: "assistant",
-            content: "🎯 Welcome to Quiz mode! I'll test your understanding with personalized questions based on your learning history. Ready to start?",
+            content:
+              "🎯 Welcome to Quiz mode! I'll test your understanding with personalized questions based on your learning history. Ready to start?",
             timestamp: new Date(),
           },
         ],
@@ -309,7 +317,6 @@ function App() {
     }
   }, [user, groupMembers, availableCourses]);
 
-  // ✅ stable fallback to avoid undefined props during the first render after login
   const fallbackWorkspace: Workspace = {
     id: "individual",
     name: "My Space",
@@ -348,7 +355,7 @@ function App() {
     localStorage.setItem("theme", isDarkMode ? "dark" : "light");
   }, [isDarkMode]);
 
-  // ✅ lock body scroll (avoid outer page scrollbars)
+  // ✅ lock outer page scroll (defensive; your index.css already does this)
   useEffect(() => {
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -385,11 +392,13 @@ function App() {
         question: "Which of the following is NOT a principle of Responsible AI?",
         options: ["A) Fairness", "B) Transparency", "C) Profit Maximization", "D) Accountability"],
         correctAnswer: "C",
-        explanation: "Profit Maximization is not a principle of Responsible AI. The key principles are Fairness, Transparency, and Accountability.",
+        explanation:
+          "Profit Maximization is not a principle of Responsible AI. The key principles are Fairness, Transparency, and Accountability.",
       },
       {
         type: "fill-in-blank",
-        question: "Algorithmic fairness ensures that AI systems do not discriminate against individuals based on their _____.",
+        question:
+          "Algorithmic fairness ensures that AI systems do not discriminate against individuals based on their _____.",
         correctAnswer: "protected characteristics",
         explanation:
           "Protected characteristics include attributes like race, gender, age, religion, etc. AI systems should not discriminate based on these.",
@@ -575,7 +584,6 @@ 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) => {
     if (!user) return;
 
@@ -612,7 +620,11 @@ function App() {
 
         return chat.messages.every((savedMsg, idx) => {
           const currentMsg = messages[idx];
-          return savedMsg.id === currentMsg.id && savedMsg.role === currentMsg.role && savedMsg.content === currentMsg.content;
+          return (
+            savedMsg.id === currentMsg.id &&
+            savedMsg.role === currentMsg.role &&
+            savedMsg.content === currentMsg.content
+          );
         });
       }) || null
     );
@@ -685,7 +697,8 @@ function App() {
         {
           id: "review-1",
           role: "assistant",
-          content: "📚 Welcome to Review mode! I'll help you review and consolidate your learning. Let's go through what you've learned!",
+          content:
+            "📚 Welcome to Review mode! I'll help you review and consolidate your learning. Let's go through what you've learned!",
           timestamp: new Date(),
         },
       ],
@@ -693,7 +706,8 @@ function App() {
         {
           id: "quiz-1",
           role: "assistant",
-          content: "🎯 Welcome to Quiz mode! I'll test your understanding with personalized questions based on your learning history. Ready to start?",
+          content:
+            "🎯 Welcome to Quiz mode! I'll test your understanding with personalized questions based on your learning history. Ready to start?",
           timestamp: new Date(),
         },
       ],
@@ -774,7 +788,12 @@ function App() {
     toast.success("Removed from saved items");
   };
 
-  const handleCreateWorkspace = (payload: { name: string; category: "course" | "personal"; courseId?: string; invites: string[] }) => {
+  const handleCreateWorkspace = (payload: {
+    name: string;
+    category: "course" | "personal";
+    courseId?: string;
+    invites: string[];
+  }) => {
     const id = `group-${Date.now()}`;
     const avatar = `https://api.dicebear.com/7.x/shapes/svg?seed=${encodeURIComponent(payload.name)}`;
 
@@ -856,16 +875,17 @@ function App() {
   const handleOnboardingSkip = () => setShowOnboarding(false);
 
   if (!user) return <LoginScreen onLogin={handleLogin} />;
-  if (showOnboarding && user) return <Onboarding user={user} onComplete={handleOnboardingComplete} onSkip={handleOnboardingSkip} />;
+  if (showOnboarding && user)
+    return <Onboarding user={user} onComplete={handleOnboardingComplete} onSkip={handleOnboardingSkip} />;
 
   return (
-    // ✅ CRITICAL: make the whole app fill viewport and avoid page scroll
-    <div className="h-screen w-full overflow-hidden bg-background">
+    // ✅ Use fixed inset-0 instead of h-screen to avoid mobile/OS viewport quirks and ensure true viewport lock.
+    <div className="fixed inset-0 w-full bg-background overflow-hidden">
       <Toaster />
 
-      {/* APP column layout (header + main) */}
-      <div className="flex flex-col h-full min-h-0 min-w-0">
-        {/* Header fixed */}
+      {/* App vertical layout: header + (optional) banner + main */}
+      <div className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden">
+        {/* Header (never scrolls) */}
         <div className="flex-shrink-0">
           <Header
             user={user}
@@ -889,15 +909,16 @@ function App() {
           <ProfileEditor user={user} onSave={setUser} onClose={() => setShowProfileEditor(false)} />
         )}
 
-        {/* Review banner fixed */}
+        {/* Review banner (never scrolls) */}
         {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 min-w-0 flex overflow-hidden relative" style={{ overscrollBehavior: "none" }}>
+        {/* Main row: ONLY children scroll; never this container */}
+        <div className="flex flex-1 min-h-0 min-w-0 overflow-hidden relative">
+          {/* Left panel open button (desktop) */}
           {!leftPanelVisible && (
             <Button
               variant="secondary"
@@ -911,13 +932,14 @@ function App() {
             </Button>
           )}
 
+          {/* Mobile overlay */}
           {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 h-full min-h-0 min-w-0 bg-card border-r border-border 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 flex-col">
               <Button
                 variant="secondary"
                 size="icon"
@@ -929,7 +951,7 @@ function App() {
                 <ChevronLeft className="h-3 w-3" />
               </Button>
 
-              {/* LeftSidebar controls internal scroll (Saved list), outer never scrolls */}
+              {/* IMPORTANT: do not add overflow-y here; let LeftSidebar decide its internal scrolling */}
               <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
                 <LeftSidebar
                   learningMode={learningMode}
@@ -960,19 +982,16 @@ function App() {
             </aside>
           ) : null}
 
-          {/* Mobile left drawer */}
+          {/* Mobile left drawer: height derives from viewport, not from header */}
           <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"}
-              mt-16
-              h-[calc(100vh-4rem)]
-              min-h-0
-              overflow-hidden
-              flex flex-col
-            `}
+            className={[
+              "fixed lg:hidden z-50",
+              "left-0 top-0 bottom-0",
+              "w-80 bg-card border-r border-border",
+              "transform transition-transform duration-300 ease-in-out",
+              leftSidebarOpen ? "translate-x-0" : "-translate-x-full",
+              "overflow-hidden flex flex-col",
+            ].join(" ")}
           >
             <div className="p-4 border-b border-border flex justify-between items-center flex-shrink-0">
               <h3>Settings & Guide</h3>
@@ -1010,9 +1029,9 @@ function App() {
             </div>
           </aside>
 
-          {/* Chat column: outer never scroll, ChatArea controls internal scroll */}
-          <main className="flex-1 min-w-0 min-h-0 overflow-hidden flex flex-col">
-            <div className="flex-1 min-h-0 overflow-hidden">
+          {/* Chat column: must be flex-col + min-h-0 + overflow-hidden so ChatArea can manage internal scroll */}
+          <main className="flex flex-1 min-w-0 min-h-0 overflow-hidden flex-col">
+            <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
               <ChatArea
                 messages={messages}
                 onSendMessage={handleSendMessage}