lint: fix tailwind lint issues (#23367)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>

web/app/components/datasets/create/step-two/option-card.tsx

@@ -21,7 +21,7 @@ type OptionCardHeaderProps = {
 export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
   const { icon, title, description, isActive, activeClassName, effectImg, disabled } = props
   return <div className={classNames(
-    'flex h-full overflow-hidden rounded-t-xl relative',
+    'relative flex h-full overflow-hidden rounded-t-xl',
     isActive && activeClassName,
     !disabled && 'cursor-pointer',
   )}>
@@ -34,7 +34,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
       </div>
     </div>
     <TriangleArrow
-      className={classNames('absolute left-4 -bottom-1.5 text-transparent', isActive && 'text-components-panel-bg')}
+      className={classNames('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
     />
     <div className='flex-1 space-y-0.5 py-3 pr-4'>
       <div className='system-md-semibold text-text-secondary'>{title}</div>
@@ -70,7 +70,7 @@ export const OptionCard: FC<OptionCardProps> = (
       (isActive && !noHighlight)
         ? 'border-[1.5px] border-components-option-card-option-selected-border'
         : 'border border-components-option-card-option-border',
-      disabled && 'opacity-50 pointer-events-none',
+      disabled && 'pointer-events-none opacity-50',
       className,
     )}
     style={{

web/app/components/datasets/create/stepper/step.tsx

@@ -17,15 +17,15 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
   const label = isActive ? `STEP ${index + 1}` : `${index + 1}`
   return <div className='flex items-center gap-2'>
     <div className={classNames(
-      'h-5 py-1 rounded-3xl flex-col justify-center items-center gap-2 inline-flex',
+      'inline-flex h-5 flex-col items-center justify-center gap-2 rounded-3xl py-1',
       isActive
-        ? 'px-2 bg-state-accent-solid'
+        ? 'bg-state-accent-solid px-2'
         : !isDisabled
           ? 'w-5 border border-text-quaternary'
           : 'w-5 border border-divider-deep',
     )}>
       <div className={classNames(
-        'text-center system-2xs-semibold-uppercase',
+        'system-2xs-semibold-uppercase text-center',
         isActive
           ? 'text-text-primary-on-surface'
           : !isDisabled
@@ -37,7 +37,7 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
     </div>
     <div className={classNames('system-xs-medium-uppercase',
       isActive
-        ? 'text-text-accent system-xs-semibold-uppercase'
+        ? 'system-xs-semibold-uppercase text-text-accent'
         : !isDisabled
           ? 'text-text-tertiary'
           : 'text-text-quaternary',

web/app/components/datasets/create/top-bar/index.tsx

@@ -24,7 +24,7 @@ export const TopBar: FC<TopBarProps> = (props) => {
     return datasetId ? `/datasets/${datasetId}/documents` : '/datasets'
   }, [datasetId])
 
-  return <div className={classNames('flex shrink-0 h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}>
+  return <div className={classNames('relative flex h-[52px] shrink-0 items-center justify-between border-b border-b-divider-subtle', className)}>
     <Link href={fallbackRoute} replace className="inline-flex h-12 items-center justify-start gap-1 py-2 pl-2 pr-6">
       <div className='p-2'>
         <RiArrowLeftLine className='size-4 text-text-primary' />

web/app/components/datasets/documents/detail/completed/child-segment-list.tsx

@@ -84,20 +84,19 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
       const count = text === '--' ? 0 : total
       return `${count} ${t('datasetDocuments.segment.searchResults', { count })}`
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFullDocMode, total, childChunks.length, inputValue])
 
   return (
     <div className={classNames(
       'flex flex-col',
       contentOpacity,
-      isParagraphMode ? 'pt-1 pb-2' : 'px-3 grow',
+      isParagraphMode ? 'pb-2 pt-1' : 'grow px-3',
       (isFullDocMode && isLoading) && 'overflow-y-hidden',
     )}>
       {isFullDocMode ? <Divider type='horizontal' className='my-1 h-[1px] bg-divider-subtle' /> : null}
-      <div className={classNames('flex items-center justify-between', isFullDocMode ? 'pt-2 pb-3 sticky -top-2 left-0 bg-background-default' : '')}>
+      <div className={classNames('flex items-center justify-between', isFullDocMode ? 'sticky -top-2 left-0 bg-background-default pb-3 pt-2' : '')}>
         <div className={classNames(
-          'h-7 flex items-center pl-1 pr-3 rounded-lg',
+          'flex h-7 items-center rounded-lg pl-1 pr-3',
           isParagraphMode && 'cursor-pointer',
           (isParagraphMode && collapsed) && 'bg-dataset-child-chunk-expand-btn-bg',
           isFullDocMode && 'pl-0',
@@ -117,11 +116,11 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
               : null
           }
           <span className='system-sm-semibold-uppercase text-text-secondary'>{totalText}</span>
-          <span className={classNames('text-text-quaternary text-xs font-medium pl-1.5', isParagraphMode ? 'hidden group-hover/card:inline-block' : '')}>·</span>
+          <span className={classNames('pl-1.5 text-xs font-medium text-text-quaternary', isParagraphMode ? 'hidden group-hover/card:inline-block' : '')}>·</span>
           <button
             type='button'
             className={classNames(
-              'px-1.5 py-1 text-components-button-secondary-accent-text system-xs-semibold-uppercase',
+              'system-xs-semibold-uppercase px-1.5 py-1 text-components-button-secondary-accent-text',
               isParagraphMode ? 'hidden group-hover/card:inline-block' : '',
               (isFullDocMode && isLoading) ? 'text-components-button-secondary-accent-text-disabled' : '',
             )}
@@ -147,14 +146,14 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
       </div>
       {isLoading ? <FullDocListSkeleton /> : null}
       {((isFullDocMode && !isLoading) || !collapsed)
-        ? <div className={classNames('flex gap-x-0.5', isFullDocMode ? 'grow mb-6' : 'items-center')}>
+        ? <div className={classNames('flex gap-x-0.5', isFullDocMode ? 'mb-6 grow' : 'items-center')}>
           {isParagraphMode && (
             <div className='self-stretch'>
               <Divider type='vertical' className='mx-[7px] w-[2px] bg-text-accent-secondary' />
             </div>
           )}
           {childChunks.length > 0
-            ? <FormattedText className={classNames('w-full !leading-6 flex flex-col', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}>
+            ? <FormattedText className={classNames('flex w-full flex-col !leading-6', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}>
               {childChunks.map((childChunk) => {
                 const edited = childChunk.updated_at !== childChunk.created_at
                 const focused = currChildChunk?.childChunkInfo?.id === childChunk.id

web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx

@@ -17,7 +17,7 @@ const Textarea: FC<IContentProps> = React.memo(({
   return (
     <textarea
       className={classNames(
-        'bg-transparent inset-0 outline-none border-none appearance-none resize-none w-full overflow-y-auto',
+        'inset-0 w-full resize-none appearance-none overflow-y-auto border-none bg-transparent outline-none',
         className,
       )}
       placeholder={placeholder}
@@ -83,7 +83,7 @@ const AutoResizeTextArea: FC<IAutoResizeTextAreaProps> = React.memo(({
     <textarea
       ref={textareaRef}
       className={classNames(
-        'bg-transparent inset-0 outline-none border-none appearance-none resize-none w-full',
+        'inset-0 w-full resize-none appearance-none border-none bg-transparent outline-none',
         className,
       )}
       style={{

web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx

@@ -20,10 +20,10 @@ const FullScreenDrawer: FC<IFullScreenDrawerProps> = ({
     <Drawer
       isOpen={isOpen}
       onClose={onClose}
-      panelClassName={classNames('!p-0 bg-components-panel-bg',
+      panelClassName={classNames('bg-components-panel-bg !p-0',
         fullScreen
-          ? '!max-w-full !w-full'
-          : 'mt-16 mr-2 mb-2 !max-w-[560px] !w-[560px] border-[0.5px] border-components-panel-border rounded-xl',
+          ? '!w-full !max-w-full'
+          : 'mb-2 mr-2 mt-16 !w-[560px] !max-w-[560px] rounded-xl border-[0.5px] border-components-panel-border',
       )}
       mask={false}
       unmount

web/app/components/datasets/documents/detail/completed/new-child-segment.tsx

@@ -110,12 +110,11 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
   const wordCountText = useMemo(() => {
     const count = content.length
     return `${formatNumber(count)} ${t('datasetDocuments.segment.characters', { count })}`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [content.length])
 
   return (
     <div className={'flex h-full flex-col'}>
-      <div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
+      <div className={classNames('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
         <div className='flex flex-col'>
           <div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.addChildChunk')}</div>
           <div className='flex items-center gap-x-2'>
@@ -146,8 +145,8 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
           </div>
         </div>
       </div>
-      <div className={classNames('flex grow w-full', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'py-3 px-4')}>
-        <div className={classNames('break-all overflow-hidden whitespace-pre-line h-full', fullScreen ? 'w-1/2' : 'w-full')}>
+      <div className={classNames('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
+        <div className={classNames('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
           <ChunkContent
             docForm={ChunkingMode.parentChild}
             question={content}

web/app/components/datasets/documents/detail/embedding/index.tsx

@@ -101,7 +101,6 @@ const RuleDetail: FC<IRuleDetailProps> = React.memo(({
         break
     }
     return value
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sourceData])
 
   return <div className='py-3'>
@@ -198,7 +197,6 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
       await sleep(2500)
       await startQueryStatus()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stopQueryStatus])
 
   useEffect(() => {
@@ -288,7 +286,7 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
         {/* progress bar */}
         <div className={cn(
           'flex h-2 w-full items-center overflow-hidden rounded-md border border-components-progress-bar-border',
-          isEmbedding ? 'bg-components-progress-bar-bg bg-opacity-50' : 'bg-components-progress-bar-bg',
+          isEmbedding ? 'bg-components-progress-bar-bg/50' : 'bg-components-progress-bar-bg',
         )}>
           <div
             className={cn(

web/app/components/datasets/formatted-text/flavours/edit-slice.tsx

@@ -56,7 +56,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
   return (
     <>
       <SliceContainer {...rest}
-        className={classNames('block mr-0', className)}
+        className={classNames('mr-0 block', className)}
         ref={(ref) => {
           refs.setReference(ref)
           if (ref)

web/app/components/datasets/formatted-text/flavours/shared.tsx

@@ -13,7 +13,7 @@ export const SliceContainer: FC<SliceContainerProps> = (
 ) => {
   const { className, ...rest } = props
   return <span {...rest} ref={ref} className={classNames(
-    'group align-bottom mr-1 select-none text-sm',
+    'group mr-1 select-none align-bottom text-sm',
     className,
   )} />
 }
@@ -30,7 +30,7 @@ export const SliceLabel: FC<SliceLabelProps> = (
   const { className, children, labelInnerClassName, ...rest } = props
   return <span {...rest} ref={ref} className={classNames(
     baseStyle,
-    'px-1 bg-state-base-hover-alt group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface uppercase text-text-tertiary',
+    'bg-state-base-hover-alt px-1 uppercase text-text-tertiary group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface',
     className,
   )}>
     <span className={classNames('text-nowrap', labelInnerClassName)}>
@@ -51,7 +51,7 @@ export const SliceContent: FC<SliceContentProps> = (
   const { className, children, ...rest } = props
   return <span {...rest} ref={ref} className={classNames(
     baseStyle,
-    'px-1 bg-state-base-hover group-hover:bg-state-accent-hover-alt group-hover:text-text-primary leading-7 whitespace-pre-line break-all',
+    'whitespace-pre-line break-all bg-state-base-hover px-1 leading-7 group-hover:bg-state-accent-hover-alt group-hover:text-text-primary',
     className,
   )}>
     {children}
@@ -70,7 +70,7 @@ export const SliceDivider: FC<SliceDividerProps> = (
   const { className, ...rest } = props
   return <span {...rest} ref={ref} className={classNames(
     baseStyle,
-    'bg-state-base-active group-hover:bg-state-accent-solid text-sm px-[1px]',
+    'bg-state-base-active px-[1px] text-sm group-hover:bg-state-accent-solid',
     className,
   )}>
     {/* use a zero-width space to make the hover area bigger */}

web/app/components/datasets/preview/container.tsx

@@ -14,13 +14,13 @@ export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, re
       {...rest}
       ref={ref}
       className={classNames(
-        'flex flex-col w-full h-full overflow-y-auto rounded-l-xl border-t-[0.5px] border-l-[0.5px] border-components-panel-border bg-background-default-lighter shadow shadow-shadow-shadow-5',
+        'flex h-full w-full flex-col overflow-y-auto rounded-l-xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-background-default-lighter shadow shadow-shadow-shadow-5',
       )}
     >
       <header className='border-b border-divider-subtle pb-3 pl-5 pr-4 pt-4'>
         {header}
       </header>
-      <main className={classNames('py-5 px-6 w-full h-full', mainClassName)}>
+      <main className={classNames('h-full w-full px-6 py-5', mainClassName)}>
         {children}
       </main>
     </div>

web/app/components/datasets/settings/index-method-radio/index.tsx

@@ -50,7 +50,7 @@ const IndexMethodRadio = ({
   ]
 
   return (
-    <div className={classNames('flex justify-between w-full gap-2')}>
+    <div className={classNames('flex w-full justify-between gap-2')}>
       {
         options.map((option) => {
           const isParentChild = docForm === ChunkingMode.parentChild