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-1307

10 Work-item list/tree: narrow-width Title column collapse overlaps the Type chip (no min-width / no h-scroll); trim Est./Status

Done
Description

Type: bug · Parent: none — root (related Epic 2 "Issue tracking core" / MOTIR-68 is done, so logged parentless per the bug-parent rule; root id 10 = next free integer after epics 1–8 and root bugs 9/11). · Discovered in: manual dogfooding of the work-item list + tree view (/items, Story 2.5 surface) on a narrow / "less wide" viewport.

Symptom

On a narrower-than-desktop viewport the row layout breaks: the Title column collapses to ~0px and the title cell's content (the kind type-icon + the MOTIR-N identifier) overflows rightward and overlaps the TYPE chip in the adjacent column. Separately, the Est. (90px) and Status (130px) columns are wider than their content needs and can be smaller.

Root cause (verified — reproduced headless, not a code-reading theory)

Both table views build the same CSS grid:

  • components/ui/TreeTable.tsx:440-443gridTemplate = ['minmax(0,1fr)', ...fixed widths]
  • app/(authed)/items/_components/IssueListTable.tsx:67-70 — identical template.

The Title track is minmax(0,1fr) with a 0 minimum, and the 9 trailing columns are FIXED (issueColumns.tsx: type 116 · priority 120 · assignee 150 · reporter 150 · due 120 · est 90 · points 80 · status 130 · actions 76 = 1032px + 9×16px gaps + 44px padding ≈ 1220px). The table's outer wrapper is overflow-hidden (TreeTable.tsx:456-459, IssueListTable.tsx:93-97) — it clips, it does not scroll horizontally. So once the container is narrower than the fixed-column sum, the grid gives the Title track 0px and the fixed columns overflow (clipped on the right). Inside the now-0px Title cell, the type-icon and identifier are both shrink-0 (issueColumns.tsx:68-74), so they cannot shrink and spill into the Type column, colliding with the WorkItemTypeChip.

Confirmation: faithful headless render (real grid template + token widths). At desktop the chips fit their 116px column (translate=96px, verification=109px, code=71px) — so this is NOT chip overflow. At container widths 760/640/520px the Title track measured 0px and the identifier's right edge sat ~80px past the Type chip's left edge (direct overlap). Screenshot reproduced the collision.

Fix direction (separate type: code subtask under Story 2.5)

Write a failing render/E2E repro first (narrow viewport → assert no Title/Type overlap), then:

  1. Floor the Title track: minmax(0,1fr)minmax(~12rem,1fr) in BOTH TreeTable.tsx and IssueListTable.tsx grid templates so Title never collapses below a readable width.
  2. Let the table scroll instead of clip: change the outer wrapper from overflow-hidden to overflow-x-auto (keep rounded-(--radius-card) + border; verify the sticky header and the TreeTable row-windowing still behave) so the fixed columns push a horizontal scrollbar rather than collapsing the Title and colliding columns.
  3. Trim the fixed footprint (also the reporter's "est./status can be smaller" ask, and it lowers the collapse threshold): Est. 90→~68, Status 130→~104 (and reconsider hiding low-priority columns at narrow widths). Status pills ≈ 90px, "2h 30m" ≈ 50px right-aligned — current widths are generous.

Resolution

Open — to be filled by the closing-out subtask.