From e0e322441350773f4df81f3f089fc129bcc0a536 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Mon, 25 Aug 2025 17:46:27 +0800
Subject: [PATCH] refactor(option-card): enhance styling and accessibility by
 updating class names and adding title attribute

---
 .../preparation/data-source-options/option-card.tsx      | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx
index 27813a4bfd..83a0f53770 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx
@@ -29,20 +29,23 @@ const OptionCard = ({
   return (
     <div
       className={cn(
-        'flex flex-col gap-1 rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg p-2.5 shadow-shadow-shadow-3',
+        'flex cursor-pointer flex-col gap-1 rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg p-2.5 shadow-shadow-shadow-3',
         selected
           ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs ring-[0.5px] ring-inset ring-components-option-card-option-selected-border'
           : 'hover:bg-components-option-card-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs',
       )}
       onClick={handleClickCard}
     >
-      <div className='flex size-7 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border bg-background-default-dodge p-1'>
+      <div className='flex size-7 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border bg-background-default-dodge p-1'>
         <BlockIcon
           type={BlockEnum.DataSource}
           toolIcon={toolIcon}
         />
       </div>
-      <div className={cn('system-sm-medium text-text-secondary', selected && 'text-primary')}>
+      <div
+        className={cn('system-sm-medium line-clamp-2 grow text-text-secondary', selected && 'text-primary')}
+        title={label}
+      >
         {label}
       </div>
     </div>