🎨 Fix Dashboard Layout Overflow Issues

[massif-01]

🎯 问题描述

解决了RM-01监控面板中内容超出卡片边界的问题，包括温度监控和磁盘监控的进度条溢出问题。

✅ 修复内容

核心布局问题

• 卡片容器约束: 为所有卡片添加 width: 100%、box-sizing: border-box 和 overflow: hidden
• 进度条约束: 修复进度条超出容器边界的问题，添加 max-width: 100% 限制
• 网格布局优化: 为温度网格和磁盘网格添加完整的容器约束

响应式布局改进

• 温度监控: 6列网格布局正确约束在父容器内
• 磁盘监控: 6列固定宽度布局，小屏幕支持水平滚动
• 移动端适配: 确保所有内容在移动设备上正确显示

技术实现

• 使用 box-sizing: border-box 确保 padding 计算正确
• 添加 overflow: hidden 防止内容溢出
• 磁盘网格使用 overflow-x: auto 提供水平滚动
• 所有组件添加 width: 100% 和容器约束

🔧 技术细节

CSS 修改

.card {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.temp-item, .disk-item {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.progress-bar, .progress-fill {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
}

网格布局优化

.lpmu-temperature-grid, .disk-grid {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.disk-grid {
    overflow-x: auto;
    overflow-y: hidden;
}

📱 响应式支持

• 桌面端: 完整6列布局，内容完美约束
• 平板端: 4列布局适配，保持视觉一致性
• 移动端: 2-3列布局，支持水平滚动浏览

✨ 效果展示

• ✅ 所有内容正确包含在卡片边界内
• ✅ 进度条不再超出容器范围
• ✅ 响应式布局在所有屏幕尺寸下正常工作
• ✅ 移动端体验优化，支持滚动浏览

🧪 测试验证

• 桌面端布局检查
• 平板端适配验证
• 移动端响应式测试
• 进度条边界检查
• 网格容器约束验证

📋 相关Issue

解决了用户反馈的"内容超出底色边界"问题，确保所有监控组件在其容器内正确显示。

---

Ready for review ✅