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',
@@ -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',

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