fix: Step5 BatchGenerationGrid 单卡居中 + maxWidth 240px #1760

Merged
auto-approve-bot merged 1 commits from fix/1759-step5-single-card-center into develop 2026-09-07 18:51:29 +08:00
Owner

问题

确认生成页面只有 1 个视频时,卡片太大且偏右,没有水平居中。

修复

  • xx-batch-gen-grid CSS 加 justify-items: center,grid item 级别强制居中
  • BatchGenerationGrid.tsx grid 容器加 inline style 保底(display:grid / justifyContent:center / justifyItems:center / width:100%)
  • 每张卡片 maxWidth: 240px,防止单卡撑满整个宽度
  • 响应式 @media 960px 同步加 justify-items: center

验收

  • 1 个视频卡片水平居中,宽度 ≤ 240px
  • 多个卡片网格居中排列

改动文件

  • apps/web/src/pages/generate/generate.css
  • apps/web/src/pages/generate/components/BatchGenerationGrid.tsx
## 问题 确认生成页面只有 1 个视频时,卡片太大且偏右,没有水平居中。 ## 修复 - `xx-batch-gen-grid` CSS 加 `justify-items: center`,grid item 级别强制居中 - `BatchGenerationGrid.tsx` grid 容器加 inline style 保底(display:grid / justifyContent:center / justifyItems:center / width:100%) - 每张卡片 `maxWidth: 240px`,防止单卡撑满整个宽度 - 响应式 @media 960px 同步加 `justify-items: center` ## 验收 - 1 个视频卡片水平居中,宽度 ≤ 240px - 多个卡片网格居中排列 ## 改动文件 - `apps/web/src/pages/generate/generate.css` - `apps/web/src/pages/generate/components/BatchGenerationGrid.tsx`
xiaoxia added 1 commit 2026-09-07 18:47:03 +08:00
fix: Step5 BatchGenerationGrid 单卡居中 + maxWidth 240px (#1759)
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 1s
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2s
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m42s
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m48s
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m57s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m5s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m2s
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 2m9s
CI/CD Pipeline / Validate - Style (pull_request) Successful in 2m13s
CI/CD Pipeline / Validate - Security (pull_request) Successful in 3m47s
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
CI/CD Pipeline / CI Gate (pull_request) Successful in 4s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 2m16s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 8s
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 27s
AI Code Review / AI Code Review (pull_request) Successful in 6m20s
0e5cc38421
- xx-batch-gen-grid 加 justify-items:center 确保 grid item 居中
- BatchGenerationGrid grid 容器加 inline style 保底居中
  (display:grid, justifyContent:center, justifyItems:center, width:100%)
- 每张卡片 maxWidth:240px 防止单卡撑满
- 响应式 @media 960px 同步加 justify-items:center

验收:1个视频卡片水平居中,宽度≤240px;多个卡片网格居中排列

🚀 预览环境已部署

项目 详情
PR号 #1760
预览链接 https://pr-1760.preview.xiaoxiajianji.com
API环境 staging

💡 预览环境使用 staging API 数据,请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后,预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1760 | | 预览链接 | [https://pr-1760.preview.xiaoxiajianji.com](https://pr-1760.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据,请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后,预览环境会自动清理。
auto-approve-bot approved these changes 2026-09-07 18:49:04 +08:00
auto-approve-bot left a comment
Collaborator

CI全绿,自动审批通过。

CI全绿,自动审批通过。
auto-approve-bot approved these changes 2026-09-07 18:49:10 +08:00
auto-approve-bot left a comment
Collaborator

CI全绿,自动审批通过。

CI全绿,自动审批通过。
auto-approve-bot merged commit d73c0a77d8 into develop 2026-09-07 18:51:29 +08:00
auto-approve-bot deleted branch fix/1759-step5-single-card-center 2026-09-07 18:51:30 +08:00

🗑️ 预览环境已清理

PR #1760 已关闭或合并,对应的预览环境已被清理。

如有需要,可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1760 已关闭或合并,对应的预览环境已被清理。 > 如有需要,可以重新打开 PR 来重新生成预览环境。
Sign in to join this conversation.