> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comet.rpamis.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 2026 08 30 supervisor video layout design

# Supervisor 视频展示布局设计

## 目标

放大中文首页 Supervisor Change 区域的两段演示视频，使 Codex 与 Claude Code 保持同等视觉权重，并让视频成为该区域的主要视觉焦点。

## 已批准方向

采用宽屏双主视觉布局：

* Supervisor 区域从首页共享的 `78rem` 内容宽度中单独扩展，最大宽度设为 `94rem`。
* 区域标题和说明继续保持原有阅读宽度并居中对齐，避免长文本随视频一起过度拉宽。
* 两段视频继续等宽并排，缩小栏间距，使其在常见桌面视口下比当前布局放大约 20%–28%。
* 两个平台仍使用各自的标签、标题和说明，不设置主次关系。
* 保留现有白色背景、编辑式排版、圆角、细边框和克制阴影，不增加卡片底色、装饰渐变或悬浮动画。

## 响应式行为

* 宽屏桌面：两段视频等宽并排，Supervisor 视频网格使用扩展后的宽度。
* 中等桌面和平板横屏：继续并排，但保留最小间距与安全页边距。
* 窄屏和平板竖屏：在视频无法保持可读尺寸前切换为单列，不允许横向溢出。
* 手机：视频占满可用内容宽度，保持现有圆角与原始画面比例。

## 实现边界

* 主要通过 `custom.css` 调整 Supervisor 区域、标题容器、视频网格和响应式断点。
* 不修改视频文件、视频组件接口、文案、其他首页区域或英文首页内容。
* 保留此前将圆角裁剪放在视频层的抗锯齿处理。

## 验收标准

* 在 1440px 宽视口中，每段视频可视宽度不低于 650px，并保持等宽。
* 标题和说明不因宽屏视频布局产生过长行宽。
* 两段视频均能加载，圆角无明显锯齿或裁剪接缝。
* 390px 与 320px 视口使用单列，页面无横向溢出。
* `mint validate --disable-openapi` 与 `git diff --check` 通过。