From 87c8831fdbbccde0be9dcf45b2199970c7a9a06b Mon Sep 17 00:00:00 2001
From: bboysoul <bboysoulcn@gmail.com>
Date: Fri, 18 Sep 2026 11:18:05 +0800
Subject: [PATCH] fix: align habit section heading width

---
 frontend/e2e/visual-polish.spec.ts | 18 ++++++++++++++++++
 frontend/src/style.css             |  1 +
 frontend/src/visual-polish.test.ts |  1 +
 3 files changed, 20 insertions(+)

diff --git a/frontend/e2e/visual-polish.spec.ts b/frontend/e2e/visual-polish.spec.ts
index 0a80576..03746d5 100644
--- a/frontend/e2e/visual-polish.spec.ts
+++ b/frontend/e2e/visual-polish.spec.ts
@@ -175,6 +175,13 @@ test('approved polish keeps search state, dense rows, title-only memos, and uniq
   await expect(searchInput).toHaveValue(`搜索保留-${suffix}`)
 
   await bottomTab(page, '习惯').click()
+  const mobileHabitGeometry = await page.evaluate(() => {
+    const heading = document.querySelector<HTMLElement>('.habit-section-heading')!.getBoundingClientRect()
+    const list = document.querySelector<HTMLElement>('.habit-list')!.getBoundingClientRect()
+    return { headingWidth: heading.width, listWidth: list.width, headingLeft: heading.left, listLeft: list.left }
+  })
+  expect(mobileHabitGeometry.headingWidth).toBeCloseTo(mobileHabitGeometry.listWidth, 0)
+  expect(mobileHabitGeometry.headingLeft).toBeCloseTo(mobileHabitGeometry.listLeft, 0)
   const habitName = `长标题习惯-${suffix}-检查进度与按钮不被裁切`
   await page.getByRole('button', { name: '添加习惯' }).click()
   await page.getByLabel('新习惯名称').fill(habitName)
@@ -190,6 +197,17 @@ test('approved polish keeps search state, dense rows, title-only memos, and uniq
   await expect(habitDetail.getByRole('heading', { name: habitName, exact: true })).toHaveCount(1)
   await expect(habitDetail).not.toContainText('习惯详情')
   await habitDetail.getByRole('button', { name: '关闭习惯详情' }).click()
+  await page.setViewportSize({ width: 1440, height: 900 })
+  const desktopHabitGeometry = await page.evaluate(() => {
+    const view = document.querySelector<HTMLElement>('main.list-main > .mvp-view')!.getBoundingClientRect()
+    const heading = document.querySelector<HTMLElement>('.habit-section-heading')!.getBoundingClientRect()
+    const list = document.querySelector<HTMLElement>('.habit-list')!.getBoundingClientRect()
+    return { viewWidth: view.width, headingWidth: heading.width, listWidth: list.width, headingLeft: heading.left, listLeft: list.left }
+  })
+  expect(desktopHabitGeometry.viewWidth).toBeGreaterThan(630)
+  expect(desktopHabitGeometry.headingWidth).toBeCloseTo(desktopHabitGeometry.listWidth, 0)
+  expect(desktopHabitGeometry.headingLeft).toBeCloseTo(desktopHabitGeometry.listLeft, 0)
+  await page.setViewportSize({ width: testInfo.project.name === 'mobile-390' ? 390 : 375, height: testInfo.project.name === 'mobile-390' ? 844 : 667 })
 
   await bottomTab(page, '倒数日').click()
   const focus = page.locator('.countdown-focus').filter({ hasText: countdownTitle })
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 5e32dc7..3ff4347 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -121,6 +121,7 @@ input,select,textarea,.search{background:var(--surface-raised);border-color:var(
 main.list-main{background:#fdfaf3}
 main.list-main>.list-page-context,main.list-main>.list-search-reveal,main.list-main>.list-section-heading,main.list-main>.task-list,main.list-main>.list-page-meta,main.list-main>.pager,main.list-main>.mvp-view{width:min(100%,630px);margin-left:auto;margin-right:auto}
 main.list-main>.mvp-view{gap:0}
+main.list-main>.mvp-view>.habit-section-heading{width:100%}
 main.list-main>.mvp-view>.habit-archive-section{border-top:1px solid #e8e0d5}
 .list-page-context{width:min(100%,630px);margin:0 auto 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 16px}
 .habit-page-context{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 16px}
diff --git a/frontend/src/visual-polish.test.ts b/frontend/src/visual-polish.test.ts
index 9654ebe..44dd1d4 100644
--- a/frontend/src/visual-polish.test.ts
+++ b/frontend/src/visual-polish.test.ts
@@ -117,6 +117,7 @@ describe('approved five-detail polish', () => {
     expect(css).toContain('.habit-page-context{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 16px}')
     expect(css).toContain('.habit-section-heading{margin-top:0}')
     expect(css).toContain('main.list-main>.mvp-view{gap:0}')
+    expect(css).toContain('main.list-main>.mvp-view>.habit-section-heading{width:100%}')
     expect(css).toContain('main.list-main>.mvp-view>.habit-archive-section{border-top:1px solid #e8e0d5}')
   })