Remove tour select portal effects (#3087)
This commit is contained in:
parent
a90f447349
commit
e69d2cf7bf
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue