fix: align numeric habit progress

frontend/e2e/visual-polish.spec.ts

@@ -185,6 +185,16 @@ test('approved polish keeps dense rows, title-only memos, and unique detail titl
   await expect(habitRow.locator('.habit-row-meta')).toHaveText('0 / 8')
   await expectHeightInRange(habitRow, 57, 59)
   await expectNotClipped(habitRow)
+  const habitVerticalLayout = await habitRow.evaluate((row) => {
+    const rowBox = row.getBoundingClientRect()
+    const titleBox = row.querySelector<HTMLElement>('.habit-name')!.getBoundingClientRect()
+    const progressBox = row.querySelector<HTMLElement>('.habit-progress-bar')!.getBoundingClientRect()
+    const groupCenter = (titleBox.top + progressBox.bottom) / 2
+    return { groupOffset: groupCenter - (rowBox.top + rowBox.height / 2), progressBottomGap: rowBox.bottom - progressBox.bottom }
+  })
+  expect(habitVerticalLayout.groupOffset).toBeGreaterThanOrEqual(-2)
+  expect(habitVerticalLayout.groupOffset).toBeLessThanOrEqual(2)
+  expect(habitVerticalLayout.progressBottomGap).toBeGreaterThanOrEqual(12)
   await habitRow.getByRole('button', { name: `完成${habitName}一次` }).click()
   await expect(habitRow.getByRole('progressbar', { name: `${habitName}进度：1 / 8` })).toHaveAttribute('value', '1')
   await expect(habitRow.locator('.habit-row-meta')).toHaveText('1 / 8')

frontend/src/style.css

@@ -101,7 +101,7 @@ input,select,textarea{background:var(--surface-raised);border-color:var(--border
 .plain-list>.task-row:not(.task-row--trash).selected::before,.plain-list>.habit-row.selected::before{background:var(--accent)}
 .plain-list .habit-check{margin-left:0}
 .task-row{grid-template-columns:44px minmax(0,1fr) auto}
-.habit-row{grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) 4px;row-gap:5px}
+.habit-row{grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:18px 4px;align-content:center;row-gap:5px}
 .task-row,.habit-row{display:grid}
 .task-row:has(>.drag-handle){grid-template-columns:44px 44px minmax(0,1fr) auto}
 .habit-row:has(>.drag-handle){grid-template-columns:44px 44px minmax(0,1fr) auto}
@@ -109,6 +109,7 @@ input,select,textarea{background:var(--surface-raised);border-color:var(--border
 .habit-row>.habit-check,.habit-row>.habit-drag-handle,.habit-row>.habit-row-meta{grid-row:1/3}
 .habit-row>.habit-main{grid-row:1;align-self:end}
 .habit-row>.habit-progress-bar{grid-column:2;grid-row:2;align-self:start;width:100%;height:4px}
+.habit-row:has(>.habit-progress-bar)>.habit-main,.habit-row:has(>.habit-progress-bar)>.habit-progress-bar{transform:translateY(3px)}
 .habit-row:has(>.habit-drag-handle)>.habit-progress-bar{grid-column:3}
 .habit-row:not(:has(>.habit-progress-bar))>.habit-main{grid-row:1/3;align-self:center}
 .habit-row>.habit-row-meta{grid-column:-2;align-self:center}

frontend/src/visual-polish.test.ts

@@ -135,7 +135,8 @@ describe('approved five-detail polish', () => {
     expect(css).toContain('.plain-list{display:grid;gap:0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}')
     expect(css).toContain('.plain-list-row,.plain-list>.task-row,.plain-list>.habit-row{height:58px;min-height:58px;max-height:58px;background:transparent;border:0;border-bottom:1px solid #e8e0d5;border-radius:0;box-shadow:none}')
     expect(css).toContain('.task-row{grid-template-columns:44px minmax(0,1fr) auto}')
-    expect(css).toContain('.habit-row{grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) 4px;row-gap:5px}')
+    expect(css).toContain('.habit-row{grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:18px 4px;align-content:center;row-gap:5px}')
+    expect(css).toContain('.habit-row:has(>.habit-progress-bar)>.habit-main,.habit-row:has(>.habit-progress-bar)>.habit-progress-bar{transform:translateY(3px)}')
     expect(css).toContain('.task-main strong,.habit-name{display:block;min-width:0;font-size:15px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}')
     expect(css).toContain('.task-tail,.habit-row-meta{min-width:0;max-width:132px;padding-left:12px;font-size:12px;font-weight:400;white-space:nowrap;text-align:right;overflow:hidden;text-overflow:ellipsis}')
     expect(css).toContain('.task-check{width:44px;')