fix(ui): Optimize UI component styles and layouts (#24090) (#24092)

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>
   )
 }

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) => {
+              }).then((response) => {
-                    if (response.download_url)
+                if (response.download_url)
-                      window.location.href = 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')
     }

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)}

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
               `,
               )}