MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-150

bug-tree-header-misalignment Tree view: column values not aligned with their headers

Done
Description

Type: bug · Parent: Epic 2 · Discovered in: Story 2.5 (issue list — Tree view) · Status: fixed (PR #124, merged)

On the project issue list at /issues, the Tree view renders misaligned: the column values in each row do not line up with the column headers above them — the header row and the data cells sit on different horizontal grids, so the layout reads as "off". First observed in the seeded moooon / prodect project after the plan was migrated into the seed (with a full backlog to render, the misalignment is obvious).

Repro: sign in as info@moooon.net, open the moooon / prodect project → /issues, switch to Tree view, and observe that the column headers do not sit above their values.

Root cause (confirmed by browser repro, not code-reading). The lazy + sortable IssueTreeTable (2.5.14) remaps the shared buildIssueColumns to wrap each header in a sort button but DROPPED each column’s fixed width. TreeTable then falls back to max-content for those tracks; because every row is its OWN CSS grid, max-content sizes each row to its own content, so the header row and the data rows land on different column grids → drift (measured up to ~73px). The static/filtered tree + the List never drifted because they forward width. (The original "virtualized body computes widths independently" guess was directionally right about "independent widths" but wrong on mechanism — there is no virtualization; it was the dropped width.)

Fix. Forward width: col.width in IssueTreeTable’s column remap, so the header + every data row share one fixed-width grid. Guarded by a regression test asserting the header and data rows carry the same fixed-px grid template (not max-content), plus a browser pixel-alignment measurement during the fix.