feat: add retriever rank fe

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx

@@ -153,7 +153,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
     return <Loading />
 
   return (
-    <div className='flex' style={{ height: 'calc(100vh - 56px)' }}>
+    <div className='flex'>
       {!hideSideBar && <AppSideBar
         title={datasetRes?.name || '--'}
         icon={datasetRes?.icon || 'https://static.dify.ai/images/dataset-default-icon.png'}
@@ -168,7 +168,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
         dataset: datasetRes,
         mutateDatasetRes: () => mutateDatasetRes(),
       }}>
-        <div className="bg-white grow">{children}</div>
+        <div className="bg-white grow" style={{ minHeight: 'calc(100vh - 56px)' }}>{children}</div>
       </DatasetDetailContext.Provider>
     </div>
   )

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

@@ -16,7 +16,7 @@ export type ICardItemProps = {
   onRemove: (id: string) => void
   readonly?: boolean
 }
-
+// used in universal-chat
 const CardItem: FC<ICardItemProps> = ({
   className,
   config,

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

@@ -1,16 +1,22 @@
 .card {
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  width: calc(50% - 4px);
+  width: 100%;
 }
 
 .card:hover {
   box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
 }
 
-.deleteBtn {
+.btnWrap {
+  padding-left: 64px;
   visibility: hidden;
+  background: linear-gradient(270deg, #FFF 49.99%, rgba(255, 255, 255, 0.00) 98.1%);
 }
 
-.card:hover .deleteBtn {
+.card:hover .btnWrap {
   visibility: visible;
+}
+
+.settingBtn:hover {
+  background-color: rgba(0, 0, 0, 0.05);
 }

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

@@ -105,7 +105,6 @@ const DatasetConfig: FC = () => {
           onChange={handleSelectContextVar}
         />
       )}
-
     </FeaturePanel>
   )
 }