chore: auto fix for tailwind rules (#35332)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/.storybook/utils/form-story-wrapper.tsx

@@ -47,7 +47,7 @@ export const FormStoryWrapper = ({
         {children(form)}
       </div>
       <aside className="w-full max-w-sm rounded-xl border border-divider-subtle bg-components-panel-bg p-4 text-xs text-text-secondary shadow-sm">
-        <div className="flex items-center justify-between text-[11px] uppercase tracking-wide text-text-tertiary">
+        <div className="flex items-center justify-between text-[11px] tracking-wide text-text-tertiary uppercase">
           <span>Form State</span>
           <span>
             {submitCount}

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx

@@ -48,7 +48,7 @@ export default function ChartView({ appId, headerRight }: IChartViewProps) {
   return (
     <div>
       <div className="mb-4">
-        <div className="system-xl-semibold mb-2 text-text-primary">{t('appMenus.overview', { ns: 'common' })}</div>
+        <div className="mb-2 system-xl-semibold text-text-primary">{t('appMenus.overview', { ns: 'common' })}</div>
         <div className="flex items-center justify-between">
           {IS_CLOUD_EDITION
             ? (

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

@@ -6,7 +6,7 @@ const Settings = () => {
 
   return (
     <div className="h-full overflow-y-auto">
-      <div className="flex flex-col gap-y-0.5 px-6 pb-2 pt-3">
+      <div className="flex flex-col gap-y-0.5 px-6 pt-3 pb-2">
         <div className="system-xl-semibold text-text-primary">{t('title')}</div>
         <div className="system-sm-regular text-text-tertiary">{t('desc')}</div>
       </div>

web/app/(shareLayout)/components/authenticated-layout.tsx

@@ -81,7 +81,7 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-y-2">
         <AppUnavailable className="h-auto w-auto" code={403} unknownReason="no permission." />
-        <span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{t('userProfile.logout', { ns: 'common' })}</span>
+        <span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{t('userProfile.logout', { ns: 'common' })}</span>
       </div>
     )
   }

web/app/(shareLayout)/components/splash.tsx

@@ -95,7 +95,7 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-y-4">
         <AppUnavailable className="h-auto w-auto" code={code || t('common.appUnavailable', { ns: 'share' })} unknownReason={message} />
-        <span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{code === '403' ? t('userProfile.logout', { ns: 'common' }) : t('login.backToHome', { ns: 'share' })}</span>
+        <span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{code === '403' ? t('userProfile.logout', { ns: 'common' }) : t('login.backToHome', { ns: 'share' })}</span>
       </div>
     )
   }

web/app/(shareLayout)/webapp-signin/page.tsx

@@ -63,7 +63,7 @@ const WebSSOForm: FC = () => {
   return (
     <div className="flex h-full flex-col items-center justify-center gap-y-4">
       <AppUnavailable className="h-auto w-auto" isUnknownReason={true} />
-      <span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
+      <span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
     </div>
   )
 }

web/app/components/app-sidebar/basic.tsx

@@ -76,8 +76,8 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
         )}
       {mode === 'expand' && (
         <div className="group w-full">
-          <div className={`flex flex-row items-center text-text-secondary system-md-semibold group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
+          <div className={`flex flex-row items-center system-md-semibold text-text-secondary group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
-            <div className="min-w-0 overflow-hidden text-ellipsis break-normal">
+            <div className="min-w-0 overflow-hidden break-normal text-ellipsis">
               {name}
             </div>
             {hoverTip
@@ -95,10 +95,10 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
               )}
           </div>
           {!hideType && isExtraInLine && (
-            <div className="flex text-text-tertiary system-2xs-medium-uppercase">{type}</div>
+            <div className="flex system-2xs-medium-uppercase text-text-tertiary">{type}</div>
           )}
           {!hideType && !isExtraInLine && (
-            <div className="text-text-tertiary system-2xs-medium-uppercase">{isExternal ? t('externalTag', { ns: 'dataset' }) : type}</div>
+            <div className="system-2xs-medium-uppercase text-text-tertiary">{isExternal ? t('externalTag', { ns: 'dataset' }) : type}</div>
           )}
         </div>
       )}

web/app/components/app-sidebar/dataset-info/menu-item.tsx

@@ -22,7 +22,7 @@ const MenuItem = ({
       }}
     >
       <Icon className="size-4 text-text-tertiary" />
-      <span className="px-1 text-text-secondary system-md-regular">{name}</span>
+      <span className="px-1 system-md-regular text-text-secondary">{name}</span>
     </div>
   )
 }

web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx

@@ -31,7 +31,7 @@ const EditItem: FC<Props> = ({
         {avatar}
       </div>
       <div className="grow">
-        <div className="system-xs-semibold mb-1 text-text-primary">{name}</div>
+        <div className="mb-1 system-xs-semibold text-text-primary">{name}</div>
         <Textarea
           value={content}
           onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}

web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx

@@ -38,30 +38,30 @@ const CSVDownload: FC = () => {
         <table className="w-full table-fixed border-separate border-spacing-0 rounded-lg border border-divider-regular text-xs">
           <thead className="text-text-tertiary">
             <tr>
-              <td className="h-9 border-b border-divider-regular pl-3 pr-2">{t('batchModal.question', { ns: 'appAnnotation' })}</td>
+              <td className="h-9 border-b border-divider-regular pr-2 pl-3">{t('batchModal.question', { ns: 'appAnnotation' })}</td>
-              <td className="h-9 border-b border-divider-regular pl-3 pr-2">{t('batchModal.answer', { ns: 'appAnnotation' })}</td>
+              <td className="h-9 border-b border-divider-regular pr-2 pl-3">{t('batchModal.answer', { ns: 'appAnnotation' })}</td>
             </tr>
           </thead>
           <tbody className="text-text-secondary">
             <tr>
-              <td className="h-9 border-b border-divider-subtle pl-3 pr-2 text-[13px]">
+              <td className="h-9 border-b border-divider-subtle pr-2 pl-3 text-[13px]">
                 {t('batchModal.question', { ns: 'appAnnotation' })}
                 {' '}
                 1
               </td>
-              <td className="h-9 border-b border-divider-subtle pl-3 pr-2 text-[13px]">
+              <td className="h-9 border-b border-divider-subtle pr-2 pl-3 text-[13px]">
                 {t('batchModal.answer', { ns: 'appAnnotation' })}
                 {' '}
                 1
               </td>
             </tr>
             <tr>
-              <td className="h-9 pl-3 pr-2 text-[13px]">
+              <td className="h-9 pr-2 pl-3 text-[13px]">
                 {t('batchModal.question', { ns: 'appAnnotation' })}
                 {' '}
                 2
               </td>
-              <td className="h-9 pl-3 pr-2 text-[13px]">
+              <td className="h-9 pr-2 pl-3 text-[13px]">
                 {t('batchModal.answer', { ns: 'appAnnotation' })}
                 {' '}
                 2
@@ -77,7 +77,7 @@ const CSVDownload: FC = () => {
         bom={true}
         data={getTemplate()}
       >
-        <div className="system-xs-medium flex h-[18px] items-center space-x-1 text-text-accent">
+        <div className="flex h-[18px] items-center space-x-1 system-xs-medium text-text-accent">
           <DownloadIcon className="mr-1 h-3 w-3" />
           {t('batchModal.template', { ns: 'appAnnotation' })}
         </div>

web/app/components/app/annotation/edit-annotation-modal/index.tsx

@@ -146,7 +146,7 @@ const EditAnnotationModal: FC<Props> = ({
         foot={(
           <div>
             {isAnnotationFull && (
-              <div className="mb-4 mt-6 px-6">
+              <div className="mt-6 mb-4 px-6">
                 <AnnotationFull />
               </div>
             )}
@@ -154,7 +154,7 @@ const EditAnnotationModal: FC<Props> = ({
             {
               annotationId
                 ? (
-                    <div className="system-sm-medium flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t border-divider-subtle bg-background-section-burn px-4 text-text-tertiary">
+                    <div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
                       <div
                         className="flex cursor-pointer items-center space-x-2 pl-3"
                         onClick={() => setShowModal(true)}

web/app/components/app/annotation/empty-element.tsx

@@ -19,9 +19,9 @@ const EmptyElement: FC = () => {
       <div className="box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4">
         <span className="system-md-semibold text-text-secondary">
           {t('noData.title', { ns: 'appAnnotation' })}
-          <ThreeDotsIcon className="relative -left-1.5 -top-3 inline" />
+          <ThreeDotsIcon className="relative -top-3 -left-1.5 inline" />
         </span>
-        <div className="system-sm-regular mt-2 text-text-tertiary">
+        <div className="mt-2 system-sm-regular text-text-tertiary">
           {t('noData.description', { ns: 'appAnnotation' })}
         </div>
       </div>

web/app/components/app/app-access-control/specific-groups-or-members.tsx

@@ -60,14 +60,14 @@ function RenderGroupsAndMembers() {
   const specificGroups = useAccessControlStore(s => s.specificGroups)
   const specificMembers = useAccessControlStore(s => s.specificMembers)
   if (specificGroups.length <= 0 && specificMembers.length <= 0)
-    return <div className="px-2 pb-1.5 pt-5"><p className="system-xs-regular text-center text-text-tertiary">{t('accessControlDialog.noGroupsOrMembers', { ns: 'app' })}</p></div>
+    return <div className="px-2 pt-5 pb-1.5"><p className="text-center system-xs-regular text-text-tertiary">{t('accessControlDialog.noGroupsOrMembers', { ns: 'app' })}</p></div>
   return (
     <>
-      <p className="system-2xs-medium-uppercase sticky top-0 text-text-tertiary">{t('accessControlDialog.groups', { ns: 'app', count: specificGroups.length ?? 0 })}</p>
+      <p className="sticky top-0 system-2xs-medium-uppercase text-text-tertiary">{t('accessControlDialog.groups', { ns: 'app', count: specificGroups.length ?? 0 })}</p>
       <div className="flex flex-row flex-wrap gap-1">
         {specificGroups.map((group, index) => <GroupItem key={index} group={group} />)}
       </div>
-      <p className="system-2xs-medium-uppercase sticky top-0 text-text-tertiary">{t('accessControlDialog.members', { ns: 'app', count: specificMembers.length ?? 0 })}</p>
+      <p className="sticky top-0 system-2xs-medium-uppercase text-text-tertiary">{t('accessControlDialog.members', { ns: 'app', count: specificMembers.length ?? 0 })}</p>
       <div className="flex flex-row flex-wrap gap-1">
         {specificMembers.map((member, index) => <MemberItem key={index} member={member} />)}
       </div>

web/app/components/app/configuration/base/group-name/index.tsx

@@ -11,7 +11,7 @@ const GroupName: FC<IGroupNameProps> = ({
 }) => {
   return (
     <div className="mb-1 flex items-center">
-      <div className="mr-3 text-xs font-semibold uppercase leading-[18px] text-text-tertiary">{name}</div>
+      <div className="mr-3 text-xs leading-[18px] font-semibold text-text-tertiary uppercase">{name}</div>
       <div
         className="h-px grow"
         style={{

web/app/components/app/configuration/base/warning-mask/index.tsx

@@ -25,7 +25,7 @@ const WarningMask: FC<IWarningMaskProps> = ({
     <div className={`${s.mask} absolute inset-0 z-10 bg-components-panel-bg-blur pt-16`}>
       <div className="mx-auto px-10">
         <div className={`${s.icon} flex h-11 w-11 items-center justify-center rounded-xl bg-components-panel-bg`}>{warningIcon}</div>
-        <div className="mt-4 text-[24px] font-semibold leading-normal text-text-primary">
+        <div className="mt-4 text-[24px] leading-normal font-semibold text-text-primary">
           {title}
         </div>
         <div className="mt-3 text-base text-text-secondary">

web/app/components/app/configuration/config-var/input-type-icon.tsx

@@ -11,7 +11,7 @@ export type IInputTypeIconProps = {
 }
 
 const IconMap = (type: IInputTypeIconProps['type'], className: string) => {
-  const classNames = `w-3.5 h-3.5 ${className}`
+  const classNames = `h-3.5 w-3.5 ${className}`
   const icons = {
     string: (
       <InputVarTypeIcon type={InputVarType.textInput} className={classNames} />

web/app/components/app/configuration/config-vision/param-config-content.tsx

@@ -42,11 +42,11 @@ const ParamConfigContent: FC = () => {
 
   return (
     <div>
-      <div className="text-base font-semibold leading-6 text-text-primary">{t('vision.visionSettings.title', { ns: 'appDebug' })}</div>
+      <div className="text-base leading-6 font-semibold text-text-primary">{t('vision.visionSettings.title', { ns: 'appDebug' })}</div>
       <div className="space-y-6 pt-3">
         <div>
-          <div className="mb-2 flex items-center  space-x-1">
+          <div className="mb-2 flex items-center space-x-1">
-            <div className="text-[13px] font-semibold leading-[18px] text-text-secondary">{t('vision.visionSettings.resolution', { ns: 'appDebug' })}</div>
+            <div className="text-[13px] leading-[18px] font-semibold text-text-secondary">{t('vision.visionSettings.resolution', { ns: 'appDebug' })}</div>
             <Tooltip
               popupContent={(
                 <div className="w-[180px]">
@@ -79,7 +79,7 @@ const ParamConfigContent: FC = () => {
           </div>
         </div>
         <div>
-          <div className="mb-2 text-[13px] font-semibold leading-[18px] text-text-secondary">{t('vision.visionSettings.uploadMethod', { ns: 'appDebug' })}</div>
+          <div className="mb-2 text-[13px] leading-[18px] font-semibold text-text-secondary">{t('vision.visionSettings.uploadMethod', { ns: 'appDebug' })}</div>
           <div className="flex items-center gap-1">
             <OptionCard
               className="grow"

web/app/components/app/configuration/config/automatic/res-placeholder.tsx

@@ -9,7 +9,7 @@ const ResPlaceholder: FC = () => {
   return (
     <div className="flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8">
       <Generator className="size-8 text-text-quaternary" />
-      <div className="text-center text-[13px] font-normal leading-5 text-text-tertiary">
+      <div className="text-center text-[13px] leading-5 font-normal text-text-tertiary">
         <div>{t('generate.newNoDataLine1', { ns: 'appDebug' })}</div>
       </div>
     </div>

web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx

@@ -36,7 +36,7 @@ const WeightedScore = ({
 
   return (
     <div>
-      <div className="space-x-3 rounded-lg border border-components-panel-border px-3 pb-2 pt-5">
+      <div className="space-x-3 rounded-lg border border-components-panel-border px-3 pt-5 pb-2">
         <div className="grow" style={weightedScoreSliderStyle}>
           <Slider
             className="grow"
@@ -50,13 +50,13 @@ const WeightedScore = ({
           />
         </div>
         <div className="mt-3 flex justify-between">
-          <div className="flex w-[90px] shrink-0 items-center text-util-colors-blue-light-blue-light-500 system-xs-semibold-uppercase">
+          <div className="flex w-[90px] shrink-0 items-center system-xs-semibold-uppercase text-util-colors-blue-light-blue-light-500">
             <div className="mr-1 truncate uppercase" title={t('weightedScore.semantic', { ns: 'dataset' }) || ''}>
               {t('weightedScore.semantic', { ns: 'dataset' })}
             </div>
             {formatNumber(value.value[0]!)}
           </div>
-          <div className="flex w-[90px] shrink-0 items-center justify-end text-util-colors-teal-teal-500 system-xs-semibold-uppercase">
+          <div className="flex w-[90px] shrink-0 items-center justify-end system-xs-semibold-uppercase text-util-colors-teal-teal-500">
             {formatNumber(value.value[1]!)}
             <div className="ml-1 truncate uppercase" title={t('weightedScore.keyword', { ns: 'dataset' }) || ''}>
               {t('weightedScore.keyword', { ns: 'dataset' })}

web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx

@@ -69,7 +69,7 @@ const DebugItem: FC<DebugItemProps> = ({
       style={style}
     >
       <div className="flex h-10 shrink-0 items-center justify-between border-b-[0.5px] border-divider-regular px-3">
-        <div className="flex h-5 w-6 items-center justify-center font-medium italic text-text-tertiary">
+        <div className="flex h-5 w-6 items-center justify-center font-medium text-text-tertiary italic">
           #
           {index + 1}
         </div>

web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx

@@ -122,7 +122,7 @@ const DebugWithMultipleModel = () => {
               key={modelConfig.id}
               modelAndParameter={modelConfig}
               className={`
-                absolute left-6 top-0 min-h-[200px]
+                absolute top-0 left-6 min-h-[200px]
                 ${twoLine && index === 0 && 'mr-2'}
                 ${threeLine && (index === 0 || index === 1) && 'mr-2'}
                 ${fourLine && (index === 0 || index === 2) && 'mr-2'}

web/app/components/app/log/empty-element.tsx

@@ -30,9 +30,9 @@ const EmptyElement: FC<{ appDetail: App }> = ({ appDetail }) => {
       <div className="box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4">
         <span className="system-md-semibold text-text-secondary">
           {t('table.empty.element.title', { ns: 'appLog' })}
-          <ThreeDotsIcon className="relative -left-1.5 -top-3 inline text-text-secondary" />
+          <ThreeDotsIcon className="relative -top-3 -left-1.5 inline text-text-secondary" />
         </span>
-        <div className="system-sm-regular mt-2 text-text-tertiary">
+        <div className="mt-2 system-sm-regular text-text-tertiary">
           <Trans
             i18nKey="table.empty.element.content"
             ns="appLog"

web/app/components/app/log/index.tsx

@@ -118,7 +118,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
 
   return (
     <div className="flex h-full grow flex-col">
-      <p className="system-sm-regular shrink-0 text-text-tertiary">{t('description', { ns: 'appLog' })}</p>
+      <p className="shrink-0 system-sm-regular text-text-tertiary">{t('description', { ns: 'appLog' })}</p>
       <div className="flex max-h-[calc(100%-16px)] flex-1 grow flex-col py-4">
         <Filter isChatMode={isChatMode} appId={appDetail.id} queryParams={queryParams} setQueryParams={handleQueryParamsChange} />
         {total === undefined

web/app/components/app/text-generate/item/result-tab.tsx

@@ -24,8 +24,8 @@ const ResultTab = ({
           {!!data?.files?.length && (
             <div className="flex flex-col gap-2">
               {data?.files.map((item: any) => (
-                <div key={item.varName} className="system-xs-regular flex flex-col gap-1">
+                <div key={item.varName} className="flex flex-col gap-1 system-xs-regular">
-                  <div className="py-1 text-text-tertiary ">{item.varName}</div>
+                  <div className="py-1 text-text-tertiary">{item.varName}</div>
                   <FileList
                     files={item.list}
                     showDeleteAction={false}

web/app/components/app/workflow-log/detail.tsx

@@ -27,11 +27,11 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose, canReplay = false }) => {
 
   return (
     <div className="relative flex grow flex-col pt-3">
-      <span className="absolute right-3 top-4 z-20 cursor-pointer p-1" onClick={onClose}>
+      <span className="absolute top-4 right-3 z-20 cursor-pointer p-1" onClick={onClose}>
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </span>
       <div className="flex items-center bg-components-panel-bg">
-        <h1 className="system-xl-semibold shrink-0 px-4 py-1 text-text-primary">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
+        <h1 className="shrink-0 px-4 py-1 system-xl-semibold text-text-primary">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
         {canReplay && (
           <TooltipPlus
             popupContent={t('runDetail.testWithParams', { ns: 'appLog' })}

web/app/components/apps/footer.tsx

@@ -29,8 +29,8 @@ const Footer = () => {
 
   return (
     <footer className="relative shrink-0 grow-0 px-12 py-2">
-      <h3 className="text-gradient text-xl font-semibold leading-tight">{t('join', { ns: 'app' })}</h3>
+      <h3 className="text-gradient text-xl leading-tight font-semibold">{t('join', { ns: 'app' })}</h3>
-      <p className="system-sm-regular mt-1 text-text-tertiary">{t('communityIntro', { ns: 'app' })}</p>
+      <p className="mt-1 system-sm-regular text-text-tertiary">{t('communityIntro', { ns: 'app' })}</p>
       <div className="mt-3 flex items-center gap-2">
         <CustomLink href="https://github.com/langgenius/dify">
           <RiGithubFill className="h-5 w-5 text-text-tertiary" />

web/app/components/apps/list.tsx

@@ -241,7 +241,7 @@ const List: FC<Props> = ({
     <>
       <div ref={containerRef} className="relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-background-body">
         {dragging && (
-          <div className="inset-0 absolute z-50 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent bg-[rgba(21,90,239,0.14)] p-2">
+          <div className="absolute inset-0 z-50 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent bg-[rgba(21,90,239,0.14)] p-2">
           </div>
         )}
 

web/app/components/base/agent-log-modal/result.tsx

@@ -66,7 +66,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
       </div>
       <div className="px-4 py-2">
         <div className="relative">
-          <div className="h-6 text-xs font-medium leading-6 text-text-tertiary">{t('meta.title', { ns: 'runLog' })}</div>
+          <div className="h-6 text-xs leading-6 font-medium text-text-tertiary">{t('meta.title', { ns: 'runLog' })}</div>
           <div className="py-1">
             <div className="flex">
               <div className="w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary">{t('meta.status', { ns: 'runLog' })}</div>

web/app/components/base/app-icon/index.stories.tsx

@@ -52,7 +52,7 @@ export const Sizes: Story = {
         {sizes.map(size => (
           <div key={size} className="flex flex-col items-center gap-2">
             <AppIcon {...args} size={size} icon="🚀" background="#E5DEFF" />
-            <span className="text-xs uppercase text-text-tertiary">{size}</span>
+            <span className="text-xs text-text-tertiary uppercase">{size}</span>
           </div>
         ))}
       </div>

web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx

@@ -39,11 +39,11 @@ const MobileOperationDropdown = ({
         <div
           className="min-w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs"
         >
-          <div className="flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover" onClick={handleResetChat}>
+          <div className="flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover" onClick={handleResetChat}>
             <span className="grow">{t('chat.resetChat', { ns: 'share' })}</span>
           </div>
           {!hideViewChatSettings && (
-            <div className="flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover" onClick={handleViewChatSettings}>
+            <div className="flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover" onClick={handleViewChatSettings}>
               <span className="grow">{t('chat.viewChatSettings', { ns: 'share' })}</span>
             </div>
           )}

web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx

@@ -33,7 +33,7 @@ const ViewFormDropdown = () => {
         <div className="w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-xs">
           <div className="flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-6 py-4">
             <Message3Fill className="h-6 w-6 shrink-0" />
-            <div className="system-xl-semibold grow text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
+            <div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
           </div>
           <div className="p-6">
             <InputsFormContent />

web/app/components/base/chat/chat-with-history/sidebar/list.tsx

@@ -21,7 +21,7 @@ const List: FC<ListProps> = ({
   return (
     <div className="space-y-0.5">
       {title && (
-        <div className="system-xs-medium-uppercase px-3 pb-1 pt-2 text-text-tertiary">{title}</div>
+        <div className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{title}</div>
       )}
       {list.map(item => (
         <Item

web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx

@@ -12,13 +12,13 @@ const ExecutedAction = ({
 }: ExecutedActionProps) => {
   return (
     <div className="flex flex-col gap-y-1 py-1" data-testid="executed-action">
-      <Divider className="mb-2 mt-1 w-[30px]" />
+      <Divider className="mt-1 mb-2 w-[30px]" />
-      <div className="flex items-center gap-x-1 text-text-tertiary system-xs-regular">
+      <div className="flex items-center gap-x-1 system-xs-regular text-text-tertiary">
         <div className="i-custom-vender-workflow-trigger-all size-3.5 shrink-0" />
         <Trans
           i18nKey="nodes.humanInput.userActions.triggered"
           ns="workflow"
-          components={{ strong: <span className="text-text-secondary system-xs-medium"></span> }}
+          components={{ strong: <span className="system-xs-medium text-text-secondary"></span> }}
           values={{ actionName: executedAction.id }}
         />
       </div>

web/app/components/base/chat/chat/answer/human-input-content/tips.tsx

@@ -22,10 +22,10 @@ const Tips = ({
       <Divider className="my-2! w-[30px]" />
       <div className="space-y-1 pt-1" data-testid="tips">
         {showEmailTip && !isEmailDebugMode && (
-          <div className="text-text-secondary system-xs-regular">{t('common.humanInputEmailTip', { ns: 'workflow' })}</div>
+          <div className="system-xs-regular text-text-secondary">{t('common.humanInputEmailTip', { ns: 'workflow' })}</div>
         )}
         {showEmailTip && isEmailDebugMode && (
-          <div className="text-text-secondary system-xs-regular">
+          <div className="system-xs-regular text-text-secondary">
             <Trans
               i18nKey="common.humanInputEmailTipInDebugMode"
               ns="workflow"
@@ -34,7 +34,7 @@ const Tips = ({
             />
           </div>
         )}
-        {showDebugModeTip && <div className="text-text-warning system-xs-medium">{t('common.humanInputWebappTip', { ns: 'workflow' })}</div>}
+        {showDebugModeTip && <div className="system-xs-medium text-text-warning">{t('common.humanInputWebappTip', { ns: 'workflow' })}</div>}
       </div>
     </>
   )

web/app/components/base/chat/chat/answer/more.tsx

@@ -14,7 +14,7 @@ const More: FC<MoreProps> = ({
 
   return (
     <div
-      className="mt-1 flex items-center text-text-quaternary opacity-0 system-xs-regular group-hover:opacity-100"
+      className="mt-1 flex items-center system-xs-regular text-text-quaternary opacity-0 group-hover:opacity-100"
       data-testid="more-container"
     >
       {

web/app/components/base/chat/chat/citation/index.tsx

@@ -74,8 +74,8 @@ const Citation: FC<CitationProps> = ({
   const resourcesLength = resources.length
 
   return (
-    <div className="-mb-1 mt-3">
+    <div className="mt-3 -mb-1">
-      <div data-testid="citation-title" className="mb-2 flex items-center text-text-tertiary system-xs-medium">
+      <div data-testid="citation-title" className="mb-2 flex items-center system-xs-medium text-text-tertiary">
         {t('chat.citation.title', { ns: 'common' })}
         <div className="ml-2 h-px grow bg-divider-regular" />
       </div>
@@ -85,7 +85,7 @@ const Citation: FC<CitationProps> = ({
             <div
               key={res.documentId}
               data-testid="citation-measurement-item"
-              className="absolute left-0 top-0 -z-10 mb-1 mr-1 h-7 w-auto max-w-[240px] whitespace-nowrap pl-7 pr-2 text-xs opacity-0"
+              className="absolute top-0 left-0 -z-10 mr-1 mb-1 h-7 w-auto max-w-[240px] pr-2 pl-7 text-xs whitespace-nowrap opacity-0"
               ref={(ele: HTMLDivElement | null) => { elesRef.current[index] = ele! }}
             >
               {res.documentName}
@@ -94,7 +94,7 @@ const Citation: FC<CitationProps> = ({
         }
         {
           resources.slice(0, showMore ? resourcesLength : limitNumberInOneLine).map(res => (
-            <div key={res.documentId} className="mb-1 mr-1 cursor-pointer">
+            <div key={res.documentId} className="mr-1 mb-1 cursor-pointer">
               <Popup
                 data={res}
                 showHitInfo={showHitInfo}
@@ -106,7 +106,7 @@ const Citation: FC<CitationProps> = ({
           limitNumberInOneLine < resourcesLength && (
             <div
               data-testid="citation-more-toggle"
-              className="flex h-7 cursor-pointer items-center rounded-lg bg-components-panel-bg px-2 text-text-tertiary system-xs-medium"
+              className="flex h-7 cursor-pointer items-center rounded-lg bg-components-panel-bg px-2 system-xs-medium text-text-tertiary"
               onClick={() => setShowMore(v => !v)}
             >
               {

web/app/components/base/chat/chat/citation/popup.tsx

@@ -64,10 +64,10 @@ const Popup: FC<PopupProps> = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1000 }}>
         <div data-testid="popup-content" className="max-w-[360px] rounded-xl bg-background-section-burn shadow-lg backdrop-blur-[5px]">
-          <div className="px-4 pb-2 pt-3">
+          <div className="px-4 pt-3 pb-2">
             <div className="flex h-[18px] items-center">
               <FileIcon type={fileType} className="mr-1 h-4 w-4 shrink-0" />
-              <div className="truncate text-text-tertiary system-xs-medium">
+              <div className="truncate system-xs-medium text-text-tertiary">
                 {(data.dataSourceType === 'upload_file' || data.dataSourceType === 'file') && !!data.sources?.[0]?.dataset_id
                   ? (
                       <button
@@ -98,7 +98,7 @@ const Popup: FC<PopupProps> = ({
                         <div className="mb-2 flex items-center justify-between">
                           <div className="flex h-5 items-center rounded-md border border-divider-subtle px-1.5">
                             {/* replaced svg component with tailwind icon class per lint rule */}
-                            <i className="i-custom-vender-line-general-hash-02 mr-0.5 h-3 w-3 text-text-quaternary" aria-hidden />
+                            <i className="mr-0.5 i-custom-vender-line-general-hash-02 h-3 w-3 text-text-quaternary" aria-hidden />
                             <div data-testid="popup-segment-position" className="text-[11px] font-medium text-text-tertiary">
                               {source.segment_position || index + 1}
                             </div>
@@ -111,29 +111,29 @@ const Popup: FC<PopupProps> = ({
                                 className="hidden h-[18px] items-center text-xs text-text-accent group-hover:flex"
                               >
                                 {t('chat.citation.linkToDataset', { ns: 'common' })}
-                                <i className="i-custom-vender-line-arrows-arrow-up-right ml-1 h-3 w-3" aria-hidden />
+                                <i className="ml-1 i-custom-vender-line-arrows-arrow-up-right h-3 w-3" aria-hidden />
                               </Link>
                             )
                           }
                         </div>
-                        <div data-testid="popup-source-content" className="wrap-break-word text-[13px] text-text-secondary">{source.content}</div>
+                        <div data-testid="popup-source-content" className="text-[13px] wrap-break-word text-text-secondary">{source.content}</div>
                         {
                           showHitInfo && (
-                            <div data-testid="popup-hit-info" className="mt-2 flex flex-wrap items-center text-text-quaternary system-xs-medium">
+                            <div data-testid="popup-hit-info" className="mt-2 flex flex-wrap items-center system-xs-medium text-text-quaternary">
                               <Tooltip
                                 text={t('chat.citation.characters', { ns: 'common' })}
                                 data={source.word_count}
-                                icon={<i className="i-custom-vender-line-editor-type-square mr-1 h-3 w-3" aria-hidden />}
+                                icon={<i className="mr-1 i-custom-vender-line-editor-type-square h-3 w-3" aria-hidden />}
                               />
                               <Tooltip
                                 text={t('chat.citation.hitCount', { ns: 'common' })}
                                 data={source.hit_count}
-                                icon={<i className="i-custom-vender-line-general-target-04 mr-1 h-3 w-3" aria-hidden />}
+                                icon={<i className="mr-1 i-custom-vender-line-general-target-04 h-3 w-3" aria-hidden />}
                               />
                               <Tooltip
                                 text={t('chat.citation.vectorHash', { ns: 'common' })}
                                 data={source.index_node_hash?.substring(0, 7)}
-                                icon={<i className="i-custom-vender-line-editor-bezier-curve-03 mr-1 h-3 w-3" aria-hidden />}
+                                icon={<i className="mr-1 i-custom-vender-line-editor-bezier-curve-03 h-3 w-3" aria-hidden />}
                               />
                               {
                                 !!source.score && (

web/app/components/base/chat/chat/citation/progress-tooltip.tsx

@@ -40,7 +40,7 @@ const ProgressTooltip: FC<ProgressTooltipProps> = ({
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1001 }}>
-        <div data-testid="progress-tooltip-popup" className="rounded-lg bg-components-tooltip-bg p-3 text-text-quaternary shadow-lg system-xs-medium">
+        <div data-testid="progress-tooltip-popup" className="rounded-lg bg-components-tooltip-bg p-3 system-xs-medium text-text-quaternary shadow-lg">
           {t('chat.citation.hitScore', { ns: 'common' })}
           {' '}
           {data}

web/app/components/base/chat/chat/citation/tooltip.tsx

@@ -36,7 +36,7 @@ const Tooltip: FC<TooltipProps> = ({
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1001 }}>
-        <div data-testid="tooltip-popup" className="rounded-lg bg-components-tooltip-bg p-3 text-text-quaternary shadow-lg system-xs-medium">
+        <div data-testid="tooltip-popup" className="rounded-lg bg-components-tooltip-bg p-3 system-xs-medium text-text-quaternary shadow-lg">
           {text}
           {' '}
           {data}

web/app/components/base/content-dialog/index.tsx

@@ -19,7 +19,7 @@ const ContentDialog = ({
     <Transition
       show={show}
       as="div"
-      className="absolute left-0 top-0 z-[70] box-border h-full w-full p-2"
+      className="absolute top-0 left-0 z-[70] box-border h-full w-full p-2"
     >
       <TransitionChild>
         <div

web/app/components/base/copy-icon/index.tsx

@@ -30,8 +30,8 @@ const CopyIcon = ({ content }: Props) => {
     >
       <div onMouseLeave={reset}>
         {!copied
-          ? (<span className="i-custom-vender-line-files-copy mx-1 h-3.5 w-3.5 cursor-pointer text-text-tertiary" onClick={handleCopy} data-testid="copy-icon" />)
+          ? (<span className="mx-1 i-custom-vender-line-files-copy h-3.5 w-3.5 cursor-pointer text-text-tertiary" onClick={handleCopy} data-testid="copy-icon" />)
-          : (<span className="i-custom-vender-line-files-copy-check mx-1 h-3.5 w-3.5 text-text-tertiary" data-testid="copied-icon" />)}
+          : (<span className="mx-1 i-custom-vender-line-files-copy-check h-3.5 w-3.5 text-text-tertiary" data-testid="copied-icon" />)}
       </div>
     </Tooltip>
   )

web/app/components/base/corner-label/index.stories.tsx

@@ -31,7 +31,7 @@ export const Default: Story = {}
 export const OnCard: Story = {
   render: args => (
     <div className="relative w-80 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <CornerLabel {...args} className="absolute -right-px -top-px" />
+      <CornerLabel {...args} className="absolute -top-px -right-px" />
       <div className="text-sm text-text-secondary">
         Showcase how the label sits on a card header. Pair with contextual text or status information.
       </div>

web/app/components/base/date-and-time-picker/calendar/days-of-week.tsx

@@ -9,7 +9,7 @@ export const DaysOfWeek = () => {
       {daysOfWeek.map(day => (
         <div
           key={day}
-          className="system-2xs-medium flex items-center justify-center text-text-tertiary"
+          className="flex items-center justify-center system-2xs-medium text-text-tertiary"
         >
           {day}
         </div>

web/app/components/base/date-and-time-picker/date-picker/header.tsx

@@ -18,7 +18,7 @@ const Header: FC<DatePickerHeaderProps> = ({
         <button
           type="button"
           onClick={handleOpenYearMonthPicker}
-          className="system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover"
+          className="flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 system-md-semibold text-text-primary hover:bg-state-base-hover"
         >
           <span>{`${months[currentDate.month()]} ${currentDate.year()}`}</span>
           <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />

web/app/components/base/date-and-time-picker/time-picker/header.tsx

@@ -11,7 +11,7 @@ const Header = ({
 
   return (
     <div className="flex flex-col border-b-[0.5px] border-divider-regular">
-      <div className="system-md-semibold flex items-center px-2 py-1.5 text-text-primary">
+      <div className="flex items-center px-2 py-1.5 system-md-semibold text-text-primary">
         {title || t('title.pickTime', { ns: 'time' })}
       </div>
     </div>

web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx

@@ -17,7 +17,7 @@ const Header: FC<YearAndMonthPickerHeaderProps> = ({
       <button
         type="button"
         onClick={onClick}
-        className="system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover"
+        className="flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 system-md-semibold text-text-primary hover:bg-state-base-hover"
       >
         <span>{`${months[selectedMonth]} ${selectedYear}`}</span>
         <RiArrowUpSLine className="h-4 w-4 text-text-tertiary" />

web/app/components/base/effect/index.stories.tsx

@@ -28,8 +28,8 @@ type Story = StoryObj<typeof meta>
 export const Playground: Story = {
   render: () => (
     <div className="relative h-40 w-72 overflow-hidden rounded-2xl border border-divider-subtle bg-background-default-subtle">
-      <Effect className="left-8 top-6" />
+      <Effect className="top-6 left-8" />
-      <Effect className="bg-util-colors-purple-brand-purple-brand-500 right-10 top-14" />
+      <Effect className="bg-util-colors-purple-brand-purple-brand-500 top-14 right-10" />
       <div className="absolute inset-x-0 bottom-4 flex justify-center text-xs text-text-secondary">
         Accent glow
       </div>

web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx

@@ -11,10 +11,10 @@ export const Item: FC<{ title: string, tooltip: string, children: React.JSX.Elem
   return (
     <div>
       <div className="mb-1 flex items-center space-x-1">
-        <div className="py-1 text-text-secondary system-sm-semibold">{title}</div>
+        <div className="py-1 system-sm-semibold text-text-secondary">{title}</div>
         <Tooltip
           popupContent={
-            <div className="max-w-[200px] text-text-secondary system-sm-regular">{tooltip}</div>
+            <div className="max-w-[200px] system-sm-regular text-text-secondary">{tooltip}</div>
           }
         />
       </div>

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx

@@ -38,7 +38,7 @@ const ScoreSlider: FC<Props> = ({
           aria-label={t('feature.annotation.scoreThreshold.title', { ns: 'appDebug' })}
         />
         <div
-          className="pointer-events-none absolute top-[-16px] text-text-primary system-sm-semibold"
+          className="pointer-events-none absolute top-[-16px] system-sm-semibold text-text-primary"
           style={{
             left: `calc(4px + ${(safeValue - 80) / 20} * (100% - 8px))`,
             transform: 'translateX(-50%)',

web/app/components/base/features/new-feature-panel/index.tsx

@@ -66,12 +66,12 @@ const NewFeaturePanel = ({
         <div className="grow basis-0 overflow-y-auto px-4 pb-4">
           {showFileUpload && (
             <div className="relative mb-1 rounded-xl border border-components-panel-border p-2 shadow-xs">
-              <div className="absolute left-0 top-0 h-full w-full rounded-xl opacity-40" style={{ background: 'linear-gradient(92deg, rgba(11, 165, 236, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
+              <div className="absolute top-0 left-0 h-full w-full rounded-xl opacity-40" style={{ background: 'linear-gradient(92deg, rgba(11, 165, 236, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
               <div className="relative flex h-full w-full items-start">
                 <div className="mr-0.5 shrink-0 p-0.5">
                   <RiInformation2Fill className="h-5 w-5 text-text-accent" />
                 </div>
-                <div className="system-xs-medium p-1 text-text-primary">
+                <div className="p-1 system-xs-medium text-text-primary">
                   <span>{isChatMode ? t('common.fileUploadTip', { ns: 'workflow' }) : t('common.ImageUploadLegacyTip', { ns: 'workflow' })}</span>
                 </div>
               </div>

web/app/components/base/file-icon/index.stories.tsx

@@ -61,7 +61,7 @@ export const Gallery: Story = {
         {examples.map(type => (
           <div key={type} className="flex flex-col items-center gap-1">
             <FileIcon type={type} className="h-9 w-9" />
-            <span className="text-xs uppercase text-text-tertiary">{type}</span>
+            <span className="text-xs text-text-tertiary uppercase">{type}</span>
           </div>
         ))}
       </div>

web/app/components/base/file-uploader/audio-preview.tsx

@@ -32,7 +32,7 @@ const AudioPreview: FC<AudioPreviewProps> = ({
         </audio>
       </div>
       <div
-        className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
+        className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
         onClick={onCancel}
       >
         <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="close-btn" />

web/app/components/base/file-uploader/pdf-preview.tsx

@@ -78,7 +78,7 @@ const PdfPreview: FC<PdfPreviewProps> = ({
       </div>
       <Tooltip popupContent={t('operation.zoomOut', { ns: 'common' })}>
         <div
-          className="absolute right-24 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+          className="absolute top-6 right-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
           onClick={zoomOut}
         >
           <RiZoomOutLine className="h-4 w-4 text-gray-500" />
@@ -86,7 +86,7 @@ const PdfPreview: FC<PdfPreviewProps> = ({
       </Tooltip>
       <Tooltip popupContent={t('operation.zoomIn', { ns: 'common' })}>
         <div
-          className="absolute right-16 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+          className="absolute top-6 right-16 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
           onClick={zoomIn}
         >
           <RiZoomInLine className="h-4 w-4 text-gray-500" />
@@ -94,7 +94,7 @@ const PdfPreview: FC<PdfPreviewProps> = ({
       </Tooltip>
       <Tooltip popupContent={t('operation.cancel', { ns: 'common' })}>
         <div
-          className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
           onClick={onCancel}
         >
           <RiCloseLine className="h-4 w-4 text-gray-500" />

web/app/components/base/file-uploader/video-preview.tsx

@@ -31,7 +31,7 @@ const VideoPreview: FC<VideoPreviewProps> = ({
         </video>
       </div>
       <div
-        className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
+        className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
         onClick={onCancel}
       >
         <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="video-preview-close-btn" />

web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx

@@ -25,9 +25,9 @@ const Placeholder = () => {
     >
       <div className="flex grow items-center">
         Type or press
-        <div className="system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded-sm bg-components-kbd-bg-gray text-text-placeholder">/</div>
+        <div className="mx-0.5 flex h-4 w-4 items-center justify-center rounded-sm bg-components-kbd-bg-gray system-kbd text-text-placeholder">/</div>
         <div
-          className="system-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
+          className="cursor-pointer system-sm-regular text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
           onClick={((e) => {
             e.stopPropagation()
             handleInsert('/')

web/app/components/base/grid-mask/index.stories.tsx

@@ -18,8 +18,8 @@ const meta = {
     gradientClassName: '',
     children: (
       <div className="relative z-10 flex flex-col gap-3 text-left text-white">
-        <span className="text-xs uppercase tracking-[0.16em] text-white/70">Grid Mask Demo</span>
+        <span className="text-xs tracking-[0.16em] text-white/70 uppercase">Grid Mask Demo</span>
-        <span className="text-2xl font-semibold leading-tight">Beautiful backgrounds for feature highlights</span>
+        <span className="text-2xl leading-tight font-semibold">Beautiful backgrounds for feature highlights</span>
         <p className="max-w-md text-sm text-white/80">
           Place any content inside the mask. On dark backgrounds the grid and soft gradient add depth without distracting from the main message.
         </p>
@@ -41,7 +41,7 @@ export const CustomBackground: Story = {
     children: (
       <div className="flex flex-col gap-2 text-white">
         <span className="text-sm font-medium text-white/80">Custom gradient</span>
-        <span className="text-3xl font-semibold leading-tight">Use your own colors</span>
+        <span className="text-3xl leading-tight font-semibold">Use your own colors</span>
         <p className="max-w-md text-sm text-white/70">
           Override gradient and canvas classes to match brand palettes while keeping the grid texture.
         </p>

web/app/components/base/image-uploader/audio-preview.tsx

@@ -23,7 +23,7 @@ const AudioPreview: FC<AudioPreviewProps> = ({
         </audio>
       </div>
       <div
-        className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
+        className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
         onClick={onCancel}
         data-testid="close-preview"
       >

web/app/components/base/image-uploader/image-list.stories.tsx

@@ -132,7 +132,7 @@ const ImageUploaderPlayground = ({ readonly }: Story['args']) => {
   return (
     <div className="flex w-[360px] flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-4">
       <div className="flex flex-col gap-2">
-        <span className="text-xs font-medium uppercase tracking-[0.18em] text-text-tertiary">Add images</span>
+        <span className="text-xs font-medium tracking-[0.18em] text-text-tertiary uppercase">Add images</span>
         <div className="flex items-center gap-2">
           <ImageLinkInput onUpload={handleUploadFromLink} disabled={readonly} />
           <button
@@ -156,7 +156,7 @@ const ImageUploaderPlayground = ({ readonly }: Story['args']) => {
       />
 
       <div className="rounded-lg border border-divider-subtle bg-background-default p-2">
-        <span className="mb-1 block text-[11px] font-semibold uppercase tracking-widest text-text-tertiary">
+        <span className="mb-1 block text-[11px] font-semibold tracking-widest text-text-tertiary uppercase">
           Files state
         </span>
         <pre className="max-h-40 overflow-auto text-[11px] leading-relaxed text-text-tertiary">

web/app/components/base/image-uploader/image-preview.tsx

@@ -200,7 +200,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       />
       <Tooltip popupContent={t('operation.copyImage', { ns: 'common' })}>
         <div
-          className="absolute right-48 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+          className="absolute top-6 right-48 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
           onClick={imageCopy}
         >
           {isCopied
@@ -210,7 +210,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       </Tooltip>
       <Tooltip popupContent={t('operation.zoomOut', { ns: 'common' })}>
         <div
-          className="absolute right-40 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+          className="absolute top-6 right-40 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
           onClick={zoomOut}
         >
           <span className="i-ri-zoom-out-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-out-button" />
@@ -218,7 +218,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       </Tooltip>
       <Tooltip popupContent={t('operation.zoomIn', { ns: 'common' })}>
         <div
-          className="absolute right-32 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+          className="absolute top-6 right-32 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
           onClick={zoomIn}
         >
           <span className="i-ri-zoom-in-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-in-button" />
@@ -226,7 +226,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       </Tooltip>
       <Tooltip popupContent={t('operation.download', { ns: 'common' })}>
         <div
-          className="absolute right-24 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+          className="absolute top-6 right-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
           onClick={downloadImage}
         >
           <span className="i-ri-download-cloud-2-line h-4 w-4 text-gray-500" data-testid="image-preview-download-button" />
@@ -234,7 +234,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       </Tooltip>
       <Tooltip popupContent={t('operation.openInNewTab', { ns: 'common' })}>
         <div
-          className="absolute right-16 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+          className="absolute top-6 right-16 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
           onClick={openInNewTab}
         >
           <span className="i-ri-add-box-line h-4 w-4 text-gray-500" data-testid="image-preview-open-in-tab-button" />
@@ -242,7 +242,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       </Tooltip>
       <Tooltip popupContent={t('operation.cancel', { ns: 'common' })}>
         <div
-          className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
           onClick={onCancel}
         >
           <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="image-preview-close-button" />

web/app/components/base/image-uploader/video-preview.tsx

@@ -23,7 +23,7 @@ const VideoPreview: FC<VideoPreviewProps> = ({
         </video>
       </div>
       <div
-        className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
+        className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
         onClick={onCancel}
       >
         <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="close-button" />

web/app/components/base/loading/index.stories.tsx

@@ -33,7 +33,7 @@ const LoadingPreview = ({ type }: { type: 'area' | 'app' }) => {
 
   return (
     <div className="flex flex-col items-center gap-4">
-      <span className="text-xs uppercase tracking-[0.18em] text-text-tertiary">{title}</span>
+      <span className="text-xs tracking-[0.18em] text-text-tertiary uppercase">{title}</span>
       <div
         className={`flex w-64 items-center justify-center rounded-xl border border-divider-subtle bg-background-default-subtle ${containerHeight}`}
       >

web/app/components/base/logo/index.stories.tsx

@@ -55,7 +55,7 @@ export const Playground: Story = {
       <ThemePreview theme="dark">
         <div className="flex flex-col gap-6">
           <div className="flex flex-col gap-2">
-            <span className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Primary logo</span>
+            <span className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Primary logo</span>
             <div className="flex items-center justify-between rounded-xl border border-divider-subtle bg-background-default p-4">
               <DifyLogo size={size} style={style} />
               <code className="text-[11px] text-text-tertiary">{`size="${size}" | style="${style}"`}</code>
@@ -63,15 +63,15 @@ export const Playground: Story = {
           </div>
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="flex flex-col gap-2 rounded-xl border border-divider-subtle bg-background-default p-4">
-              <span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary">Site favicon</span>
+              <span className="text-[11px] font-medium tracking-widest text-text-tertiary uppercase">Site favicon</span>
               <LogoSite />
             </div>
             <div className="flex flex-col gap-2 rounded-xl border border-divider-subtle bg-background-default p-4">
-              <span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary">Embedded header</span>
+              <span className="text-[11px] font-medium tracking-widest text-text-tertiary uppercase">Embedded header</span>
               <LogoEmbeddedChatHeader />
             </div>
             <div className="flex flex-col gap-2 rounded-xl border border-divider-subtle bg-background-default p-4 sm:col-span-2">
-              <span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary">Embedded avatar</span>
+              <span className="text-[11px] font-medium tracking-widest text-text-tertiary uppercase">Embedded avatar</span>
               <LogoEmbeddedChatAvatar className="border-divider-strong rounded-2xl border" />
             </div>
           </div>

web/app/components/base/markdown-blocks/code-block.stories.tsx

@@ -14,7 +14,7 @@ const CodeBlockDemo = ({
 }) => {
   return (
     <div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Code block</div>
+      <div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Code block</div>
       <CodeBlock
         className={`language-${language}`}
       >

web/app/components/base/markdown-blocks/think-block.stories.tsx

@@ -32,7 +32,7 @@ const ThinkBlockDemo = ({
       onFeedback={undefined}
     >
       <div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-        <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+        <div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
           <span>Think block</span>
           <button
             type="button"
@@ -43,7 +43,7 @@ const ThinkBlockDemo = ({
           </button>
         </div>
         <ThinkBlock data-think>
-          <pre className="whitespace-pre-wrap text-sm text-text-secondary">
+          <pre className="text-sm whitespace-pre-wrap text-text-secondary">
             {THOUGHT_TEXT}
           </pre>
         </ThinkBlock>

web/app/components/base/markdown/index.stories.tsx

@@ -47,7 +47,7 @@ const MarkdownDemo = ({
 
   return (
     <div className="flex w-full max-w-3xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Markdown renderer</div>
+      <div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Markdown renderer</div>
       <Markdown
         content={content}
         className={compact ? 'text-sm! leading-relaxed' : ''}

web/app/components/base/mermaid/index.stories.tsx

@@ -20,7 +20,7 @@ const MermaidDemo = ({
 
   return (
     <div className="flex w-full max-w-3xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+      <div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
         <span>Mermaid diagram</span>
         <button
           type="button"

web/app/components/base/modal-like-wrap/index.stories.tsx

@@ -81,10 +81,10 @@ export const WithBackLink: Story = {
       hideCloseBtn
       beforeHeader={(
         <button
-          className="mb-1 flex items-center gap-1 text-xs font-medium uppercase text-text-accent"
+          className="mb-1 flex items-center gap-1 text-xs font-medium text-text-accent uppercase"
           onClick={() => console.log('back')}
         >
-          <span className="bg-text-accent/10 inline-block h-4 w-4 rounded-sm text-center text-[10px] leading-4 text-text-accent">{'<'}</span>
+          <span className="inline-block h-4 w-4 rounded-sm bg-text-accent/10 text-center text-[10px] leading-4 text-text-accent">{'<'}</span>
           Back
         </button>
       )}

web/app/components/base/notion-page-selector/credential-selector/index.tsx

@@ -66,7 +66,7 @@ const CredentialSelector = ({
               leaveTo="transform opacity-0 scale-95"
             >
               <MenuItems
-                className="absolute left-0 top-8 z-10 w-80
+                className="absolute top-8 left-0 z-10 w-80
                   origin-top-right rounded-lg border-[0.5px]
                   border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5"
               >
@@ -88,7 +88,7 @@ const CredentialSelector = ({
                               size={20}
                             />
                             <div
-                              className="mr-2 grow truncate text-text-secondary system-sm-medium"
+                              className="mr-2 grow truncate system-sm-medium text-text-secondary"
                               title={displayName}
                             >
                               {displayName}

web/app/components/base/notion-page-selector/index.stories.tsx

@@ -168,7 +168,7 @@ const NotionSelectorPreview = () => {
         canPreview
       />
       <div className="rounded-xl border border-divider-subtle bg-background-default-subtle p-4 text-xs text-text-secondary">
-        <div className="mb-2 font-semibold uppercase tracking-[0.18em] text-text-tertiary">
+        <div className="mb-2 font-semibold tracking-[0.18em] text-text-tertiary uppercase">
           Debug state
         </div>
         <p className="mb-1">

web/app/components/base/pagination/index.stories.tsx

@@ -22,7 +22,7 @@ const PaginationDemo = ({
 
   return (
     <div className="flex w-full max-w-3xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+      <div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
         <span>Log pagination</span>
         <span className="rounded-md border border-divider-subtle bg-background-default px-2 py-1 font-medium text-text-secondary">
           {pageSummary}

web/app/components/base/param-item/index.stories.tsx

@@ -74,7 +74,7 @@ const ParamItemPlayground = () => {
 
   return (
     <div className="flex w-full max-w-2xl flex-col gap-5 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+      <div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
         <span>Generation parameters</span>
         <code className="rounded-md border border-divider-subtle bg-background-default px-2 py-1 text-[11px] text-text-tertiary">
           {JSON.stringify(state, null, 0)}

web/app/components/base/portal-to-follow-elem/index.stories.tsx

@@ -8,7 +8,7 @@ import {
 
 const TooltipCard = ({ title, description }: { title: string, description: string }) => (
   <div className="w-[220px] rounded-lg border border-divider-subtle bg-components-panel-bg px-3 py-2 text-sm text-text-secondary shadow-lg">
-    <div className="mb-1 text-xs font-semibold uppercase tracking-[0.14em] text-text-tertiary">
+    <div className="mb-1 text-xs font-semibold tracking-[0.14em] text-text-tertiary uppercase">
       {title}
     </div>
     <p className="leading-5">{description}</p>

web/app/components/base/premium-badge/index.stories.tsx

@@ -12,14 +12,14 @@ const PremiumBadgeGallery = ({
 }) => {
   return (
     <div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Brand badge variants</p>
+      <p className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Brand badge variants</p>
       <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
         {colors.map(color => (
           <div key={color} className="flex flex-col items-center gap-2 rounded-xl border border-transparent px-2 py-4 hover:border-divider-subtle hover:bg-background-default-subtle">
             <PremiumBadge color={color} size={size} allowHover={allowHover}>
-              <span className="px-2 text-xs font-semibold uppercase tracking-[0.14em]">Premium</span>
+              <span className="px-2 text-xs font-semibold tracking-[0.14em] uppercase">Premium</span>
             </PremiumBadge>
-            <span className="text-[11px] uppercase tracking-[0.16em] text-text-tertiary">{color}</span>
+            <span className="text-[11px] tracking-[0.16em] text-text-tertiary uppercase">{color}</span>
           </div>
         ))}
       </div>

web/app/components/base/progress-bar/progress-circle.stories.tsx

@@ -13,7 +13,7 @@ const ProgressCircleDemo = ({
 
   return (
     <div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+      <div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
         <span>Upload progress</span>
         <span className="rounded-md border border-divider-subtle bg-background-default px-2 py-1 text-[11px] text-text-secondary">
           {percentage}

web/app/components/base/prompt-editor/index.stories.tsx

@@ -86,7 +86,7 @@ const PromptEditorDemo = (args: any) => {
       {value && (
         <div className="mt-4 rounded-lg bg-gray-50 p-3">
           <div className="mb-2 text-xs font-medium text-gray-600">Current Value:</div>
-          <div className="whitespace-pre-wrap font-mono text-sm text-gray-800">
+          <div className="font-mono text-sm whitespace-pre-wrap text-gray-800">
             {value}
           </div>
         </div>
@@ -204,7 +204,7 @@ const MultipleEditorsDemo = () => {
       {(systemPrompt || userPrompt) && (
         <div className="rounded-lg bg-gray-50 p-4">
           <div className="mb-2 text-xs font-medium text-gray-600">Combined Output:</div>
-          <div className="whitespace-pre-wrap text-sm text-gray-800">
+          <div className="text-sm whitespace-pre-wrap text-gray-800">
             {systemPrompt && (
               <>
                 <strong>System:</strong>

web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx

@@ -23,7 +23,7 @@ export const PromptMenuItem = memo(({
       className={`
         flex h-6 cursor-pointer items-center rounded-md px-3 hover:bg-state-base-hover
         ${isSelected && !disabled && 'bg-state-base-hover!'}
-        ${disabled ? 'cursor-not-allowed opacity-30' : 'cursor-pointer hover:bg-state-base-hover'}
+        ${disabled ? 'cursor-not-allowed opacity-30' : ''}
       `}
       tabIndex={-1}
       ref={setRefElement}

web/app/components/base/prompt-editor/plugins/context-block/component.tsx

@@ -40,13 +40,13 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
   return (
     <div
       className={`
-      group inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#F4F3FF] pl-1 pr-0.5 text-[#6938EF] hover:bg-[#EBE9FE]
+      group inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#F4F3FF] pr-0.5 pl-1 text-[#6938EF] hover:bg-[#EBE9FE]
       ${open ? 'bg-[#EBE9FE]' : ''}
       ${isSelected && 'border-[#9B8AFB]!'}
     `}
       ref={ref}
     >
-      <span className="i-custom-vender-solid-files-file-05 mr-1 h-[14px] w-[14px]" data-testid="file-icon" />
+      <span className="mr-1 i-custom-vender-solid-files-file-05 h-[14px] w-[14px]" data-testid="file-icon" />
       <div className="mr-1 text-xs font-medium">{t('promptEditor.context.item.title', { ns: 'common' })}</div>
       {!canNotAddContext && (
         <PortalToFollowElem

web/app/components/base/prompt-editor/plugins/history-block/component.tsx

@@ -41,7 +41,7 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
   return (
     <div
       className={`
-      group inline-flex h-6 items-center rounded-[5px] border border-transparent pl-1 pr-0.5 text-[#DD2590] hover:bg-[#FCE7F6]
+      group inline-flex h-6 items-center rounded-[5px] border border-transparent pr-0.5 pl-1 text-[#DD2590] hover:bg-[#FCE7F6]
       ${open ? 'bg-[#FCE7F6]' : 'bg-[#FDF2FA]'}
       ${isSelected && 'border-[#F670C7]!'}
     `}

web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx

@@ -63,7 +63,7 @@ const HITLInputComponent: FC<HITLInputComponentProps> = ({
   return (
     <div
       ref={ref}
-      className="w-full pb-1 pt-3"
+      className="w-full pt-3 pb-1"
     >
       <ComponentUi
         nodeId={nodeId}

web/app/components/base/prompt-editor/plugins/query-block/component.tsx

@@ -17,7 +17,7 @@ const QueryBlockComponent: FC<QueryBlockComponentProps> = ({
   return (
     <div
       className={`
-        inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#FFF6ED] pl-1 pr-0.5 hover:bg-[#FFEAD5]
+        inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#FFF6ED] pr-0.5 pl-1 hover:bg-[#FFEAD5]
         ${isSelected && 'border-[#FD853A]!'}
       `}
       ref={ref}

web/app/components/base/prompt-log-modal/card.tsx

@@ -23,7 +23,7 @@ const Card: FC<CardProps> = ({
           <div>
             {
               log.map((item, index) => (
-                <div key={index} className="group/card mb-2 rounded-xl px-4 pb-4 pt-2 last-of-type:mb-0 hover:bg-state-base-hover">
+                <div key={index} className="group/card mb-2 rounded-xl px-4 pt-2 pb-4 last-of-type:mb-0 hover:bg-state-base-hover">
                   <div className="flex h-8 items-center justify-between">
                     <div className="font-semibold text-[#2D31A6]">{item.role.toUpperCase()}</div>
                     <CopyFeedbackNew className="hidden h-6 w-6 group-hover/card:block" content={item.text} />

web/app/components/base/prompt-log-modal/index.tsx

@@ -42,7 +42,7 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
       }}
       ref={ref}
     >
-      <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pl-6 pr-5">
+      <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pr-5 pl-6">
         <div className="text-base font-semibold text-text-primary">PROMPT LOG</div>
         <div className="flex items-center">
           {

web/app/components/base/qrcode/index.stories.tsx

@@ -8,7 +8,7 @@ const QRDemo = ({
 }) => {
   return (
     <div className="flex w-full max-w-sm flex-col gap-3 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Share QR</p>
+      <p className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Share QR</p>
       <div className="flex items-center gap-2 text-sm text-text-secondary">
         <span>Generated URL:</span>
         <code className="rounded-md bg-background-default px-2 py-1 text-[11px]">{content}</code>

web/app/components/base/qrcode/index.tsx

@@ -64,7 +64,7 @@ const ShareQRCode = ({ content }: Props) => {
         {isShow && (
           <div
             ref={qrCodeRef}
-            className="absolute -right-8 top-8 z-10 flex w-[232px] flex-col items-center rounded-lg bg-components-panel-bg p-4 shadow-xs"
+            className="absolute top-8 -right-8 z-10 flex w-[232px] flex-col items-center rounded-lg bg-components-panel-bg p-4 shadow-xs"
             onClick={handlePanelClick}
           >
             <QRCode size={160} value={content} className="mb-2" />

web/app/components/base/segmented-control/index.stories.tsx

@@ -24,7 +24,7 @@ const SegmentedControlDemo = ({
 
   return (
     <div className="flex w-full max-w-lg flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+      <div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
         <span>Segmented control</span>
         <code className="rounded-md bg-background-default px-2 py-1 text-[11px] text-text-tertiary">
           value="

web/app/components/base/select/locale-signin.tsx

@@ -36,7 +36,7 @@ export default function LocaleSigninSelect({
           leaveTo="transform opacity-0 scale-95"
         >
           <MenuItems className="absolute right-0 z-10 mt-2 w-[200px] origin-top-right divide-y divide-divider-regular rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg focus:outline-hidden">
-            <div className="max-h-96 overflow-y-auto px-1 py-1 mask-[linear-gradient(to_bottom,transparent_0px,black_8px,black_calc(100%-8px),transparent_100%)]">
+            <div className="max-h-96 overflow-y-auto mask-[linear-gradient(to_bottom,transparent_0px,black_8px,black_calc(100%-8px),transparent_100%)] px-1 py-1">
               {items.map((item) => {
                 return (
                   <MenuItem key={item.value}>

web/app/components/base/simple-pie-chart/index.stories.tsx

@@ -17,7 +17,7 @@ const PieChartPlayground = ({
 
   return (
     <div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+      <div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
         <span>Conversion snapshot</span>
         <span className="rounded-md border border-divider-subtle bg-background-default px-2 py-1 text-[11px] text-text-secondary">
           {label}

web/app/components/base/skeleton/index.stories.tsx

@@ -9,7 +9,7 @@ import {
 const SkeletonDemo = () => {
   return (
     <div className="flex w-full max-w-xl flex-col gap-6 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Loading skeletons</div>
+      <div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Loading skeletons</div>
       <div className="space-y-4 rounded-xl border border-divider-subtle bg-background-default-subtle p-4">
         <SkeletonContainer>
           <SkeletonRow>

web/app/components/base/sort/index.stories.tsx

@@ -21,7 +21,7 @@ const SortPlayground = () => {
 
   return (
     <div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+      <div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
         <span>Sort control</span>
         <code className="rounded-md bg-background-default px-2 py-1 text-[11px] text-text-tertiary">
           sort_by="

web/app/components/base/spinner/index.stories.tsx

@@ -11,7 +11,7 @@ const SpinnerPlayground = ({
 
   return (
     <div className="flex w-full max-w-xs flex-col items-center gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Spinner</p>
+      <p className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Spinner</p>
       <Spinner loading={isLoading} className="text-primary-500" />
       <button
         type="button"

web/app/components/base/spinner/index.tsx

@@ -14,7 +14,7 @@ const Spinner: FC<Props> = ({ loading = false, children, className }) => {
       role="status"
     >
       <span
-        className="absolute! -m-px! h-px! w-px! overflow-hidden! whitespace-nowrap! border-0! p-0! [clip:rect(0,0,0,0)]!"
+        className="absolute! -m-px! h-px! w-px! overflow-hidden! border-0! p-0! whitespace-nowrap! [clip:rect(0,0,0,0)]!"
       >
         Loading...
       </span>

web/app/components/base/svg/index.stories.tsx

@@ -7,7 +7,7 @@ const SvgToggleDemo = () => {
 
   return (
     <div className="flex w-full max-w-xs flex-col items-center gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">SVG toggle</p>
+      <p className="text-xs tracking-[0.18em] text-text-tertiary uppercase">SVG toggle</p>
       <SVGBtn isSVG={isSVG} setIsSVG={setIsSVG} />
       <span className="text-xs text-text-secondary">
         Mode:

web/app/components/base/tab-header/index.stories.tsx

@@ -20,7 +20,7 @@ const TabHeaderDemo = ({
 
   return (
     <div className="flex w-full max-w-3xl flex-col gap-6 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+      <div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
         <span>Tabs</span>
         <code className="rounded-md bg-background-default px-2 py-1 text-[11px] text-text-tertiary">
           active="

web/app/components/base/tab-slider-new/index.stories.tsx

@@ -17,7 +17,7 @@ const TabSliderNewDemo = ({
 
   return (
     <div className="flex w-full max-w-sm flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Pill tabs</div>
+      <div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Pill tabs</div>
       <TabSliderNew value={value} options={OPTIONS} onChange={setValue} />
     </div>
   )

web/app/components/base/tab-slider-plain/index.stories.tsx

@@ -17,7 +17,7 @@ const TabSliderPlainDemo = ({
 
   return (
     <div className="flex w-full max-w-2xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Underline tabs</div>
+      <div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Underline tabs</div>
       <TabSliderPlain
         value={value}
         onChange={setValue}

web/app/components/base/tab-slider/index.stories.tsx

@@ -54,7 +54,7 @@ const TabSliderDemo = ({
 
   return (
     <div className="flex w-full max-w-lg flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Segmented tabs</div>
+      <div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Segmented tabs</div>
       <TabSlider
         value={value}
         options={OPTIONS}

web/app/components/base/tag-management/index.tsx

@@ -48,8 +48,8 @@ const TagManagementModal = ({ show, type }: TagManagementModalProps) => {
   }, [type])
   return (
     <Modal className="!w-[600px] !max-w-[600px] rounded-xl px-8 py-6" isShow={show} onClose={() => setShowTagManagementModal(false)}>
-      <div className="relative pb-2 text-xl font-semibold leading-[30px] text-text-primary">{t('tag.manageTags', { ns: 'common' })}</div>
+      <div className="relative pb-2 text-xl leading-[30px] font-semibold text-text-primary">{t('tag.manageTags', { ns: 'common' })}</div>
-      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={() => setShowTagManagementModal(false)}>
+      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={() => setShowTagManagementModal(false)}>
         <span className="i-ri-close-line h-4 w-4 text-text-tertiary" data-testid="tag-management-modal-close-button" />
       </div>
       <div className="mt-3 flex flex-wrap gap-2">

web/app/components/base/tag-management/panel.tsx

@@ -114,7 +114,7 @@ const Panel = (props: PanelProps) => {
         <div className="p-1">
           <div className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" data-testid="create-tag-option" onClick={createNewTag}>
             <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-            <div className="grow truncate px-1 text-text-secondary system-md-regular">
+            <div className="grow truncate px-1 system-md-regular text-text-secondary">
               {`${t('tag.create', { ns: 'common' })} `}
               <span className="system-md-medium">{`'${keywords}'`}</span>
             </div>
@@ -127,7 +127,7 @@ const Panel = (props: PanelProps) => {
           {filteredSelectedTagList.map(tag => (
             <div key={tag.id} className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" onClick={() => selectTag(tag)} data-testid="tag-row">
               <Checkbox className="shrink-0" checked={selectedTagIDs.includes(tag.id)} onCheck={noop} id={tag.id} />
-              <div title={tag.name} className="grow truncate px-1 text-text-secondary system-md-regular">
+              <div title={tag.name} className="grow truncate px-1 system-md-regular text-text-secondary">
                 {tag.name}
               </div>
             </div>
@@ -135,7 +135,7 @@ const Panel = (props: PanelProps) => {
           {filteredTagList.map(tag => (
             <div key={tag.id} className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" onClick={() => selectTag(tag)} data-testid="tag-row">
               <Checkbox className="shrink-0" checked={selectedTagIDs.includes(tag.id)} onCheck={noop} id={tag.id} />
-              <div title={tag.name} className="grow truncate px-1 text-text-secondary system-md-regular">
+              <div title={tag.name} className="grow truncate px-1 system-md-regular text-text-secondary">
                 {tag.name}
               </div>
             </div>
@@ -146,7 +146,7 @@ const Panel = (props: PanelProps) => {
         <div className="p-1">
           <div className="flex flex-col items-center gap-y-1 p-3">
             <span className="i-ri-price-tag-3-line h-6 w-6 text-text-quaternary" />
-            <div className="text-text-tertiary system-xs-regular">{t('tag.noTag', { ns: 'common' })}</div>
+            <div className="system-xs-regular text-text-tertiary">{t('tag.noTag', { ns: 'common' })}</div>
           </div>
         </div>
       )}
@@ -154,7 +154,7 @@ const Panel = (props: PanelProps) => {
       <div className="p-1">
         <div className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" onClick={() => setShowTagManagementModal(true)}>
           <span className="i-ri-price-tag-3-line h-4 w-4 text-text-tertiary" />
-          <div className="grow truncate px-1 text-text-secondary system-md-regular">
+          <div className="grow truncate px-1 system-md-regular text-text-secondary">
             {t('tag.manageTags', { ns: 'common' })}
           </div>
         </div>

web/app/components/base/tag-management/trigger.tsx

@@ -16,7 +16,7 @@ const Trigger = ({
         ? (
             <div className="flex items-center gap-x-0.5 rounded-[5px] border border-dashed border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px]">
               <span className="i-ri-price-tag-3-line h-3 w-3 shrink-0 text-text-quaternary" />
-              <div className="text-nowrap text-text-tertiary system-2xs-medium-uppercase">
+              <div className="system-2xs-medium-uppercase text-nowrap text-text-tertiary">
                 {t('tag.addTag', { ns: 'common' })}
               </div>
             </div>
@@ -32,7 +32,7 @@ const Trigger = ({
                       data-testid={`tag-badge-${index}`}
                     >
                       <span className="i-ri-price-tag-3-line h-3 w-3 shrink-0 text-text-quaternary" />
-                      <div className="text-nowrap text-text-tertiary system-2xs-medium-uppercase">
+                      <div className="system-2xs-medium-uppercase text-nowrap text-text-tertiary">
                         {content}
                       </div>
                     </div>