修复我的游戏页移动端列表横向溢出并与画廊统一布局口径

- .my-game-list 改 grid-template-columns: minmax(0, 1fr)，单列 auto 轨道不再被内容最小宽度撑开
- .my-game-card 加 min-width: 0 与 overflow: hidden，卡片可被压缩并裁掉溢出，与 .game-card 同口径
- .my-game-card__title 加 min-width: 0 与 overflow-wrap: anywhere，长标题不撑宽标题行
- pitfalls 记录该机制（auto 轨道最小尺寸 = 内容最小宽度 + nowrap 简介 + 缺 min-width:0）与 Chromium 夹具判据
- 里程碑文档补上该修复与 390/360 视口的测量结论

docs/project-memory/plans/【里程碑】游戏分发目录详情与在线游玩-2026-09-18.md

@@ -325,5 +325,6 @@
 
 - **广场首屏「立即试玩」不再替用户选中作品**：`src/components/game-distribution/GameGalleryPage.tsx` 原来是 `onClick={() => featuredGame && openDetail(featuredGame.id)}`，点一下等于直接打开第一款游戏的详情。现在按钮只把列表滚进视野（按平台页签面板计算相对偏移，`scrollTo({ behavior: 'smooth' })`，无 `scrollTo` 时退化成直接赋值），不再触发 `onOpenDetail`；`featuredGame` 派生随之退役。回归用例 `GameDistributionPages.test.tsx`「首屏「立即试玩」滚动到列表，而不是打开第一款游戏详情」断言 `onOpenDetail` 未被调用且滚动落在页签面板上。
 - **游玩页不再可滚**：移动端此前是整页可滚的半屏播放器。原因是面板仍是 `overflow-auto`，而播放器用 `min-height: calc(100dvh - 8rem)` 撑高页面。现在 `PlatformEntryActiveFlowShell.tsx` 在 `game-play` 舞台给页签容器加 `platform-tab-panel--game-play`（不滚动、去掉多余内边距），`.game-play-page` 改为 `height: 100%; min-height: 0`，播放器 `flex: 1; min-height: 0` 撑满剩余高度；矮视口（`max-height: 26rem`，横屏手机）另给启动面板一套压扁布局，兜底只在极端高度下发生在启动卡片内部，页面与面板本身始终不滚动。启动面板纵向对齐用 `safe center`（`center` 作旧浏览器回退）并把 `overflow-y: auto` 放在基础规则：居中溢出会把顶部标题裁到 `scrollTop = 0` 也够不到的位置，只加内部滚动并不能修掉。回归用例 `PlatformEntryActiveFlowShell.test.tsx`「游玩舞台的页签容器不滚动」「游戏广场等舞台仍保持页签容器滚动」双向锁定。
+- **「我的游戏」列表与画廊同口径**：`.my-game-list` 的单列 `auto` 轨道会被 `white-space: nowrap` 的简介顶到内容最小宽度（实测 592px），加上 `.my-game-card` 缺 `min-width: 0`，390/360 宽的手机上卡片超出视口、面板横向可滚且看着不居中。现在改成画廊那套口径（`grid-template-columns: minmax(0, 1fr)`、`.my-game-card { min-width: 0; overflow: hidden }`、标题 `min-width: 0; overflow-wrap: anywhere`）；真实 Chromium 夹具在 390/360 下量到轨道=卡片=可视宽、面板横向溢出 0（改前 592px 卡片、横向可滚 230/260px）。
 - 真机口径的守卫补在现役 E2E 里：`scripts/check-game-distribution-web-e2e.mjs` 的移动端段新增「移动端游玩页不可滚动（面板与整页都不溢出）」，断言 `.platform-tab-panel` 的 `overflow-y` 为 `hidden` 且面板与整页都不溢出（该脚本需真实本地栈，未在本轮执行）。
-- 验证：`npx vitest run src/components/game-distribution/GameDistributionPages.test.tsx`（21 passed）、`npx vitest run src/components/platform-entry/PlatformEntryActiveFlowShell.test.tsx`（20 passed）、`npm run typecheck`、`npx eslint`（四个改动文件）、`npm run check:encoding`、`git diff --check` 全部通过；启动面板的溢出可达性用真实 Chromium 静态夹具量过（见 pitfalls 同日条目）。视觉与真机横竖屏走查仍需人工/截图评审（沿用阶段 C 第 8 条未取证口径）。
+- 验证：`npx vitest run src/components/game-distribution/GameDistributionPages.test.tsx`（21 passed）、`npx vitest run src/components/platform-entry/PlatformEntryActiveFlowShell.test.tsx`（20 passed）、`npm run typecheck`、`npx eslint`（四个改动文件）、`npm run check:encoding`、`git diff --check` 全部通过；启动面板的溢出可达性、「我的游戏」移动端横向溢出都用真实 Chromium 静态夹具量过（见 pitfalls 同日条目）。视觉与真机横竖屏走查仍需人工/截图评审（沿用阶段 C 第 8 条未取证口径）。

docs/project-memory/shared-memory/pitfalls.md

@@ -6108,3 +6108,12 @@ Cocos Creator 根目录由 `package.json.creator.version` 与普通 `assets/`
 - **处理**：纵向对齐改用 `safe center`（先写 `align-content: center` / `align-items: center` 作旧浏览器回退，再写 `safe center`），溢出时退回 start；并把 `overflow-y: auto` 提到基础规则，让启动卡片成为唯一的内部滚动兜底，页面与 `.platform-tab-panel` 本身仍保持 `overflow: hidden`。
 - **判据**：真实 Chromium 夹具（`tmp/launch-overflow-check`，把 `gameDistribution.css` 直接链进静态页面）在 `844x200` 下量：改回 `center` 时 `titleTopAtScrollZero = -20`（不可达），改成 `safe center` 后为 `+12`（可达），滚到底按钮同样可达；`390x844` 与 `1280x800` 正常视口不溢出，位置与改前一致。
 - **关联**：`src/components/game-distribution/gameDistribution.css` 的 `.game-player-launch` 与两处媒体查询、`src/components/game-distribution/GamePlayPage.tsx`。
+
+## 2026-09-30 单列 grid 的 auto 轨道被 nowrap 文本撑开，移动端面板只剩横向滚动
+
+- **现象**：「我的游戏」页在 390/360 宽的手机上可以横向滑动，卡片比可视区宽（实测卡片 592px、可视 390px、面板横向可滚 230px），看起来也不居中；同一页面的画廊卡片却正常。
+- **根因**：三件事叠在一起。① `.my-game-list` 是单列 grid，隐式列宽是 `auto`，而 auto 轨道的最小尺寸是**内容最小宽度**，不会被容器宽度压回去；② `.my-game-card`（flex 行）没有 `min-width: 0`，其最小内容宽度 = 封面 `8.5rem` + gap + 正文最小内容；③ 正文里的 `.my-game-card__summary` 是 `white-space: nowrap`，一条长且不可断行的简介就把最小内容宽度顶到 592px。画廊之所以正常，是因为 `.game-grid` 用 `repeat(n, minmax(0, 1fr))`，`.game-card` 又有 `min-width: 0; overflow: hidden`。
+- **处理**：让「我的游戏」与画廊同口径——`.my-game-list` 改 `grid-template-columns: minmax(0, 1fr)`，`.my-game-card` 加 `min-width: 0; overflow: hidden`，标题加 `min-width: 0; overflow-wrap: anywhere`。改后 390/360 实测轨道 = 列表 = 卡片 = 可视宽，面板横向溢出 0。
+- **顺带观察（本次未改）**：移动端面板左右留白本就不对称——左 12/24px（Tailwind `px-3`/`px-6`），右 0（`.platform-desktop-shell--workbench .platform-tab-panel` 与 `@media (max-width: 639px)` 都把 `padding-right` 压成 0），所以列表左右留白是 28/16。画廊完全相同，属既有全局口径，不在本次范围内。
+- **判据**：真实 Chromium 静态夹具 `tmp/mygames-check/`（`tmp/` 已 gitignore，由 dev 栈 `http://127.0.0.1:10000/tmp/mygames-check/` 托管）同时渲染「我的游戏」和画廊两组卡片，量面板横向溢出与网格轨道宽度：改前 390/360 下轨道 591.891px、卡片 592px、面板横向可滚 230/260px；改后轨道 = 列表 = 卡片 = 可视宽、溢出 0。布局问题 jsdom 量不出来，这类回归目前靠这个夹具手工复核。
+- **关联**：`src/components/game-distribution/gameDistribution.css`、`src/components/game-distribution/MyGamesPage.tsx`、`.game-grid`/`.game-card`。

src/components/game-distribution/gameDistribution.css

@@ -761,10 +761,16 @@
 
 .my-game-list {
   display: grid;
+  /* 与画廊 .game-grid 同口径：轨道可以被压到内容最小宽度以下，否则长标题/长简介
+     会把单列轨道撑到视口之外，移动端面板出现横向滚动。 */
+  grid-template-columns: minmax(0, 1fr);
   gap: 0.9rem;
 }
 .my-game-card {
   display: flex;
+  /* 与 .game-card 同口径：卡片自身可被压缩并裁掉溢出，保证卡片永不宽于所在轨道。 */
+  min-width: 0;
+  overflow: hidden;
   gap: 1rem;
   align-items: stretch;
   border: 1px solid var(--platform-surface-border);
@@ -793,6 +799,8 @@
   gap: 0.6rem;
 }
 .my-game-card__title {
+  min-width: 0;
+  overflow-wrap: anywhere;
   border: 0;
   padding: 0;
   background: transparent;