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

bug-inline-edit-clipped-when-table-short Issue list: inline cell-edit pickers are clipped / unusable when the table is short

Done
Description

Type: bug · Parent: Epic 2 · Surfaces: issue list (Story 2.5 — List + Tree views, inline cell editing from Subtask 2.5.5) · Status: in progress · Reported by: Yue.

On the project issue list at /issues, clicking a cell to edit it inline (the status / assignee / priority pickers) opens a dropdown that is clipped and unusable when the table is shorter than the open picker — i.e. when the list has only a few rows. The dropdown opens downward past the bottom of the (short) table card and is cut off, so only the first option or two are reachable. On a near-empty list the inline editor is effectively unusable.

Repro: sign in as zhuyue@prodect.co / !QAZ1qaz, open a project whose /issues list has just a few rows (or filter down to a few), switch to List or Tree view, and click a Status / Assignee / Priority cell to edit it inline. The picker menu is clipped at the table's bottom edge instead of overlaying the page.

Root cause. components/ui/Combobox.tsx (the picker primitive) rendered its menu as position: absolute inside the trigger’s relative container — not portaled. The List/Tree table cards wrap their rows in overflow-hidden to clip the rounded card corners (IssueListTable.tsx, TreeTable.tsx). A short list = a short card, so the downward-opening menu extends past the card’s bottom border and overflow-hidden clips it. (The listbox’s own max-h-64 is NOT the cause — the clip is the table card’s overflow, confirmed by a browser repro.) DatePicker never had this bug because it opens through the Radix Popover portal.

Fix. Render the Combobox menu via createPortal to document.body with viewport-anchored position: fixed (anchored to the trigger rect, re-computed on open / ancestor-scroll / resize), flipping above the trigger when there is more room there and capping the listbox height to the available viewport space. This escapes every overflow ancestor — fixing the latent clip for all Combobox consumers, not just the issue list (the same approach DatePicker already takes). WAI-ARIA combobox/listbox semantics, keyboard nav, focus return, and onClose are unchanged; click-outside also treats the portaled menu as "inside" so an option click still commits.

Acceptance criteria

  • On a short /issues list (few rows), opening a Status / Assignee / Priority inline picker shows the full option menu — no clipping at the table card edge.
  • The picker menu overlays the page (portaled), opening downward by default and flipping above the trigger when there is insufficient room below; it never runs off-screen (height capped, scrolls internally if needed).
  • Selecting an option still commits the edit; Escape / click-outside still close and return focus to the trigger; keyboard navigation and ARIA are unchanged.
  • The fix is in the shared Combobox primitive, so every consumer benefits; no regression in the other Combobox usages (TypePicker / ParentPicker / filter bar / board column menu / settings).
  • A regression test asserts the open menu is portaled out of an overflow-hidden ancestor (position: fixed) and that a click inside the portaled menu still commits.

Context refs

  • components/ui/Combobox.tsx — the picker primitive (the fix site)
  • app/(authed)/issues/_components/IssueInlineEdit.tsx — the inline-edit cell editors that mount the pickers autoOpen
  • app/(authed)/issues/_components/IssueListTable.tsx, components/ui/TreeTable.tsx — the overflow-hidden table cards that clip the menu
  • components/ui/DatePicker.tsx / components/ui/Popover.tsx — the portal pattern this fix mirrors
  • tests/components/combobox-portal.test.tsx — the regression test

Resolution (PR #444 feature, #445 plan, both merged). TWO root causes on the inline editors, fixed together: (1) Combobox menu (status / assignee / priority) was position:absolute inside the trigger, so the List/Tree table cards’ overflow:hidden clipped it on a short table — now portaled to document.body with viewport-anchored position:fixed + flip, EXCEPT when inside a focus-trapping [role="dialog"] (the create-issue modal), where it renders inline (a portaled menu fought the dialog’s focus trap — caught by E2E and fixed). (2) Due field (DatePicker) — its calendar was already a portaled Popover (never clipped), but its anchor input defaulted to --height-input (44px), taller than the Tree view’s 40px rows (TreeTable ROW_PX), so on the last row it overflowed and was clipped; now rendered at --height-control (36px), matching the sibling inline editors and fitting both row heights. Regression tests: tests/components/combobox-portal.test.tsx (portaled-out + inline-in-dialog) and the inline Due assertion in tests/components/issue-inline-edit.test.tsx. Verified in a real browser; full CI (incl. Playwright E2E) green.

Note: this card consolidates a duplicate filing of the same bug that a parallel session had added under Epic 4 (status: planned) — the Epic-4 duplicate is removed in this same PR. List-surface bugs are parented to Epic 2 here, matching the bug-tree-header-misalignment / bug-ready-banner-no-deps precedent. The Epic-4 filing’s unique repro (single-row TEST-3, Priority picker clipped below the table) is the same defect captured above.