feat: 重构成长路径编辑页面布局 - 上方基本信息/阶段/统计，下方左右分栏课程配置

frontend/src/views/manager/growth-path-management.vue

@@ -138,108 +138,116 @@
         </div>
       </div>
 
-      <div class="path-editor">
+      <div class="path-editor-new">
-        <!-- 左侧：基本信息 + 阶段配置 -->
+        <!-- 上方：基本信息 + 学习阶段 + 路径统计 -->
-        <div class="editor-sidebar">
+        <div class="editor-top">
-          <div class="sidebar-section">
+          <!-- 基本信息 -->
+          <div class="top-section basic-info">
             <h3>基本信息</h3>
-            <el-form label-position="top" :model="editingPath">
+            <el-form label-position="top" :model="editingPath" size="small">
-              <el-form-item label="路径名称" required>
+              <div class="form-row">
-                <el-input v-model="editingPath.name" placeholder="请输入路径名称" />
+                <el-form-item label="路径名称" required class="form-item-half">
-              </el-form-item>
+                  <el-input v-model="editingPath.name" placeholder="请输入路径名称" />
-              <el-form-item label="路径描述">
+                </el-form-item>
-                <el-input 
+                <el-form-item label="关联岗位" class="form-item-half">
-                  v-model="editingPath.description" 
+                  <el-select 
-                  type="textarea" 
+                    v-model="editingPath.position_ids" 
-                  :rows="3"
+                    placeholder="选择关联岗位" 
-                  placeholder="请输入路径描述" 
+                    multiple
-                />
+                    collapse-tags
-              </el-form-item>
+                    collapse-tags-tooltip
-              <el-form-item label="关联岗位">
+                    clearable 
-                <el-select 
+                    style="width: 100%"
-                  v-model="editingPath.position_ids" 
+                  >
-                  placeholder="选择关联岗位（可多选）" 
+                    <el-option 
-                  multiple
+                      v-for="pos in positions" 
-                  collapse-tags
+                      :key="pos.id" 
-                  collapse-tags-tooltip
+                      :label="pos.name" 
-                  clearable 
+                      :value="pos.id" 
-                  style="width: 100%"
+                    />
-                >
+                  </el-select>
-                  <el-option 
+                </el-form-item>
-                    v-for="pos in positions" 
+              </div>
-                    :key="pos.id" 
+              <div class="form-row">
-                    :label="pos.name" 
+                <el-form-item label="路径描述" class="form-item-full">
-                    :value="pos.id" 
+                  <el-input 
+                    v-model="editingPath.description" 
+                    type="textarea" 
+                    :rows="2"
+                    placeholder="请输入路径描述" 
                   />
-                </el-select>
+                </el-form-item>
-              </el-form-item>
+              </div>
-              <el-form-item label="预计完成天数">
+              <div class="form-row">
-                <el-input-number 
+                <el-form-item label="预计天数" class="form-item-small">
-                  v-model="editingPath.estimated_duration_days" 
+                  <el-input-number 
-                  :min="1" 
+                    v-model="editingPath.estimated_duration_days" 
-                  :max="365"
+                    :min="1" 
-                  style="width: 100%"
+                    :max="365"
-                />
+                    style="width: 100%"
-              </el-form-item>
+                  />
-              <el-form-item label="状态">
+                </el-form-item>
-                <el-switch 
+                <el-form-item label="状态" class="form-item-small">
-                  v-model="editingPath.is_active" 
+                  <el-switch 
-                  active-text="启用" 
+                    v-model="editingPath.is_active" 
-                  inactive-text="禁用"
+                    active-text="启用" 
-                />
+                    inactive-text="禁用"
-              </el-form-item>
+                  />
+                </el-form-item>
+              </div>
             </el-form>
           </div>
 
-          <div class="sidebar-section">
+          <!-- 学习阶段 -->
+          <div class="top-section stages-section">
             <div class="section-header">
               <h3>学习阶段</h3>
               <el-button link type="primary" size="small" @click="addStage">
-                <el-icon><Plus /></el-icon> 添加阶段
+                <el-icon><Plus /></el-icon> 添加
               </el-button>
             </div>
-            <div class="stages-list">
+            <div class="stages-list-horizontal">
               <div 
                 v-for="(stage, index) in editingPath.stages" 
                 :key="index"
-                class="stage-item"
+                class="stage-tag"
               >
                 <el-input 
                   v-model="stage.name" 
                   placeholder="阶段名称"
                   size="small"
+                  style="width: 100px"
                 >
                   <template #prefix>
                     <span class="stage-order">{{ index + 1 }}</span>
                   </template>
-                  <template #suffix>
-                    <el-button 
-                      link 
-                      type="danger" 
-                      size="small" 
-                      @click="removeStage(index)"
-                      :disabled="editingPath.stages.length <= 1"
-                    >
-                      <el-icon><Delete /></el-icon>
-                    </el-button>
-                  </template>
                 </el-input>
+                <el-button 
+                  link 
+                  type="danger" 
+                  size="small" 
+                  @click="removeStage(index)"
+                  :disabled="editingPath.stages.length <= 1"
+                >
+                  <el-icon><Delete /></el-icon>
+                </el-button>
               </div>
             </div>
           </div>
 
-          <div class="sidebar-section">
+          <!-- 路径统计 -->
+          <div class="top-section stats-section">
             <h3>路径统计</h3>
-            <div class="stats-grid">
+            <div class="stats-row">
-              <div class="stat-item">
+              <div class="stat-box">
                 <span class="stat-value">{{ editingPath.nodes?.length || 0 }}</span>
                 <span class="stat-label">课程总数</span>
               </div>
-              <div class="stat-item">
+              <div class="stat-box">
                 <span class="stat-value">{{ requiredCount }}</span>
                 <span class="stat-label">必修课程</span>
               </div>
-              <div class="stat-item">
+              <div class="stat-box">
                 <span class="stat-value">{{ totalDuration }}</span>
                 <span class="stat-label">总学时(h)</span>
               </div>
@@ -247,156 +255,149 @@
           </div>
         </div>
 
-        <!-- 右侧：课程配置 -->
+        <!-- 下方：左右分栏 -->
-        <div class="editor-main">
+        <div class="editor-bottom">
-          <div class="course-config-panel">
+          <!-- 左侧 1/3：可选课程 -->
+          <div class="course-library-panel">
             <div class="panel-header">
-              <h3>课程配置</h3>
+              <span>可选课程</span>
+              <el-tag size="small">{{ filteredCourses.length }} 门</el-tag>
             </div>
-
+            <div class="course-filter">
-            <!-- 课程库 -->
+              <el-input 
-            <div class="course-library">
+                v-model="courseSearch" 
-              <div class="library-header">
+                placeholder="搜索课程..." 
-                <span>可选课程</span>
+                clearable
-                <el-tag size="small">{{ filteredCourses.length }} 门</el-tag>
+                size="small"
-              </div>
-              <!-- 搜索和筛选 -->
-              <div class="course-filter">
-                <el-input 
-                  v-model="courseSearch" 
-                  placeholder="搜索课程名称..." 
-                  clearable
-                  size="small"
-                >
-                  <template #prefix>
-                    <el-icon><Search /></el-icon>
-                  </template>
-                </el-input>
-                <el-select 
-                  v-model="courseCategory" 
-                  placeholder="分类筛选" 
-                  clearable 
-                  size="small"
-                  style="width: 120px"
-                >
-                  <el-option 
-                    v-for="cat in courseCategories" 
-                    :key="cat" 
-                    :label="cat" 
-                    :value="cat" 
-                  />
-                </el-select>
-              </div>
-              <div class="library-content" v-loading="coursesLoading">
-                <div 
-                  v-for="course in filteredCourses" 
-                  :key="course.id"
-                  class="course-item"
-                  :class="{ 'is-added': isNodeAdded(course.id) }"
-                  draggable="true"
-                  @dragstart="handleDragStart($event, course)"
-                  @click="handleAddCourse(course)"
-                >
-                  <div class="course-info">
-                    <span class="course-name">{{ course.name || course.title }}</span>
-                    <span class="course-meta">
-                      {{ course.duration_hours || course.estimatedDuration || 0 }}h · 
-                      {{ course.category || '未分类' }}
-                    </span>
-                  </div>
-                  <el-icon v-if="isNodeAdded(course.id)" color="#67c23a"><Check /></el-icon>
-                  <el-icon v-else><Plus /></el-icon>
-                </div>
-                <el-empty v-if="filteredCourses.length === 0" description="暂无课程" :image-size="60" />
-              </div>
-            </div>
-
-            <!-- 已选课程（按阶段分组） -->
-            <div class="selected-courses">
-              <div class="library-header">
-                <span>已选课程</span>
-                <el-tag size="small" type="success">{{ editingPath.nodes?.length || 0 }} 门</el-tag>
-              </div>
-              <div 
-                class="selected-content"
-                :class="{ 'is-dragging-over': isDraggingOver }"
-                @dragover.prevent="handleDragOver"
-                @dragleave="handleDragLeave"
-                @drop="handleDrop"
               >
-                <template v-if="editingPath.nodes && editingPath.nodes.length > 0">
+                <template #prefix>
-                  <div 
+                  <el-icon><Search /></el-icon>
-                    v-for="(stage, stageIndex) in editingPath.stages" 
+                </template>
-                    :key="stageIndex"
+              </el-input>
-                    class="stage-section"
+              <el-select 
-                  >
+                v-model="courseCategory" 
-                    <div class="stage-header">
+                placeholder="分类" 
-                      <span>{{ stage.name }}</span>
+                clearable 
-                      <el-tag size="small" type="info">
+                size="small"
-                        {{ getStageNodes(stage.name).length }} 门
+                style="width: 100px"
-                      </el-tag>
+              >
+                <el-option 
+                  v-for="cat in courseCategories" 
+                  :key="cat" 
+                  :label="cat" 
+                  :value="cat" 
+                />
+              </el-select>
+            </div>
+            <div class="course-list" v-loading="coursesLoading">
+              <div 
+                v-for="course in filteredCourses" 
+                :key="course.id"
+                class="course-item"
+                :class="{ 'is-added': isNodeAdded(course.id) }"
+                draggable="true"
+                @dragstart="handleDragStart($event, course)"
+                @click="handleAddCourse(course)"
+              >
+                <div class="course-info">
+                  <span class="course-name">{{ course.name || course.title }}</span>
+                  <span class="course-meta">
+                    {{ course.duration_hours || course.estimatedDuration || 0 }}h · {{ course.category || '未分类' }}
+                  </span>
+                </div>
+                <el-icon v-if="isNodeAdded(course.id)" color="#67c23a"><Check /></el-icon>
+                <el-icon v-else><Plus /></el-icon>
+              </div>
+              <el-empty v-if="filteredCourses.length === 0" description="暂无课程" :image-size="50" />
+            </div>
+          </div>
+
+          <!-- 右侧 2/3：已选课程配置 -->
+          <div class="selected-courses-panel">
+            <div class="panel-header">
+              <span>已选课程配置</span>
+              <el-tag size="small" type="success">{{ editingPath.nodes?.length || 0 }} 门</el-tag>
+            </div>
+            <div 
+              class="selected-content"
+              :class="{ 'is-dragging-over': isDraggingOver }"
+              @dragover.prevent="handleDragOver"
+              @dragleave="handleDragLeave"
+              @drop="handleDrop"
+            >
+              <template v-if="editingPath.nodes && editingPath.nodes.length > 0">
+                <div 
+                  v-for="(stage, stageIndex) in editingPath.stages" 
+                  :key="stageIndex"
+                  class="stage-section"
+                >
+                  <div class="stage-header">
+                    <span>{{ stage.name }}</span>
+                    <el-tag size="small" type="info">
+                      {{ getStageNodes(stage.name).length }} 门
+                    </el-tag>
+                  </div>
+                  <div class="stage-nodes">
+                    <div 
+                      v-for="(node, nodeIndex) in getStageNodes(stage.name)" 
+                      :key="node.course_id"
+                      class="node-item"
+                    >
+                      <div class="node-drag-handle">
+                        <el-icon><Rank /></el-icon>
+                      </div>
+                      <div class="node-content">
+                        <span class="node-title">{{ node.title }}</span>
+                        <div class="node-meta">
+                          <el-tag 
+                            :type="node.is_required ? 'danger' : 'info'" 
+                            size="small"
+                            @click="toggleRequired(node)"
+                            style="cursor: pointer"
+                          >
+                            {{ node.is_required ? '必修' : '选修' }}
+                          </el-tag>
+                          <span>{{ node.estimated_days || 1 }}天</span>
+                        </div>
+                      </div>
+                      <div class="node-actions">
+                        <el-select 
+                          v-model="node.stage_name" 
+                          size="small" 
+                          style="width: 90px"
+                          placeholder="阶段"
+                        >
+                          <el-option 
+                            v-for="s in editingPath.stages" 
+                            :key="s.name" 
+                            :label="s.name" 
+                            :value="s.name" 
+                          />
+                        </el-select>
+                        <el-button 
+                          link 
+                          type="danger" 
+                          size="small"
+                          @click="removeNode(node)"
+                        >
+                          <el-icon><Delete /></el-icon>
+                        </el-button>
+                      </div>
                     </div>
-                    <div class="stage-nodes">
+                    <div 
-                      <div 
+                      v-if="getStageNodes(stage.name).length === 0" 
-                        v-for="(node, nodeIndex) in getStageNodes(stage.name)" 
+                      class="stage-empty"
-                        :key="node.course_id"
+                    >
-                        class="node-item"
+                      拖拽或点击课程添加到此阶段
-                      >
-                        <div class="node-drag-handle">
-                          <el-icon><Rank /></el-icon>
-                        </div>
-                        <div class="node-content">
-                          <span class="node-title">{{ node.title }}</span>
-                          <div class="node-meta">
-                            <el-tag 
-                              :type="node.is_required ? 'danger' : 'info'" 
-                              size="small"
-                              @click="toggleRequired(node)"
-                              style="cursor: pointer"
-                            >
-                              {{ node.is_required ? '必修' : '选修' }}
-                            </el-tag>
-                            <span>{{ node.estimated_days || 1 }}天</span>
-                          </div>
-                        </div>
-                        <div class="node-actions">
-                          <el-select 
-                            v-model="node.stage_name" 
-                            size="small" 
-                            style="width: 100px"
-                            placeholder="阶段"
-                          >
-                            <el-option 
-                              v-for="s in editingPath.stages" 
-                              :key="s.name" 
-                              :label="s.name" 
-                              :value="s.name" 
-                            />
-                          </el-select>
-                          <el-button 
-                            link 
-                            type="danger" 
-                            size="small"
-                            @click="removeNode(node)"
-                          >
-                            <el-icon><Delete /></el-icon>
-                          </el-button>
-                        </div>
-                      </div>
-                      <div 
-                        v-if="getStageNodes(stage.name).length === 0" 
-                        class="stage-empty"
-                      >
-                        拖拽或点击课程添加到此阶段
-                      </div>
                     </div>
                   </div>
+                </div>
+              </template>
+              <el-empty v-else description="请从左侧添加课程" :image-size="60">
+                <template #description>
+                  <p>点击或拖拽左侧课程添加</p>
                 </template>
-                <el-empty v-else description="请从左侧添加课程" :image-size="80">
+              </el-empty>
-                  <template #description>
-                    <p>从左侧课程库拖拽或点击添加课程</p>
-                  </template>
-                </el-empty>
               </div>
             </div>
           </div>
@@ -995,92 +996,151 @@ onMounted(() => {
     }
   }
 
-  .path-editor {
+  // 新布局样式
+  .path-editor-new {
     flex: 1;
     display: flex;
-    gap: 20px;
+    flex-direction: column;
+    gap: 16px;
     min-height: 0;
 
-    .editor-sidebar {
+    // 上方区域
-      width: 320px;
+    .editor-top {
       display: flex;
-      flex-direction: column;
       gap: 16px;
-      overflow-y: auto;
+      flex-shrink: 0;
 
-      .sidebar-section {
+      .top-section {
         background: #fff;
         border-radius: 8px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        padding: 20px;
+        padding: 16px;
 
         h3 {
-          font-size: 16px;
+          font-size: 14px;
           font-weight: 600;
           color: #333;
-          margin: 0 0 16px 0;
+          margin: 0 0 12px 0;
+          padding-bottom: 8px;
+          border-bottom: 1px solid #ebeef5;
         }
+      }
+
+      .basic-info {
+        flex: 2;
+
+        .form-row {
+          display: flex;
+          gap: 16px;
+          margin-bottom: 8px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        .form-item-half {
+          flex: 1;
+          margin-bottom: 0;
+        }
+
+        .form-item-full {
+          flex: 1;
+          margin-bottom: 0;
+        }
+
+        .form-item-small {
+          width: 120px;
+          margin-bottom: 0;
+        }
+
+        :deep(.el-form-item) {
+          margin-bottom: 0;
+        }
+      }
+
+      .stages-section {
+        flex: 1;
+        min-width: 280px;
 
         .section-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 16px;
+          margin-bottom: 12px;
+          padding-bottom: 8px;
+          border-bottom: 1px solid #ebeef5;
 
           h3 {
             margin: 0;
+            padding: 0;
+            border: none;
           }
         }
 
-        .stages-list {
+        .stages-list-horizontal {
           display: flex;
-          flex-direction: column;
+          flex-wrap: wrap;
           gap: 8px;
 
-          .stage-item {
+          .stage-tag {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
             .stage-order {
               color: #667eea;
               font-weight: 600;
-              margin-right: 4px;
+              font-size: 12px;
             }
           }
         }
+      }
 
-        .stats-grid {
+      .stats-section {
-          display: grid;
+        width: 200px;
-          grid-template-columns: repeat(3, 1fr);
+        flex-shrink: 0;
-          gap: 12px;
 
-          .stat-item {
+        .stats-row {
+          display: flex;
+          gap: 8px;
+
+          .stat-box {
+            flex: 1;
             text-align: center;
-            padding: 12px 8px;
+            padding: 8px 4px;
             background: #f5f7fa;
             border-radius: 6px;
 
             .stat-value {
               display: block;
-              font-size: 20px;
+              font-size: 18px;
               font-weight: 600;
               color: #667eea;
             }
 
             .stat-label {
               display: block;
-              font-size: 12px;
+              font-size: 11px;
               color: #909399;
-              margin-top: 4px;
+              margin-top: 2px;
             }
           }
         }
       }
     }
 
-    .editor-main {
+    // 下方区域
+    .editor-bottom {
       flex: 1;
-      min-width: 0;
+      display: flex;
+      gap: 16px;
+      min-height: 0;
 
-      .course-config-panel {
+      // 左侧课程库 1/3
-        height: 100%;
+      .course-library-panel {
+        width: 33%;
+        min-width: 280px;
         background: #fff;
         border-radius: 8px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -1091,110 +1151,41 @@ onMounted(() => {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding: 16px 20px;
+          padding: 12px 16px;
+          background: #fafafa;
+          border-radius: 8px 8px 0 0;
+          font-weight: 500;
+          border-bottom: 1px solid #ebeef5;
+        }
+
+        .course-filter {
+          display: flex;
+          gap: 8px;
+          padding: 10px 12px;
+          background: #f5f7fa;
           border-bottom: 1px solid #ebeef5;
 
-          h3 {
+          .el-input {
-            font-size: 16px;
+            flex: 1;
-            font-weight: 600;
-            color: #333;
-            margin: 0;
           }
         }
 
-        .course-library {
+        .course-list {
-          flex: 2;  // 课程库占更多空间
-          display: flex;
-          flex-direction: column;
-          min-height: 300px;
-          border-bottom: 1px solid #ebeef5;
-        }
-
-        .selected-courses {
           flex: 1;
-          display: flex;
+          overflow-y: auto;
-          flex-direction: column;
+          padding: 8px;
-          min-height: 200px;
-          border-bottom: none;
-        }
-
-        .course-library,
-        .selected-courses {
-
-          .library-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 12px 20px;
-            background: #fafafa;
-            font-weight: 500;
-          }
-
-          .course-filter {
-            display: flex;
-            gap: 8px;
-            padding: 12px 16px;
-            background: #f5f7fa;
-            border-bottom: 1px solid #ebeef5;
-
-            .el-input {
-              flex: 1;
-            }
-          }
-
-          .library-content {
-            flex: 1;
-            overflow-y: auto;
-            padding: 8px;
-            max-height: 450px;
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);  // 双列布局
-            gap: 4px;
-            align-content: start;
-          }
-
-          .selected-content {
-            flex: 1;
-            overflow-y: auto;
-            padding: 12px;
-            transition: all 0.3s ease;
-          }
-
-          .selected-content {
-            border: 2px dashed transparent;
-            
-            &.is-dragging-over {
-              background: #ecf5ff;
-              border-color: #667eea;
-              
-              &::before {
-                content: '松开鼠标添加课程';
-                display: block;
-                text-align: center;
-                padding: 12px;
-                color: #667eea;
-                font-weight: 500;
-                animation: pulse 1s infinite;
-              }
-            }
-          }
-          
-          @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.6; }
-          }
 
           .course-item {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 6px 8px;
+            padding: 8px 10px;
+            margin-bottom: 6px;
             background: #f5f7fa;
             border-radius: 4px;
             cursor: grab;
             transition: all 0.15s;
             border: 1px solid #e4e7ed;
-            height: fit-content;
 
             &:hover {
               background: #e6e8eb;
@@ -1205,11 +1196,6 @@ onMounted(() => {
               cursor: grabbing;
             }
 
-            &.is-dragging {
-              opacity: 0.5;
-              border-color: #667eea;
-            }
-
             &.is-added {
               background: #f0f9eb;
               border-color: #67c23a;
@@ -1233,12 +1219,56 @@ onMounted(() => {
 
               .course-meta {
                 display: block;
-                font-size: 12px;
+                font-size: 11px;
                 color: #909399;
                 margin-top: 2px;
               }
             }
           }
+        }
+      }
+
+      // 右侧已选课程 2/3
+      .selected-courses-panel {
+        flex: 1;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+
+        .panel-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 12px 16px;
+          background: #fafafa;
+          border-radius: 8px 8px 0 0;
+          font-weight: 500;
+          border-bottom: 1px solid #ebeef5;
+        }
+
+        .selected-content {
+          flex: 1;
+          overflow-y: auto;
+          padding: 12px;
+          border: 2px dashed transparent;
+          transition: all 0.3s ease;
+
+          &.is-dragging-over {
+            background: #ecf5ff;
+            border-color: #667eea;
+
+            &::before {
+              content: '松开鼠标添加课程';
+              display: block;
+              text-align: center;
+              padding: 12px;
+              color: #667eea;
+              font-weight: 500;
+              animation: pulse 1s infinite;
+            }
+          }
 
           .stage-section {
             margin-bottom: 16px;
@@ -1260,7 +1290,7 @@ onMounted(() => {
               border-top: none;
               border-radius: 0 0 6px 6px;
               padding: 8px;
-              min-height: 60px;
+              min-height: 50px;
 
               .node-item {
                 display: flex;
@@ -1313,7 +1343,7 @@ onMounted(() => {
 
               .stage-empty {
                 text-align: center;
-                padding: 20px;
+                padding: 16px;
                 color: #909399;
                 font-size: 13px;
               }
@@ -1322,24 +1352,39 @@ onMounted(() => {
         }
       }
     }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.6; }
+    }
   }
 }
 
 // 响应式
 @media (max-width: 1200px) {
   .growth-path-management-container {
-    .path-editor {
+    .path-editor-new {
-      flex-direction: column;
+      .editor-top {
-
-      .editor-sidebar {
-        width: 100%;
-        flex-direction: row;
         flex-wrap: wrap;
-        overflow: visible;
 
-        .sidebar-section {
+        .basic-info {
+          width: 100%;
+          flex: none;
+        }
+
+        .stages-section,
+        .stats-section {
           flex: 1;
-          min-width: 280px;
+          min-width: 200px;
+        }
+      }
+
+      .editor-bottom {
+        flex-direction: column;
+
+        .course-library-panel {
+          width: 100%;
+          max-height: 300px;
         }
       }
     }