fix(frontend): left-align the sidebar nav items on the mobile drawer

The nav buttons defaulted to centered for the desktop icon rail and were
flipped back by `[data-state="expanded"]`. That attribute tracks the
desktop open state, while the mobile drawer runs off `openMobile`, so on
a phone the labels rendered but the override never matched: 新建对话 and
我的报告 floated mid-drawer while every other row sat flush left.

Left alignment is the base layer now, correct for both the drawer and the
expanded desktop sidebar, and centering moved into the >=768px collapsed
block beside the rest of the rail rules. That was the only top-level
`[data-state=...]` selector left in the stylesheet.

personal-report-entry asserted `justify-content: center` on the report
button, which is the defect itself; the value is updated and the rest of
that assertion stands.

BUG-438.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0155nFCgCHtoA7jhSDGmZmMu

docs/BUG_HISTORY.md

@@ -6702,3 +6702,20 @@
 - 相关记录：BUG-410、BUG-411、BUG-432
 - 复发自：无
 - 修复版本：待发布
+## BUG-438 | 移动端侧边抽屉里「新建对话」「我的报告」居中悬空，与其余左对齐项不齐
+
+- 状态：resolved
+- 首次发现：2026-08-29
+- 最近更新：2026-08-29
+- 影响面：`/` 移动端（<768px）侧边抽屉顶部两个导航项
+- 用户现象：品牌行、星盘列表、收藏对话、历史对话全部左对齐，只有「新建对话」和「我的报告」的图标+文字组居中飘在抽屉正中，视觉上完全不成列。
+- 触发条件：在移动端打开侧边抽屉即出现。
+- 根因：`.new-chat` / `.report-nav-button` 的基础样式是 `justify-content: center`（为桌面折叠图标栏准备），左对齐靠顶层的 `[data-state="expanded"] … { justify-content: flex-start }` 翻回来。但 `data-state` 取的是 `open ? "expanded" : "collapsed"`，`open` 是**桌面**折叠状态；移动抽屉由独立的 `openMobile` 控制。组件侧 `isCollapsedDesktop = state === "collapsed" && !isMobile`，移动端恒为 false，所以文字标签照常渲染；CSS 侧却因 `data-state="collapsed"` 匹配不上覆盖规则，按钮保持居中。JS 与 CSS 对"展开"的定义不一致。品牌行没被带歪，是因为 `[data-state="collapsed"] .brand-row` 那整套图标栏规则写在 `@media (min-width: 768px)` 里，移动端本就不生效。
+- 修复：把默认翻过来 —— 基础样式改为 `justify-content: flex-start`（移动抽屉与桌面展开态都正确），删掉依赖 `data-state` 的顶层覆盖，居中改为 `@media (min-width: 768px)` 内的 `[data-state="collapsed"]` 规则，与既有的 `.brand-row`、`[data-sidebar="menu-button"]`、`.profile-trigger` 等图标栏规则并列。全仓仅此一处顶层 `[data-state=…]` 选择器，其余均已按视口收口。
+- 验证：`frontend/tests/sidebar-contract.test.ts` 新增一条 —— 锁基础层左对齐、禁止再出现 `[data-state="expanded"]` 版覆盖、并要求居中规则位于 768px media 内。反向验证三次（基础样式改回 center / 覆盖加回来 / 居中规则移出 media），每次都变红。
+- 既有断言改动（唯一一处）：`frontend/tests/personal-report-entry.test.ts` 原先断言 `.report-nav-button` 必须 `justify-content: center`，那正是本条缺陷本身，改为 `flex-start` 并注明原因。该断言其余部分（`display: flex`、`align-items: center`）未动。
+- 防复发：`data-state` 只描述桌面折叠态，不得用它决定移动抽屉的布局；折叠图标栏的样式一律写进 `@media (min-width: 768px)`，不得作为基础层默认值再由覆盖翻回。
+- 相关记录：BUG-434、BUG-436
+- 复发自：无
+- 修复版本：待发布
+