From a877d341f754d4e24d8cb044410978f56cccf8ef Mon Sep 17 00:00:00 2001 From: bboysoul Date: Sun, 20 Sep 2026 06:58:03 +0800 Subject: [PATCH] fix: align numeric habit progress --- frontend/e2e/visual-polish.spec.ts | 10 ++++++++++ frontend/src/style.css | 3 ++- frontend/src/visual-polish.test.ts | 3 ++- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/frontend/e2e/visual-polish.spec.ts b/frontend/e2e/visual-polish.spec.ts index d896297..9e7434e 100644 --- a/frontend/e2e/visual-polish.spec.ts +++ b/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('.habit-name')!.getBoundingClientRect() + const progressBox = row.querySelector('.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') diff --git a/frontend/src/style.css b/frontend/src/style.css index cd28ec3..168d9bc 100644 --- a/frontend/src/style.css +++ b/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} diff --git a/frontend/src/visual-polish.test.ts b/frontend/src/visual-polish.test.ts index 8348630..6a95e31 100644 --- a/frontend/src/visual-polish.test.ts +++ b/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;')