Remove tour select portal effects (#3087)

This commit is contained in:
Neil 2026-05-29 03:50:05 -07:00 committed by GitHub
parent a90f447349
commit e69d2cf7bf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 10 deletions

View File

@ -1,4 +1,4 @@
import { useEffect, useState, type JSX } from 'react'
import { useCallback, useState, type JSX } from 'react'
import { Terminal } from 'lucide-react'
import type { CommitMessageAiSettings, GlobalSettings, TuiAgent } from '../../../../shared/types'
import {
@ -97,11 +97,12 @@ export function AiCommitPrSettingsCard(): JSX.Element | null {
// onboarding that puts menus behind the z-[100] fullscreen tour layer, so
// portal into the active tour/dialog surface instead.
const [selectPortalRoot, setSelectPortalRoot] = useState<HTMLElement | null>(null)
useEffect(() => {
const el = document.querySelector<HTMLElement>(
'[data-onboarding-overlay], [data-slot="dialog-content"]'
const setSelectPortalHost = useCallback((node: HTMLDivElement | null) => {
// Why: select menus must portal into the active tour/dialog surface so
// body-level portals do not render behind the fullscreen onboarding layer.
setSelectPortalRoot(
node?.closest<HTMLElement>('[data-onboarding-overlay], [data-slot="dialog-content"]') ?? node
)
setSelectPortalRoot(el)
}, [])
if (!settings) {
return null
@ -254,7 +255,7 @@ export function AiCommitPrSettingsCard(): JSX.Element | null {
}
return (
<div className="rounded-xl border border-border bg-muted/20 p-3.5">
<div ref={setSelectPortalHost} className="rounded-xl border border-border bg-muted/20 p-3.5">
<div className="space-y-2.5">
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">

View File

@ -1,5 +1,5 @@
/* eslint-disable max-lines -- Why: this onboarding step owns the full notification setup surface, including macOS guidance, sound choices, and upload controls. */
import { useEffect, useRef, useState } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import { BellRing, FileAudio, Settings, Upload, X } from 'lucide-react'
import { toast } from 'sonner'
import type { GlobalSettings, NotificationPermissionStatusResult } from '../../../../shared/types'
@ -59,10 +59,10 @@ export function NotificationStep({
notificationSettingsRef.current = notificationSettings
}
useEffect(() => {
const setSelectPortalHost = useCallback((node: HTMLDivElement | null) => {
// Why: onboarding sits above body-level portals, so the select menu must
// portal into the overlay to stay clickable.
setSelectPortalRoot(document.querySelector<HTMLElement>('[data-onboarding-overlay]'))
setSelectPortalRoot(node?.closest<HTMLElement>('[data-onboarding-overlay]') ?? node)
}, [])
useEffect(() => {
@ -163,7 +163,7 @@ export function NotificationStep({
const isMac = permissionStatus?.platform === 'darwin'
return (
<div className="space-y-5">
<div ref={setSelectPortalHost} className="space-y-5">
{isMac ? (
<section className="rounded-xl border border-border bg-card px-5 py-4">
<div className="flex flex-wrap items-start justify-between gap-4">