fix(linear): make new-project dialog popovers wheel-scrollable (#16413)

The Team, Lead, Members and Labels popovers in the Linear new-project
dialog are portaled outside the dialog, so its scroll-lock cancelled
native wheel input over their inner max-h-64 lists. Opt their
PopoverContent into the shared wheel shim via wheelScroll, and move the
p-1 padding onto the children so the layout is unchanged.

Fixes #16412

Co-authored-by: Neil <neil@stably.ai>
This commit is contained in:
hjkwon
2026-10-26 12:23:23 -07:00
committed by GitHub
co-authored by Neil
parent 8f4b64cf27
commit 5e907783fd
2 changed files with 15 additions and 15 deletions
@@ -78,11 +78,11 @@ export function TaskPageLinearProjectDialog({
<ChevronDown className="size-3 flex-none text-muted-foreground" />
</Button>
</PopoverTrigger>
<PopoverContent align="start" className="w-72 p-1">
<div className="px-2 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
<PopoverContent align="start" className="w-72" wheelScroll>
<div className="mx-1 mt-1 px-2 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
{translate('auto.components.TaskPage.a98cbe7664', 'Team')}
</div>
<div className="max-h-64 overflow-y-auto scrollbar-sleek">
<div className="mx-1 mb-1 max-h-64 overflow-y-auto scrollbar-sleek">
{availableTeams.map((team) => (
<button
key={team.id}
@@ -117,16 +117,16 @@ export function TaskPageLinearProjectFields({
<ChevronDown className="size-3 text-muted-foreground/70" />
</button>
</PopoverTrigger>
<PopoverContent align="start" className="w-64 p-1">
<div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
<PopoverContent align="start" className="w-64" wheelScroll>
<div className="mx-1 mt-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
{translate('auto.components.TaskPage.34da8ac06c', 'Lead')}
</div>
{newLinearProjectMembers.loading ? (
<div className="flex items-center justify-center p-4">
<div className="mx-1 mb-1 flex items-center justify-center p-4">
<LoaderCircle className="size-4 animate-spin text-muted-foreground" />
</div>
) : (
<div className="max-h-64 overflow-y-auto scrollbar-sleek">
<div className="mx-1 mb-1 max-h-64 overflow-y-auto scrollbar-sleek">
<button
type="button"
onClick={() => setNewLinearProjectLeadId(null)}
@@ -200,16 +200,16 @@ export function TaskPageLinearProjectFields({
<ChevronDown className="size-3 text-muted-foreground/70" />
</button>
</PopoverTrigger>
<PopoverContent align="start" className="w-64 p-1">
<div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
<PopoverContent align="start" className="w-64" wheelScroll>
<div className="mx-1 mt-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
{translate('auto.components.TaskPage.d6cda23ef1', 'Members')}
</div>
{newLinearProjectMembers.loading ? (
<div className="flex items-center justify-center p-4">
<div className="mx-1 mb-1 flex items-center justify-center p-4">
<LoaderCircle className="size-4 animate-spin text-muted-foreground" />
</div>
) : (
<div className="max-h-64 overflow-y-auto scrollbar-sleek">
<div className="mx-1 mb-1 max-h-64 overflow-y-auto scrollbar-sleek">
{newLinearProjectMembers.data.map((member) => {
const selected = newLinearProjectMemberIds.includes(member.id)
return (
@@ -268,16 +268,16 @@ export function TaskPageLinearProjectFields({
<ChevronDown className="size-3 text-muted-foreground/70" />
</button>
</PopoverTrigger>
<PopoverContent align="start" className="w-64 p-1">
<div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
<PopoverContent align="start" className="w-64" wheelScroll>
<div className="mx-1 mt-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
{translate('auto.components.TaskPage.d0ca4aa1d0', 'Labels')}
</div>
{newLinearProjectLabels.loading ? (
<div className="flex items-center justify-center p-4">
<div className="mx-1 mb-1 flex items-center justify-center p-4">
<LoaderCircle className="size-4 animate-spin text-muted-foreground" />
</div>
) : (
<div className="max-h-64 overflow-y-auto scrollbar-sleek">
<div className="mx-1 mb-1 max-h-64 overflow-y-auto scrollbar-sleek">
{newLinearProjectLabels.data.length === 0 ? (
<div className="px-2 py-2 text-xs text-muted-foreground">
{translate('auto.components.TaskPage.af9e877f30', 'No labels')}