From 48dfbd60d6947b43062e83ee8cee888e2a191eaf Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Thu, 25 Jun 2026 18:07:32 +0800
Subject: [PATCH] fix: polish tool provider selection and detail drawer
 (#37940)

---
 .../integrations/__tests__/tool-provider-list.spec.tsx   | 2 +-
 web/app/components/integrations/tool-provider-card.tsx   | 6 +++---
 .../components/tools/provider/__tests__/detail.spec.tsx  | 4 ++++
 web/app/components/tools/provider/detail.tsx             | 9 ++++-----
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/web/app/components/integrations/__tests__/tool-provider-list.spec.tsx b/web/app/components/integrations/__tests__/tool-provider-list.spec.tsx
index 853cf525625..87fa9d273d5 100644
--- a/web/app/components/integrations/__tests__/tool-provider-list.spec.tsx
+++ b/web/app/components/integrations/__tests__/tool-provider-list.spec.tsx
@@ -477,7 +477,7 @@ describe('ProviderList', () => {
 
       fireEvent.click(screen.getByTestId('card-google-search'))
 
-      expect(screen.getByTestId('card-google-search')).toHaveClass('outline-[1.5px]', 'outline-components-option-card-option-selected-border')
+      expect(screen.getByTestId('card-google-search')).toHaveClass('after:ring-[1.5px]', 'after:ring-components-option-card-option-selected-border', 'after:ring-inset')
     })
   })
 
diff --git a/web/app/components/integrations/tool-provider-card.tsx b/web/app/components/integrations/tool-provider-card.tsx
index 23e4f764344..d1674a94c14 100644
--- a/web/app/components/integrations/tool-provider-card.tsx
+++ b/web/app/components/integrations/tool-provider-card.tsx
@@ -57,7 +57,7 @@ function IntegrationsToolProviderCard({
         data-org={collection.plugin_id ? org : ''}
         className={cn(
           'group/tool-provider relative flex min-w-0 cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-md',
-          current && 'outline-[1.5px] outline-components-option-card-option-selected-border',
+          current && 'after:pointer-events-none after:absolute after:inset-0 after:rounded-xl after:ring-[1.5px] after:ring-components-option-card-option-selected-border after:content-[\'\'] after:ring-inset',
         )}
       >
         <div className="flex w-full shrink-0 items-center gap-3 px-4 pt-4 pb-2">
@@ -97,10 +97,9 @@ function IntegrationsToolProviderCard({
       data-org={collection.plugin_id ? org : ''}
       className={cn(
         'group/tool-provider relative flex min-w-[min(100%,496px)] flex-1 cursor-pointer flex-col overflow-hidden rounded-xl bg-background-section-burn p-[3px]',
-        current && 'outline-[1.5px] outline-components-option-card-option-selected-border',
+        current && 'after:pointer-events-none after:absolute after:inset-0 after:rounded-xl after:ring-[1.5px] after:ring-components-option-card-option-selected-border after:content-[\'\'] after:ring-inset',
       )}
     >
-      {shouldShowBuiltInBadge && <CornerMark className="z-20" text={builtInLabel} />}
       <div className="relative flex w-full items-center gap-3 overflow-hidden rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-3 group-hover/tool-provider:bg-components-panel-on-panel-item-bg-hover">
         <Icon src={collection.icon} size="large" />
         <div className="flex min-w-0 flex-1 flex-col gap-0.5 py-px">
@@ -136,6 +135,7 @@ function IntegrationsToolProviderCard({
           </>
         )}
       </div>
+      {shouldShowBuiltInBadge && <CornerMark text={builtInLabel} />}
     </div>
   )
 }
diff --git a/web/app/components/tools/provider/__tests__/detail.spec.tsx b/web/app/components/tools/provider/__tests__/detail.spec.tsx
index 2881aba612a..670683d194c 100644
--- a/web/app/components/tools/provider/__tests__/detail.spec.tsx
+++ b/web/app/components/tools/provider/__tests__/detail.spec.tsx
@@ -192,7 +192,11 @@ describe('ProviderDetail', () => {
 
       const dialog = screen.getByRole('dialog')
 
+      expect(document.querySelector('.absolute.inset-0.z-50.bg-transparent')).not.toBeInTheDocument()
+      expect(dialog.closest('.pointer-events-none')).toBeInTheDocument()
       expect(dialog).toHaveClass(
+        'pointer-events-auto',
+        'touch-auto',
         'data-[swipe-direction=right]:top-2',
         'data-[swipe-direction=right]:right-2',
         'data-[swipe-direction=right]:bottom-2',
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index 77bb2e4e133..04bbdeae19f 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -14,7 +14,6 @@ import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   Drawer,
-  DrawerBackdrop,
   DrawerContent,
   DrawerPopup,
   DrawerPortal,
@@ -259,7 +258,8 @@ const ProviderDetail = ({
   return (
     <Drawer
       open={!!collection}
-      modal
+      modal={false}
+      disablePointerDismissal
       swipeDirection="right"
       onOpenChange={(open) => {
         if (!open)
@@ -267,9 +267,8 @@ const ProviderDetail = ({
       }}
     >
       <DrawerPortal>
-        <DrawerBackdrop className="bg-transparent" />
-        <DrawerViewport>
-          <DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-[400px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
+        <DrawerViewport className="pointer-events-none">
+          <DrawerPopup className={cn('pointer-events-auto touch-auto justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-[400px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
             <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
               <div className="flex h-full flex-col p-4">
                 <div className="shrink-0">