fix: optimize styles (#1112)

web/app/components/app/configuration/base/icons/remove-icon/index.tsx

@@ -1,18 +1,18 @@
 'use client'
-import React, { FC, useState } from 'react'
+import React, { useState } from 'react'
 import cn from 'classnames'
 
-export interface IRemoveIconProps {
+type IRemoveIconProps = {
   className?: string
   isHoverStatus?: boolean
   onClick: () => void
 }
 
-const RemoveIcon: FC<IRemoveIconProps> = ({
+const RemoveIcon = ({
   className,
   isHoverStatus,
-  onClick
-}) => {
+  onClick,
+}: IRemoveIconProps) => {
   const [isHovered, setIsHovered] = useState(false)
   const computedIsHovered = isHoverStatus || isHovered
   return (
@@ -23,7 +23,7 @@ const RemoveIcon: FC<IRemoveIconProps> = ({
       onClick={onClick}
     >
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M10 6H14M6 8H18M16.6667 8L16.1991 15.0129C16.129 16.065 16.0939 16.5911 15.8667 16.99C15.6666 17.3412 15.3648 17.6235 15.0011 17.7998C14.588 18 14.0607 18 13.0062 18H10.9938C9.93927 18 9.41202 18 8.99889 17.7998C8.63517 17.6235 8.33339 17.3412 8.13332 16.99C7.90607 16.5911 7.871 16.065 7.80086 15.0129L7.33333 8M10.6667 11V14.3333M13.3333 11V14.3333" stroke={computedIsHovered ? "#D92D20" : "#667085"} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10 6H14M6 8H18M16.6667 8L16.1991 15.0129C16.129 16.065 16.0939 16.5911 15.8667 16.99C15.6666 17.3412 15.3648 17.6235 15.0011 17.7998C14.588 18 14.0607 18 13.0062 18H10.9938C9.93927 18 9.41202 18 8.99889 17.7998C8.63517 17.6235 8.33339 17.3412 8.13332 16.99C7.90607 16.5911 7.871 16.065 7.80086 15.0129L7.33333 8M10.6667 11V14.3333M13.3333 11V14.3333" stroke={computedIsHovered ? '#D92D20' : '#667085'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
       </svg>
     </div>
   )

web/app/components/app/configuration/dataset-config/card-item/index.tsx

@@ -29,9 +29,9 @@ const CardItem: FC<ICardItemProps> = ({
     <div
       className={
         cn(className, s.card,
-          'flex items-center justify-between rounded-xl  px-3 py-2.5 bg-white border border-gray-200  cursor-pointer')
+          'relative flex items-center rounded-xl  px-3 py-2.5 bg-white border border-gray-200  cursor-pointer')
       }>
-      <div className='shrink-0 flex items-center space-x-2'>
+      <div className='flex items-center space-x-2'>
         <div className={cn(!config.embedding_available && 'opacity-50')}>
           <TypeIcon type="upload_file" />
         </div>
@@ -47,13 +47,13 @@ const CardItem: FC<ICardItemProps> = ({
               </Tooltip>
             )}
           </div>
-          <div className={cn('flex text-xs text-gray-500', !config.embedding_available && 'opacity-50')}>
+          <div className={cn('max-w-[150px] flex text-xs text-gray-500', !config.embedding_available && 'opacity-50')}>
             {formatNumber(config.word_count)} {t('appDebug.feature.dataSet.words')} · {formatNumber(config.document_count)} {t('appDebug.feature.dataSet.textBlocks')}
           </div>
         </div>
       </div>
 
-      {!readonly && <RemoveIcon className={`${s.deleteBtn} shrink-0`} onClick={() => onRemove(config.id)} />}
+      {!readonly && <RemoveIcon className={`${s.deleteBtn} absolute right-1 top-1/2 translate-y-[-50%]`} onClick={() => onRemove(config.id)} />}
     </div>
   )
 }

web/app/components/app/configuration/dataset-config/card-item/style.module.css

@@ -8,9 +8,9 @@
 }
 
 .deleteBtn {
-  display: none;
+  visibility: hidden;
 }
 
 .card:hover .deleteBtn {
-  display: block;
+  visibility: visible;
 }