From 5e8fe30035d6089edb02f1679087d7aca871e08a Mon Sep 17 00:00:00 2001
From: HyaCinth <88471803+HyaCiovo@users.noreply.github.com>
Date: Mon, 18 Aug 2025 15:56:10 +0800
Subject: [PATCH] fix(ui): Optimize UI component styles and layouts (#24090)
 (#24092)

---
 .../documents/detail/completed/common/tag.tsx        |  2 +-
 web/app/components/datasets/documents/list.tsx       | 12 +++++++-----
 web/app/components/explore/category.tsx              |  2 +-
 .../components/header/account-dropdown/support.tsx   |  2 +-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/app/components/datasets/documents/detail/completed/common/tag.tsx b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
index 306087d2e..914f8dc61 100644
--- a/web/app/components/datasets/documents/detail/completed/common/tag.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
@@ -5,7 +5,7 @@ const Tag = ({ text, className }: { text: string; className?: string }) => {
   return (
     <div className={cn('inline-flex items-center gap-x-0.5', className)}>
       <span className='text-xs font-medium text-text-quaternary'>#</span>
-      <span className='line-clamp-1 max-w-12 shrink-0 text-xs text-text-tertiary'>{text}</span>
+      <span className='max-w-12 shrink-0 truncate text-xs text-text-tertiary'>{text}</span>
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index 83effd446..94010d32e 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -301,6 +301,7 @@ export const OperationAction: FC<{
         <Tooltip
           popupContent={t('datasetDocuments.list.action.download')}
           popupClassName='text-text-secondary system-xs-medium'
+          needsDelay={false}
         >
           <button
             className={cn('mr-2 cursor-pointer rounded-lg',
@@ -311,9 +312,9 @@ export const OperationAction: FC<{
               downloadDocument.mutateAsync({
                 datasetId,
                 documentId: detail.id,
-                  }).then((response) => {
-                    if (response.download_url)
-                      window.location.href = response.download_url
+              }).then((response) => {
+                if (response.download_url)
+                  window.location.href = response.download_url
               }).catch((error) => {
                 console.error(error)
                 notify({ type: 'error', message: t('common.actionMsg.downloadFailed') })
@@ -326,6 +327,7 @@ export const OperationAction: FC<{
         <Tooltip
           popupContent={t('datasetDocuments.list.action.settings')}
           popupClassName='text-text-secondary system-xs-medium'
+          needsDelay={false}
         >
           <button
             className={cn('mr-2 cursor-pointer rounded-lg',
@@ -526,7 +528,7 @@ const DocumentList: FC<IDocumentListProps> = ({
         const result = aValue.localeCompare(bValue)
         return sortOrder === 'asc' ? result : -result
       }
- else {
+      else {
         const result = aValue - bValue
         return sortOrder === 'asc' ? result : -result
       }
@@ -539,7 +541,7 @@ const DocumentList: FC<IDocumentListProps> = ({
     if (sortField === field) {
       setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
     }
- else {
+    else {
       setSortField(field)
       setSortOrder('desc')
     }
diff --git a/web/app/components/explore/category.tsx b/web/app/components/explore/category.tsx
index 51daaa95d..a36c91a73 100644
--- a/web/app/components/explore/category.tsx
+++ b/web/app/components/explore/category.tsx
@@ -36,7 +36,7 @@ const Category: FC<ICategoryProps> = ({
   )
 
   return (
-    <div className={cn(className, 'flex flex-wrap space-x-1 text-[13px]')}>
+    <div className={cn(className, 'flex flex-wrap gap-1 text-[13px]')}>
       <div
         className={itemClassName(isAllCategories)}
         onClick={() => onChange(allCategoriesEn)}
diff --git a/web/app/components/header/account-dropdown/support.tsx b/web/app/components/header/account-dropdown/support.tsx
index 6435bcaeb..15c6d3e5c 100644
--- a/web/app/components/header/account-dropdown/support.tsx
+++ b/web/app/components/header/account-dropdown/support.tsx
@@ -42,7 +42,7 @@ export default function Support() {
           >
             <MenuItems
               className={cn(
-                `absolute top-[1px] z-10 max-h-[70vh] w-[216px] origin-top-right -translate-x-full divide-y divide-divider-subtle overflow-y-scroll
+                `absolute top-[1px] z-10 max-h-[70vh] w-[216px] origin-top-right -translate-x-full divide-y divide-divider-subtle overflow-y-auto
                 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px] focus:outline-none
               `,
               )}