💄 style(classroom): 优化课堂布局响应式设计

- 调整视频区域宽度比例为md:flex-[3]，增强大屏幕显示效果
- 修改控制面板列样式为md:flex-none，确保在中等屏幕尺寸下布局稳定性

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

@@ -52,7 +52,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
     <div className="flex flex-col md:flex-row h-screen bg-gray-100">
       {/* 视频区域 */}
       {showVideo && (
-        <div className="relative h-[300px] md:flex-1 md:h-auto bg-black">
+        <div className="relative h-[300px] md:flex-[3] md:h-auto bg-black">
           {/* 主屏幕共享容器 */}
           <div
             id="remoteScreenContainer"
@@ -87,7 +87,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
       )}
 
       {/* 消息和控制面板列 */}
-      <div className={`${showVideo ? 'w-full md:w-96 flex-1' : 'flex-1'} flex flex-col`}>
+      <div className={`${showVideo ? 'w-full flex-1 md:w-96 md:flex-none' : 'flex-1'} flex flex-col`}>
         {/* 消息区域 */}
         <div className="flex flex-col h-full">
           {/* 消息列表 - 填充剩余空间 */}