fix(projects): pin the worktree actions right and put the count on the heading

Two layout defects the screenshots caught that the DOM tests could not.

1. `.proj-wt-row` was declared twice — my two-line-card rule earlier in the
   file, the original flex rule later. Same specificity, so the later copy won
   and the Open button sat against the text instead of at the card's right
   edge. Folded the grid into the ORIGINAL rule and left a note where the
   duplicate was. One rule per selector; a second declaration of a layout
   property is a silent override waiting to happen.

2. The unpushed count rendered as its own line under "Recent commits". The
   design has it ON the heading, because it qualifies that heading rather than
   making a separate statement. renderGitLog now takes the heading element and
   writes the badge there, clearing any previous badge first so a re-render
   cannot stack duplicates.

Both were invisible to the existing assertions: they checked that the elements
exist and carry the right text, which was true in each case. Added a test for
the no-duplicate-badge path; the right-edge alignment is a pure CSS outcome and
is verified by screenshot, not by the suite.
This commit is contained in:
Yaojia Wang
2026-07-29 18:29:53 +02:00
parent c8d12780b9
commit 042c4cd4a9
4 changed files with 62 additions and 19 deletions

View File

@@ -217,14 +217,44 @@ describe('renderGitLog — unpushed count beside the heading (w6 design)', () =>
return { hash, at: Date.now(), subject, ...(unpushed === true ? { unpushed: true } : {}) }
}
it('states the count so it is readable before scanning the rows', () => {
it('puts the count ON the heading when one is supplied, not on its own line', () => {
const host = document.createElement('div')
const label = document.createElement('div')
label.textContent = 'Recent commits'
renderGitLog(
host,
{
commits: [entry('a1', 'x', true), entry('b2', 'y', true), entry('c3', 'z')],
truncated: false,
upstream: 'origin/develop',
},
label,
)
expect(label.querySelector('.proj-commitlog-count')!.textContent).toContain('2')
expect(host.querySelector('.proj-commitlog-count')).toBeNull()
})
it('does not stack duplicate counts across re-renders', () => {
const host = document.createElement('div')
const label = document.createElement('div')
const log = {
commits: [entry('a1', 'x', true)],
truncated: false,
upstream: 'origin/develop',
}
renderGitLog(host, log, label)
renderGitLog(host, log, label)
expect(label.querySelectorAll('.proj-commitlog-count').length).toBe(1)
})
it('falls back to the list container when no heading is given', () => {
const host = document.createElement('div')
renderGitLog(host, {
commits: [entry('a1', 'x', true), entry('b2', 'y', true), entry('c3', 'z')],
commits: [entry('a1', 'x', true)],
truncated: false,
upstream: 'origin/develop',
})
expect(host.querySelector('.proj-commitlog-count')!.textContent).toContain('2')
expect(host.querySelector('.proj-commitlog-count')).not.toBeNull()
})
it('omits the count when nothing is unpushed', () => {