fix(trigger): close portal after select a subscription

web/app/components/base/confirm/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import Button from '../button'
+import Tooltip from '../tooltip'
 
 export type IConfirm = {
   className?: string
@@ -37,7 +38,9 @@ function Confirm({
 }: IConfirm) {
   const { t } = useTranslation()
   const dialogRef = useRef<HTMLDivElement>(null)
+  const titleRef = useRef<HTMLDivElement>(null)
   const [isVisible, setIsVisible] = useState(isShow)
+  const [isTitleTruncated, setIsTitleTruncated] = useState(false)
 
   const confirmTxt = confirmText || `${t('common.operation.confirm')}`
   const cancelTxt = cancelText || `${t('common.operation.cancel')}`
@@ -80,6 +83,13 @@ function Confirm({
     }
   }, [isShow])
 
+  useEffect(() => {
+    if (titleRef.current) {
+      const isOverflowing = titleRef.current.scrollWidth > titleRef.current.clientWidth
+      setIsTitleTruncated(isOverflowing)
+    }
+  }, [title, isVisible])
+
   if (!isVisible)
     return null
 
@@ -92,8 +102,18 @@ function Confirm({
       <div ref={dialogRef} className={'relative w-full max-w-[480px] overflow-hidden'}>
         <div className='shadows-shadow-lg flex max-w-full flex-col items-start rounded-2xl border-[0.5px] border-solid border-components-panel-border bg-components-panel-bg'>
           <div className='flex flex-col items-start gap-2 self-stretch pb-4 pl-6 pr-6 pt-6'>
-            <div className='title-2xl-semi-bold text-text-primary'>{title}</div>
+            <Tooltip
-            <div className='system-md-regular w-full text-text-tertiary'>{content}</div>
+              popupContent={title}
+              disabled={!isTitleTruncated}
+              portalContentClassName='!z-[10000001]'
+              asChild={false}
+              triggerClassName='w-full'
+            >
+              <div ref={titleRef} className='title-2xl-semi-bold w-full truncate text-text-primary'>
+                {title}
+              </div>
+            </Tooltip>
+            <div className='system-md-regular w-full whitespace-pre-wrap break-words text-text-tertiary'>{content}</div>
           </div>
           <div className='flex items-start justify-end gap-2 self-stretch p-6'>
             {showCancel && <Button onClick={onCancel}>{cancelTxt}</Button>}

web/app/components/base/tooltip/index.tsx

@@ -17,6 +17,7 @@ export type TooltipProps = {
   popupContent?: React.ReactNode
   children?: React.ReactNode
   popupClassName?: string
+  portalContentClassName?: string
   noDecoration?: boolean
   offset?: OffsetOptions
   needsDelay?: boolean
@@ -32,6 +33,7 @@ const Tooltip: FC<TooltipProps> = ({
   popupContent,
   children,
   popupClassName,
+  portalContentClassName,
   noDecoration,
   offset,
   asChild = true,
@@ -104,7 +106,7 @@ const Tooltip: FC<TooltipProps> = ({
         {children || <div data-testid={triggerTestId} className={triggerClassName || 'h-3.5 w-3.5 shrink-0 p-[1px]'}><RiQuestionLine className='h-full w-full text-text-quaternary hover:text-text-tertiary' /></div>}
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent
-        className="z-[9999]"
+        className={cn('z-[9999]', portalContentClassName || '')}
       >
         {popupContent && (<div
           className={cn(

web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx

@@ -359,7 +359,7 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
           )}
         </>
       )}
-      {currentStep === ApiKeyStep.Configuration && <div className='max-h-[70vh] overflow-y-auto'>
+      {currentStep === ApiKeyStep.Configuration && <div className='max-h-[70vh]'>
         <BaseForm
           formSchemas={[
             {

web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx

@@ -99,7 +99,10 @@ export const SubscriptionSelectorEntry = ({ selectedId, onSelect }: {
         <SubscriptionList
           mode={SubscriptionListMode.SELECTOR}
           selectedId={selectedId}
-          onSelect={onSelect}
+          onSelect={(...args) => {
+            onSelect(...args)
+            setIsOpen(false)
+          }}
         />
       </div>
     </PortalToFollowElemContent>