Floating Tabs (Popouts) with shadcn Dialog/popover elements

[hypong]

Hi all, I got an issue on using popout with some shadcn items such as Dialog and popover. When i trigger those shadcn items it will reference to the original windows's body instead of the new opened one. Anyone knows how to resolve that?

[hypong]

This is my working code that i edit the DialogContent directly. But i keep getting a error when i trigger the dialog inside the Floating Tabs. DialogContent requires a DialogTitle for the component to be accessible for screen reader users. If you want to hide the DialogTitle, you can wrap it with our VisuallyHidden component

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  const selfRef = React.useRef<HTMLDivElement>(null)

  return (
    <>
      <div ref={selfRef} />
      <DialogPortal data-slot="dialog-portal" container={selfRef.current}>
        <DialogOverlay />
        <DialogPrimitive.Content
          data-slot="dialog-content"
          {...props}
        >
          {children}
          {showCloseButton && (
            <DialogPrimitive.Close
              data-slot="dialog-close">
              <XIcon />
              <span className="sr-only">Close</span>
            </DialogPrimitive.Close>
          )}
        </DialogPrimitive.Content>
      </DialogPortal>
    </>
  )
}