♻️ refactor(classroom): optimize message area layout and scrolling

- replace native div scrolling with ScrollArea component for better scroll behavior
- adjust message area height calculation for different screen orientations
- modify layout structure to improve message list rendering
- update container styles to fix overflow issues in classroom layout

src/client/mobile/components/Classroom/ClassroomLayout.tsx

@@ -23,6 +23,8 @@ import { StudentHandUpButton } from './StudentHandUpButton';
 import { StudentQuestionButton } from './StudentQuestionButton';
 import { MessageList } from './MessageList';
 import { ImageSelectorButton } from './ImageSelectorButton';
+import { ScrollArea } from '@/client/components/ui/scroll-area';
+import { DivideCircle } from 'lucide-react';
 
 interface ClassroomLayoutProps {
   children: ReactNode;
@@ -162,12 +164,10 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
       )}
 
       {/* 消息和控制面板列 */}
-      <div className={`${showVideo ? `${isLandscape ? 'w-96 flex-none' : 'w-full flex-1'}` : 'flex-1'} md:w-96 md:flex-none flex flex-col ${isLandscape ? 'max-h-screen overflow-y-auto' : ''}`}>
-        {/* 消息区域 */}
-        <div className="flex flex-col h-full">
-          {/* 消息列表 - 填充剩余空间 */}
-          <MessageList messages={messageList} />
-        </div>
+      <div className={`${showVideo ? `${isLandscape ? 'w-96 flex-none h-screen' : 'w-full h-[calc(100vh-300px)]'}` : 'h-full'} md:w-96 md:flex-none flex flex-col overflow-hidden ${isLandscape ? 'max-h-screen' : ''}`}>
+        {/* 消息区域 */}          
+        {/* 消息列表 - 填充剩余空间 */}
+        <MessageList messages={messageList} />
 
         {/* 底部固定区域 */}
         <div className="bg-white shadow-lg p-4">

src/client/mobile/components/Classroom/MessageList.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { Message } from './useClassroom';
 import { useClassroomContext } from './ClassroomProvider';
 import { MessageBubble } from './MessageBubble';
+import { ScrollArea } from '@/client/components/ui/scroll-area';
 
 interface MessageListProps {
   messages: Message[];
@@ -30,15 +31,17 @@ export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
   };
 
   return (
-    <div className="flex-1 overflow-y-auto bg-white p-4 space-y-2">
-      {messages.map((message, index) => (
-        <MessageBubble
-          key={`${message.timestamp}-${index}`}
-          message={message}
-          isOwnMessage={isOwnMessage(message)}
-        />
-      ))}
-      <div ref={messagesEndRef} />
-    </div>
+    <ScrollArea className="flex-1 min-h-0 bg-white p-4">
+      <div className="space-y-2">
+        {messages.map((message, index) => (
+          <MessageBubble
+            key={`${message.timestamp}-${index}`}
+            message={message}
+            isOwnMessage={isOwnMessage(message)}
+          />
+        ))}
+        <div ref={messagesEndRef} />
+      </div>
+    </ScrollArea>
   );
 };