diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
index 35fafb2a79..2443641b8a 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -253,11 +253,11 @@ const Panel: FC = () => {
             <TracingIcon size="md" />
             <div className="mx-2 system-sm-semibold text-text-secondary">{t(`${I18N_PREFIX}.title`, { ns: 'app' })}</div>
             <div className="rounded-md p-1">
-              <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+              <RiEqualizer2Line className="size-4 text-text-tertiary" />
             </div>
             <Divider type="vertical" className="h-3.5" />
             <div className="rounded-md p-1">
-              <RiArrowDownDoubleLine className="h-4 w-4 text-text-tertiary" />
+              <RiArrowDownDoubleLine className="size-4 text-text-tertiary" />
             </div>
           </div>
         </ConfigButton>
@@ -297,7 +297,7 @@ const Panel: FC = () => {
             </div>
             {InUseProviderIcon && <InUseProviderIcon className="ml-1 h-4" />}
             <div className="ml-2 rounded-md p-1">
-              <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+              <RiEqualizer2Line className="size-4 text-text-tertiary" />
             </div>
             <Divider type="vertical" className="h-3.5" />
           </div>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
index 5b740971cb..4845cf38df 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
@@ -649,7 +649,7 @@ const ProviderConfigModal: FC<Props> = ({
                           href={docURL[type]}
                         >
                           <span>{t(`${I18N_PREFIX}.viewDocsLink`, { ns: 'app', key: t(`tracing.${type}.title`, { ns: 'app' }) })}</span>
-                          <LinkExternal02 className="h-3 w-3" />
+                          <LinkExternal02 className="size-3" />
                         </a>
                         <div className="flex items-center">
                           {isEdit && (
@@ -683,7 +683,7 @@ const ProviderConfigModal: FC<Props> = ({
                     </div>
                     <div className="border-t-[0.5px] border-divider-regular">
                       <div className="flex items-center justify-center bg-background-section-burn py-3 text-xs text-text-tertiary">
-                        <Lock01 className="mr-1 h-3 w-3 text-text-tertiary" />
+                        <Lock01 className="mr-1 size-3 text-text-tertiary" />
                         {t('modelProvider.encrypted.front', { ns: 'common' })}
                         <a
                           className="mx-1 text-primary-600"
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
index ed7f4ab962..4e166c52ba 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
@@ -88,7 +88,7 @@ const ProviderPanel: FC<Props> = ({
           <div className="flex items-center justify-between space-x-1">
             {hasConfigured && (
               <div className="flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-text-secondary shadow-xs" onClick={viewBtnClick}>
-                <View className="h-3 w-3" />
+                <View className="size-3" />
                 <div className="text-xs font-medium">{t(`${I18N_PREFIX}.view`, { ns: 'app' })}</div>
               </div>
             )}
@@ -96,7 +96,7 @@ const ProviderPanel: FC<Props> = ({
               className="flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-text-secondary shadow-xs"
               onClick={handleConfigBtnClick}
             >
-              <RiEqualizer2Line className="h-3 w-3" />
+              <RiEqualizer2Line className="size-3" />
               <div className="text-xs font-medium">{t(`${I18N_PREFIX}.config`, { ns: 'app' })}</div>
             </div>
           </div>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
index cdc0f753a6..ed097f9333 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
@@ -21,7 +21,7 @@ const TracingIcon: FC<Props> = ({
   const sizeClass = sizeClassMap[size]
   return (
     <div className={cn(className, sizeClass, 'bg-primary-500 shadow-md')}>
-      <Icon className="h-full w-full" />
+      <Icon className="size-full" />
     </div>
   )
 }
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
index 6c9386a44e..35b13b99c8 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
@@ -2,7 +2,7 @@ import WorkflowApp from '@/app/components/workflow-app'
 
 const Page = () => {
   return (
-    <div className="h-full w-full overflow-x-auto">
+    <div className="size-full overflow-x-auto">
       <WorkflowApp />
     </div>
   )
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/pipeline/page.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/pipeline/page.tsx
index f3028cbad0..79add77466 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/pipeline/page.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/pipeline/page.tsx
@@ -3,7 +3,7 @@ import RagPipeline from '@/app/components/rag-pipeline'
 
 const PipelinePage = () => {
   return (
-    <div className="h-full w-full overflow-x-auto">
+    <div className="size-full overflow-x-auto">
       <RagPipeline />
     </div>
   )
diff --git a/web/app/(humanInputLayout)/form/[token]/form.tsx b/web/app/(humanInputLayout)/form/[token]/form.tsx
index 76dcd24293..0eb62b1cb2 100644
--- a/web/app/(humanInputLayout)/form/[token]/form.tsx
+++ b/web/app/(humanInputLayout)/form/[token]/form.tsx
@@ -99,11 +99,11 @@ const FormContent = () => {
 
   if (success) {
     return (
-      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+      <div className={cn('flex size-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="h-[56px] w-[56px] shrink-0 rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
-              <RiCheckboxCircleFill className="h-8 w-8 text-text-success" />
+              <RiCheckboxCircleFill className="size-8 text-text-success" />
             </div>
             <div className="grow">
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.thanks', { ns: 'share' })}</div>
@@ -127,11 +127,11 @@ const FormContent = () => {
 
   if (expired) {
     return (
-      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+      <div className={cn('flex size-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
-            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
-              <RiInformation2Fill className="h-8 w-8 text-text-accent" />
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiInformation2Fill className="size-8 text-text-accent" />
             </div>
             <div className="grow">
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
@@ -155,11 +155,11 @@ const FormContent = () => {
 
   if (submitted) {
     return (
-      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+      <div className={cn('flex size-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
-            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
-              <RiInformation2Fill className="h-8 w-8 text-text-accent" />
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiInformation2Fill className="size-8 text-text-accent" />
             </div>
             <div className="grow">
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
@@ -183,11 +183,11 @@ const FormContent = () => {
 
   if (rateLimitExceeded) {
     return (
-      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+      <div className={cn('flex size-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
-            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
-              <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiErrorWarningFill className="size-8 text-text-destructive" />
             </div>
             <div className="grow">
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.rateLimitExceeded', { ns: 'share' })}</div>
@@ -209,11 +209,11 @@ const FormContent = () => {
 
   if (!formData) {
     return (
-      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+      <div className={cn('flex size-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
-            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
-              <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiErrorWarningFill className="size-8 text-text-destructive" />
             </div>
             <div className="grow">
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.formNotFound', { ns: 'share' })}</div>
diff --git a/web/app/(shareLayout)/components/authenticated-layout.tsx b/web/app/(shareLayout)/components/authenticated-layout.tsx
index 3ee5d52603..af05e93771 100644
--- a/web/app/(shareLayout)/components/authenticated-layout.tsx
+++ b/web/app/(shareLayout)/components/authenticated-layout.tsx
@@ -82,7 +82,7 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
   if (userCanAccessApp && !userCanAccessApp.result) {
     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." />
+        <AppUnavailable className="size-auto" code={403} unknownReason="no permission." />
         <span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{t('userProfile.logout', { ns: 'common' })}</span>
       </div>
     )
diff --git a/web/app/(shareLayout)/components/splash.tsx b/web/app/(shareLayout)/components/splash.tsx
index 86d676721a..0c98767a48 100644
--- a/web/app/(shareLayout)/components/splash.tsx
+++ b/web/app/(shareLayout)/components/splash.tsx
@@ -94,7 +94,7 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
   if (message) {
     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} />
+        <AppUnavailable className="size-auto" code={code || t('common.appUnavailable', { ns: 'share' })} unknownReason={message} />
         <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>
     )
diff --git a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
index d5b3237b12..a921a21d3a 100644
--- a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
@@ -59,8 +59,8 @@ export default function CheckCode() {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
-        <RiMailSendFill className="h-6 w-6 text-2xl" />
+      <div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
+        <RiMailSendFill className="size-6 text-2xl" />
       </div>
       <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
diff --git a/web/app/(shareLayout)/webapp-reset-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/page.tsx
index 2174ac0e8e..d905f8d213 100644
--- a/web/app/(shareLayout)/webapp-reset-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/page.tsx
@@ -61,8 +61,8 @@ export default function CheckCode() {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
-        <RiLockPasswordLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
+      <div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
+        <RiLockPasswordLine className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('resetPassword', { ns: 'login' })}</h2>
diff --git a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
index 9a290f8789..df9309095a 100644
--- a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
@@ -164,8 +164,8 @@ const ChangePasswordForm = () => {
       {showSuccess && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
-              <RiCheckboxCircleFill className="h-6 w-6 text-text-success" />
+            <div className="mb-3 flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
+              <RiCheckboxCircleFill className="size-6 text-text-success" />
             </div>
             <h2 className="title-4xl-semi-bold text-text-primary">
               {t('passwordChangedTip', { ns: 'login' })}
diff --git a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
index c8d3351ded..050911e2fa 100644
--- a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
@@ -97,8 +97,8 @@ export default function CheckCode() {
 
   return (
     <div className="flex w-[400px] flex-col gap-3">
-      <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
-        <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
+      <div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
+        <RiMailSendFill className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
diff --git a/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
index 53ff80ced5..52625bbdfb 100644
--- a/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
@@ -75,7 +75,7 @@ const SSOAuth: FC<SSOAuthProps> = ({
       disabled={isLoading}
       className="w-full"
     >
-      <Lock01 className="mr-2 h-5 w-5 text-text-accent-light-mode-only" />
+      <Lock01 className="mr-2 size-5 text-text-accent-light-mode-only" />
       <span className="truncate">{t('withSSO', { ns: 'login' })}</span>
     </Button>
   )
diff --git a/web/app/(shareLayout)/webapp-signin/normalForm.tsx b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
index 9b7b64eac5..676db018a9 100644
--- a/web/app/(shareLayout)/webapp-signin/normalForm.tsx
+++ b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
@@ -57,9 +57,9 @@ const NormalForm = () => {
       <div className="mx-auto mt-8 w-full">
         <div className="relative">
           <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
-            <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-              <RiContractLine className="h-5 w-5" />
-              <RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
+            <div className="shadows-shadow-lg relative mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
+              <RiContractLine className="size-5" />
+              <RiErrorWarningFill className="absolute -top-1 -right-1 size-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseLost', { ns: 'login' })}</p>
             <p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseLostTip', { ns: 'login' })}</p>
@@ -73,9 +73,9 @@ const NormalForm = () => {
       <div className="mx-auto mt-8 w-full">
         <div className="relative">
           <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
-            <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-              <RiContractLine className="h-5 w-5" />
-              <RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
+            <div className="shadows-shadow-lg relative mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
+              <RiContractLine className="size-5" />
+              <RiErrorWarningFill className="absolute -top-1 -right-1 size-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseExpired', { ns: 'login' })}</p>
             <p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseExpiredTip', { ns: 'login' })}</p>
@@ -89,9 +89,9 @@ const NormalForm = () => {
       <div className="mx-auto mt-8 w-full">
         <div className="relative">
           <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
-            <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-              <RiContractLine className="h-5 w-5" />
-              <RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
+            <div className="shadows-shadow-lg relative mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
+              <RiContractLine className="size-5" />
+              <RiErrorWarningFill className="absolute -top-1 -right-1 size-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseInactive', { ns: 'login' })}</p>
             <p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseInactiveTip', { ns: 'login' })}</p>
@@ -156,8 +156,8 @@ const NormalForm = () => {
           {allMethodsAreDisabled && (
             <>
               <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
-                <div className="shadows-shadow-lg mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-                  <RiDoorLockLine className="h-5 w-5" />
+                <div className="shadows-shadow-lg mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
+                  <RiDoorLockLine className="size-5" />
                 </div>
                 <p className="system-sm-medium text-text-primary">{t('noLoginMethod', { ns: 'login' })}</p>
                 <p className="mt-1 system-xs-regular text-text-tertiary">{t('noLoginMethodTip', { ns: 'login' })}</p>
diff --git a/web/app/(shareLayout)/webapp-signin/page.tsx b/web/app/(shareLayout)/webapp-signin/page.tsx
index a1e14ed815..cc0a34cd93 100644
--- a/web/app/(shareLayout)/webapp-signin/page.tsx
+++ b/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} />
+      <AppUnavailable className="size-auto" isUnknownReason={true} />
       <span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
     </div>
   )
diff --git a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
index 83bca6a8cb..8d8f3b8d4c 100644
--- a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
+++ b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
@@ -196,7 +196,7 @@ const EmailChangeModal = ({ onClose, email }: Props) => {
     <Dialog open onOpenChange={open => !open && onClose()}>
       <DialogContent className="w-[420px]! p-6!">
         <div className="absolute top-5 right-5 cursor-pointer p-1.5" onClick={onClose}>
-          <RiCloseLine className="h-5 w-5 text-text-tertiary" />
+          <RiCloseLine className="size-5 text-text-tertiary" />
         </div>
         {step === STEP.start && (
           <>
diff --git a/web/app/account/(commonLayout)/account-page/index.tsx b/web/app/account/(commonLayout)/account-page/index.tsx
index b85fb1abba..b0719e169a 100644
--- a/web/app/account/(commonLayout)/account-page/index.tsx
+++ b/web/app/account/(commonLayout)/account-page/index.tsx
@@ -159,14 +159,14 @@ export default function AccountPage() {
       <div className="pt-2 pb-3">
         <h4 className="title-2xl-semi-bold text-text-primary">{t('account.myAccount', { ns: 'common' })}</h4>
       </div>
-      <div className="mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
+      <div className="mb-8 flex items-center rounded-xl bg-linear-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
         <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size="3xl" />
         <div className="ml-4">
           <p className="system-xl-semibold text-text-primary">
             {userProfile.name}
             {isEducationAccount && (
-              <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
-                <RiGraduationCapFill aria-hidden="true" className="mr-1 h-3 w-3" />
+              <PremiumBadge size="s" color="blue" className="ml-1 px-2!">
+                <RiGraduationCapFill aria-hidden="true" className="mr-1 size-3" />
                 <span className="system-2xs-medium">EDU</span>
               </PremiumBadge>
             )}
@@ -209,7 +209,7 @@ export default function AccountPage() {
           </div>
         )
       }
-      <div className="mb-6 border-[1px] border-divider-subtle" />
+      <div className="mb-6 border border-divider-subtle" />
       <div className="mb-8">
         <div className={titleClassName}>{t('account.langGeniusAccount', { ns: 'common' })}</div>
         <div className={descriptionClassName}>{t('account.langGeniusAccountTip', { ns: 'common' })}</div>
diff --git a/web/app/account/(commonLayout)/avatar.tsx b/web/app/account/(commonLayout)/avatar.tsx
index b0cdd853eb..197a00f822 100644
--- a/web/app/account/(commonLayout)/avatar.tsx
+++ b/web/app/account/(commonLayout)/avatar.tsx
@@ -61,7 +61,7 @@ export default function AppSelector() {
                 {userProfile.name}
                 {isEducationAccount && (
                   <PremiumBadge size="s" color="blue" className="ml-1 px-2!">
-                    <span aria-hidden="true" className="mr-1 i-ri-graduation-cap-fill h-3 w-3" />
+                    <span aria-hidden="true" className="mr-1 i-ri-graduation-cap-fill size-3" />
                     <span className="system-2xs-medium">EDU</span>
                   </PremiumBadge>
                 )}
diff --git a/web/app/account/(commonLayout)/header.tsx b/web/app/account/(commonLayout)/header.tsx
index 37c1dcdd23..13d9779e9c 100644
--- a/web/app/account/(commonLayout)/header.tsx
+++ b/web/app/account/(commonLayout)/header.tsx
@@ -37,9 +37,9 @@ const Header = () => {
       </div>
       <div className="flex shrink-0 items-center gap-3">
         <Button className="gap-2 px-3 py-2 system-sm-medium" onClick={goToStudio}>
-          <RiRobot2Line className="h-4 w-4" />
+          <RiRobot2Line className="size-4" />
           <p>{t('account.studio', { ns: 'common' })}</p>
-          <RiArrowRightUpLine className="h-4 w-4" />
+          <RiArrowRightUpLine className="size-4" />
         </Button>
         <div className="h-4 w-px bg-divider-regular" />
         <Avatar />
diff --git a/web/app/account/oauth/authorize/page.tsx b/web/app/account/oauth/authorize/page.tsx
index 55666db193..97dabb46a9 100644
--- a/web/app/account/oauth/authorize/page.tsx
+++ b/web/app/account/oauth/authorize/page.tsx
@@ -127,14 +127,14 @@ export default function OAuthAuthorize() {
     <div className="bg-background-default-subtle">
       {authAppInfo?.app_icon && (
         <div className="w-max rounded-2xl border-[0.5px] border-components-panel-border bg-text-primary-on-surface p-3 shadow-lg">
-          <img src={authAppInfo.app_icon} alt="app icon" className="h-10 w-10 rounded-sm" />
+          <img src={authAppInfo.app_icon} alt="app icon" className="size-10 rounded-sm" />
         </div>
       )}
 
       <div className={`mt-5 mb-4 flex flex-col gap-2 ${isLoggedIn ? 'pb-2' : ''}`}>
         <div className="title-4xl-semi-bold">
           {isLoggedIn && <div className="text-text-primary">{t('connect', { ns: 'oauth' })}</div>}
-          <div className="text-(--color-saas-dify-blue-inverted)">{authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })}</div>
+          <div className="text-saas-dify-blue-inverted">{authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })}</div>
           {!isLoggedIn && <div className="text-text-primary">{t('tips.notLoggedIn', { ns: 'oauth' })}</div>}
         </div>
         <div className="body-md-regular text-text-secondary">{isLoggedIn ? `${authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })} ${t('tips.loggedIn', { ns: 'oauth' })}` : t('tips.needLogin', { ns: 'oauth' })}</div>
@@ -159,7 +159,7 @@ export default function OAuthAuthorize() {
             const Icon = SCOPE_INFO_MAP[scope]
             return (
               <div key={scope} className="flex items-center gap-2 body-sm-medium text-text-secondary">
-                {Icon ? <Icon.icon className="h-4 w-4" /> : <RiAccountCircleLine className="h-4 w-4" />}
+                {Icon ? <Icon.icon className="size-4" /> : <RiAccountCircleLine className="size-4" />}
                 {Icon!.label}
               </div>
             )
diff --git a/web/app/components/app-sidebar/app-info/app-info-trigger.tsx b/web/app/components/app-sidebar/app-info/app-info-trigger.tsx
index 0e0d085e30..32a7eba388 100644
--- a/web/app/components/app-sidebar/app-info/app-info-trigger.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-trigger.tsx
@@ -36,16 +36,16 @@ const AppInfoTrigger = ({ appDetail, expand, onClick }: AppInfoTriggerProps) =>
           </div>
           {expand && (
             <div className="ml-auto flex items-center justify-center rounded-md p-0.5">
-              <div className="flex h-5 w-5 items-center justify-center">
-                <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+              <div className="flex size-5 items-center justify-center">
+                <RiEqualizer2Line className="size-4 text-text-tertiary" />
               </div>
             </div>
           )}
         </div>
         {!expand && (
           <div className="flex items-center justify-center">
-            <div className="flex h-5 w-5 items-center justify-center rounded-md p-0.5">
-              <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+            <div className="flex size-5 items-center justify-center rounded-md p-0.5">
+              <RiEqualizer2Line className="size-4 text-text-tertiary" />
             </div>
           </div>
         )}
diff --git a/web/app/components/app-sidebar/app-info/app-operations.tsx b/web/app/components/app-sidebar/app-info/app-operations.tsx
index 2e3270a222..a215f35d78 100644
--- a/web/app/components/app-sidebar/app-info/app-operations.tsx
+++ b/web/app/components/app-sidebar/app-info/app-operations.tsx
@@ -149,7 +149,7 @@ const AppOperations = ({
           className="gap-px focus-visible:ring-inset"
           tabIndex={-1}
         >
-          <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+          <RiMoreLine className="size-3.5 text-components-button-secondary-text" />
           <span className="system-xs-medium text-components-button-secondary-text">
             {t('operation.more', { ns: 'common' })}
           </span>
@@ -183,7 +183,7 @@ const AppOperations = ({
               )}
             >
               <>
-                <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+                <RiMoreLine className="size-3.5 text-components-button-secondary-text" />
                 <span className="system-xs-medium text-components-button-secondary-text">
                   {t('operation.more', { ns: 'common' })}
                 </span>
diff --git a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
index e0661b9c52..a46e07e5fe 100644
--- a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
@@ -59,7 +59,7 @@ const AppSidebarDropdown = ({ navigation, appInfoActions }: Props) => {
               background={appDetail.icon_background}
               imageUrl={appDetail.icon_url}
             />
-            <RiMenuLine className="h-4 w-4 text-text-tertiary" />
+            <RiMenuLine className="size-4 text-text-tertiary" />
           </DropdownMenuTrigger>
           <DropdownMenuContent
             placement="bottom-start"
@@ -87,8 +87,8 @@ const AppSidebarDropdown = ({ navigation, appInfoActions }: Props) => {
                       imageUrl={appDetail.icon_url}
                     />
                     <div className="flex items-center justify-center rounded-md p-0.5">
-                      <div className="flex h-5 w-5 items-center justify-center">
-                        <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+                      <div className="flex size-5 items-center justify-center">
+                        <RiEqualizer2Line className="size-4 text-text-tertiary" />
                       </div>
                     </div>
                   </div>
diff --git a/web/app/components/app-sidebar/basic.tsx b/web/app/components/app-sidebar/basic.tsx
index 3c7a7d2098..6610c7a0a0 100644
--- a/web/app/components/app-sidebar/basic.tsx
+++ b/web/app/components/app-sidebar/basic.tsx
@@ -46,13 +46,13 @@ const ICON_MAP = {
   app: <AppIcon className="border border-[rgba(0,0,0,0.05)]!" />,
   api: (
     <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 p-1 shadow-md">
-      <ApiAggregate className="h-4 w-4 text-text-primary-on-surface" />
+      <ApiAggregate className="size-4 text-text-primary-on-surface" />
     </div>
   ),
   dataset: <AppIcon innerIcon={DatasetSvg} className="border-[0.5px]! border-indigo-100! bg-indigo-25!" />,
   webapp: (
     <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 p-1 shadow-md">
-      <WindowCursor className="h-4 w-4 text-text-primary-on-surface" />
+      <WindowCursor className="size-4 text-text-primary-on-surface" />
     </div>
   ),
   notion: <AppIcon innerIcon={NotionSvg} className="border-[0.5px]! border-indigo-100! bg-white!" />,
diff --git a/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx b/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
index fe46290002..1a3e826e10 100644
--- a/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
+++ b/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
@@ -109,8 +109,8 @@ describe('NavLink Animation and Layout Issues', () => {
       expect(expandedIconWrapper).not.toHaveClass('-ml-1')
 
       // Icon itself maintains consistent classes - no margin changes
-      expect(iconElement).toHaveClass('h-4')
-      expect(iconElement).toHaveClass('w-4')
+      expect(iconElement).toHaveClass('size-4')
+      expect(iconElement).toHaveClass('size-4')
       expect(iconElement).toHaveClass('shrink-0')
 
       // This wrapper approach eliminates the icon margin shift issue
@@ -168,8 +168,8 @@ describe('NavLink Animation and Layout Issues', () => {
       expect(iconWrapper).toHaveClass('-ml-1')
 
       // Icon itself has consistent classes
-      expect(iconElement).toHaveClass('h-4')
-      expect(iconElement).toHaveClass('w-4')
+      expect(iconElement).toHaveClass('size-4')
+      expect(iconElement).toHaveClass('size-4')
       expect(iconElement).toHaveClass('shrink-0')
 
       rerender(<NavLink {...mockProps} mode="expand" />)
@@ -180,8 +180,8 @@ describe('NavLink Animation and Layout Issues', () => {
       expect(expandedIconWrapper).not.toHaveClass('-ml-1')
 
       // Icon classes remain consistent - no margin shifts
-      expect(iconElement).toHaveClass('h-4')
-      expect(iconElement).toHaveClass('w-4')
+      expect(iconElement).toHaveClass('size-4')
+      expect(iconElement).toHaveClass('size-4')
       expect(iconElement).toHaveClass('shrink-0')
     })
   })
diff --git a/web/app/components/app-sidebar/nav-link/index.tsx b/web/app/components/app-sidebar/nav-link/index.tsx
index a2f737da16..38845ed746 100644
--- a/web/app/components/app-sidebar/nav-link/index.tsx
+++ b/web/app/components/app-sidebar/nav-link/index.tsx
@@ -44,7 +44,7 @@ const NavLink = ({
 
   const renderIcon = () => (
     <div className={cn(mode !== 'expand' && '-ml-1')}>
-      <NavIcon className="h-4 w-4 shrink-0" aria-hidden="true" />
+      <NavIcon className="size-4 shrink-0" aria-hidden="true" />
     </div>
   )
 
diff --git a/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx b/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx
index 639854ae0a..b6944370e1 100644
--- a/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx
@@ -21,7 +21,7 @@ const EditItem: FC<Props> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
-  const avatar = type === EditItemType.Query ? <User className="h-6 w-6" /> : <Robot className="h-6 w-6" />
+  const avatar = type === EditItemType.Query ? <User className="size-6" /> : <Robot className="size-6" />
   const name = type === EditItemType.Query ? t('addModal.queryName', { ns: 'appAnnotation' }) : t('addModal.answerName', { ns: 'appAnnotation' })
   const placeholder = type === EditItemType.Query ? t('addModal.queryPlaceholder', { ns: 'appAnnotation' }) : t('addModal.answerPlaceholder', { ns: 'appAnnotation' })
 
diff --git a/web/app/components/app/annotation/add-annotation-modal/index.tsx b/web/app/components/app/annotation/add-annotation-modal/index.tsx
index f94b072e39..4be9cc2146 100644
--- a/web/app/components/app/annotation/add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/index.tsx
@@ -103,7 +103,7 @@ const AddAnnotationModal: FC<Props> = ({
                     </DrawerTitle>
                     <DrawerCloseButton
                       aria-label={t('operation.close', { ns: 'common' })}
-                      className="h-6 w-6 rounded-md"
+                      className="size-6 rounded-md"
                     />
                   </div>
                 </div>
@@ -127,7 +127,7 @@ const AddAnnotationModal: FC<Props> = ({
                       <AnnotationFull />
                     </div>
                   )}
-                  <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 h-16 items-center justify-between rounded-b-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
                     <label className="flex items-center space-x-2">
                       <Checkbox checked={isCreateNext} onCheckedChange={setIsCreateNext} />
                       <span>{t('addModal.createNext', { ns: 'appAnnotation' })}</span>
diff --git a/web/app/components/app/annotation/batch-action.tsx b/web/app/components/app/annotation/batch-action.tsx
index 188dc46ce9..092db8d028 100644
--- a/web/app/components/app/annotation/batch-action.tsx
+++ b/web/app/components/app/annotation/batch-action.tsx
@@ -49,7 +49,7 @@ const BatchAction: FC<IBatchActionProps> = ({
     <div className={cn('pointer-events-none flex w-full justify-center gap-x-2', className)}>
       <div className="pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5">
         <div className="inline-flex items-center gap-x-2 py-1 pr-3 pl-2">
-          <span className="flex h-5 w-5 items-center justify-center rounded-md bg-text-accent system-xs-medium text-text-primary-on-surface">
+          <span className="flex size-5 items-center justify-center rounded-md bg-text-accent system-xs-medium text-text-primary-on-surface">
             {selectedIds.length}
           </span>
           <span className="system-sm-semibold text-text-accent">{t(`${i18nPrefix}.selected`, { ns: 'appAnnotation' })}</span>
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx
index 3828a1facc..f03b8d74bb 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx
@@ -78,7 +78,7 @@ const CSVDownload: FC = () => {
         data={getTemplate()}
       >
         <div className="flex h-[18px] items-center space-x-1 system-xs-medium text-text-accent">
-          <DownloadIcon className="mr-1 h-3 w-3" />
+          <DownloadIcon className="mr-1 size-3" />
           {t('batchModal.template', { ns: 'appAnnotation' })}
         </div>
       </CSVDownloader>
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
index 75c3e8a66c..fc65c0dc19 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -106,7 +106,7 @@ const CSVUploader: FC<Props> = ({
                 </button>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
+            {dragging && <div ref={dragRef} className="absolute top-0 left-0 size-full" />}
           </div>
         )}
         {file && (
@@ -125,7 +125,7 @@ const CSVUploader: FC<Props> = ({
                 aria-label={t('operation.delete', { ns: 'common' })}
                 onClick={removeFile}
               >
-                <RiDeleteBinLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                <RiDeleteBinLine className="size-4 text-text-tertiary" aria-hidden="true" />
               </button>
             </div>
           </div>
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
index 7f1905c025..2bc7b6103f 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
@@ -97,7 +97,7 @@ const BatchModal: FC<IBatchModalProps> = ({
           aria-label={t('operation.close', { ns: 'common' })}
           onClick={onCancel}
         >
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
         </button>
         <CSVUploader
           file={currentCSV}
diff --git a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
index 609d7847bc..f0ed5ab3d4 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
@@ -22,7 +22,7 @@ type Props = {
 
 export const EditTitle: FC<{ className?: string, title: string }> = ({ className, title }) => (
   <div className={cn(className, 'flex h-[18px] items-center system-xs-medium text-text-tertiary')}>
-    <RiEditFill className="mr-1 h-3.5 w-3.5" />
+    <RiEditFill className="mr-1 size-3.5" />
     <div>{title}</div>
     <div
       className="ml-2 h-px grow"
@@ -42,7 +42,7 @@ const EditItem: FC<Props> = ({
   const { t } = useTranslation()
   const [newContent, setNewContent] = useState('')
   const showNewContent = newContent && newContent !== content
-  const avatar = type === EditItemType.Query ? <User className="h-6 w-6" /> : <Robot className="h-6 w-6" />
+  const avatar = type === EditItemType.Query ? <User className="size-6" /> : <Robot className="size-6" />
   const name = type === EditItemType.Query ? t('editModal.queryName', { ns: 'appAnnotation' }) : t('editModal.answerName', { ns: 'appAnnotation' })
   const editTitle = type === EditItemType.Query ? t('editModal.yourQuery', { ns: 'appAnnotation' }) : t('editModal.yourAnswer', { ns: 'appAnnotation' })
   const placeholder = type === EditItemType.Query ? t('editModal.queryPlaceholder', { ns: 'appAnnotation' }) : t('editModal.answerPlaceholder', { ns: 'appAnnotation' })
@@ -94,7 +94,7 @@ const EditItem: FC<Props> = ({
                         setIsEdit(true)
                       }}
                     >
-                      <RiEditLine className="mr-1 h-3.5 w-3.5" />
+                      <RiEditLine className="mr-1 size-3.5" />
                       <div>{t('operation.edit', { ns: 'common' })}</div>
                     </div>
                   )}
@@ -116,8 +116,8 @@ const EditItem: FC<Props> = ({
                           }
                         }}
                       >
-                        <div className="h-3.5 w-3.5">
-                          <RiDeleteBinLine className="h-3.5 w-3.5" />
+                        <div className="size-3.5">
+                          <RiDeleteBinLine className="size-3.5" />
                         </div>
                         <div>{t('operation.delete', { ns: 'common' })}</div>
                       </div>
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
index 0f6ee0dd1b..a7df64722f 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
@@ -126,7 +126,7 @@ const EditAnnotationModal: FC<Props> = ({
                     </DrawerTitle>
                     <DrawerCloseButton
                       aria-label={t('operation.close', { ns: 'common' })}
-                      className="h-6 w-6 rounded-md"
+                      className="size-6 rounded-md"
                     />
                   </div>
                 </div>
@@ -183,7 +183,7 @@ const EditAnnotationModal: FC<Props> = ({
                   {
                     annotationId
                       ? (
-                          <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 h-16 items-center justify-between rounded-b-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)}
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 6814c3692c..ab1ed04ce0 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -186,7 +186,7 @@ const HeaderOptions: FC<Props> = ({
   return (
     <div className="flex space-x-2">
       <Button variant="primary" onClick={() => setShowAddModal(true)}>
-        <span aria-hidden className="mr-0.5 i-ri-add-line h-4 w-4" />
+        <span aria-hidden className="mr-0.5 i-ri-add-line size-4" />
         <div>{t('table.header.addAnnotation', { ns: 'appAnnotation' })}</div>
       </Button>
       <DropdownMenu modal={false} open={isOperationsMenuOpen} onOpenChange={setIsOperationsMenuOpen}>
@@ -194,7 +194,7 @@ const HeaderOptions: FC<Props> = ({
           aria-label={t('operation.more', { ns: 'common' })}
           className="mr-0 box-border inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg p-0 text-components-button-secondary-text shadow-xs backdrop-blur-[5px] hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover data-popup-open:border-components-button-secondary-border-hover data-popup-open:bg-components-button-secondary-bg-hover"
         >
-          <span aria-hidden className="i-ri-more-fill h-4 w-4" />
+          <span aria-hidden className="i-ri-more-fill size-4" />
         </DropdownMenuTrigger>
         <DropdownMenuContent
           placement="bottom-end"
diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index fd8f75fefd..014c314429 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -151,7 +151,7 @@ const Annotation: FC<Props> = (props) => {
             {isChatApp && (
               <>
                 <div className={cn(!annotationConfig?.enabled && 'pr-2', 'flex h-7 items-center space-x-1 rounded-lg border border-components-panel-border bg-components-panel-bg-blur pl-2')}>
-                  <MessageFast className="h-4 w-4 text-util-colors-indigo-indigo-600" />
+                  <MessageFast className="size-4 text-util-colors-indigo-indigo-600" />
                   <div className="system-sm-medium text-text-primary">{t('name', { ns: 'appAnnotation' })}</div>
                   <Switch
                     key={controlRefreshSwitch}
@@ -179,7 +179,7 @@ const Annotation: FC<Props> = (props) => {
                     <div className="flex items-center pr-1 pl-1.5">
                       <div className="mr-1 h-3.5 w-px shrink-0 bg-divider-subtle"></div>
                       <ActionButton onClick={() => setIsShowEdit(true)}>
-                        <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+                        <RiEqualizer2Line className="size-4 text-text-tertiary" />
                       </ActionButton>
                     </div>
                   )}
diff --git a/web/app/components/app/annotation/list.tsx b/web/app/components/app/annotation/list.tsx
index 361d410698..96267158a6 100644
--- a/web/app/components/app/annotation/list.tsx
+++ b/web/app/components/app/annotation/list.tsx
@@ -49,13 +49,13 @@ function AnnotationTableRow({
         </div>
       </td>
       <td
-        className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
+        className="max-w-62.5 truncate p-3 pr-2"
         title={item.question}
       >
         <span id={questionId}>{item.question}</span>
       </td>
       <td
-        className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
+        className="max-w-62.5 truncate p-3 pr-2"
         title={item.answer}
       >
         {item.answer}
@@ -65,13 +65,13 @@ function AnnotationTableRow({
       <td className="w-24 p-3 pr-2" onClick={e => e.stopPropagation()}>
         <div className="flex space-x-1 text-text-tertiary">
           <ActionButton aria-label={t('feature.annotation.edit', { ns: 'appDebug' })} onClick={() => onView(item)}>
-            <span aria-hidden className="i-ri-edit-line h-4 w-4" />
+            <span aria-hidden className="i-ri-edit-line size-4" />
           </ActionButton>
           <ActionButton
             aria-label={t('feature.annotation.remove', { ns: 'appDebug' })}
             onClick={() => onRemoveClick(item.id)}
           >
-            <span aria-hidden className="i-ri-delete-bin-line h-4 w-4" />
+            <span aria-hidden className="i-ri-delete-bin-line size-4" />
           </ActionButton>
         </div>
       </td>
diff --git a/web/app/components/app/annotation/view-annotation-modal/hit-history-no-data.tsx b/web/app/components/app/annotation/view-annotation-modal/hit-history-no-data.tsx
index 5d3d88d3ff..e361e72f9c 100644
--- a/web/app/components/app/annotation/view-annotation-modal/hit-history-no-data.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/hit-history-no-data.tsx
@@ -9,7 +9,7 @@ const HitHistoryNoData: FC = () => {
   return (
     <div className="mx-auto mt-20 w-[480px] space-y-2 rounded-2xl bg-background-section-burn p-5">
       <div className="inline-block rounded-lg border border-divider-subtle p-3">
-        <ClockFastForward className="h-5 w-5 text-text-tertiary" />
+        <ClockFastForward className="size-5 text-text-tertiary" />
       </div>
       <div className="system-sm-regular text-text-tertiary">{t('viewModal.noHitHistory', { ns: 'appAnnotation' })}</div>
     </div>
diff --git a/web/app/components/app/annotation/view-annotation-modal/index.tsx b/web/app/components/app/annotation/view-annotation-modal/index.tsx
index 712fb29c2e..c67b00709a 100644
--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@@ -241,7 +241,7 @@ const ViewAnnotationModal: FC<Props> = ({
                     </DrawerTitle>
                     <DrawerCloseButton
                       aria-label={t('operation.close', { ns: 'common' })}
-                      className="h-6 w-6 rounded-md"
+                      className="size-6 rounded-md"
                     />
                   </div>
                 </div>
@@ -278,7 +278,7 @@ const ViewAnnotationModal: FC<Props> = ({
                   </AlertDialog>
                 </div>
                 {id && (
-                  <div className="flex h-16 shrink-0 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 h-16 shrink-0 items-center justify-between rounded-b-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)}
diff --git a/web/app/components/app/app-access-control/access-control-dialog.tsx b/web/app/components/app/app-access-control/access-control-dialog.tsx
index 8fa022a78b..a863935f90 100644
--- a/web/app/components/app/app-access-control/access-control-dialog.tsx
+++ b/web/app/components/app/app-access-control/access-control-dialog.tsx
@@ -32,7 +32,7 @@ const AccessControlDialog = ({
           className,
         )}
       >
-        <DialogCloseButton className="top-5 right-5 h-8 w-8" />
+        <DialogCloseButton className="top-5 right-5 size-8" />
         {children}
       </DialogContent>
     </Dialog>
diff --git a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
index 1e3a992136..ec72896967 100644
--- a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
+++ b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
@@ -111,7 +111,7 @@ export default function AddMemberOrGroupDialog() {
         size="small"
         className="flex h-6 w-auto shrink-0 items-center gap-x-0.5 rounded-md border-0 bg-transparent px-2 py-0 text-xs font-medium text-components-button-secondary-accent-text hover:bg-state-accent-hover focus-visible:bg-state-accent-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid data-open:bg-state-accent-hover"
       >
-        <RiAddCircleFill className="h-4 w-4" aria-hidden="true" />
+        <RiAddCircleFill className="size-4" aria-hidden="true" />
         <span>{t('operation.add', { ns: 'common' })}</span>
       </ComboboxTrigger>
       <ComboboxContent
@@ -277,8 +277,8 @@ function GroupItem({ group, subject }: GroupItemProps) {
       <BaseItem subject={subject}>
         <SelectionBox checked={isChecked} />
         <ComboboxItemText className="flex grow items-center px-0">
-          <div className="mr-2 h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-            <div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
+          <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
+            <div className="bg-access-app-icon-mask-bg flex size-full items-center justify-center">
               <RiOrganizationChart className="h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0" aria-hidden="true" />
             </div>
           </div>
@@ -295,7 +295,7 @@ function GroupItem({ group, subject }: GroupItemProps) {
         onClick={handleExpandClick}
       >
         <span className="px-[3px]">{t('accessControlDialog.operateGroupAndMember.expand', { ns: 'app' })}</span>
-        <RiArrowRightSLine className="h-4 w-4" aria-hidden="true" />
+        <RiArrowRightSLine className="size-4" aria-hidden="true" />
       </Button>
     </div>
   )
@@ -314,8 +314,8 @@ function MemberItem({ member, subject }: MemberItemProps) {
     <BaseItem subject={subject} className="pr-3">
       <SelectionBox checked={isChecked} />
       <ComboboxItemText className="flex grow items-center px-0">
-        <div className="mr-2 h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-          <div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
+        <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
+          <div className="bg-access-app-icon-mask-bg flex size-full items-center justify-center">
             <Avatar size="xxs" avatar={null} name={member.name} />
           </div>
         </div>
diff --git a/web/app/components/app/app-access-control/index.tsx b/web/app/components/app/app-access-control/index.tsx
index 593664c918..5a94c7e756 100644
--- a/web/app/components/app/app-access-control/index.tsx
+++ b/web/app/components/app/app-access-control/index.tsx
@@ -79,7 +79,7 @@ export default function AccessControl(props: AccessControlProps) {
           <AccessControlItem type={AccessMode.ORGANIZATION}>
             <div className="flex items-center p-3">
               <div className="flex grow items-center gap-x-2">
-                <RiBuildingLine className="h-4 w-4 text-text-primary" />
+                <RiBuildingLine className="size-4 text-text-primary" />
                 <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.organization', { ns: 'app' })}</p>
               </div>
             </div>
@@ -90,7 +90,7 @@ export default function AccessControl(props: AccessControlProps) {
           <AccessControlItem type={AccessMode.EXTERNAL_MEMBERS}>
             <div className="flex items-center p-3">
               <div className="flex grow items-center gap-x-2">
-                <RiVerifiedBadgeLine className="h-4 w-4 text-text-primary" />
+                <RiVerifiedBadgeLine className="size-4 text-text-primary" />
                 <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.external', { ns: 'app' })}</p>
               </div>
               {!hideTip && <WebAppSSONotEnabledTip />}
@@ -98,7 +98,7 @@ export default function AccessControl(props: AccessControlProps) {
           </AccessControlItem>
           <AccessControlItem type={AccessMode.PUBLIC}>
             <div className="flex items-center gap-x-2 p-3">
-              <RiGlobalLine className="h-4 w-4 text-text-primary" />
+              <RiGlobalLine className="size-4 text-text-primary" />
               <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.anyone', { ns: 'app' })}</p>
             </div>
           </AccessControlItem>
diff --git a/web/app/components/app/app-access-control/specific-groups-or-members.tsx b/web/app/components/app/app-access-control/specific-groups-or-members.tsx
index ce6619ec80..982a018930 100644
--- a/web/app/components/app/app-access-control/specific-groups-or-members.tsx
+++ b/web/app/components/app/app-access-control/specific-groups-or-members.tsx
@@ -28,7 +28,7 @@ export default function SpecificGroupsOrMembers() {
     return (
       <div className="flex items-center p-3">
         <div className="flex grow items-center gap-x-2">
-          <RiLockLine className="h-4 w-4 text-text-primary" />
+          <RiLockLine className="size-4 text-text-primary" />
           <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
         </div>
       </div>
@@ -39,7 +39,7 @@ export default function SpecificGroupsOrMembers() {
     <div>
       <div className="flex items-center gap-x-1 p-3">
         <div className="flex grow items-center gap-x-1">
-          <RiLockLine className="h-4 w-4 text-text-primary" />
+          <RiLockLine className="size-4 text-text-primary" />
           <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
         </div>
         <div className="flex items-center gap-x-1">
@@ -124,15 +124,15 @@ function BaseItem({ icon, onRemove, children }: BaseItemProps) {
 
   return (
     <div className="group flex flex-row items-center gap-x-1 rounded-full border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark p-1 pr-1.5 shadow-xs">
-      <div className="h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-        <div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
+      <div className="size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
+        <div className="bg-access-app-icon-mask-bg flex size-full items-center justify-center">
           {icon}
         </div>
       </div>
       {children}
       <button
         type="button"
-        className="flex h-4 w-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        className="flex size-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
         aria-label={t('operation.remove', { ns: 'common' })}
         onClick={onRemove}
       >
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index f5b2c80ae8..4b87081f04 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -382,7 +382,7 @@ const AppPublisher = ({
               disabled={disabled}
             >
               {t('common.publish', { ns: 'workflow' })}
-              <span className="i-ri-arrow-down-s-line h-4 w-4 text-components-button-primary-text" />
+              <span className="i-ri-arrow-down-s-line size-4 text-components-button-primary-text" />
             </Button>
           )}
         />
@@ -451,7 +451,7 @@ const AppPublisher = ({
             {systemFeatures.enable_creators_platform && (
               <div className="border-t border-divider-subtle p-4">
                 <SuggestedAction
-                  icon={<span className="i-ri-store-line h-4 w-4" />}
+                  icon={<span className="i-ri-store-line size-4" />}
                   disabled={!publishedAt || publishingToMarketplace}
                   onClick={handlePublishToMarketplace}
                 >
diff --git a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
index 038b9328bb..5746163e5d 100644
--- a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
+++ b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
@@ -68,7 +68,7 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
       >
         <>
           {t('operation.applyConfig', { ns: 'appDebug' })}
-          <RiArrowDownSLine className="ml-0.5 h-3 w-3" />
+          <RiArrowDownSLine className="ml-0.5 size-3" />
         </>
       </DropdownMenuTrigger>
       <DropdownMenuContent
diff --git a/web/app/components/app/app-publisher/sections.tsx b/web/app/components/app/app-publisher/sections.tsx
index 712312b744..67efb931d7 100644
--- a/web/app/components/app/app-publisher/sections.tsx
+++ b/web/app/components/app/app-publisher/sections.tsx
@@ -85,7 +85,7 @@ export const AccessModeDisplay = ({ mode }: { mode?: keyof typeof ACCESS_MODE_MA
 
   return (
     <>
-      <span className={`${icon} h-4 w-4 shrink-0 text-text-secondary`} />
+      <span className={`${icon} size-4 shrink-0 text-text-secondary`} />
       <div className="grow truncate">
         <span className="system-sm-medium text-text-secondary">{t(`accessControlDialog.accessItems.${label}`, { ns: 'app' })}</span>
       </div>
@@ -170,13 +170,13 @@ export const PublisherSummarySection = ({
               {startNodeLimitExceeded && (
                 <div className="mt-3 flex flex-col items-stretch">
                   <p
-                    className="text-sm leading-5 font-semibold text-transparent"
+                    className="text-sm/5 font-semibold text-transparent"
                     style={upgradeHighlightStyle}
                   >
                     <span className="block">{t('publishLimit.startNodeTitlePrefix', { ns: 'workflow' })}</span>
                     <span className="block">{t('publishLimit.startNodeTitleSuffix', { ns: 'workflow' })}</span>
                   </p>
-                  <p className="mt-1 text-xs leading-4 text-text-secondary">
+                  <p className="mt-1 text-xs/4 text-text-secondary">
                     {t('publishLimit.startNodeDesc', { ns: 'workflow' })}
                   </p>
                   <UpgradeBtn
@@ -219,8 +219,8 @@ export const PublisherAccessSection = ({
               <AccessModeDisplay mode={accessMode} />
             </div>
             {!isAppAccessSet && <p className="shrink-0 system-xs-regular text-text-tertiary">{t('publishApp.notSet', { ns: 'app' })}</p>}
-            <div className="flex h-4 w-4 shrink-0 items-center justify-center">
-              <span className="i-ri-arrow-right-s-line h-4 w-4 text-text-quaternary" />
+            <div className="flex size-4 shrink-0 items-center justify-center">
+              <span className="i-ri-arrow-right-s-line size-4 text-text-quaternary" />
             </div>
           </div>
           {!isAppAccessSet && <p className="mt-1 system-xs-regular text-text-warning">{t('publishApp.notSetDesc', { ns: 'app' })}</p>}
@@ -288,11 +288,11 @@ export const PublisherActionsSection = ({
           className="flex-1"
           disabled={disabledFunctionButton}
           link={appURL}
-          icon={<span className="i-ri-play-circle-line h-4 w-4" />}
+          icon={<span className="i-ri-play-circle-line size-4" />}
           actionButton={showRunConfig
             ? {
                 ariaLabel: t('operation.config', { ns: 'common' }),
-                icon: <RiSettings2Line className="h-4 w-4" />,
+                icon: <RiSettings2Line className="size-4" />,
                 onClick: () => handleOpenRunConfig?.(appURL),
               }
             : undefined}
@@ -307,11 +307,11 @@ export const PublisherActionsSection = ({
                 className="flex-1"
                 disabled={disabledFunctionButton}
                 link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
-                icon={<span className="i-ri-play-list-2-line h-4 w-4" />}
+                icon={<span className="i-ri-play-list-2-line size-4" />}
                 actionButton={showBatchRunConfig
                   ? {
                       ariaLabel: t('operation.config', { ns: 'common' }),
-                      icon: <RiSettings2Line className="h-4 w-4" />,
+                      icon: <RiSettings2Line className="size-4" />,
                       onClick: () => handleOpenRunConfig?.(`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`),
                     }
                   : undefined}
@@ -324,7 +324,7 @@ export const PublisherActionsSection = ({
             <SuggestedAction
               onClick={handleEmbed}
               disabled={!publishedAt}
-              icon={<span className="i-custom-vender-line-development-code-browser h-4 w-4" />}
+              icon={<span className="i-custom-vender-line-development-code-browser size-4" />}
             >
               {t('common.embedIntoSite', { ns: 'workflow' })}
             </SuggestedAction>
@@ -337,7 +337,7 @@ export const PublisherActionsSection = ({
               handleOpenInExplore()
           }}
           disabled={disabledFunctionButton}
-          icon={<span className="i-ri-planet-line h-4 w-4" />}
+          icon={<span className="i-ri-planet-line size-4" />}
         >
           {t('common.openInExplore', { ns: 'workflow' })}
         </SuggestedAction>
@@ -350,7 +350,7 @@ export const PublisherActionsSection = ({
           className="flex-1"
           disabled={!publishedAt || missingStartNode}
           link="./develop"
-          icon={<span className="i-ri-terminal-box-line h-4 w-4" />}
+          icon={<span className="i-ri-terminal-box-line size-4" />}
         >
           {t('common.accessAPIReference', { ns: 'workflow' })}
         </SuggestedAction>
diff --git a/web/app/components/app/app-publisher/suggested-action.tsx b/web/app/components/app/app-publisher/suggested-action.tsx
index c1cec6f819..6dfeb9610a 100644
--- a/web/app/components/app/app-publisher/suggested-action.tsx
+++ b/web/app/components/app/app-publisher/suggested-action.tsx
@@ -56,9 +56,9 @@ const SuggestedAction = ({
       onClick={handleClick}
       {...props}
     >
-      <div className="relative h-4 w-4 shrink-0">{icon}</div>
+      <div className="relative size-4 shrink-0">{icon}</div>
       <div className="shrink grow basis-0 system-sm-medium">{children}</div>
-      <RiArrowRightUpLine className="h-3.5 w-3.5 shrink-0" />
+      <RiArrowRightUpLine className="size-3.5 shrink-0" />
     </a>
   )
 
diff --git a/web/app/components/app/app-publisher/version-info-modal.tsx b/web/app/components/app/app-publisher/version-info-modal.tsx
index 4e5493d1b2..37f42a42ba 100644
--- a/web/app/components/app/app-publisher/version-info-modal.tsx
+++ b/web/app/components/app/app-publisher/version-info-modal.tsx
@@ -81,7 +81,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
           </div>
           <button
             type="button"
-            className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            className="absolute top-5 right-5 flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             aria-label={t('operation.close', { ns: 'common' })}
             onClick={onClose}
           >
diff --git a/web/app/components/app/configuration/base/feature-panel/index.tsx b/web/app/components/app/configuration/base/feature-panel/index.tsx
index 806de18412..54e2587c1b 100644
--- a/web/app/components/app/configuration/base/feature-panel/index.tsx
+++ b/web/app/components/app/configuration/base/feature-panel/index.tsx
@@ -28,7 +28,7 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
       <div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')} data-testid="feature-panel-header">
         <div className="flex h-8 items-center justify-between">
           <div className="flex shrink-0 items-center space-x-1">
-            {!!headerIcon && <div className="flex h-6 w-6 items-center justify-center">{headerIcon}</div>}
+            {!!headerIcon && <div className="flex size-6 items-center justify-center">{headerIcon}</div>}
             <div className="system-sm-semibold text-text-secondary">{title}</div>
           </div>
           <div className="flex items-center gap-2">
diff --git a/web/app/components/app/configuration/base/operation-btn/index.tsx b/web/app/components/app/configuration/base/operation-btn/index.tsx
index 52b2be6494..5fd3dc6d4b 100644
--- a/web/app/components/app/configuration/base/operation-btn/index.tsx
+++ b/web/app/components/app/configuration/base/operation-btn/index.tsx
@@ -17,8 +17,8 @@ type IOperationBtnProps = {
 }
 
 const iconMap = {
-  add: <RiAddLine className="h-3.5 w-3.5" />,
-  edit: <RiEditLine className="h-3.5 w-3.5" />,
+  add: <RiAddLine className="size-3.5" />,
+  edit: <RiEditLine className="size-3.5" />,
 }
 
 const OperationBtn: FC<IOperationBtnProps> = ({
diff --git a/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx
index 6d234c6a9c..c25edc532d 100644
--- a/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx
@@ -17,7 +17,7 @@ const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
       <div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
         <div className="flex h-10 w-10 items-center justify-center rounded-[10px]">
           <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
-            <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
+            <span className="i-ri-brain-2-line size-5 text-text-tertiary" />
           </div>
         </div>
         <div className="flex flex-col gap-1">
@@ -30,7 +30,7 @@ const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
           onClick={onSetting}
         >
           <span className="system-sm-medium text-components-button-secondary-accent-text">{t('manageModels', { ns: 'appDebug' })}</span>
-          <span className="i-ri-arrow-right-line h-4 w-4 text-components-button-secondary-accent-text" />
+          <span className="i-ri-arrow-right-line size-4 text-components-button-secondary-accent-text" />
         </button>
       </div>
     </div>
diff --git a/web/app/components/app/configuration/base/warning-mask/index.tsx b/web/app/components/app/configuration/base/warning-mask/index.tsx
index 763053835b..a408cb913a 100644
--- a/web/app/components/app/configuration/base/warning-mask/index.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/index.tsx
@@ -24,7 +24,7 @@ const WarningMask: FC<IWarningMaskProps> = ({
   return (
     <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={`${s.icon} flex size-11 items-center justify-center rounded-xl bg-components-panel-bg`}>{warningIcon}</div>
         <div className="mt-4 text-[24px] leading-normal font-semibold text-text-primary">
           {title}
         </div>
diff --git a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
index 418982fcb6..339a6d62f6 100644
--- a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
@@ -144,7 +144,7 @@ const AdvancedPromptInput: FC<Props> = ({
   const [editorHeight, setEditorHeight] = React.useState(isChatMode ? 200 : 508)
   const contextMissing = (
     <div
-      className="flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl pt-2 pr-3 pb-1 pl-4"
+      className="flex h-11 items-center justify-between rounded-t-xl pt-2 pr-3 pb-1 pl-4"
       style={{
         background: 'linear-gradient(180deg, #FEF0C7 0%, rgba(254, 240, 199, 0) 100%)',
       }}
@@ -168,7 +168,7 @@ const AdvancedPromptInput: FC<Props> = ({
         {isContextMissing
           ? contextMissing
           : (
-              <div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-background-default pt-2 pr-3 pb-1 pl-4 hover:shadow-xs')}>
+              <div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-t-xl bg-background-default pt-2 pr-3 pb-1 pl-4 hover:shadow-xs')}>
                 {isChatMode
                   ? (
                       <MessageTypeSelector value={type} onChange={onTypeChange} />
@@ -190,12 +190,12 @@ const AdvancedPromptInput: FC<Props> = ({
                     )}
                 <div className={cn(s.optionWrap, 'items-center space-x-1')}>
                   {canDelete && (
-                    <RiDeleteBinLine onClick={onDelete} className="h-6 w-6 cursor-pointer p-1 text-text-tertiary" />
+                    <RiDeleteBinLine onClick={onDelete} className="size-6 cursor-pointer p-1 text-text-tertiary" />
                   )}
                   {!isCopied
                     ? (
                         <Copy
-                          className="h-6 w-6 cursor-pointer p-1 text-text-tertiary"
+                          className="size-6 cursor-pointer p-1 text-text-tertiary"
                           onClick={() => {
                             copy(value)
                             setIsCopied(true)
@@ -203,7 +203,7 @@ const AdvancedPromptInput: FC<Props> = ({
                         />
                       )
                     : (
-                        <CopyCheck className="h-6 w-6 p-1 text-text-tertiary" />
+                        <CopyCheck className="size-6 p-1 text-text-tertiary" />
                       )}
                 </div>
               </div>
diff --git a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
index 8846530af2..f48061d5d6 100644
--- a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
+++ b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
@@ -49,7 +49,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
       >
         <div className="flex items-start space-x-3">
           <div
-            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-components-card-border bg-components-card-bg-alt shadow-lg"
+            className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-components-card-border bg-components-card-bg-alt shadow-lg"
           >
             {VarIcon}
           </div>
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
index ad73e111c7..9738accdf7 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
@@ -39,7 +39,7 @@ const EditModal: FC<Props> = ({
 
         <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.userPrefix', { ns: 'appDebug' })}</div>
         <input
-          className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
+          className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm/10"
           value={tempData.user_prefix}
           onChange={e => setTempData({
             ...tempData,
@@ -49,7 +49,7 @@ const EditModal: FC<Props> = ({
 
         <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.assistantPrefix', { ns: 'appDebug' })}</div>
         <input
-          className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
+          className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm/10"
           value={tempData.assistant_prefix}
           onChange={e => setTempData({
             ...tempData,
diff --git a/web/app/components/app/configuration/config-prompt/index.tsx b/web/app/components/app/configuration/config-prompt/index.tsx
index 20463da174..08cb9832f4 100644
--- a/web/app/components/app/configuration/config-prompt/index.tsx
+++ b/web/app/components/app/configuration/config-prompt/index.tsx
@@ -161,7 +161,7 @@ const Prompt: FC<IPromptProps> = ({
           onClick={handleAddMessage}
           className="mt-3 w-full"
         >
-          <RiAddLine className="mr-2 h-4 w-4" />
+          <RiAddLine className="mr-2 size-4" />
           <div>{t('promptMode.operation.addMessage', { ns: 'appDebug' })}</div>
         </Button>
       )}
diff --git a/web/app/components/app/configuration/config-prompt/message-type-selector.tsx b/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
index 41e16abe92..cba5737cf8 100644
--- a/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
+++ b/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
@@ -28,7 +28,7 @@ const MessageTypeSelector: FC<Props> = ({
         className={cn(showOption && 'bg-indigo-100', 'flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg pr-1 pl-1.5 text-indigo-800')}
       >
         <div className="text-sm font-semibold uppercase">{value}</div>
-        <ChevronSelectorVertical className="h-3 w-3" />
+        <ChevronSelectorVertical className="size-3" />
       </div>
       {showOption && (
         <div className="absolute top-[30px] z-10 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
diff --git a/web/app/components/app/configuration/config-var/__tests__/var-item.spec.tsx b/web/app/components/app/configuration/config-var/__tests__/var-item.spec.tsx
index 6f4fe5f11a..2bd46fc826 100644
--- a/web/app/components/app/configuration/config-var/__tests__/var-item.spec.tsx
+++ b/web/app/components/app/configuration/config-var/__tests__/var-item.spec.tsx
@@ -20,7 +20,7 @@ describe('VarItem', () => {
     expect(screen.getByTitle('api_key · API Key')).toBeInTheDocument()
     expect(screen.getByText('required')).toBeInTheDocument()
 
-    const editButton = container.querySelector('.mr-1.flex.h-6.w-6') as HTMLElement
+    const editButton = container.querySelector('.mr-1.flex.size-6') as HTMLElement
     fireEvent.click(editButton)
 
     expect(onEdit).toHaveBeenCalledTimes(1)
diff --git a/web/app/components/app/configuration/config-var/config-select/index.tsx b/web/app/components/app/configuration/config-var/config-select/index.tsx
index 42878852d9..2426b77afa 100644
--- a/web/app/components/app/configuration/config-var/config-select/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-select/index.tsx
@@ -49,7 +49,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                 )}
                 key={index}
               >
-                <RiDraggable className="handle h-4 w-4 cursor-grab text-text-quaternary" />
+                <RiDraggable className="handle size-4 cursor-grab text-text-quaternary" />
                 <input
                   key={index}
                   type="input"
@@ -63,7 +63,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                       return item
                     }))
                   }}
-                  className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pr-8 pl-1.5 text-sm leading-9 text-text-secondary focus:outline-hidden"
+                  className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pr-8 pl-1.5 text-sm/9 text-text-secondary focus:outline-hidden"
                   onFocus={() => setFocusID(index)}
                   onBlur={() => setFocusID(null)}
                 />
@@ -78,7 +78,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                   onMouseEnter={() => setDeletingID(index)}
                   onMouseLeave={() => setDeletingID(null)}
                 >
-                  <RiDeleteBinLine className="h-3.5 w-3.5" aria-hidden="true" />
+                  <RiDeleteBinLine className="size-3.5" aria-hidden="true" />
                 </button>
               </div>
             ))}
@@ -90,7 +90,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
         onClick={() => { onChange([...options, '']) }}
         className="mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3 text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover"
       >
-        <RiAddLine className="h-4 w-4" />
+        <RiAddLine className="size-4" />
         <div className="system-sm-medium text-[13px]">{t('variableConfig.addOption', { ns: 'appDebug' })}</div>
       </div>
     </div>
diff --git a/web/app/components/app/configuration/config-var/input-type-icon.tsx b/web/app/components/app/configuration/config-var/input-type-icon.tsx
index 7cd64c0230..d7a4572795 100644
--- a/web/app/components/app/configuration/config-var/input-type-icon.tsx
+++ b/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 = `h-3.5 w-3.5 ${className}`
+  const classNames = `size-3.5 ${className}`
   const icons = {
     string: (
       <InputVarTypeIcon type={InputVarType.textInput} className={classNames} />
diff --git a/web/app/components/app/configuration/config-var/select-type-item/index.tsx b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
index d65f5fa174..935a4557e6 100644
--- a/web/app/components/app/configuration/config-var/select-type-item/index.tsx
+++ b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
@@ -38,7 +38,7 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
       onClick={onClick}
     >
       <div className="shrink-0">
-        <InputVarTypeIcon type={type} className="h-5 w-5" />
+        <InputVarTypeIcon type={type} className="size-5" />
       </div>
       <span>{typeName}</span>
     </div>
diff --git a/web/app/components/app/configuration/config-var/select-var-type.tsx b/web/app/components/app/configuration/config-var/select-var-type.tsx
index 4d3a96775c..92302cf0e3 100644
--- a/web/app/components/app/configuration/config-var/select-var-type.tsx
+++ b/web/app/components/app/configuration/config-var/select-var-type.tsx
@@ -33,7 +33,7 @@ const SelectItem: FC<ItemProps> = ({ text, type, value, Icon, onClick }) => {
       className="h-8 rounded-lg px-3 text-text-primary"
       onClick={() => onClick(value)}
     >
-      {Icon ? <Icon className="h-4 w-4 text-text-secondary" /> : <InputVarTypeIcon type={type!} className="h-4 w-4 text-text-secondary" />}
+      {Icon ? <Icon className="size-4 text-text-secondary" /> : <InputVarTypeIcon type={type!} className="size-4 text-text-secondary" />}
       <div className="ml-2 truncate text-xs text-text-primary">{text}</div>
     </DropdownMenuItem>
   )
diff --git a/web/app/components/app/configuration/config-var/var-item.tsx b/web/app/components/app/configuration/config-var/var-item.tsx
index 17568683d2..5d18efd065 100644
--- a/web/app/components/app/configuration/config-var/var-item.tsx
+++ b/web/app/components/app/configuration/config-var/var-item.tsx
@@ -42,9 +42,9 @@ const VarItem: FC<ItemProps> = ({
 
   return (
     <div className={cn('group relative mb-1 flex h-[34px] w-full items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pr-3 pl-2.5 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover', readonly && 'cursor-not-allowed', className)}>
-      <VarIcon className={cn('mr-1 h-4 w-4 shrink-0 text-text-accent', canDrag && 'group-hover:opacity-0')} />
+      <VarIcon className={cn('mr-1 size-4 shrink-0 text-text-accent', canDrag && 'group-hover:opacity-0')} />
       {canDrag && (
-        <RiDraggable className="absolute top-3 left-3 hidden h-3 w-3 cursor-pointer text-text-tertiary group-hover:block" />
+        <RiDraggable className="absolute top-3 left-3 hidden size-3 cursor-pointer text-text-tertiary group-hover:block" />
       )}
       <div className="flex w-0 grow items-center">
         <div className="truncate" title={`${name} · ${label}`}>
@@ -63,20 +63,20 @@ const VarItem: FC<ItemProps> = ({
           <button
             type="button"
             aria-label={t('operation.edit', { ns: 'common' })}
-            className="mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 hover:bg-black/5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            className="mr-1 flex size-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 hover:bg-black/5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             onClick={onEdit}
           >
-            <RiEditLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiEditLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
           <button
             type="button"
             aria-label={t('operation.delete', { ns: 'common' })}
-            className="flex h-6 w-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-text-tertiary hover:text-text-destructive focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
+            className="flex size-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-text-tertiary hover:text-text-destructive focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
             onClick={onRemove}
             onMouseOver={() => setIsDeleting(true)}
             onMouseLeave={() => setIsDeleting(false)}
           >
-            <RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
+            <RiDeleteBinLine className="size-4" aria-hidden="true" />
           </button>
         </div>
       </div>
diff --git a/web/app/components/app/configuration/config-vision/index.tsx b/web/app/components/app/configuration/config-vision/index.tsx
index 81c0ac8450..2bda032d19 100644
--- a/web/app/components/app/configuration/config-vision/index.tsx
+++ b/web/app/components/app/configuration/config-vision/index.tsx
@@ -65,7 +65,7 @@ const ConfigVision: FC = () => {
     <div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] border-effects-highlight bg-background-section-burn p-2">
       <div className="shrink-0 p-1">
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
-          <Vision className="h-4 w-4 text-text-primary-on-surface" />
+          <Vision className="size-4 text-text-primary-on-surface" />
         </div>
       </div>
       <div className="flex grow items-center">
diff --git a/web/app/components/app/configuration/config-vision/param-config-content.tsx b/web/app/components/app/configuration/config-vision/param-config-content.tsx
index d39c1b9762..d5456f2b24 100644
--- a/web/app/components/app/configuration/config-vision/param-config-content.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config-content.tsx
@@ -42,7 +42,7 @@ const ParamConfigContent: FC = () => {
 
   return (
     <div>
-      <div className="text-base leading-6 font-semibold text-text-primary">{t('vision.visionSettings.title', { ns: 'appDebug' })}</div>
+      <div className="text-base/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">
diff --git a/web/app/components/app/configuration/config-vision/param-config.tsx b/web/app/components/app/configuration/config-vision/param-config.tsx
index 51092f8ae7..c14001a8e4 100644
--- a/web/app/components/app/configuration/config-vision/param-config.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config.tsx
@@ -20,7 +20,7 @@ const ParamsConfig: FC = () => {
       <PopoverTrigger
         render={(
           <Button variant="ghost" size="small" className={cn('')}>
-            <RiSettings2Line className="h-3.5 w-3.5" />
+            <RiSettings2Line className="size-3.5" />
             <div className="ml-1">{t('voice.settings', { ns: 'appDebug' })}</div>
           </Button>
         )}
diff --git a/web/app/components/app/configuration/config/agent-setting-button.tsx b/web/app/components/app/configuration/config/agent-setting-button.tsx
index 9831660571..600ed1cc62 100644
--- a/web/app/components/app/configuration/config/agent-setting-button.tsx
+++ b/web/app/components/app/configuration/config/agent-setting-button.tsx
@@ -27,7 +27,7 @@ const AgentSettingButton: FC<Props> = ({
   return (
     <>
       <Button onClick={() => setIsShowAgentSetting(true)} className="mr-2 shrink-0">
-        <RiSettings2Line className="mr-1 h-4 w-4 text-text-tertiary" />
+        <RiSettings2Line className="mr-1 size-4 text-text-tertiary" />
         {t('agent.setting.name', { ns: 'appDebug' })}
       </Button>
       {isShowAgentSetting && (
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
index ea24d129ef..3c0ae1befc 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
@@ -66,9 +66,9 @@ const AgentSetting: FC<Props> = ({
           <div className="flex items-center">
             <div
               onClick={onCancel}
-              className="flex h-6 w-6 cursor-pointer items-center justify-center"
+              className="flex size-6 cursor-pointer items-center justify-center"
             >
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+              <RiCloseLine className="size-4 text-text-tertiary" />
             </div>
           </div>
         </div>
@@ -83,7 +83,7 @@ const AgentSetting: FC<Props> = ({
           <ItemPanel
             className="mb-4"
             icon={
-              <CuteRobot className="h-4 w-4 text-indigo-600" />
+              <CuteRobot className="size-4 text-indigo-600" />
             }
             name={t('agent.agentMode', { ns: 'appDebug' })}
             description={t('agent.agentModeDes', { ns: 'appDebug' })}
@@ -139,7 +139,7 @@ const AgentSetting: FC<Props> = ({
 
           {!isFunctionCall && (
             <div className="rounded-xl bg-background-section-burn py-2 shadow-xs">
-              <div className="flex h-8 items-center px-4 text-sm leading-6 font-semibold text-text-secondary">{t('builtInPromptTitle', { ns: 'tools' })}</div>
+              <div className="flex h-8 items-center px-4 text-sm/6 font-semibold text-text-secondary">{t('builtInPromptTitle', { ns: 'tools' })}</div>
               <div className="h-[396px] overflow-y-auto px-4 text-sm leading-5 font-normal whitespace-pre-line text-text-secondary">
                 {isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion}
               </div>
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
index 54ffee0600..1fc67ab661 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
@@ -23,7 +23,7 @@ const ItemPanel: FC<Props> = ({
     <div className={cn(className, 'flex h-12 items-center justify-between rounded-lg bg-background-section-burn px-3')}>
       <div className="flex items-center">
         {icon}
-        <div className="mr-1 ml-3 text-sm leading-6 font-semibold text-text-secondary">{name}</div>
+        <div className="mr-1 ml-3 text-sm/6 font-semibold text-text-secondary">{name}</div>
         <Infotip aria-label={description} popupClassName="w-[180px]">
           {description}
         </Infotip>
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index b45184c095..cb86c8825a 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -198,10 +198,10 @@ const AgentTools: FC = () => {
               )}
             >
               <div className="flex w-0 grow items-center">
-                {item.isDeleted && <DefaultToolIcon className="h-5 w-5" />}
+                {item.isDeleted && <DefaultToolIcon className="size-5" />}
                 {!item.isDeleted && (
                   <div className={cn((item.notAuthor || !item.enabled) && 'shrink-0 opacity-50')}>
-                    {typeof item.icon === 'string' && <div className="h-5 w-5 rounded-md bg-cover bg-center" style={{ backgroundImage: `url(${item.icon})` }} />}
+                    {typeof item.icon === 'string' && <div className="size-5 rounded-md bg-cover bg-center" style={{ backgroundImage: `url(${item.icon})` }} />}
                     {typeof item.icon !== 'string' && <AppIcon className="rounded-md" size="xs" icon={item.icon?.content} background={item.icon?.background} />}
                   </div>
                 )}
@@ -268,7 +268,7 @@ const AgentTools: FC = () => {
                       onMouseOver={() => setIsDeleting(index)}
                       onMouseLeave={() => setIsDeleting(-1)}
                     >
-                      <RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
+                      <RiDeleteBinLine className="size-4" aria-hidden="true" />
                     </button>
                   </div>
                 )}
@@ -287,7 +287,7 @@ const AgentTools: FC = () => {
                                 setIsShowSettingTool(true)
                               }}
                             >
-                              <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+                              <RiEqualizer2Line className="size-4 text-text-tertiary" />
                             </button>
                           )}
                         />
@@ -310,7 +310,7 @@ const AgentTools: FC = () => {
                       onMouseOver={() => setIsDeleting(index)}
                       onMouseLeave={() => setIsDeleting(-1)}
                     >
-                      <RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
+                      <RiDeleteBinLine className="size-4" aria-hidden="true" />
                     </button>
                   </div>
                 )}
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
index 806fdd5e93..f6c74eee32 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@@ -192,7 +192,7 @@ const SettingBuiltInTool: FC<Props> = ({
                   <div className="relative border-b border-divider-subtle p-4 pb-3">
                     <div className="absolute top-3 right-3">
                       <ActionButton onClick={onHide}>
-                        <RiCloseLine className="h-4 w-4" />
+                        <RiCloseLine className="size-4" />
                       </ActionButton>
                     </div>
                     {showBackButton && (
@@ -200,12 +200,12 @@ const SettingBuiltInTool: FC<Props> = ({
                         className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
                         onClick={onHide}
                       >
-                        <RiArrowLeftLine className="h-4 w-4" />
+                        <RiArrowLeftLine className="size-4" />
                         {t('detailPanel.operation.back', { ns: 'plugin' })}
                       </div>
                     )}
                     <div className="flex items-center gap-1">
-                      <Icon size="tiny" className="h-6 w-6" src={collection.icon} />
+                      <Icon size="tiny" className="size-6" src={collection.icon} />
                       <OrgInfo
                         packageNameClassName="w-auto"
                         orgName={collection.author}
diff --git a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
index 801645940f..36fc74a6fd 100644
--- a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
+++ b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
@@ -47,9 +47,9 @@ const SelectItem: FC<ItemProps> = ({ text, value, Icon, isChecked, description,
       <div className="flex items-center justify-between">
         <div className="flex items-center">
           <div className="mr-3 rounded-lg bg-indigo-50 p-1">
-            <Icon className="h-4 w-4 text-indigo-600" />
+            <Icon className="size-4 text-indigo-600" />
           </div>
-          <div className="text-sm leading-5 font-medium text-gray-900">{text}</div>
+          <div className="text-sm/5 font-medium text-gray-900">{text}</div>
         </div>
         <Radio isChecked={isChecked} />
       </div>
@@ -117,9 +117,9 @@ const AssistantTypePicker: FC<Props> = ({
             <div className={cn(open && 'bg-gray-50', 'flex h-8 cursor-pointer items-center space-x-1 rounded-lg border border-black/5 px-3 text-indigo-600 select-none')} />
           )}
         >
-          {isAgent ? <BubbleText className="h-3 w-3" /> : <CuteRobot className="h-3 w-3" />}
+          {isAgent ? <BubbleText className="size-3" /> : <CuteRobot className="size-3" />}
           <div className="text-xs font-medium">{t(`assistantType.${isAgent ? 'agentAssistant' : 'chatAssistant'}.name`, { ns: 'appDebug' })}</div>
-          <RiArrowDownSLine className="h-3 w-3" />
+          <RiArrowDownSLine className="size-3" />
         </PopoverTrigger>
         <PopoverContent
           placement="bottom-end"
@@ -127,7 +127,7 @@ const AssistantTypePicker: FC<Props> = ({
           alignOffset={-2}
           popupClassName="relative left-0.5 w-[480px] rounded-xl border border-black/8 bg-white p-6 shadow-lg"
         >
-          <div className="mb-2 text-sm leading-5 font-semibold text-gray-900">{t('assistantType.name', { ns: 'appDebug' })}</div>
+          <div className="mb-2 text-sm/5 font-semibold text-gray-900">{t('assistantType.name', { ns: 'appDebug' })}</div>
           <SelectItem
             Icon={BubbleText}
             value="chat"
diff --git a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
index f9e9fa362a..c57ad8d689 100644
--- a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
+++ b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
@@ -17,7 +17,7 @@ const AutomaticBtn: FC<IAutomaticBtnProps> = ({
 
   return (
     <Button variant="secondary-accent" size="small" onClick={onClick}>
-      <RiSparklingFill className="mr-1 h-3.5 w-3.5" />
+      <RiSparklingFill className="mr-1 size-3.5" />
       <span className="">{t('operation.automatic', { ns: 'appDebug' })}</span>
     </Button>
   )
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 67149deeac..1b3e7119b3 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -72,7 +72,7 @@ const TryLabel: FC<{
       className="mt-2 mr-1 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-components-button-secondary-bg px-2"
       onClick={onClick}
     >
-      <Icon className="h-4 w-4 text-text-tertiary"></Icon>
+      <Icon className="size-4 text-text-tertiary"></Icon>
       <div className="ml-1 text-xs font-medium text-text-secondary">{text}</div>
     </div>
   )
@@ -375,7 +375,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                   onClick={onGenerate}
                   disabled={isLoading}
                 >
-                  <Generator className="h-4 w-4" />
+                  <Generator className="size-4" />
                   <span className="text-xs font-semibold">{t('generate.generate', { ns: 'appDebug' })}</span>
                 </Button>
               </div>
diff --git a/web/app/components/app/configuration/config/automatic/idea-output.tsx b/web/app/components/app/configuration/config/automatic/idea-output.tsx
index 16be6d9176..6ac5553166 100644
--- a/web/app/components/app/configuration/config/automatic/idea-output.tsx
+++ b/web/app/components/app/configuration/config/automatic/idea-output.tsx
@@ -27,7 +27,7 @@ const IdeaOutput: FC<Props> = ({
   return (
     <div className="mt-4 text-[0px]">
       <div
-        className="mb-1.5 flex cursor-pointer items-center text-sm leading-5 font-medium text-text-primary"
+        className="mb-1.5 flex cursor-pointer items-center text-sm/5 font-medium text-text-primary"
         onClick={toggleFoldIdeaOutput}
       >
         <div className="mr-1 system-sm-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}.idealOutput`, { ns: 'appDebug' })}</div>
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index 057fd48aeb..98d0d1390c 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -57,7 +57,7 @@ const Result: FC<Props> = ({
               toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
             }}
           >
-            <RiClipboardLine className="h-4 w-4 text-text-secondary" />
+            <RiClipboardLine className="size-4 text-text-secondary" />
           </Button>
           <Button variant="primary" onClick={onApply}>
             {t('generate.apply', { ns: 'appDebug' })}
diff --git a/web/app/components/app/configuration/config/automatic/version-selector.tsx b/web/app/components/app/configuration/config/automatic/version-selector.tsx
index 13b99dafde..60584f1a72 100644
--- a/web/app/components/app/configuration/config/automatic/version-selector.tsx
+++ b/web/app/components/app/configuration/config/automatic/version-selector.tsx
@@ -85,7 +85,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
                 {option.label}
               </div>
               {
-                value === option.value && <RiCheckLine className="h-4 w-4 shrink-0 text-text-accent" />
+                value === option.value && <RiCheckLine className="size-4 shrink-0 text-text-accent" />
               }
             </DropdownMenuRadioItem>
           ))}
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index bd3951a485..87b220a19f 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -254,7 +254,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
                   onClick={onGenerate}
                   disabled={isLoading}
                 >
-                  <Generator className="h-4 w-4" />
+                  <Generator className="size-4" />
                   <span className="text-xs font-semibold">{t('codegen.generate', { ns: 'appDebug' })}</span>
                 </Button>
               </div>
diff --git a/web/app/components/app/configuration/config/config-audio.tsx b/web/app/components/app/configuration/config/config-audio.tsx
index 21afed18fe..5f7005ae41 100644
--- a/web/app/components/app/configuration/config/config-audio.tsx
+++ b/web/app/components/app/configuration/config/config-audio.tsx
@@ -52,7 +52,7 @@ const ConfigAudio: FC = () => {
     <div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn p-2">
       <div className="shrink-0 p-1">
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs">
-          <Microphone01 className="h-4 w-4 text-text-primary-on-surface" />
+          <Microphone01 className="size-4 text-text-primary-on-surface" />
         </div>
       </div>
       <div className="flex grow items-center">
diff --git a/web/app/components/app/configuration/config/config-document.tsx b/web/app/components/app/configuration/config/config-document.tsx
index 107e21b36e..065bf7bd24 100644
--- a/web/app/components/app/configuration/config/config-document.tsx
+++ b/web/app/components/app/configuration/config/config-document.tsx
@@ -52,7 +52,7 @@ const ConfigDocument: FC = () => {
     <div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn p-2">
       <div className="shrink-0 p-1">
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
-          <Document className="h-4 w-4 text-text-primary-on-surface" />
+          <Document className="size-4 text-text-primary-on-surface" />
         </div>
       </div>
       <div className="flex grow items-center">
diff --git a/web/app/components/app/configuration/configuration-view.tsx b/web/app/components/app/configuration/configuration-view.tsx
index 80c2934195..a33280bb06 100644
--- a/web/app/components/app/configuration/configuration-view.tsx
+++ b/web/app/components/app/configuration/configuration-view.tsx
@@ -130,14 +130,14 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
                     {isMobile && (
                       <Button className="mr-2 h-8! text-[13px]! font-medium" onClick={onOpenDebugPanel}>
                         <span className="mr-1">{t('operation.debugConfig', { ns: 'appDebug' })}</span>
-                        <CodeBracketIcon className="h-4 w-4 text-text-tertiary" />
+                        <CodeBracketIcon className="size-4 text-text-tertiary" />
                       </Button>
                     )}
                     <AppPublisher {...appPublisherProps} />
                   </div>
                 </div>
               </div>
-              <div className={`flex h-full w-full shrink-0 flex-col sm:w-1/2 ${debugWithMultipleModel && 'max-w-[560px]'}`}>
+              <div className={`flex size-full shrink-0 flex-col sm:w-1/2 ${debugWithMultipleModel && 'max-w-[560px]'}`}>
                 <Config />
               </div>
               {!isMobile && (
@@ -217,7 +217,7 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
                       <div className="mb-4 flex shrink-0 justify-end">
                         <DrawerCloseButton
                           aria-label={t('operation.close', { ns: 'common' })}
-                          className="h-6 w-6 rounded-md"
+                          className="size-6 rounded-md"
                         />
                       </div>
                       <Debug
diff --git a/web/app/components/app/configuration/dataset-config/card-item/index.tsx b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
index 62dd17f4b1..08246d0377 100644
--- a/web/app/components/app/configuration/dataset-config/card-item/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
@@ -86,7 +86,7 @@ const Item: FC<ItemProps> = ({
                 setShowSettingsModal(true)
               }}
             >
-              <RiEditLine className="h-4 w-4 shrink-0 text-text-tertiary" />
+              <RiEditLine className="size-4 shrink-0 text-text-tertiary" />
             </ActionButton>
           )
         }
@@ -98,7 +98,7 @@ const Item: FC<ItemProps> = ({
               onMouseEnter={() => setIsDeleting(true)}
               onMouseLeave={() => setIsDeleting(false)}
             >
-              <RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')} />
+              <RiDeleteBinLine className={cn('size-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')} />
             </ActionButton>
           )
         }
diff --git a/web/app/components/app/configuration/dataset-config/context-var/index.tsx b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
index 60d81548cf..6259e80415 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
@@ -17,7 +17,7 @@ const ContextVar: FC<Props> = (props) => {
     <div className={cn(notSetVar ? 'rounded-br-xl rounded-bl-xl border-[#FEF0C7] bg-[#FEF0C7]' : 'border-components-panel-border-subtle', 'flex h-12 items-center justify-between border-t px-3')}>
       <div className="flex shrink-0 items-center space-x-1">
         <div className="p-1">
-          <BracketsX className="h-4 w-4 text-text-accent" />
+          <BracketsX className="size-4 text-text-accent" />
         </div>
         <div className="mr-1 text-sm font-medium text-text-secondary">{t('feature.dataSet.queryVariable.title', { ns: 'appDebug' })}</div>
         <Infotip
diff --git a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
index 0938d0aea4..89caf92373 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
@@ -74,7 +74,7 @@ const VarPicker: FC<Props> = ({
                       </div>
                     )}
               </div>
-              <ChevronDownIcon className={cn(open && 'rotate-180 text-text-tertiary', 'h-3.5 w-3.5')} />
+              <ChevronDownIcon className={cn(open && 'rotate-180 text-text-tertiary', 'size-3.5')} />
             </div>
           </div>
         )}
@@ -104,7 +104,7 @@ const VarPicker: FC<Props> = ({
           : (
               <div className="w-[240px] rounded-lg border border-components-panel-border bg-components-panel-bg p-6 shadow-lg">
                 <div className="mb-1 text-sm font-medium text-text-secondary">{t('feature.dataSet.queryVariable.noVar', { ns: 'appDebug' })}</div>
-                <div className="text-xs leading-normal text-text-tertiary">{t('feature.dataSet.queryVariable.noVarTip', { ns: 'appDebug' })}</div>
+                <div className="text-xs/normal text-text-tertiary">{t('feature.dataSet.queryVariable.noVarTip', { ns: 'appDebug' })}</div>
               </div>
             )}
       </PopoverContent>
diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
index 9c50196dcf..5702776d60 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@@ -246,7 +246,7 @@ const ConfigContent: FC<Props> = ({
                       <div className="truncate">{option.label}</div>
                       <Infotip
                         aria-label={option.tips}
-                        className="ml-0.5 h-3.5 w-3.5"
+                        className="ml-0.5 size-3.5"
                         iconClassName="h-3.5 w-3.5"
                         popupClassName="w-[200px]"
                       >
diff --git a/web/app/components/app/configuration/dataset-config/params-config/index.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
index edfffd5726..a079f18edd 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -118,7 +118,7 @@ const ParamsConfig = ({
         }}
         disabled={disabled}
       >
-        <RiEqualizer2Line className="mr-1 h-3.5 w-3.5" />
+        <RiEqualizer2Line className="mr-1 size-3.5" />
         {t('retrievalSettings', { ns: 'dataset' })}
       </Button>
       {
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
index 7e32ecde11..f602450be1 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -199,9 +199,9 @@ const SettingsModal: FC<SettingsModalProps> = ({
         <div className="flex items-center">
           <div
             onClick={onCancel}
-            className="flex h-6 w-6 cursor-pointer items-center justify-center"
+            className="flex size-6 cursor-pointer items-center justify-center"
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+            <RiCloseLine className="size-4 text-text-tertiary" />
           </div>
         </div>
       </div>
@@ -279,7 +279,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
                   modelList={embeddingModelList}
                 />
               </div>
-              <div className="mt-2 w-full text-xs leading-6 text-text-tertiary">
+              <div className="mt-2 w-full text-xs/6 text-text-tertiary">
                 {t('form.embeddingModelTip', { ns: 'datasetSettings' })}
                 <button
                   type="button"
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
index c67c50f1d1..ab5c59fe36 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
@@ -57,7 +57,7 @@ const ExternalRetrievalSection: FC<ExternalRetrievalSectionProps> = ({
       </div>
       <div className="w-full max-w-[480px]">
         <div className="flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2">
-          <ApiConnectionMod className="h-4 w-4 text-text-secondary" />
+          <ApiConnectionMod className="size-4 text-text-secondary" />
           <div className="overflow-hidden system-sm-medium text-ellipsis text-text-secondary">
             {currentDataset?.external_knowledge_info.external_knowledge_api_name}
           </div>
@@ -212,7 +212,7 @@ export const RetrievalChangeTip: FC<RetrievalChangeTipProps> = ({
         }}
         aria-label="close-retrieval-change-tip"
       >
-        <RiCloseLine className="h-4 w-4 text-gray-500" />
+        <RiCloseLine className="size-4 text-gray-500" />
       </button>
     </div>
   )
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
index 3c272f687e..064a1fb97f 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
@@ -99,7 +99,7 @@ const DebugItem: FC<DebugItemProps> = ({
                 className={cn(open && 'bg-state-base-hover', 'focus-visible:ring-2 focus-visible:ring-state-accent-solid')}
                 aria-label={t('operation.more', { ns: 'common' })}
               >
-                <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
+                <span aria-hidden className="i-ri-more-fill size-4 text-text-tertiary" />
               </ActionButton>
             )}
           />
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx
index bf889e20ea..4414af002a 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx
@@ -94,7 +94,7 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
             {
               iconProvider && !isEmpty && (
                 <ModelIcon
-                  className="mr-1 h-4! w-4!"
+                  className="mr-1 size-4!"
                   provider={iconProvider}
                   modelName={currentModel?.model || modelAndParameter.model}
                 />
@@ -102,8 +102,8 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
             }
             {
               (!iconProvider || isEmpty) && (
-                <div className="mr-1 flex h-4 w-4 items-center justify-center rounded-sm">
-                  <span className="i-custom-vender-line-shapes-cube-outline h-4 w-4 text-text-accent" />
+                <div className="mr-1 flex size-4 items-center justify-center rounded-sm">
+                  <span className="i-custom-vender-line-shapes-cube-outline size-4 text-text-accent" />
                 </div>
               )
             }
@@ -129,7 +129,7 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
                 </div>
               )
             }
-            <span className={`i-ri-arrow-down-s-line h-3 w-3 ${isEmpty ? 'text-text-accent' : 'text-text-tertiary'}`} />
+            <span className={`i-ri-arrow-down-s-line size-3 ${isEmpty ? 'text-text-accent' : 'text-text-tertiary'}`} />
             {
               !isEmpty && !isActive && statusLabelKey && (
                 <Tooltip>
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index 87beccae24..8ce019e004 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -406,7 +406,7 @@ const Debug: FC<IDebug> = ({
                         onClick={() => onMultipleModelConfigsChange(true, [...multipleModelConfigs, { id: `${Date.now()}`, model: '', provider: '', parameters: {} }])}
                         disabled={multipleModelConfigs.length >= 4}
                       >
-                        <RiAddLine className="mr-1 h-3.5 w-3.5" />
+                        <RiAddLine className="mr-1 size-3.5" />
                         {t('modelProvider.addModel', { ns: 'common' })}
                         (
                         {multipleModelConfigs.length}
@@ -422,7 +422,7 @@ const Debug: FC<IDebug> = ({
                 {
                   !readonly && (
                     <Tooltip>
-                      <TooltipTrigger render={<ActionButton onClick={clearConversation}><RefreshCcw01 className="h-4 w-4" /></ActionButton>} />
+                      <TooltipTrigger render={<ActionButton onClick={clearConversation}><RefreshCcw01 className="size-4" /></ActionButton>} />
                       <TooltipContent>
                         {t('operation.refresh', { ns: 'common' })}
                       </TooltipContent>
@@ -434,7 +434,7 @@ const Debug: FC<IDebug> = ({
                   varList.length > 0 && (
                     <div className="relative mr-2 ml-1">
                       <Tooltip>
-                        <TooltipTrigger render={<ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => !readonly && setExpanded(!expanded)}><RiEqualizer2Line className="h-4 w-4" /></ActionButton>} />
+                        <TooltipTrigger render={<ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => !readonly && setExpanded(!expanded)}><RiEqualizer2Line className="size-4" /></ActionButton>} />
                         <TooltipContent>
                           {t('panel.userInputField', { ns: 'workflow' })}
                         </TooltipContent>
@@ -513,7 +513,7 @@ const Debug: FC<IDebug> = ({
                 <div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
                   <div className="flex h-10 w-10 items-center justify-center rounded-[10px]">
                     <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
-                      <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
+                      <span className="i-ri-brain-2-line size-5 text-text-tertiary" />
                     </div>
                   </div>
                   <div className="flex flex-col gap-1">
@@ -556,7 +556,7 @@ const Debug: FC<IDebug> = ({
                 )}
                 {!completionRes && !isResponding && (
                   <div className="flex grow flex-col items-center justify-center gap-2">
-                    <RiSparklingFill className="h-12 w-12 text-text-empty-state-icon" />
+                    <RiSparklingFill className="size-12 text-text-empty-state-icon" />
                     <div className="system-sm-regular text-text-quaternary">{t('noResult', { ns: 'appDebug' })}</div>
                   </div>
                 )}
diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
index 97988939d4..bc6f90c1cd 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -117,8 +117,8 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
             onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}
           >
             <div className="system-md-semibold-uppercase text-text-secondary">{t('inputs.userInputField', { ns: 'appDebug' })}</div>
-            {userInputFieldCollapse && <RiArrowRightSLine className="h-4 w-4 text-text-secondary" aria-hidden="true" />}
-            {!userInputFieldCollapse && <RiArrowDownSLine className="h-4 w-4 text-text-secondary" aria-hidden="true" />}
+            {userInputFieldCollapse && <RiArrowRightSLine className="size-4 text-text-secondary" aria-hidden="true" />}
+            {!userInputFieldCollapse && <RiArrowDownSLine className="size-4 text-text-secondary" aria-hidden="true" />}
           </button>
           {!userInputFieldCollapse && (
             <div className="mt-1 system-xs-regular text-text-tertiary">{t('inputs.completionVarTip', { ns: 'appDebug' })}</div>
@@ -237,7 +237,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                       onClick={() => onSend?.()}
                       className="w-[96px]"
                     >
-                      <RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+                      <RiPlayLargeFill className="mr-0.5 size-4 shrink-0" aria-hidden="true" />
                       {t('inputs.run', { ns: 'appDebug' })}
                     </Button>
                   )}
@@ -254,7 +254,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                 onClick={() => onSend?.()}
                 className="w-[96px]"
               >
-                <RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+                <RiPlayLargeFill className="mr-0.5 size-4 shrink-0" aria-hidden="true" />
                 {t('inputs.run', { ns: 'appDebug' })}
               </Button>
             )}
diff --git a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
index 16e3633e3e..09685ccc08 100644
--- a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
+++ b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
@@ -116,7 +116,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           {`${action} ${t('variableConfig.apiBasedVar', { ns: 'appDebug' })}`}
         </div>
         <div className="py-2">
-          <div className="text-sm leading-9 font-medium text-text-primary">
+          <div className="text-sm/9 font-medium text-text-primary">
             {t('apiBasedExtension.type', { ns: 'common' })}
           </div>
           <Select
@@ -137,7 +137,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           </Select>
         </div>
         <div className="py-2">
-          <div className="text-sm leading-9 font-medium text-text-primary">
+          <div className="text-sm/9 font-medium text-text-primary">
             {t('feature.tools.modal.name.title', { ns: 'appDebug' })}
           </div>
           <div className="flex items-center">
@@ -157,7 +157,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           </div>
         </div>
         <div className="py-2">
-          <div className="text-sm leading-9 font-medium text-text-primary">
+          <div className="text-sm/9 font-medium text-text-primary">
             {t('feature.tools.modal.variableName.title', { ns: 'appDebug' })}
           </div>
           <input
@@ -178,7 +178,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
                   rel="noopener noreferrer"
                   className="group flex items-center text-xs font-normal text-text-tertiary hover:text-text-accent"
                 >
-                  <BookOpen01 className="mr-1 h-3 w-3 text-text-tertiary group-hover:text-text-accent" />
+                  <BookOpen01 className="mr-1 size-3 text-text-tertiary group-hover:text-text-accent" />
                   {t('apiBasedExtension.link', { ns: 'common' })}
                 </a>
               </div>
diff --git a/web/app/components/app/create-app-dialog-shell.tsx b/web/app/components/app/create-app-dialog-shell.tsx
index 80466efaa1..4df4fb6d70 100644
--- a/web/app/components/app/create-app-dialog-shell.tsx
+++ b/web/app/components/app/create-app-dialog-shell.tsx
@@ -29,9 +29,9 @@ export function CreateAppDialogShell({
     >
       <DialogContent
         backdropClassName="bg-background-overlay-backdrop backdrop-blur-[6px]"
-        className="top-0 left-0 h-screen max-h-none w-screen max-w-none translate-x-0 translate-y-0 overflow-hidden rounded-none border-none bg-transparent p-4 shadow-none"
+        className="top-0 left-0 h-screen max-h-none w-screen max-w-none translate-0 overflow-hidden rounded-none border-none bg-transparent p-4 shadow-none"
       >
-        <div className="h-full w-full rounded-2xl border border-effects-highlight bg-background-default-subtle">
+        <div className="size-full rounded-2xl border border-effects-highlight bg-background-default-subtle">
           <div className={cn('relative h-full overflow-hidden', contentClassName)}>
             <DialogTitle className="sr-only">{title}</DialogTitle>
             <button
@@ -40,7 +40,7 @@ export function CreateAppDialogShell({
               className="absolute top-3 right-3 z-50 flex h-9 w-9 cursor-pointer items-center justify-center rounded-[10px] bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover"
               onClick={onClose}
             >
-              <span aria-hidden="true" className="i-ri-close-large-line h-3.5 w-3.5 text-components-button-tertiary-text" />
+              <span aria-hidden="true" className="i-ri-close-large-line size-3.5 text-components-button-tertiary-text" />
             </button>
             {children}
           </div>
diff --git a/web/app/components/app/create-app-dialog/app-card/index.tsx b/web/app/components/app/create-app-dialog/app-card/index.tsx
index 27232b0350..1b022eb961 100644
--- a/web/app/components/app/create-app-dialog/app-card/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/index.tsx
@@ -53,7 +53,7 @@ const AppCard = ({
           />
           <AppTypeIcon
             wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-sm border border-divider-regular outline-solid outline-components-panel-on-panel-item-bg"
-            className="h-3 w-3"
+            className="size-3"
             type={appBasicInfo.mode}
           />
         </div>
@@ -74,7 +74,7 @@ const AppCard = ({
           <div className={cn('grid h-8 w-full grid-cols-1 items-center space-x-2', canCreate && 'grid-cols-2')}>
             {canCreate && (
               <Button variant="primary" onClick={() => onCreate()}>
-                <PlusIcon className="mr-1 h-4 w-4" />
+                <PlusIcon className="mr-1 size-4" />
                 <span className="text-xs">{t('newApp.useTemplate', { ns: 'app' })}</span>
               </Button>
             )}
diff --git a/web/app/components/app/create-app-dialog/app-list/index.tsx b/web/app/components/app/create-app-dialog/app-list/index.tsx
index 20bb18460b..73334b5214 100644
--- a/web/app/components/app/create-app-dialog/app-list/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/index.tsx
@@ -237,8 +237,8 @@ function NoTemplateFound() {
   const { t } = useTranslation()
   return (
     <div className="w-full rounded-lg bg-workflow-process-bg p-4">
-      <div className="mb-2 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-components-card-bg shadow-lg">
-        <RiRobot2Line className="h-5 w-5 text-text-tertiary" />
+      <div className="mb-2 inline-flex size-8 items-center justify-center rounded-lg bg-components-card-bg shadow-lg">
+        <RiRobot2Line className="size-5 text-text-tertiary" />
       </div>
       <p className="title-md-semi-bold text-text-primary">{t('newApp.noTemplateFound', { ns: 'app' })}</p>
       <p className="system-sm-regular text-text-tertiary">{t('newApp.noTemplateFoundTip', { ns: 'app' })}</p>
diff --git a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
index 5b1eb1ac1f..a9cb1f52d5 100644
--- a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
@@ -18,7 +18,7 @@ type SidebarProps = {
 export default function Sidebar({ current, categories, onClick, onCreateFromBlank }: SidebarProps) {
   const { t } = useTranslation()
   return (
-    <div className="flex h-full w-full flex-col">
+    <div className="flex size-full flex-col">
       <ul className="pt-0.5">
         <CategoryItem category={AppCategories.RECOMMENDED} active={current === AppCategories.RECOMMENDED} onClick={onClick} />
       </ul>
@@ -32,7 +32,7 @@ export default function Sidebar({ current, categories, onClick, onCreateFromBlan
         className="flex w-full cursor-pointer items-center gap-1 border-none bg-transparent px-3 py-1 text-left text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
         onClick={onCreateFromBlank}
       >
-        <RiStickyNoteAddLine className="h-3.5 w-3.5" aria-hidden="true" />
+        <RiStickyNoteAddLine className="size-3.5" aria-hidden="true" />
         <span className="system-xs-regular">{t('newApp.startFromBlank', { ns: 'app' })}</span>
       </button>
     </div>
@@ -53,8 +53,8 @@ function CategoryItem({ category, active, onClick }: CategoryItemProps) {
         onClick={() => { onClick?.(category) }}
       >
         {category === AppCategories.RECOMMENDED && (
-          <div className="inline-flex h-5 w-5 items-center justify-center rounded-md">
-            <RiThumbUpLine className="h-4 w-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active" aria-hidden="true" />
+          <div className="inline-flex size-5 items-center justify-center rounded-md">
+            <RiThumbUpLine className="size-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active" aria-hidden="true" />
           </div>
         )}
         <AppCategoryLabel
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index e81ad0f862..7b42d7908b 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -119,8 +119,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                     title={t('types.workflow', { ns: 'app' })}
                     description={t('newApp.workflowShortDescription', { ns: 'app' })}
                     icon={(
-                      <div className="flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-indigo-solid">
-                        <RiExchange2Fill className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
+                      <div className="flex size-6 items-center justify-center rounded-md bg-components-icon-bg-indigo-solid">
+                        <RiExchange2Fill className="size-4 text-components-avatar-shape-fill-stop-100" />
                       </div>
                     )}
                     onClick={() => {
@@ -132,8 +132,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                     title={t('types.advanced', { ns: 'app' })}
                     description={t('newApp.advancedShortDescription', { ns: 'app' })}
                     icon={(
-                      <div className="flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-light-solid">
-                        <BubbleTextMod className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
+                      <div className="flex size-6 items-center justify-center rounded-md bg-components-icon-bg-blue-light-solid">
+                        <BubbleTextMod className="size-4 text-components-avatar-shape-fill-stop-100" />
                       </div>
                     )}
                     onClick={() => {
@@ -150,7 +150,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                     onClick={() => setIsAppTypeExpanded(!isAppTypeExpanded)}
                   >
                     <span className="system-2xs-medium-uppercase text-text-tertiary">{t('newApp.forBeginners', { ns: 'app' })}</span>
-                    <RiArrowRightSLine className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} aria-hidden="true" />
+                    <RiArrowRightSLine className={`ml-1 size-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} aria-hidden="true" />
                   </button>
                 </div>
                 {isAppTypeExpanded && (
@@ -160,8 +160,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                       title={t('types.chatbot', { ns: 'app' })}
                       description={t('newApp.chatbotShortDescription', { ns: 'app' })}
                       icon={(
-                        <div className="flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid">
-                          <ChatBot className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
+                        <div className="flex size-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid">
+                          <ChatBot className="size-4 text-components-avatar-shape-fill-stop-100" />
                         </div>
                       )}
                       onClick={() => {
@@ -173,8 +173,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                       title={t('types.agent', { ns: 'app' })}
                       description={t('newApp.agentShortDescription', { ns: 'app' })}
                       icon={(
-                        <div className="flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-violet-solid">
-                          <Logic className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
+                        <div className="flex size-6 items-center justify-center rounded-md bg-components-icon-bg-violet-solid">
+                          <Logic className="size-4 text-components-avatar-shape-fill-stop-100" />
                         </div>
                       )}
                       onClick={() => {
@@ -186,8 +186,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                       title={t('newApp.completeApp', { ns: 'app' })}
                       description={t('newApp.completionShortDescription', { ns: 'app' })}
                       icon={(
-                        <div className="flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-teal-solid">
-                          <ListSparkle className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
+                        <div className="flex size-6 items-center justify-center rounded-md bg-components-icon-bg-teal-solid">
+                          <ListSparkle className="size-4 text-components-avatar-shape-fill-stop-100" />
                         </div>
                       )}
                       onClick={() => {
@@ -256,7 +256,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               >
                 <span>{t('newApp.noIdeaTip', { ns: 'app' })}</span>
                 <div className="p-px">
-                  <RiArrowRightLine className="h-3.5 w-3.5" aria-hidden="true" />
+                  <RiArrowRightLine className="size-3.5" aria-hidden="true" />
                 </div>
               </button>
               <div className="flex gap-2">
@@ -274,7 +274,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
           <div className="max-w-[760px] border-x border-x-divider-subtle">
             <div className="h-6 2xl:h-[139px]" />
             <AppPreview mode={appMode} />
-            <div className="absolute right-0 left-0 border-b border-b-divider-subtle"></div>
+            <div className="absolute inset-x-0 border-b border-b-divider-subtle"></div>
             <div className="flex h-[448px] w-[664px] items-center justify-center" style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
               <AppScreenShot show={appMode === AppModeEnum.CHAT} mode={AppModeEnum.CHAT} />
               <AppScreenShot show={appMode === AppModeEnum.ADVANCED_CHAT} mode={AppModeEnum.ADVANCED_CHAT} />
@@ -282,7 +282,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               <AppScreenShot show={appMode === AppModeEnum.COMPLETION} mode={AppModeEnum.COMPLETION} />
               <AppScreenShot show={appMode === AppModeEnum.WORKFLOW} mode={AppModeEnum.WORKFLOW} />
             </div>
-            <div className="absolute right-0 left-0 border-b border-b-divider-subtle"></div>
+            <div className="absolute inset-x-0 border-b border-b-divider-subtle"></div>
           </div>
         </div>
       </div>
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index 85ed284506..6e4c9ec366 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -221,10 +221,10 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
           <div className="flex items-center justify-between pt-6 pr-5 pb-3 pl-6 title-2xl-semi-bold text-text-primary">
             {t('importApp', { ns: 'app' })}
             <div
-              className="flex h-8 w-8 cursor-pointer items-center"
+              className="flex size-8 cursor-pointer items-center"
               onClick={() => onClose()}
             >
-              <span className="i-ri-close-line h-5 w-5 text-text-tertiary" />
+              <span className="i-ri-close-line size-5 text-text-tertiary" />
             </div>
           </div>
           <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 system-md-semibold text-text-tertiary">
diff --git a/web/app/components/app/create-from-dsl-modal/uploader.tsx b/web/app/components/app/create-from-dsl-modal/uploader.tsx
index 5b380bd9c5..0d25fb2f58 100644
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/app/create-from-dsl-modal/uploader.tsx
@@ -109,7 +109,7 @@ const Uploader: FC<Props> = ({
         {!file && (
           <div className={cn('flex h-12 items-center rounded-[10px] border border-dashed border-components-dropzone-border bg-components-dropzone-bg text-sm font-normal', dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
             <div className="flex w-full items-center justify-center space-x-2">
-              <RiUploadCloud2Line className="h-6 w-6 text-text-tertiary" />
+              <RiUploadCloud2Line className="size-6 text-text-tertiary" />
               <div className="text-text-tertiary">
                 {t('dslUploader.button', { ns: 'app' })}
                 <button
@@ -121,13 +121,13 @@ const Uploader: FC<Props> = ({
                 </button>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
+            {dragging && <div ref={dragRef} className="absolute top-0 left-0 size-full" />}
           </div>
         )}
         {file && (
           <div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', 'hover:bg-components-panel-on-panel-item-bg-hover')}>
             <div className="flex items-center justify-center p-3">
-              <YamlIcon className="h-6 w-6 shrink-0" />
+              <YamlIcon className="size-6 shrink-0" />
             </div>
             <div className="flex grow flex-col items-start gap-0.5 py-1 pr-2">
               <span className="font-inter max-w-[calc(100%-30px)] overflow-hidden text-[12px] leading-4 font-medium text-ellipsis whitespace-nowrap text-text-secondary">{file.name}</span>
@@ -139,7 +139,7 @@ const Uploader: FC<Props> = ({
             </div>
             <div className="hidden items-center pr-3 group-hover:flex">
               <ActionButton onClick={removeFile}>
-                <RiDeleteBinLine className="h-4 w-4 text-text-tertiary" />
+                <RiDeleteBinLine className="size-4 text-text-tertiary" />
               </ActionButton>
             </div>
           </div>
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index 996952ff2f..2fb9e5552b 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -78,7 +78,7 @@ const DuplicateAppModal = ({
             aria-label={t('operation.close', { ns: 'common' })}
             onClick={onHide}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
           <div className="relative mt-3 mb-9 text-xl leading-[30px] font-semibold text-text-primary">{t('duplicateTitle', { ns: 'app' })}</div>
           <div className="mb-9 system-sm-regular text-text-secondary">
diff --git a/web/app/components/app/log/filter.tsx b/web/app/components/app/log/filter.tsx
index b5e0e0cf09..a132f9f861 100644
--- a/web/app/components/app/log/filter.tsx
+++ b/web/app/components/app/log/filter.tsx
@@ -47,7 +47,7 @@ const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryPara
       <Chip
         className="min-w-[150px]"
         panelClassName="w-[270px]"
-        leftIcon={<RiCalendarLine className="h-4 w-4 text-text-secondary" />}
+        leftIcon={<RiCalendarLine className="size-4 text-text-secondary" />}
         value={queryParams.period}
         onSelect={(item) => {
           setQueryParams({ ...queryParams, period: item.value })
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 2e078b7b93..609a52efc3 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -101,7 +101,7 @@ const HandThumbIconWithCount: FC<{ count: number, iconType: 'up' | 'down' }> = (
   const Icon = iconType === 'up' ? HandThumbUpIcon : HandThumbDownIcon
   return (
     <div className={`inline-flex w-fit items-center rounded-md p-1 text-xs ${classname} mr-1 last:mr-0`}>
-      <Icon className="mr-0.5 h-3 w-3 rounded-md" />
+      <Icon className="mr-0.5 size-3 rounded-md" />
       {count > 0 ? count : null}
     </div>
   )
@@ -437,7 +437,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
           {!isAdvanced && <ModelInfo model={detail.model_config.model} />}
         </div>
         <ActionButton size="l" aria-label={t('operation.close', { ns: 'common' })} onClick={onClose}>
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+          <RiCloseLine className="size-4 text-text-tertiary" />
         </ActionButton>
       </div>
       {/* Panel Body */}
@@ -784,14 +784,14 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
       <Tooltip>
         <TooltipTrigger
           render={(
-            <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'overflow-hidden system-sm-regular text-ellipsis whitespace-nowrap')}>
+            <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'truncate system-sm-regular')}>
               {value || '-'}
             </div>
           )}
         />
         <TooltipContent className={(isHighlight && !isChatMode) ? '' : 'hidden!'}>
           <span className="inline-flex items-center text-xs text-text-tertiary">
-            <RiEditFill className="mr-1 h-3 w-3" />
+            <RiEditFill className="mr-1 size-3" />
             {`${t('detail.annotationTip', { ns: 'appLog', user: annotation?.account?.name })} ${formatTime(annotation?.created_at || dayjs().unix(), 'MM-DD hh:mm A')}`}
           </span>
         </TooltipContent>
@@ -835,7 +835,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
                 <td className="h-4">
                   {!log.read_at && (
                     <div className="flex items-center p-3 pr-0.5">
-                      <span className="inline-block h-1.5 w-1.5 rounded-sm bg-util-colors-blue-blue-500"></span>
+                      <span className="inline-block size-1.5 rounded-sm bg-util-colors-blue-blue-500"></span>
                     </div>
                   )}
                 </td>
diff --git a/web/app/components/app/log/model-info.tsx b/web/app/components/app/log/model-info.tsx
index 314627d855..8e4224aadc 100644
--- a/web/app/components/app/log/model-info.tsx
+++ b/web/app/components/app/log/model-info.tsx
@@ -55,7 +55,7 @@ const ModelInfo: FC<Props> = ({
     <div className={cn('flex items-center rounded-lg')}>
       <div className="mr-px flex h-8 shrink-0 items-center gap-1 rounded-l-lg bg-components-input-bg-normal pr-2 pl-1.5">
         <ModelIcon
-          className="h-5! w-5!"
+          className="size-5!"
           provider={currentProvider}
           modelName={currentModel?.model}
         />
@@ -77,7 +77,7 @@ const ModelInfo: FC<Props> = ({
                   open && 'bg-components-button-tertiary-bg-hover',
                 )}
                 >
-                  <RiInformation2Line className="h-4 w-4 text-text-tertiary" />
+                  <RiInformation2Line className="size-4 text-text-tertiary" />
                 </div>
               </button>
             )}
diff --git a/web/app/components/app/log/var-panel.tsx b/web/app/components/app/log/var-panel.tsx
index 7e75f54a0a..3c70775dba 100644
--- a/web/app/components/app/log/var-panel.tsx
+++ b/web/app/components/app/log/var-panel.tsx
@@ -31,12 +31,12 @@ const VarPanel: FC<Props> = ({
         className={cn('flex cursor-pointer items-center gap-1 border-b border-divider-subtle px-3 pt-2.5 pb-2 text-text-secondary', isCollapse && 'border-0 pb-2.5')}
         onClick={toggleCollapse}
       >
-        <Variable02 className="h-4 w-4" />
+        <Variable02 className="size-4" />
         <div className="grow system-md-medium">{t('detail.variables', { ns: 'appLog' })}</div>
         {
           isCollapse
-            ? <RiArrowRightSLine className="h-4 w-4" />
-            : <RiArrowDownSLine className="h-4 w-4" />
+            ? <RiArrowRightSLine className="size-4" />
+            : <RiArrowDownSLine className="size-4" />
         }
       </div>
       {!isCollapse && (
@@ -59,7 +59,7 @@ const VarPanel: FC<Props> = ({
                 {message_files.map((url, index) => (
                   <div
                     key={index}
-                    className="ml-2.5 h-16 w-16 cursor-pointer rounded-lg bg-cover bg-center bg-no-repeat"
+                    className="ml-2.5 size-16 cursor-pointer rounded-lg bg-cover bg-center bg-no-repeat"
                     style={{ backgroundImage: `url(${url})` }}
                     onClick={() => setImagePreviewUrl(url)}
                   />
diff --git a/web/app/components/app/overview/apikey-info-panel/index.tsx b/web/app/components/app/overview/apikey-info-panel/index.tsx
index cd7264636a..67bac54a84 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -52,7 +52,7 @@ const APIKeyInfoPanel: FC = () => {
         onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}
       >
         <div className="text-sm font-medium">{t('apiKeyInfo.setAPIBtn', { ns: 'appOverview' })}</div>
-        <LinkExternal02 className="h-4 w-4" />
+        <LinkExternal02 className="size-4" />
       </Button>
       {!isCloud && (
         <a
@@ -62,14 +62,14 @@ const APIKeyInfoPanel: FC = () => {
           rel="noopener noreferrer"
         >
           <div>{t('apiKeyInfo.tryCloud', { ns: 'appOverview' })}</div>
-          <LinkExternal02 className="h-3 w-3" />
+          <LinkExternal02 className="size-3" />
         </a>
       )}
       <div
         onClick={() => setIsShow(false)}
-        className="absolute top-4 right-4 flex h-8 w-8 cursor-pointer items-center justify-center"
+        className="absolute top-4 right-4 flex size-8 cursor-pointer items-center justify-center"
       >
-        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+        <RiCloseLine className="size-4 text-text-tertiary" />
       </div>
     </div>
   )
diff --git a/web/app/components/app/overview/app-card-sections.tsx b/web/app/components/app/overview/app-card-sections.tsx
index 5328efab02..00fa0cf4af 100644
--- a/web/app/components/app/overview/app-card-sections.tsx
+++ b/web/app/components/app/overview/app-card-sections.tsx
@@ -250,7 +250,7 @@ export const AppCardUrlSection = ({
     </div>
     <div className="inline-flex h-9 w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2">
       <div className="flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1">
-        <div className="overflow-hidden text-xs font-medium text-ellipsis whitespace-nowrap text-text-secondary">
+        <div className="truncate text-xs font-medium text-text-secondary">
           {accessibleUrl}
         </div>
       </div>
@@ -259,7 +259,7 @@ export const AppCardUrlSection = ({
       {isApp && <Divider type="vertical" className="mx-0.5! h-3.5! shrink-0" />}
       <AlertDialog open={showConfirmDelete} onOpenChange={open => !open && onHideRegenerateConfirm()}>
         <AlertDialogContent>
-          <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-6 pb-4 pl-6">
+          <div className="flex flex-col items-start gap-2 self-stretch px-6 pt-6 pb-4">
             <AlertDialogTitle className="w-full title-2xl-semi-bold text-text-primary">
               {t('overview.appInfo.regenerate', { ns: 'appOverview' })}
             </AlertDialogTitle>
@@ -280,10 +280,10 @@ export const AppCardUrlSection = ({
       {isApp && isCurrentWorkspaceManager && (
         <MaybeTooltip content={t('overview.appInfo.regenerate', { ns: 'appOverview' }) || ''}>
           <div
-            className="h-6 w-6 cursor-pointer rounded-md hover:bg-state-base-hover"
+            className="size-6 cursor-pointer rounded-md hover:bg-state-base-hover"
             onClick={onShowRegenerateConfirm}
           >
-            <div className={`h-full w-full ${style.refreshIcon} ${genLoading ? style.generateLogo : ''}`} />
+            <div className={`size-full ${style.refreshIcon} ${genLoading ? style.generateLogo : ''}`} />
           </div>
         </MaybeTooltip>
       )}
@@ -313,12 +313,12 @@ export const AppCardAccessControlSection = ({
         onClick={onClick}
       >
         <div className="flex grow items-center gap-x-1.5 pr-1">
-          <Icon className="h-4 w-4 shrink-0 text-text-secondary" />
+          <Icon className="size-4 shrink-0 text-text-secondary" />
           <p className="system-sm-medium text-text-secondary">{t(labelKey, { ns: 'app' })}</p>
         </div>
         {!isAppAccessSet && <p className="shrink-0 system-xs-regular text-text-tertiary">{t('publishApp.notSet', { ns: 'app' })}</p>}
-        <div className="flex h-4 w-4 shrink-0 items-center justify-center">
-          <RiArrowRightSLine className="h-4 w-4 text-text-quaternary" />
+        <div className="flex size-4 shrink-0 items-center justify-center">
+          <RiArrowRightSLine className="size-4 text-text-quaternary" />
         </div>
       </div>
     </div>
@@ -343,7 +343,7 @@ export const AppCardOperations = ({
           show={disabled}
         >
           <div className="flex items-center justify-center gap-px">
-            <Icon className="h-3.5 w-3.5" />
+            <Icon className="size-3.5" />
             <div className={`${disabled ? 'text-components-button-ghost-text-disabled' : 'text-text-tertiary'} px-[3px] system-xs-medium`}>{label}</div>
           </div>
         </MaybeTooltip>
@@ -366,7 +366,7 @@ export const AppCardOperations = ({
               >
                 <div className="flex h-full min-w-[88px] items-center justify-center rounded-l-md px-2 hover:bg-components-button-secondary-bg-hover">
                   <div className="flex items-center justify-center gap-px">
-                    <Icon className="h-3.5 w-3.5" />
+                    <Icon className="size-3.5" />
                     <div className="px-[3px] system-xs-medium">{label}</div>
                   </div>
                 </div>
@@ -378,7 +378,7 @@ export const AppCardOperations = ({
             />
             <Button
               aria-label={launchConfigAction.label}
-              className="w-8 rounded-l-none border-0 px-0 py-0 shadow-none backdrop-blur-none hover:bg-components-button-secondary-bg-hover"
+              className="w-8 rounded-l-none border-0 p-0 shadow-none backdrop-blur-none hover:bg-components-button-secondary-bg-hover"
               size="small"
               variant="secondary"
               onClick={launchConfigAction.onClick}
@@ -386,7 +386,7 @@ export const AppCardOperations = ({
             >
               <div className="flex h-full w-8 shrink-0 items-center justify-center rounded-r-md">
                 <div className="flex items-center justify-center gap-px">
-                  <RiSettings2Line className="h-3.5 w-3.5" aria-hidden="true" />
+                  <RiSettings2Line className="size-3.5" aria-hidden="true" />
                 </div>
               </div>
             </Button>
diff --git a/web/app/components/app/overview/customize/index.tsx b/web/app/components/app/overview/customize/index.tsx
index e27e1e7653..2e1bf93672 100644
--- a/web/app/components/app/overview/customize/index.tsx
+++ b/web/app/components/app/overview/customize/index.tsx
@@ -17,7 +17,7 @@ type IShareLinkProps = {
 }
 
 const StepNum: FC<{ children: React.ReactNode }> = ({ children }) => (
-  <div className="mr-3 flex h-7 w-7 shrink-0 items-center justify-center rounded-2xl bg-util-colors-blue-blue-50 text-text-accent">
+  <div className="mr-3 flex size-7 shrink-0 items-center justify-center rounded-2xl bg-util-colors-blue-blue-50 text-text-accent">
     {children}
   </div>
 )
@@ -117,7 +117,7 @@ const CustomizeModal: FC<IShareLinkProps> = ({
               className="mt-2"
             >
               <span className="text-sm text-text-secondary">{t(`${prefixCustomize}.way2.operation`, { ns: 'appOverview' })}</span>
-              <span aria-hidden="true" className="ml-1 i-heroicons-arrow-top-right-on-square h-4 w-4 shrink-0 text-text-secondary" />
+              <span aria-hidden="true" className="ml-1 i-heroicons-arrow-top-right-on-square size-4 shrink-0 text-text-secondary" />
             </Button>
           </div>
         </div>
diff --git a/web/app/components/app/overview/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
index a0dcc1b535..b68096b1c5 100644
--- a/web/app/components/app/overview/embedded/index.tsx
+++ b/web/app/components/app/overview/embedded/index.tsx
@@ -211,8 +211,8 @@ const EmbeddedContent = ({
               </div>
             </div>
             {hiddenInputsCollapsed
-              ? <RiArrowRightSLine className="h-4 w-4 shrink-0 text-text-tertiary" />
-              : <RiArrowDownSLine className="h-4 w-4 shrink-0 text-text-tertiary" />}
+              ? <RiArrowRightSLine className="size-4 shrink-0 text-text-tertiary" />
+              : <RiArrowDownSLine className="size-4 shrink-0 text-text-tertiary" />}
           </button>
           {!hiddenInputsCollapsed && (
             <div className="max-h-72 space-y-4 overflow-y-auto border-t-[0.5px] border-divider-subtle px-4 py-4">
@@ -254,7 +254,7 @@ const EmbeddedContent = ({
             className={cn('inline-flex w-full items-center justify-center gap-2 rounded-lg py-3', 'shrink-0 bg-primary-600 text-white hover:bg-primary-600/75 hover:shadow-sm')}
             onClick={navigateToChromeUrl}
           >
-            <div className={`relative h-4 w-4 ${style.pluginInstallIcon}`}></div>
+            <div className={`relative size-4 ${style.pluginInstallIcon}`}></div>
             <div className="font-['Inter'] text-sm leading-tight font-medium text-white">{t(`${prefixEmbedded}.chromePlugin`, { ns: 'appOverview' })}</div>
           </button>
         </div>
@@ -273,8 +273,8 @@ const EmbeddedContent = ({
                     : t(`${prefixEmbedded}.copy`, { ns: 'appOverview' })) || ''}
                   onClick={() => void onClickCopy()}
                 >
-                  {copiedOption === option && <span aria-hidden="true" className="i-ri-clipboard-fill h-4 w-4" />}
-                  {copiedOption !== option && <span aria-hidden="true" className="i-ri-clipboard-line h-4 w-4" />}
+                  {copiedOption === option && <span aria-hidden="true" className="i-ri-clipboard-fill size-4" />}
+                  {copiedOption !== option && <span aria-hidden="true" className="i-ri-clipboard-line size-4" />}
                 </ActionButton>
               )}
             />
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index e03d22d7e0..f829ab62b9 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -381,7 +381,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                     {t(`${prefixSettings}.more.privacyPolicyPlaceholder`, { ns: 'appOverview' })}
                   </p>
                 </div>
-                <span aria-hidden="true" className="ml-1 i-ri-arrow-right-s-line h-4 w-4 shrink-0 text-text-secondary" />
+                <span aria-hidden="true" className="ml-1 i-ri-arrow-right-s-line size-4 shrink-0 text-text-secondary" />
               </div>
             )}
             {/* more settings */}
diff --git a/web/app/components/app/overview/trigger-card.tsx b/web/app/components/app/overview/trigger-card.tsx
index 3283391b13..05d97312f6 100644
--- a/web/app/components/app/overview/trigger-card.tsx
+++ b/web/app/components/app/overview/trigger-card.tsx
@@ -34,12 +34,12 @@ const getTriggerIcon = (trigger: AppTrigger, triggerPlugins: any[]) => {
   const getStatusDot = () => {
     if (status === 'enabled') {
       return (
-        <div className="absolute -top-0.5 -left-0.5 h-1.5 w-1.5 rounded-xs border border-black/15 bg-green-500" />
+        <div className="absolute -top-0.5 -left-0.5 size-1.5 rounded-xs border border-black/15 bg-green-500" />
       )
     }
     else {
       return (
-        <div className="absolute -top-0.5 -left-0.5 h-1.5 w-1.5 rounded-xs border border-components-badge-status-light-disabled-border-inner bg-components-badge-status-light-disabled-bg shadow-status-indicator-gray-shadow" />
+        <div className="absolute -top-0.5 -left-0.5 size-1.5 rounded-xs border border-components-badge-status-light-disabled-border-inner bg-components-badge-status-light-disabled-bg shadow-status-indicator-gray-shadow" />
       )
     }
   }
@@ -158,7 +158,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
           <div className="flex w-full items-center gap-3 self-stretch">
             <div className="flex grow items-center">
               <div className="mr-2 shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-purple-purple-500 p-1 shadow-md">
-                <TriggerAll className="h-4 w-4 text-text-primary-on-surface" />
+                <TriggerAll className="size-4 text-text-primary-on-surface" />
               </div>
               <div className="group w-full">
                 <div className="min-w-0 overflow-hidden system-md-semibold break-normal text-ellipsis text-text-secondary group-hover:text-text-primary">
diff --git a/web/app/components/app/overview/workflow-hidden-input-fields.tsx b/web/app/components/app/overview/workflow-hidden-input-fields.tsx
index 3983087e1c..dde80852b6 100644
--- a/web/app/components/app/overview/workflow-hidden-input-fields.tsx
+++ b/web/app/components/app/overview/workflow-hidden-input-fields.tsx
@@ -58,7 +58,7 @@ const WorkflowHiddenInputFields = ({
             type="checkbox"
             checked={Boolean(fieldValue)}
             onChange={(event: ChangeEvent<HTMLInputElement>) => onValueChange(variable.variable, event.target.checked)}
-            className="h-4 w-4 rounded border-divider-subtle"
+            className="size-4 rounded border-divider-subtle"
           />
           <span className="system-sm-regular text-text-secondary">{label}</span>
         </label>
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index f3ca9a911a..ca6c69a75c 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -117,13 +117,13 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
             aria-label={t('operation.close', { ns: 'common' })}
             onClick={onClose}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
           <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-default-burn p-3 shadow-xl">
             <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />
           </div>
           <div className="relative mt-3 text-xl leading-[30px] font-semibold text-text-primary">{t('switch', { ns: 'app' })}</div>
-          <div className="my-1 text-sm leading-5 text-text-tertiary">
+          <div className="my-1 text-sm/5 text-text-tertiary">
             <span>{t('switchTipStart', { ns: 'app' })}</span>
             <span className="font-medium text-text-secondary">{t('switchTip', { ns: 'app' })}</span>
             <span>{t('switchTipEnd', { ns: 'app' })}</span>
@@ -167,7 +167,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
             <div className="flex items-center">
               <label className="flex cursor-pointer items-center">
                 <Checkbox className="shrink-0" checked={removeOriginal} onCheckedChange={setRemoveOriginal} />
-                <span className="ml-2 text-left text-sm leading-5 text-text-secondary">
+                <span className="ml-2 text-left text-sm/5 text-text-secondary">
                   {t('removeOriginal', { ns: 'app' })}
                 </span>
               </label>
diff --git a/web/app/components/app/text-generate/item/action-groups.tsx b/web/app/components/app/text-generate/item/action-groups.tsx
index 4ebdbe48bb..41cf18cb7e 100644
--- a/web/app/components/app/text-generate/item/action-groups.tsx
+++ b/web/app/components/app/text-generate/item/action-groups.tsx
@@ -79,7 +79,7 @@ const GenerationActionGroups: FC<GenerationActionGroupsProps> = ({
             title={t('operation.log', { ns: 'common' })}
             onClick={onOpenLogModal}
           >
-            <RiFileList3Line className="h-4 w-4" />
+            <RiFileList3Line className="size-4" />
           </ActionButton>
         </div>
       )}
@@ -92,7 +92,7 @@ const GenerationActionGroups: FC<GenerationActionGroupsProps> = ({
             title={t('feature.moreLikeThis.title', { ns: 'appDebug' })}
             onClick={onMoreLikeThis}
           >
-            <RiSparklingLine className="h-4 w-4" />
+            <RiSparklingLine className="size-4" />
           </ActionButton>
         )}
         {isShowTextToSpeech && !isTryApp && (
@@ -115,7 +115,7 @@ const GenerationActionGroups: FC<GenerationActionGroupsProps> = ({
               toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
             }}
           >
-            <RiClipboardLine className="h-4 w-4" />
+            <RiClipboardLine className="size-4" />
           </ActionButton>
         )}
         {isInWebApp && isError && (
@@ -124,7 +124,7 @@ const GenerationActionGroups: FC<GenerationActionGroupsProps> = ({
             title={t('generation.batchFailed.retry', { ns: 'share' })}
             onClick={onRetry}
           >
-            <RiResetLeftLine className="h-4 w-4" />
+            <RiResetLeftLine className="size-4" />
           </ActionButton>
         )}
         {isInWebApp && !isWorkflow && !isTryApp && (
@@ -134,7 +134,7 @@ const GenerationActionGroups: FC<GenerationActionGroupsProps> = ({
             title={t('operation.save', { ns: 'common' })}
             onClick={() => { onSave?.(messageId as string) }}
           >
-            <RiBookmark3Line className="h-4 w-4" />
+            <RiBookmark3Line className="size-4" />
           </ActionButton>
         )}
       </div>
@@ -147,14 +147,14 @@ const GenerationActionGroups: FC<GenerationActionGroupsProps> = ({
                 title={t('operation.agree', { ns: 'appDebug' })}
                 onClick={() => onFeedback?.({ rating: 'like' })}
               >
-                <RiThumbUpLine className="h-4 w-4" />
+                <RiThumbUpLine className="size-4" />
               </ActionButton>
               <ActionButton
                 aria-label={t('operation.disagree', { ns: 'appDebug' })}
                 title={t('operation.disagree', { ns: 'appDebug' })}
                 onClick={() => onFeedback?.({ rating: 'dislike' })}
               >
-                <RiThumbDownLine className="h-4 w-4" />
+                <RiThumbDownLine className="size-4" />
               </ActionButton>
             </>
           )}
@@ -165,7 +165,7 @@ const GenerationActionGroups: FC<GenerationActionGroupsProps> = ({
               title={t('operation.cancelAgree', { ns: 'appDebug' })}
               onClick={() => onFeedback?.({ rating: null })}
             >
-              <RiThumbUpLine className="h-4 w-4" />
+              <RiThumbUpLine className="size-4" />
             </ActionButton>
           )}
           {feedback?.rating === 'dislike' && (
@@ -175,7 +175,7 @@ const GenerationActionGroups: FC<GenerationActionGroupsProps> = ({
               title={t('operation.cancelDisagree', { ns: 'appDebug' })}
               onClick={() => onFeedback?.({ rating: null })}
             >
-              <RiThumbDownLine className="h-4 w-4" />
+              <RiThumbDownLine className="size-4" />
             </ActionButton>
           )}
         </div>
diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index 78ab1b5b32..c75350e18d 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -214,7 +214,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
               />
               {!workflowProcessData && taskId && (
                 <div className={cn('sticky top-0 left-0 flex w-full items-center rounded-t-2xl bg-components-actionbar-bg p-4 pb-3 system-2xs-medium-uppercase text-text-accent-secondary', isError && 'text-text-destructive')}>
-                  <RiPlayList2Line className="mr-1 h-3 w-3" />
+                  <RiPlayList2Line className="mr-1 size-3" />
                   <span>{t('generation.execution', { ns: 'share' })}</span>
                   <span className="px-1">·</span>
                   <span>{getGenerationTaskLabel(taskId, depth)}</span>
@@ -281,7 +281,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                   isMobile ? 'top-[3.5px]' : 'top-2',
                 )}
                 >
-                  <RiSparklingFill className="h-3 w-3 text-text-primary-on-surface" />
+                  <RiSparklingFill className="size-3 text-text-primary-on-surface" />
                 </div>
               </div>
             )}
diff --git a/web/app/components/app/text-generate/item/workflow-body.tsx b/web/app/components/app/text-generate/item/workflow-body.tsx
index d5a076ace9..fb73161d5d 100644
--- a/web/app/components/app/text-generate/item/workflow-body.tsx
+++ b/web/app/components/app/text-generate/item/workflow-body.tsx
@@ -53,7 +53,7 @@ const WorkflowBody: FC<WorkflowBodyProps> = ({
       >
         {taskId && (
           <div className={cn('mb-2 flex items-center system-2xs-medium-uppercase text-text-accent-secondary', isError && 'text-text-destructive')}>
-            <RiPlayList2Line className="mr-1 h-3 w-3" />
+            <RiPlayList2Line className="mr-1 size-3" />
             <span>{t('generation.execution', { ns: 'share' })}</span>
             <span className="px-1">·</span>
             <span>{getGenerationTaskLabel(taskId, depth)}</span>
diff --git a/web/app/components/app/text-generate/saved-items/index.tsx b/web/app/components/app/text-generate/saved-items/index.tsx
index 2bdb90624f..bcc4a6a3e2 100644
--- a/web/app/components/app/text-generate/saved-items/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/index.tsx
@@ -63,13 +63,13 @@ const SavedItems: FC<ISavedItemsProps> = ({
                         toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
                       }}
                       >
-                        <RiClipboardLine className="h-4 w-4" />
+                        <RiClipboardLine className="size-4" />
                       </ActionButton>
                       <ActionButton onClick={() => {
                         onRemove(id)
                       }}
                       >
-                        <RiDeleteBinLine className="h-4 w-4" />
+                        <RiDeleteBinLine className="size-4" />
                       </ActionButton>
                     </div>
                   </div>
diff --git a/web/app/components/app/text-generate/saved-items/no-data/index.tsx b/web/app/components/app/text-generate/saved-items/no-data/index.tsx
index 006e49e039..33c4309f22 100644
--- a/web/app/components/app/text-generate/saved-items/no-data/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/no-data/index.tsx
@@ -20,7 +20,7 @@ const NoData: FC<INoDataProps> = ({
   return (
     <div className="rounded-xl bg-background-section-burn p-6">
       <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg-alt shadow-lg backdrop-blur-xs">
-        <RiBookmark3Line className="h-4 w-4 text-text-accent" />
+        <RiBookmark3Line className="size-4 text-text-accent" />
       </div>
       <div className="mt-3">
         <span className="system-xl-semibold text-text-secondary">{t('generation.savedNoData.title', { ns: 'share' })}</span>
@@ -33,7 +33,7 @@ const NoData: FC<INoDataProps> = ({
         className="mt-3"
         onClick={onStartCreateContent}
       >
-        <RiAddLine className="mr-1 h-4 w-4" />
+        <RiAddLine className="mr-1 size-4" />
         <span>{t('generation.savedNoData.startCreateContent', { ns: 'share' })}</span>
       </Button>
     </div>
diff --git a/web/app/components/app/type-selector/index.tsx b/web/app/components/app/type-selector/index.tsx
index dd73083454..1129aaed5e 100644
--- a/web/app/components/app/type-selector/index.tsx
+++ b/web/app/components/app/type-selector/index.tsx
@@ -44,11 +44,11 @@ const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
           <button
             type="button"
             aria-label={t('operation.clear', { ns: 'common' })}
-            className="group absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2"
+            className="group absolute top-1/2 right-2 size-4 -translate-y-1/2"
             onClick={() => onChange([])}
           >
             <RiCloseCircleFill
-              className="h-3.5 w-3.5 text-text-quaternary group-hover:text-text-tertiary"
+              className="size-3.5 text-text-quaternary group-hover:text-text-tertiary"
             />
           </button>
         )}
@@ -88,8 +88,8 @@ type AppTypeIconProps = {
 }
 
 export const AppTypeIcon = React.memo(({ type, className, wrapperClassName, style }: AppTypeIconProps) => {
-  const wrapperClassNames = cn('inline-flex h-5 w-5 items-center justify-center rounded-md border border-divider-regular', wrapperClassName)
-  const iconClassNames = cn('h-3.5 w-3.5 text-components-avatar-shape-fill-stop-100', className)
+  const wrapperClassNames = cn('inline-flex size-5 items-center justify-center rounded-md border border-divider-regular', wrapperClassName)
+  const iconClassNames = cn('size-3.5 text-components-avatar-shape-fill-stop-100', className)
   if (type === AppModeEnum.CHAT) {
     return (
       <div style={style} className={cn(wrapperClassNames, 'bg-components-icon-bg-blue-solid')}>
@@ -136,9 +136,9 @@ function AppTypeSelectTrigger({ values }: { readonly values: AppSelectorProps['v
         'flex h-8 items-center justify-between gap-1',
       )}
       >
-        <RiFilter3Line className="h-4 w-4 text-text-tertiary" />
+        <RiFilter3Line className="size-4 text-text-tertiary" />
         <div className="min-w-[65px] grow text-center system-sm-medium text-text-tertiary">{t('typeSelector.all', { ns: 'app' })}</div>
-        <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
+        <RiArrowDownSLine className="size-4 text-text-tertiary" />
       </div>
     )
   }
@@ -182,13 +182,13 @@ function AppTypeSelectorItem({ checked, type, onClick }: AppTypeSelectorItemProp
         <span
           aria-hidden="true"
           className={cn(
-            'flex h-4 w-4 shrink-0 items-center justify-center rounded-sm shadow-xs shadow-shadow-shadow-3',
+            'flex size-4 shrink-0 items-center justify-center rounded-sm shadow-xs shadow-shadow-shadow-3',
             checked
               ? 'bg-components-checkbox-bg text-components-checkbox-icon'
               : 'border border-components-checkbox-border bg-components-checkbox-bg-unchecked',
           )}
         >
-          {checked && <span className="i-ri-check-line h-3 w-3" />}
+          {checked && <span className="i-ri-check-line size-3" />}
         </span>
         <AppTypeIcon type={type} />
         <div className="grow p-1 pl-0">
diff --git a/web/app/components/app/workflow-log/detail.tsx b/web/app/components/app/workflow-log/detail.tsx
index f0e80f11c0..570603c1c5 100644
--- a/web/app/components/app/workflow-log/detail.tsx
+++ b/web/app/components/app/workflow-log/detail.tsx
@@ -33,7 +33,7 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose, canReplay = false }) => {
         className="absolute top-4 right-3 z-20 cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
         onClick={onClose}
       >
-        <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+        <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
       </button>
       <div className="flex items-center bg-components-panel-bg">
         <h1 className="shrink-0 px-4 py-1 system-xl-semibold text-text-primary">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
@@ -43,11 +43,11 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose, canReplay = false }) => {
               render={(
                 <button
                   type="button"
-                  className="mr-1 flex h-6 w-6 items-center justify-center rounded-md border-none bg-transparent p-0 hover:bg-state-base-hover"
+                  className="mr-1 flex size-6 items-center justify-center rounded-md border-none bg-transparent p-0 hover:bg-state-base-hover"
                   aria-label={t('runDetail.testWithParams', { ns: 'appLog' })}
                   onClick={handleReplay}
                 >
-                  <RiPlayLargeLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                  <RiPlayLargeLine className="size-4 text-text-tertiary" aria-hidden="true" />
                 </button>
               )}
             />
diff --git a/web/app/components/app/workflow-log/filter.tsx b/web/app/components/app/workflow-log/filter.tsx
index 90c78e6c9d..bb9bb99661 100644
--- a/web/app/components/app/workflow-log/filter.tsx
+++ b/web/app/components/app/workflow-log/filter.tsx
@@ -52,7 +52,7 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
       <Chip
         className="min-w-[150px]"
         panelClassName="w-[270px]"
-        leftIcon={<RiCalendarLine className="h-4 w-4 text-text-secondary" />}
+        leftIcon={<RiCalendarLine className="size-4 text-text-secondary" />}
         value={queryParams.period}
         onSelect={(item) => {
           setQueryParams({ ...queryParams, period: item.value })
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index 51e038dbb6..7b3dae3ab0 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -137,7 +137,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
               >
                 {t('table.header.startTime', { ns: 'appLog' })}
                 <ArrowDownIcon
-                  className={cn('ml-0.5 h-3 w-3 stroke-current stroke-2 transition-all', 'text-text-tertiary', sortOrder === 'asc' ? 'rotate-180' : '')}
+                  className={cn('ml-0.5 size-3 stroke-current stroke-2 transition-all', 'text-text-tertiary', sortOrder === 'asc' ? 'rotate-180' : '')}
                   aria-hidden="true"
                 />
               </button>
@@ -164,7 +164,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
                 <td className="h-4">
                   {!log.read_at && (
                     <div className="flex items-center p-3 pr-0.5">
-                      <span className="inline-block h-1.5 w-1.5 rounded-sm bg-util-colors-blue-blue-500"></span>
+                      <span className="inline-block size-1.5 rounded-sm bg-util-colors-blue-blue-500"></span>
                     </div>
                   )}
                 </td>
@@ -180,7 +180,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
                 </td>
                 <td className="p-3 pr-2">{log.workflow_run.total_tokens}</td>
                 <td className="p-3 pr-2">
-                  <div className={cn(endUser === defaultValue ? 'text-text-quaternary' : 'text-text-secondary', 'overflow-hidden text-ellipsis whitespace-nowrap')}>
+                  <div className={cn(endUser === defaultValue ? 'text-text-quaternary' : 'text-text-secondary', 'truncate')}>
                     {endUser}
                   </div>
                 </td>
diff --git a/web/app/components/app/workflow-log/trigger-by-display.tsx b/web/app/components/app/workflow-log/trigger-by-display.tsx
index 33cc001d03..5a8349a4e0 100644
--- a/web/app/components/app/workflow-log/trigger-by-display.tsx
+++ b/web/app/components/app/workflow-log/trigger-by-display.tsx
@@ -65,13 +65,13 @@ const getTriggerIcon = (triggeredFrom: WorkflowRunTriggeredFrom, metadata: Trigg
     case 'webhook':
       return (
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-blue-500 p-1 shadow-md">
-          <WebhookLine className="h-4 w-4 text-text-primary-on-surface" />
+          <WebhookLine className="size-4 text-text-primary-on-surface" />
         </div>
       )
     case 'schedule':
       return (
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-500 p-1 shadow-md">
-          <Schedule className="h-4 w-4 text-text-primary-on-surface" />
+          <Schedule className="size-4 text-text-primary-on-surface" />
         </div>
       )
     case 'plugin':
@@ -84,14 +84,14 @@ const getTriggerIcon = (triggeredFrom: WorkflowRunTriggeredFrom, metadata: Trigg
     case 'debugging':
       return (
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-blue-500 p-1 shadow-md">
-          <Code className="h-4 w-4 text-text-primary-on-surface" />
+          <Code className="size-4 text-text-primary-on-surface" />
         </div>
       )
     case 'rag-pipeline-run':
     case 'rag-pipeline-debugging':
       return (
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-green-green-500 p-1 shadow-md">
-          <KnowledgeRetrieval className="h-4 w-4 text-text-primary-on-surface" />
+          <KnowledgeRetrieval className="size-4 text-text-primary-on-surface" />
         </div>
       )
     case 'app-run':
@@ -99,7 +99,7 @@ const getTriggerIcon = (triggeredFrom: WorkflowRunTriggeredFrom, metadata: Trigg
       // For user input types (app-run, etc.), use webapp icon
       return (
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 p-1 shadow-md">
-          <WindowCursor className="h-4 w-4 text-text-primary-on-surface" />
+          <WindowCursor className="size-4 text-text-primary-on-surface" />
         </div>
       )
   }
diff --git a/web/app/components/apps/app-card-skeleton.tsx b/web/app/components/apps/app-card-skeleton.tsx
index 5fc41f76ab..b36d61454a 100644
--- a/web/app/components/apps/app-card-skeleton.tsx
+++ b/web/app/components/apps/app-card-skeleton.tsx
@@ -21,7 +21,7 @@ export const AppCardSkeleton = React.memo(({ count = 6 }: AppCardSkeletonProps)
         >
           <SkeletonContainer className="h-full">
             <SkeletonRow>
-              <SkeletonRectangle className="h-10 w-10 animate-pulse rounded-lg" />
+              <SkeletonRectangle className="size-10 animate-pulse rounded-lg" />
               <div className="flex flex-1 flex-col gap-1">
                 <SkeletonRectangle className="h-4 w-2/3 animate-pulse" />
                 <SkeletonRectangle className="h-3 w-1/3 animate-pulse" />
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index f623f8ce53..262f0fee56 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -150,7 +150,7 @@ const AppCardOperationsMenu: React.FC<AppCardOperationsMenuProps> = ({
         <>
           <DropdownMenuSeparator />
           <DropdownMenuItem className="gap-2 px-3" onClick={e => handleMenuAction(e, onSwitch)}>
-            <span className="text-sm leading-5 text-text-secondary">{t('switch', { ns: 'app' })}</span>
+            <span className="text-sm/5 text-text-secondary">{t('switch', { ns: 'app' })}</span>
           </DropdownMenuItem>
         </>
       )}
@@ -166,7 +166,7 @@ const AppCardOperationsMenu: React.FC<AppCardOperationsMenuProps> = ({
       {shouldShowAccessControlOption && (
         <>
           <DropdownMenuItem className="gap-2 px-3" onClick={e => handleMenuAction(e, onAccessControl)}>
-            <span className="text-sm leading-5 text-text-secondary">{t('accessControl', { ns: 'app' })}</span>
+            <span className="text-sm/5 text-text-secondary">{t('accessControl', { ns: 'app' })}</span>
           </DropdownMenuItem>
           <DropdownMenuSeparator />
         </>
@@ -436,10 +436,10 @@ const AppCard = ({ app, onlineUsers = [], onRefresh, onOpenTagManagement = () =>
               background={app.icon_background}
               imageUrl={app.icon_url}
             />
-            <AppTypeIcon type={app.mode} wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm" className="h-3 w-3" />
+            <AppTypeIcon type={app.mode} wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm" className="size-3" />
           </div>
           <div className="w-0 grow py-px">
-            <div className="flex items-center text-sm leading-5 font-semibold text-text-secondary">
+            <div className="flex items-center text-sm/5 font-semibold text-text-secondary">
               <div className="truncate" title={app.name}>{app.name}</div>
             </div>
             <div className="flex items-center gap-1 text-[10px] leading-[18px] font-medium text-text-tertiary">
@@ -452,12 +452,12 @@ const AppCard = ({ app, onlineUsers = [], onRefresh, onOpenTagManagement = () =>
             {onlinePresenceUsers.length > 0 && (
               <UserAvatarList users={onlinePresenceUsers} size="xxs" maxVisible={3} className="justify-end" />
             )}
-            <div className="flex h-5 w-5 items-center justify-center">
+            <div className="flex size-5 items-center justify-center">
               {app.access_mode === AccessMode.PUBLIC && (
                 <Tooltip>
                   <TooltipTrigger
                     aria-label={t('accessItemsDescription.anyone', { ns: 'app' })}
-                    render={<span title={t('accessItemsDescription.anyone', { ns: 'app' })} className="i-ri-global-line h-4 w-4 text-text-quaternary" />}
+                    render={<span title={t('accessItemsDescription.anyone', { ns: 'app' })} className="i-ri-global-line size-4 text-text-quaternary" />}
                   />
                   <TooltipContent>{t('accessItemsDescription.anyone', { ns: 'app' })}</TooltipContent>
                 </Tooltip>
@@ -466,7 +466,7 @@ const AppCard = ({ app, onlineUsers = [], onRefresh, onOpenTagManagement = () =>
                 <Tooltip>
                   <TooltipTrigger
                     aria-label={t('accessItemsDescription.specific', { ns: 'app' })}
-                    render={<span title={t('accessItemsDescription.specific', { ns: 'app' })} className="i-ri-lock-line h-4 w-4 text-text-quaternary" />}
+                    render={<span title={t('accessItemsDescription.specific', { ns: 'app' })} className="i-ri-lock-line size-4 text-text-quaternary" />}
                   />
                   <TooltipContent>{t('accessItemsDescription.specific', { ns: 'app' })}</TooltipContent>
                 </Tooltip>
@@ -475,7 +475,7 @@ const AppCard = ({ app, onlineUsers = [], onRefresh, onOpenTagManagement = () =>
                 <Tooltip>
                   <TooltipTrigger
                     aria-label={t('accessItemsDescription.organization', { ns: 'app' })}
-                    render={<span title={t('accessItemsDescription.organization', { ns: 'app' })} className="i-ri-building-line h-4 w-4 text-text-quaternary" />}
+                    render={<span title={t('accessItemsDescription.organization', { ns: 'app' })} className="i-ri-building-line size-4 text-text-quaternary" />}
                   />
                   <TooltipContent>{t('accessItemsDescription.organization', { ns: 'app' })}</TooltipContent>
                 </Tooltip>
@@ -484,7 +484,7 @@ const AppCard = ({ app, onlineUsers = [], onRefresh, onOpenTagManagement = () =>
                 <Tooltip>
                   <TooltipTrigger
                     aria-label={t('accessItemsDescription.external', { ns: 'app' })}
-                    render={<span title={t('accessItemsDescription.external', { ns: 'app' })} className="i-ri-verified-badge-line h-4 w-4 text-text-quaternary" />}
+                    render={<span title={t('accessItemsDescription.external', { ns: 'app' })} className="i-ri-verified-badge-line size-4 text-text-quaternary" />}
                   />
                   <TooltipContent>{t('accessItemsDescription.external', { ns: 'app' })}</TooltipContent>
                 </Tooltip>
@@ -533,16 +533,16 @@ const AppCard = ({ app, onlineUsers = [], onRefresh, onOpenTagManagement = () =>
                     aria-label={t('operation.more', { ns: 'common' })}
                     className={cn(
                       isOperationsMenuOpen ? 'bg-state-base-hover shadow-none' : 'bg-transparent',
-                      'flex h-8 w-8 items-center justify-center rounded-md border-none p-2 hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:ring-inset',
+                      'flex size-8 items-center justify-center rounded-md border-none p-2 hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:ring-inset',
                     )}
                     onClick={(e) => {
                       e.stopPropagation()
                       e.preventDefault()
                     }}
                   >
-                    <div className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md">
+                    <div className="flex size-8 cursor-pointer items-center justify-center rounded-md">
                       <span className="sr-only">{t('operation.more', { ns: 'common' })}</span>
-                      <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
+                      <span aria-hidden className="i-ri-more-fill size-4 text-text-tertiary" />
                     </div>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent
diff --git a/web/app/components/apps/footer.tsx b/web/app/components/apps/footer.tsx
index 4c66393bab..fa2b74a732 100644
--- a/web/app/components/apps/footer.tsx
+++ b/web/app/components/apps/footer.tsx
@@ -14,7 +14,7 @@ const CustomLink = React.memo(({
 }: CustomLinkProps) => {
   return (
     <Link
-      className="flex h-8 w-8 cursor-pointer items-center justify-center transition-opacity duration-200 ease-in-out hover:opacity-80"
+      className="flex size-8 cursor-pointer items-center justify-center transition-opacity duration-200 ease-in-out hover:opacity-80"
       target="_blank"
       rel="noopener noreferrer"
       href={href}
@@ -29,17 +29,17 @@ const Footer = () => {
 
   return (
     <footer className="relative shrink-0 grow-0 px-12 py-2">
-      <h3 className="text-gradient text-xl leading-tight font-semibold">{t('join', { ns: 'app' })}</h3>
+      <h3 className="text-gradient text-xl/tight font-semibold">{t('join', { ns: 'app' })}</h3>
       <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" />
+          <RiGithubFill className="size-5 text-text-tertiary" />
         </CustomLink>
         <CustomLink href="https://discord.gg/FngNHpbcY7">
-          <RiDiscordFill className="h-5 w-5 text-text-tertiary" />
+          <RiDiscordFill className="size-5 text-text-tertiary" />
         </CustomLink>
         <CustomLink href="https://forum.dify.ai">
-          <RiDiscussLine className="h-5 w-5 text-text-tertiary" />
+          <RiDiscussLine className="size-5 text-text-tertiary" />
         </CustomLink>
       </div>
     </footer>
diff --git a/web/app/components/apps/import-from-marketplace-template-modal.tsx b/web/app/components/apps/import-from-marketplace-template-modal.tsx
index a6a3dee8e4..5c45b420af 100644
--- a/web/app/components/apps/import-from-marketplace-template-modal.tsx
+++ b/web/app/components/apps/import-from-marketplace-template-modal.tsx
@@ -75,10 +75,10 @@ const ImportFromMarketplaceTemplateModal = ({
         <div className="flex items-center justify-between pt-6 pr-5 pb-3 pl-6 title-2xl-semi-bold text-text-primary">
           {t('marketplace.template.modalTitle', { ns: 'app' })}
           <div
-            className="flex h-8 w-8 cursor-pointer items-center"
+            className="flex size-8 cursor-pointer items-center"
             onClick={onClose}
           >
-            <RiCloseLine className="h-5 w-5 text-text-tertiary" />
+            <RiCloseLine className="size-5 text-text-tertiary" />
           </div>
         </div>
 
@@ -105,12 +105,12 @@ const ImportFromMarketplaceTemplateModal = ({
                       <img
                         src={`${MARKETPLACE_API_PREFIX}/templates/${template.id}/icon`}
                         alt={template.template_name}
-                        className="h-10 w-10 rounded-lg object-cover"
+                        className="size-10 rounded-lg object-cover"
                       />
                     )
                   : (
                       <div
-                        className="flex h-10 w-10 items-center justify-center rounded-lg text-xl"
+                        className="flex size-10 items-center justify-center rounded-lg text-xl"
                         style={{ background: template.icon_background || '#F3F4F6' }}
                       >
                         {template.icon || '📄'}
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index b1145fe5de..7eb871c734 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -258,7 +258,7 @@ const List: FC<Props> = ({
             role="region"
             aria-label={t('newApp.dropDSLToCreateApp', { ns: 'app' })}
           >
-            <span className="i-ri-drag-drop-line h-4 w-4" />
+            <span className="i-ri-drag-drop-line size-4" />
             <span className="system-xs-regular">{t('newApp.dropDSLToCreateApp', { ns: 'app' })}</span>
           </div>
         )}
diff --git a/web/app/components/apps/new-app-card.tsx b/web/app/components/apps/new-app-card.tsx
index fa9d1ac952..cfeeedbffb 100644
--- a/web/app/components/apps/new-app-card.tsx
+++ b/web/app/components/apps/new-app-card.tsx
@@ -76,11 +76,11 @@ const CreateAppCard = ({
       <div className="grow rounded-t-xl p-2">
         <div className="px-6 pt-2 pb-1 text-xs leading-[18px] font-medium text-text-tertiary">{t('createApp', { ns: 'app' })}</div>
         <button type="button" className="mb-1 flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] leading-[18px] font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary" onClick={() => setShowNewAppModal(true)}>
-          <FilePlus01 className="mr-2 h-4 w-4 shrink-0" />
+          <FilePlus01 className="mr-2 size-4 shrink-0" />
           {t('newApp.startFromBlank', { ns: 'app' })}
         </button>
         <button type="button" className="flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] leading-[18px] font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary" onClick={() => setShowNewAppTemplateDialog(true)}>
-          <FilePlus02 className="mr-2 h-4 w-4 shrink-0" />
+          <FilePlus02 className="mr-2 size-4 shrink-0" />
           {t('newApp.startFromTemplate', { ns: 'app' })}
         </button>
         <button
@@ -88,7 +88,7 @@ const CreateAppCard = ({
           onClick={() => setShowCreateFromDSLModal(true)}
           className="flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] leading-[18px] font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
         >
-          <FileArrow01 className="mr-2 h-4 w-4 shrink-0" />
+          <FileArrow01 className="mr-2 size-4 shrink-0" />
           {t('importDSL', { ns: 'app' })}
         </button>
       </div>
diff --git a/web/app/components/base/action-button/index.stories.tsx b/web/app/components/base/action-button/index.stories.tsx
index d6f0767faa..2de850c398 100644
--- a/web/app/components/base/action-button/index.stories.tsx
+++ b/web/app/components/base/action-button/index.stories.tsx
@@ -49,7 +49,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     size: 'm',
-    children: <RiEditLine className="h-4 w-4" />,
+    children: <RiEditLine className="size-4" />,
   },
 }
 
@@ -67,7 +67,7 @@ export const IconWithText: Story = {
     size: 'm',
     children: (
       <>
-        <RiAddLine className="mr-1 h-4 w-4" />
+        <RiAddLine className="mr-1 size-4" />
         Add Item
       </>
     ),
@@ -78,35 +78,35 @@ export const IconWithText: Story = {
 export const ExtraSmall: Story = {
   args: {
     size: 'xs',
-    children: <RiEditLine className="h-3 w-3" />,
+    children: <RiEditLine className="size-3" />,
   },
 }
 
 export const Small: Story = {
   args: {
     size: 'xs',
-    children: <RiEditLine className="h-3.5 w-3.5" />,
+    children: <RiEditLine className="size-3.5" />,
   },
 }
 
 export const Medium: Story = {
   args: {
     size: 'm',
-    children: <RiEditLine className="h-4 w-4" />,
+    children: <RiEditLine className="size-4" />,
   },
 }
 
 export const Large: Story = {
   args: {
     size: 'l',
-    children: <RiEditLine className="h-5 w-5" />,
+    children: <RiEditLine className="size-5" />,
   },
 }
 
 export const ExtraLarge: Story = {
   args: {
     size: 'xl',
-    children: <RiEditLine className="h-6 w-6" />,
+    children: <RiEditLine className="size-6" />,
   },
 }
 
@@ -115,7 +115,7 @@ export const ActiveState: Story = {
   args: {
     size: 'm',
     state: ActionButtonState.Active,
-    children: <RiEditLine className="h-4 w-4" />,
+    children: <RiEditLine className="size-4" />,
   },
 }
 
@@ -123,7 +123,7 @@ export const DisabledState: Story = {
   args: {
     size: 'm',
     state: ActionButtonState.Disabled,
-    children: <RiEditLine className="h-4 w-4" />,
+    children: <RiEditLine className="size-4" />,
   },
 }
 
@@ -131,7 +131,7 @@ export const DestructiveState: Story = {
   args: {
     size: 'm',
     state: ActionButtonState.Destructive,
-    children: <RiDeleteBinLine className="h-4 w-4" />,
+    children: <RiDeleteBinLine className="size-4" />,
   },
 }
 
@@ -139,7 +139,7 @@ export const HoverState: Story = {
   args: {
     size: 'm',
     state: ActionButtonState.Hover,
-    children: <RiEditLine className="h-4 w-4" />,
+    children: <RiEditLine className="size-4" />,
   },
 }
 
@@ -148,17 +148,17 @@ export const ToolbarActions: Story = {
   render: () => (
     <div className="flex items-center gap-1 rounded-lg bg-background-section-burn p-2">
       <ActionButton size="m">
-        <RiEditLine className="h-4 w-4" />
+        <RiEditLine className="size-4" />
       </ActionButton>
       <ActionButton size="m">
-        <RiShareLine className="h-4 w-4" />
+        <RiShareLine className="size-4" />
       </ActionButton>
       <ActionButton size="m">
-        <RiSaveLine className="h-4 w-4" />
+        <RiSaveLine className="size-4" />
       </ActionButton>
       <div className="mx-1 h-4 w-px bg-divider-regular" />
       <ActionButton size="m" state={ActionButtonState.Destructive}>
-        <RiDeleteBinLine className="h-4 w-4" />
+        <RiDeleteBinLine className="size-4" />
       </ActionButton>
     </div>
   ),
@@ -169,10 +169,10 @@ export const InlineActions: Story = {
     <div className="flex items-center gap-2">
       <span className="text-text-secondary">Item name</span>
       <ActionButton size="xs">
-        <RiEditLine className="h-3.5 w-3.5" />
+        <RiEditLine className="size-3.5" />
       </ActionButton>
       <ActionButton size="xs">
-        <RiMore2Fill className="h-3.5 w-3.5" />
+        <RiMore2Fill className="size-3.5" />
       </ActionButton>
     </div>
   ),
@@ -183,31 +183,31 @@ export const SizeComparison: Story = {
     <div className="flex items-center gap-4">
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="xs">
-          <RiEditLine className="h-3 w-3" />
+          <RiEditLine className="size-3" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">XS</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="xs">
-          <RiEditLine className="h-3.5 w-3.5" />
+          <RiEditLine className="size-3.5" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">S</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="m">
-          <RiEditLine className="h-4 w-4" />
+          <RiEditLine className="size-4" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">M</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="l">
-          <RiEditLine className="h-5 w-5" />
+          <RiEditLine className="size-5" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">L</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="xl">
-          <RiEditLine className="h-6 w-6" />
+          <RiEditLine className="size-6" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">XL</span>
       </div>
@@ -220,31 +220,31 @@ export const StateComparison: Story = {
     <div className="flex items-center gap-4">
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="m" state={ActionButtonState.Default}>
-          <RiEditLine className="h-4 w-4" />
+          <RiEditLine className="size-4" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">Default</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="m" state={ActionButtonState.Active}>
-          <RiEditLine className="h-4 w-4" />
+          <RiEditLine className="size-4" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">Active</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="m" state={ActionButtonState.Hover}>
-          <RiEditLine className="h-4 w-4" />
+          <RiEditLine className="size-4" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">Hover</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="m" state={ActionButtonState.Disabled}>
-          <RiEditLine className="h-4 w-4" />
+          <RiEditLine className="size-4" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">Disabled</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="m" state={ActionButtonState.Destructive}>
-          <RiDeleteBinLine className="h-4 w-4" />
+          <RiDeleteBinLine className="size-4" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">Destructive</span>
       </div>
@@ -257,6 +257,6 @@ export const Playground: Story = {
   args: {
     size: 'm',
     state: ActionButtonState.Default,
-    children: <RiEditLine className="h-4 w-4" />,
+    children: <RiEditLine className="size-4" />,
   },
 }
diff --git a/web/app/components/base/agent-log-modal/detail.tsx b/web/app/components/base/agent-log-modal/detail.tsx
index 24c192c47e..e3f638769c 100644
--- a/web/app/components/base/agent-log-modal/detail.tsx
+++ b/web/app/components/base/agent-log-modal/detail.tsx
@@ -69,7 +69,7 @@ const AgentLogDetail: FC<AgentLogDetailProps> = ({ activeTab = 'DETAIL', convers
       <div className="flex shrink-0 items-center border-b-[0.5px] border-divider-regular px-4">
         <button
           type="button"
-          className={cn('mr-6 cursor-pointer border-x-0 border-t-0 border-b-2 border-transparent bg-transparent px-0 py-3 text-left text-[13px] leading-[18px] font-semibold text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary')}
+          className={cn('mr-6 cursor-pointer border-x-0 border-t-0 border-b-2 border-transparent bg-transparent px-0 py-3 text-left text-[13px] leading-[18px] font-semibold text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', currentTab === 'DETAIL' && 'border-[rgb(21,94,239)]! text-text-secondary')}
           data-active={currentTab === 'DETAIL'}
           onClick={() => switchTab('DETAIL')}
         >
@@ -77,7 +77,7 @@ const AgentLogDetail: FC<AgentLogDetailProps> = ({ activeTab = 'DETAIL', convers
         </button>
         <button
           type="button"
-          className={cn('mr-6 cursor-pointer border-x-0 border-t-0 border-b-2 border-transparent bg-transparent px-0 py-3 text-left text-[13px] leading-[18px] font-semibold text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary')}
+          className={cn('mr-6 cursor-pointer border-x-0 border-t-0 border-b-2 border-transparent bg-transparent px-0 py-3 text-left text-[13px] leading-[18px] font-semibold text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', currentTab === 'TRACING' && 'border-[rgb(21,94,239)]! text-text-secondary')}
           data-active={currentTab === 'TRACING'}
           onClick={() => switchTab('TRACING')}
         >
@@ -85,7 +85,7 @@ const AgentLogDetail: FC<AgentLogDetailProps> = ({ activeTab = 'DETAIL', convers
         </button>
       </div>
       {/* panel detail */}
-      <div className={cn('h-0 grow overflow-y-auto rounded-b-2xl bg-components-panel-bg', currentTab !== 'DETAIL' && '!bg-background-section')}>
+      <div className={cn('h-0 grow overflow-y-auto rounded-b-2xl bg-components-panel-bg', currentTab !== 'DETAIL' && 'bg-background-section!')}>
         {loading && (
           <div className="flex h-full items-center justify-center bg-components-panel-bg">
             <Loading />
diff --git a/web/app/components/base/agent-log-modal/index.tsx b/web/app/components/base/agent-log-modal/index.tsx
index c6f036ede0..abcba5b530 100644
--- a/web/app/components/base/agent-log-modal/index.tsx
+++ b/web/app/components/base/agent-log-modal/index.tsx
@@ -52,7 +52,7 @@ const AgentLogModal: FC<AgentLogModalProps> = ({
         className="absolute top-4 right-3 z-20 cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
         onClick={onCancel}
       >
-        <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+        <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
       </button>
       <AgentLogDetail
         conversationID={currentLogItem.conversationId}
diff --git a/web/app/components/base/agent-log-modal/result.tsx b/web/app/components/base/agent-log-modal/result.tsx
index da7c43ebec..6266b1855b 100644
--- a/web/app/components/base/agent-log-modal/result.tsx
+++ b/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 leading-6 font-medium text-text-tertiary">{t('meta.title', { ns: 'runLog' })}</div>
+          <div className="h-6 text-xs/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>
diff --git a/web/app/components/base/agent-log-modal/tool-call.tsx b/web/app/components/base/agent-log-modal/tool-call.tsx
index 2059adf618..29c2261a37 100644
--- a/web/app/components/base/agent-log-modal/tool-call.tsx
+++ b/web/app/components/base/agent-log-modal/tool-call.tsx
@@ -58,7 +58,7 @@ const ToolCallItem: FC<Props> = ({ toolCall, isLLM = false, isFinal, tokens, obs
         >
           <ChevronRight
             className={cn(
-              'mr-1 h-3 w-3 shrink-0 text-text-quaternary transition-all group-hover:text-text-tertiary',
+              'mr-1 size-3 shrink-0 text-text-quaternary transition-all group-hover:text-text-tertiary',
               !collapseState && 'rotate-90',
             )}
           />
diff --git a/web/app/components/base/alert.tsx b/web/app/components/base/alert.tsx
index 4072e113d2..2eb3e580bd 100644
--- a/web/app/components/base/alert.tsx
+++ b/web/app/components/base/alert.tsx
@@ -36,7 +36,7 @@ const Alert: React.FC<Props> = ({
       >
         <div className={cn('pointer-events-none absolute inset-0 bg-linear-to-r opacity-[0.4]', bgVariants({ type }))} data-testid="alert-gradient">
         </div>
-        <div className="flex h-6 w-6 items-center justify-center">
+        <div className="flex size-6 items-center justify-center">
           <span className="i-ri-information-2-fill text-text-accent" data-testid="info-icon" />
         </div>
         <div className="p-1">
@@ -47,10 +47,10 @@ const Alert: React.FC<Props> = ({
         <button
           type="button"
           aria-label={t('operation.close', { ns: 'common' })}
-          className="pointer-events-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-components-button-secondary-accent-border"
+          className="pointer-events-auto flex size-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-components-button-secondary-accent-border"
           onClick={onHide}
         >
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          <span className="i-ri-close-line size-4 text-text-tertiary" aria-hidden="true" />
         </button>
       </div>
     </div>
diff --git a/web/app/components/base/answer-icon/index.stories.tsx b/web/app/components/base/answer-icon/index.stories.tsx
index d5de350a40..110a11f773 100644
--- a/web/app/components/base/answer-icon/index.stories.tsx
+++ b/web/app/components/base/answer-icon/index.stories.tsx
@@ -32,7 +32,7 @@ const StoryWrapper = (children: ReactNode) => (
 
 export const Default: Story = {
   render: args => StoryWrapper(
-    <div className="h-16 w-16">
+    <div className="size-16">
       <AnswerIcon {...args} />
     </div>,
   ),
@@ -53,10 +53,10 @@ export const Default: Story = {
 export const CustomEmoji: Story = {
   render: args => StoryWrapper(
     <>
-      <div className="h-16 w-16">
+      <div className="size-16">
         <AnswerIcon {...args} icon="🧠" background="#FEE4E2" />
       </div>
-      <div className="h-16 w-16">
+      <div className="size-16">
         <AnswerIcon {...args} icon="🛠️" background="#EEF2FF" />
       </div>
     </>,
@@ -82,7 +82,7 @@ export const CustomEmoji: Story = {
 
 export const ImageIcon: Story = {
   render: args => StoryWrapper(
-    <div className="h-16 w-16">
+    <div className="size-16">
       <AnswerIcon
         {...args}
         iconType="image"
diff --git a/web/app/components/base/answer-icon/index.tsx b/web/app/components/base/answer-icon/index.tsx
index 36dd83be72..58d41bbe50 100644
--- a/web/app/components/base/answer-icon/index.tsx
+++ b/web/app/components/base/answer-icon/index.tsx
@@ -29,7 +29,7 @@ const AnswerIcon: FC<AnswerIconProps> = ({
       style={{ background: background || '#D5F5F6' }}
     >
       {isValidImageIcon
-        ? <img src={imageUrl} className="h-full w-full rounded-full" alt="answer icon" />
+        ? <img src={imageUrl} className="size-full rounded-full" alt="answer icon" />
         : (icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id="🤖" />}
     </div>
   )
diff --git a/web/app/components/base/app-icon-picker/index.stories.tsx b/web/app/components/base/app-icon-picker/index.stories.tsx
index 08e9d69f32..3792e7b358 100644
--- a/web/app/components/base/app-icon-picker/index.stories.tsx
+++ b/web/app/components/base/app-icon-picker/index.stories.tsx
@@ -43,7 +43,7 @@ const AppIconPickerDemo = () => {
 
       <div className="rounded-lg border border-divider-subtle bg-components-panel-bg p-4 text-sm text-text-secondary shadow-sm">
         <div className="font-medium text-text-primary">Selection preview</div>
-        <pre className="mt-2 max-h-44 overflow-auto rounded-md bg-background-default-subtle p-3 font-mono text-xs leading-tight text-text-primary">
+        <pre className="mt-2 max-h-44 overflow-auto rounded-md bg-background-default-subtle p-3 font-mono text-xs/tight text-text-primary">
           {selection ? JSON.stringify(selection, null, 2) : 'No icon selected yet.'}
         </pre>
       </div>
diff --git a/web/app/components/base/app-icon/__tests__/index.spec.tsx b/web/app/components/base/app-icon/__tests__/index.spec.tsx
index 54c1b8c361..84d7b039ab 100644
--- a/web/app/components/base/app-icon/__tests__/index.spec.tsx
+++ b/web/app/components/base/app-icon/__tests__/index.spec.tsx
@@ -74,25 +74,25 @@ describe('AppIcon', () => {
 
   it('applies size classes correctly', () => {
     const { container: xsContainer } = render(<AppIcon size="xs" />)
-    expect(xsContainer.firstChild).toHaveClass('w-4 h-4 rounded-sm')
+    expect(xsContainer.firstChild).toHaveClass('size-4 rounded-sm')
 
     const { container: tinyContainer } = render(<AppIcon size="tiny" />)
-    expect(tinyContainer.firstChild).toHaveClass('w-6 h-6 rounded-md')
+    expect(tinyContainer.firstChild).toHaveClass('size-6 rounded-md')
 
     const { container: smallContainer } = render(<AppIcon size="small" />)
-    expect(smallContainer.firstChild).toHaveClass('w-8 h-8 rounded-lg')
+    expect(smallContainer.firstChild).toHaveClass('size-8 rounded-lg')
 
     const { container: mediumContainer } = render(<AppIcon size="medium" />)
-    expect(mediumContainer.firstChild).toHaveClass('w-9 h-9 rounded-[10px]')
+    expect(mediumContainer.firstChild).toHaveClass('h-9 w-9 rounded-[10px]')
 
     const { container: largeContainer } = render(<AppIcon size="large" />)
-    expect(largeContainer.firstChild).toHaveClass('w-10 h-10 rounded-[10px]')
+    expect(largeContainer.firstChild).toHaveClass('h-10 w-10 rounded-[10px]')
 
     const { container: xlContainer } = render(<AppIcon size="xl" />)
-    expect(xlContainer.firstChild).toHaveClass('w-12 h-12 rounded-xl')
+    expect(xlContainer.firstChild).toHaveClass('h-12 w-12 rounded-xl')
 
     const { container: xxlContainer } = render(<AppIcon size="xxl" />)
-    expect(xxlContainer.firstChild).toHaveClass('w-14 h-14 rounded-2xl')
+    expect(xxlContainer.firstChild).toHaveClass('h-14 w-14 rounded-2xl')
   })
 
   it('applies rounded-sm class when rounded-sm=true', () => {
diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index b08ac5e981..1010720e83 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -30,9 +30,9 @@ const appIconVariants = cva(
   {
     variants: {
       size: {
-        xs: 'h-4 w-4 rounded-sm text-xs',
-        tiny: 'h-6 w-6 rounded-md text-base',
-        small: 'h-8 w-8 rounded-lg text-xl',
+        xs: 'size-4 rounded-sm text-xs',
+        tiny: 'size-6 rounded-md text-base',
+        small: 'size-8 rounded-lg text-xl',
         medium: 'h-9 w-9 rounded-[10px] text-[22px]',
         large: 'h-10 w-10 rounded-[10px] text-[24px]',
         xl: 'h-12 w-12 rounded-xl text-[28px]',
@@ -53,13 +53,13 @@ const EditIconWrapperVariants = cva(
   {
     variants: {
       size: {
-        xs: 'h-4 w-4 rounded-sm',
-        tiny: 'h-6 w-6 rounded-md',
-        small: 'h-8 w-8 rounded-lg',
+        xs: 'size-4 rounded-sm',
+        tiny: 'size-6 rounded-md',
+        small: 'size-8 rounded-lg',
         medium: 'h-9 w-9 rounded-[10px]',
         large: 'h-10 w-10 rounded-[10px]',
-        xl: 'h-12 w-12 rounded-xl',
-        xxl: 'h-14 w-14 rounded-2xl',
+        xl: 'size-12 rounded-xl',
+        xxl: 'size-14 rounded-2xl',
       },
       rounded: {
         true: 'rounded-full',
@@ -118,7 +118,7 @@ const AppIcon: FC<AppIconProps> = ({
     >
       {
         isValidImageIcon
-          ? <img src={imageUrl} className="h-full w-full" alt="app icon" />
+          ? <img src={imageUrl} className="size-full" alt="app icon" />
           : (innerIcon || Icon)
       }
       {
diff --git a/web/app/components/base/audio-btn/index.tsx b/web/app/components/base/audio-btn/index.tsx
index 999193deed..517006a31f 100644
--- a/web/app/components/base/audio-btn/index.tsx
+++ b/web/app/components/base/audio-btn/index.tsx
@@ -90,18 +90,18 @@ const AudioBtn = ({
                 type="button"
                 aria-label={tooltipContent}
                 disabled={audioState === 'loading'}
-                className={`box-border flex h-6 w-6 cursor-pointer items-center justify-center border-none bg-transparent ${isAudition ? 'p-0.5' : 'rounded-md bg-white p-0'}`}
+                className={`box-border flex size-6 cursor-pointer items-center justify-center border-none bg-transparent ${isAudition ? 'p-0.5' : 'rounded-md bg-white p-0'}`}
                 onClick={handleToggle}
               >
                 {audioState === 'loading'
                   ? (
-                      <div className="flex h-full w-full items-center justify-center rounded-md">
+                      <div className="flex size-full items-center justify-center rounded-md">
                         <Loading />
                       </div>
                     )
                   : (
-                      <div className="flex h-full w-full items-center justify-center rounded-md hover:bg-gray-50">
-                        <div className={`h-4 w-4 ${(audioState === 'playing') ? s.pauseIcon : s.playIcon}`}></div>
+                      <div className="flex size-full items-center justify-center rounded-md hover:bg-gray-50">
+                        <div className={`size-4 ${(audioState === 'playing') ? s.pauseIcon : s.playIcon}`}></div>
                       </div>
                     )}
               </button>
diff --git a/web/app/components/base/audio-gallery/AudioPlayer.tsx b/web/app/components/base/audio-gallery/AudioPlayer.tsx
index cb7146a8c6..c31e4aa2e8 100644
--- a/web/app/components/base/audio-gallery/AudioPlayer.tsx
+++ b/web/app/components/base/audio-gallery/AudioPlayer.tsx
@@ -249,8 +249,8 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
       </audio>
       <button type="button" aria-label={playPauseLabel} className="inline-flex shrink-0 cursor-pointer items-center justify-center border-none text-text-accent transition-all hover:text-text-accent-secondary disabled:text-components-button-primary-bg-disabled" onClick={togglePlay} disabled={!isAudioAvailable}>
         {isPlaying
-          ? (<div className="i-ri-pause-circle-fill h-5 w-5" aria-hidden="true" />)
-          : (<div className="i-ri-play-large-fill h-5 w-5" aria-hidden="true" />)}
+          ? (<div className="i-ri-pause-circle-fill size-5" aria-hidden="true" />)
+          : (<div className="i-ri-play-large-fill size-5" aria-hidden="true" />)}
       </button>
       <div className={cn(isAudioAvailable && 'grow')} hidden={!isAudioAvailable}>
         <div className="flex h-8 items-center justify-center">
@@ -260,7 +260,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
           </div>
         </div>
       </div>
-      <div className="absolute top-0 left-0 flex h-full w-full items-center justify-center text-text-quaternary" hidden={isAudioAvailable}>{t('operation.audioSourceUnavailable', { ns: 'common' })}</div>
+      <div className="absolute top-0 left-0 flex size-full items-center justify-center text-text-quaternary" hidden={isAudioAvailable}>{t('operation.audioSourceUnavailable', { ns: 'common' })}</div>
     </div>
   )
 }
diff --git a/web/app/components/base/badge/index.stories.tsx b/web/app/components/base/badge/index.stories.tsx
index b2ab794087..c6726ad173 100644
--- a/web/app/components/base/badge/index.stories.tsx
+++ b/web/app/components/base/badge/index.stories.tsx
@@ -50,7 +50,7 @@ export const CustomContent: Story = {
   render: args => (
     <Badge {...args} uppercase={false}>
       <span className="flex items-center gap-1">
-        <span className="h-2 w-2 rounded-full bg-emerald-400" />
+        <span className="size-2 rounded-full bg-emerald-400" />
         Production
       </span>
     </Badge>
diff --git a/web/app/components/base/block-input/index.tsx b/web/app/components/base/block-input/index.tsx
index acdc13b02f..a35016d688 100644
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -63,7 +63,7 @@ const BlockInput: FC<IBlockInputProps> = ({
   }, [isEditing])
 
   const style = cn({
-    'block h-full w-full border-0 px-4 py-2 text-sm break-all text-gray-900 outline-0': true,
+    'block size-full border-0 px-4 py-2 text-sm break-all text-gray-900 outline-0': true,
     'block-input--editing': isEditing,
   })
 
@@ -124,7 +124,7 @@ const BlockInput: FC<IBlockInputProps> = ({
             <div className="h-full px-4 py-2">
               <textarea
                 ref={contentEditableRef}
-                className={cn(editAreaClassName, 'block h-full w-full resize-none')}
+                className={cn(editAreaClassName, 'block size-full resize-none')}
                 placeholder={placeholder}
                 onChange={onValueChange}
                 value={currentValue}
diff --git a/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx b/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
index 308058957c..388f8ec5de 100644
--- a/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
+++ b/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
@@ -128,7 +128,7 @@ const HeaderInMobile = () => {
         >
           <div className="flex h-full w-[calc(100vw-40px)] flex-col rounded-xl bg-components-panel-bg shadow-lg backdrop-blur-xs" onClick={e => e.stopPropagation()}>
             <div className="flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-4 py-3">
-              <div className="i-custom-public-other-message-3-fill h-6 w-6 shrink-0" />
+              <div className="i-custom-public-other-message-3-fill size-6 shrink-0" />
               <div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
             </div>
             <div className="p-4">
diff --git a/web/app/components/base/chat/chat-with-history/header/operation.tsx b/web/app/components/base/chat/chat-with-history/header/operation.tsx
index 4155603541..52a8d1fa53 100644
--- a/web/app/components/base/chat/chat-with-history/header/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/operation.tsx
@@ -50,7 +50,7 @@ const Operation: FC<Props> = ({
       >
         <div className={cn('flex cursor-pointer items-center rounded-lg p-1.5 pl-2 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
           <div className="system-md-semibold">{title}</div>
-          <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4" />
+          <span aria-hidden className="i-ri-arrow-down-s-line size-4" />
         </div>
       </DropdownMenuTrigger>
       <DropdownMenuContent
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
index 302e5e8c1f..b0da546bb3 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
@@ -42,7 +42,7 @@ const InputsFormNode = ({
           isMobile && 'px-4 py-3',
         )}
         >
-          <Message3Fill className="h-6 w-6 shrink-0" />
+          <Message3Fill className="size-6 shrink-0" />
           <div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
           {collapsed && (
             <Button className="text-text-tertiary uppercase" size="small" variant="ghost" onClick={() => setCollapsed(false)}>{t('operation.edit', { ns: 'common' })}</Button>
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
index 3b82db72db..5066ddf3a0 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
@@ -32,7 +32,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" />
+            <Message3Fill className="size-6 shrink-0" />
             <div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
           </div>
           <div className="p-6">
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index 74efb91e83..38b91e439b 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -123,7 +123,7 @@ const Sidebar = ({ isPanel, panelVisible }: Props) => {
       </div>
       <div className="shrink-0 px-3 py-4">
         <Button variant="secondary-accent" disabled={isResponding} className="w-full justify-center" onClick={handleNewConversation}>
-          <RiEditBoxLine className="mr-1 h-4 w-4" />
+          <RiEditBoxLine className="mr-1 size-4" />
           {t('chat.newChat', { ns: 'share' })}
         </Button>
       </div>
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
index 261ad1a280..89ddc12caa 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
@@ -65,7 +65,7 @@ const Operation: FC<Props> = ({
                   : ActionButtonState.Default
             }
           >
-            <span aria-hidden className="i-ri-more-fill h-4 w-4" />
+            <span aria-hidden className="i-ri-more-fill size-4" />
           </ActionButton>
         )}
         onClick={e => e.stopPropagation()}
@@ -87,8 +87,8 @@ const Operation: FC<Props> = ({
             togglePin()
           }}
         >
-          {isPinned && <span aria-hidden className="i-ri-unpin-line h-4 w-4 shrink-0 text-text-tertiary" />}
-          {!isPinned && <span aria-hidden className="i-ri-pushpin-line h-4 w-4 shrink-0 text-text-tertiary" />}
+          {isPinned && <span aria-hidden className="i-ri-unpin-line size-4 shrink-0 text-text-tertiary" />}
+          {!isPinned && <span aria-hidden className="i-ri-pushpin-line size-4 shrink-0 text-text-tertiary" />}
           <span className="grow">{isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}</span>
         </DropdownMenuItem>
         {isShowRenameConversation && (
@@ -99,7 +99,7 @@ const Operation: FC<Props> = ({
               handleDeferredAction(onRenameConversation)
             }}
           >
-            <span aria-hidden className="i-ri-edit-line h-4 w-4 shrink-0 text-text-tertiary" />
+            <span aria-hidden className="i-ri-edit-line size-4 shrink-0 text-text-tertiary" />
             <span className="grow">{t('sidebar.action.rename', { ns: 'explore' })}</span>
           </DropdownMenuItem>
         )}
@@ -112,7 +112,7 @@ const Operation: FC<Props> = ({
               handleDeferredAction(onDelete)
             }}
           >
-            <span aria-hidden className="i-ri-delete-bin-line h-4 w-4 shrink-0" />
+            <span aria-hidden className="i-ri-delete-bin-line size-4 shrink-0" />
             <span className="grow">{t('sidebar.action.delete', { ns: 'explore' })}</span>
           </DropdownMenuItem>
         )}
diff --git a/web/app/components/base/chat/chat/__tests__/question.spec.tsx b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
index 9da528737a..5c18ac96ba 100644
--- a/web/app/components/base/chat/chat/__tests__/question.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
@@ -135,13 +135,13 @@ describe('Question component', () => {
     const markdown = container.querySelector('.markdown-body')
     expect(markdown).toBeInTheDocument()
 
-    const avatar = container.querySelector('.h-10.w-10') || container.querySelector('.h-10.w-10.shrink-0')
+    const avatar = container.querySelector('.size-10') || container.querySelector('.size-10.shrink-0')
     expect(avatar).toBeTruthy()
   })
 
   it('should hide avatar when hideAvatar is true', () => {
     const { container } = renderWithProvider(makeItem(), vi.fn() as unknown as OnRegenerate, { hideAvatar: true })
-    const avatar = container.querySelector('.h-10.w-10')
+    const avatar = container.querySelector('.size-10')
     expect(avatar).toBeNull()
   })
 
diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx
index 8b7d4a7167..c5ce607579 100644
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@@ -143,7 +143,7 @@ const Answer: FC<AnswerProps> = ({
   return (
     <div className="mb-2 flex last:mb-0">
       {!hideAvatar && (
-        <div className="relative h-10 w-10 shrink-0">
+        <div className="relative size-10 shrink-0">
           {answerIcon || <AnswerIcon />}
           {responding && (
             <div className="absolute top-[-3px] left-[-3px] flex h-4 w-4 items-center rounded-full border-[0.5px] border-divider-subtle bg-background-section-burn pl-[6px] shadow-xs">
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index 265435acb0..915e08d1ef 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -213,8 +213,8 @@ function Operation({
                       onClick={() => handleFeedback(null, undefined, 'user')}
                     >
                       {displayUserFeedback?.rating === 'like'
-                        ? <span aria-hidden="true" className="i-ri-thumb-up-line h-4 w-4" />
-                        : <span aria-hidden="true" className="i-ri-thumb-down-line h-4 w-4" />}
+                        ? <span aria-hidden="true" className="i-ri-thumb-up-line size-4" />
+                        : <span aria-hidden="true" className="i-ri-thumb-down-line size-4" />}
                     </ActionButton>
                   </FeedbackTooltip>
                 )
@@ -225,14 +225,14 @@ function Operation({
                       state={displayUserFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Default}
                       onClick={() => handleLikeClick('user')}
                     >
-                      <span aria-hidden="true" className="i-ri-thumb-up-line h-4 w-4" />
+                      <span aria-hidden="true" className="i-ri-thumb-up-line size-4" />
                     </ActionButton>
                     <ActionButton
                       aria-label={`${userFeedbackLabel}: ${dislikeLabel}`}
                       state={displayUserFeedback?.rating === 'dislike' ? ActionButtonState.Destructive : ActionButtonState.Default}
                       onClick={() => handleDislikeClick('user')}
                     >
-                      <span aria-hidden="true" className="i-ri-thumb-down-line h-4 w-4" />
+                      <span aria-hidden="true" className="i-ri-thumb-down-line size-4" />
                     </ActionButton>
                   </>
                 )}
@@ -251,12 +251,12 @@ function Operation({
                 {displayUserFeedback.rating === 'like'
                   ? (
                       <ActionButton aria-label={`${userFeedbackLabel}: ${likeLabel}`} state={ActionButtonState.Active}>
-                        <span aria-hidden="true" className="i-ri-thumb-up-line h-4 w-4" />
+                        <span aria-hidden="true" className="i-ri-thumb-up-line size-4" />
                       </ActionButton>
                     )
                   : (
                       <ActionButton aria-label={`${userFeedbackLabel}: ${dislikeLabel}`} state={ActionButtonState.Destructive}>
-                        <span aria-hidden="true" className="i-ri-thumb-down-line h-4 w-4" />
+                        <span aria-hidden="true" className="i-ri-thumb-down-line size-4" />
                       </ActionButton>
                     )}
               </FeedbackTooltip>
@@ -274,8 +274,8 @@ function Operation({
                       onClick={() => handleFeedback(null, undefined, 'admin')}
                     >
                       {adminLocalFeedback?.rating === 'like'
-                        ? <span aria-hidden="true" className="i-ri-thumb-up-line h-4 w-4" />
-                        : <span aria-hidden="true" className="i-ri-thumb-down-line h-4 w-4" />}
+                        ? <span aria-hidden="true" className="i-ri-thumb-up-line size-4" />
+                        : <span aria-hidden="true" className="i-ri-thumb-down-line size-4" />}
                     </ActionButton>
                   </FeedbackTooltip>
                 )
@@ -289,7 +289,7 @@ function Operation({
                         state={adminLocalFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Default}
                         onClick={() => handleLikeClick('admin')}
                       >
-                        <span aria-hidden="true" className="i-ri-thumb-up-line h-4 w-4" />
+                        <span aria-hidden="true" className="i-ri-thumb-up-line size-4" />
                       </ActionButton>
                     </FeedbackTooltip>
                     <FeedbackTooltip
@@ -300,7 +300,7 @@ function Operation({
                         state={adminLocalFeedback?.rating === 'dislike' ? ActionButtonState.Destructive : ActionButtonState.Default}
                         onClick={() => handleDislikeClick('admin')}
                       >
-                        <span aria-hidden="true" className="i-ri-thumb-down-line h-4 w-4" />
+                        <span aria-hidden="true" className="i-ri-thumb-down-line size-4" />
                       </ActionButton>
                     </FeedbackTooltip>
                   </>
@@ -329,12 +329,12 @@ function Operation({
                   toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
                 }}
               >
-                <span aria-hidden="true" className="i-ri-clipboard-line h-4 w-4" />
+                <span aria-hidden="true" className="i-ri-clipboard-line size-4" />
               </ActionButton>
             )}
             {!noChatInput && (
               <ActionButton aria-label={regenerateLabel} onClick={() => onRegenerate?.(item)}>
-                <span aria-hidden="true" className="i-ri-reset-left-line h-4 w-4" />
+                <span aria-hidden="true" className="i-ri-reset-left-line size-4" />
               </ActionButton>
             )}
             {config?.supportAnnotation && config.annotation_reply?.enabled && !humanInputFormDataList?.length && (
@@ -384,7 +384,7 @@ function Operation({
                 <DialogDescription className="mt-1 system-xs-regular text-text-tertiary">
                   {t('feedback.subtitle', { ns: 'common' }) || 'Please tell us what went wrong with this response'}
                 </DialogDescription>
-                <DialogCloseButton className="top-5 right-5 h-8 w-8 rounded-lg" />
+                <DialogCloseButton className="top-5 right-5 size-8 rounded-lg" />
               </div>
               <div className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
                 <label htmlFor={feedbackTextareaId} className="mb-2 block system-sm-semibold text-text-secondary">
diff --git a/web/app/components/base/chat/chat/answer/tool-detail.tsx b/web/app/components/base/chat/chat/answer/tool-detail.tsx
index 72b522ae17..379aee1acc 100644
--- a/web/app/components/base/chat/chat/answer/tool-detail.tsx
+++ b/web/app/components/base/chat/chat/answer/tool-detail.tsx
@@ -35,12 +35,12 @@ const ToolDetail = ({
         )}
         onClick={() => setExpand(!expand)}
       >
-        {isFinished && <RiHammerFill className="mr-1 h-3.5 w-3.5" />}
-        {!isFinished && <RiLoader2Line className="mr-1 h-3.5 w-3.5 animate-spin" />}
+        {isFinished && <RiHammerFill className="mr-1 size-3.5" />}
+        {!isFinished && <RiLoader2Line className="mr-1 size-3.5 animate-spin" />}
         {t(`thought.${isFinished ? 'used' : 'using'}`, { ns: 'tools' })}
         <div className="mx-1 text-text-secondary">{toolLabel}</div>
-        {!expand && <RiArrowRightSLine className="h-4 w-4" />}
-        {expand && <RiArrowDownSLine className="ml-auto h-4 w-4" />}
+        {!expand && <RiArrowRightSLine className="size-4" />}
+        {expand && <RiArrowDownSLine className="ml-auto size-4" />}
       </div>
       {
         expand && (
diff --git a/web/app/components/base/chat/chat/answer/workflow-process.tsx b/web/app/components/base/chat/chat/answer/workflow-process.tsx
index b2036e9060..3a751074e8 100644
--- a/web/app/components/base/chat/chat/answer/workflow-process.tsx
+++ b/web/app/components/base/chat/chat/answer/workflow-process.tsx
@@ -62,7 +62,7 @@ const WorkflowProcessItem = ({
         {
           running && (
             <div
-              className="mr-1 i-ri-loader-2-line h-3.5 w-3.5 shrink-0 animate-spin text-text-tertiary"
+              className="mr-1 i-ri-loader-2-line size-3.5 shrink-0 animate-spin text-text-tertiary"
               data-testid="status-icon-running"
             />
           )
@@ -70,7 +70,7 @@ const WorkflowProcessItem = ({
         {
           succeeded && (
             <div
-              className="mr-1 i-custom-vender-solid-general-check-circle h-3.5 w-3.5 shrink-0 text-text-success"
+              className="mr-1 i-custom-vender-solid-general-check-circle size-3.5 shrink-0 text-text-success"
               data-testid="status-icon-success"
             />
           )
@@ -78,7 +78,7 @@ const WorkflowProcessItem = ({
         {
           failed && (
             <div
-              className="mr-1 i-ri-error-warning-fill h-3.5 w-3.5 shrink-0 text-text-destructive"
+              className="mr-1 i-ri-error-warning-fill size-3.5 shrink-0 text-text-destructive"
               data-testid="status-icon-failed"
             />
           )
@@ -86,7 +86,7 @@ const WorkflowProcessItem = ({
         {
           paused && (
             <div
-              className="mr-1 i-ri-pause-circle-fill h-3.5 w-3.5 shrink-0 text-text-warning-secondary"
+              className="mr-1 i-ri-pause-circle-fill size-3.5 shrink-0 text-text-warning-secondary"
               data-testid="status-icon-paused"
             />
           )
@@ -97,7 +97,7 @@ const WorkflowProcessItem = ({
         >
           {!collapse ? t('common.workflowProcess', { ns: 'workflow' }) : latestNode?.title}
         </div>
-        <div className={cn('ml-1 i-ri-arrow-right-s-line h-4 w-4 shrink-0 text-text-tertiary', !collapse && 'rotate-90')} />
+        <div className={cn('ml-1 i-ri-arrow-right-s-line size-4 shrink-0 text-text-tertiary', !collapse && 'rotate-90')} />
       </div>
       {
         !collapse && (
diff --git a/web/app/components/base/chat/chat/chat-input-area/index.tsx b/web/app/components/base/chat/chat/chat-input-area/index.tsx
index 9f8fb57767..406748126e 100644
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@@ -143,7 +143,7 @@ const ChatInputArea = ({ readonly, botName, showFeatureBar, showFileUpload, feat
           <FileListInChatInput fileConfig={visionConfig!} />
           <div ref={wrapperRef} className="flex items-center justify-between">
             <div className="relative flex w-full grow items-center">
-              <div ref={textValueRef} className="pointer-events-none invisible absolute h-auto w-auto p-1 body-lg-regular leading-6 whitespace-pre">
+              <div ref={textValueRef} className="pointer-events-none invisible absolute size-auto p-1 body-lg-regular leading-6 whitespace-pre">
                 {query}
               </div>
               <Textarea ref={ref => textareaRef.current = ref as any} className={cn('w-full resize-none bg-transparent p-1 body-lg-regular leading-6 text-text-primary outline-hidden')} placeholder={decode(t(readonly ? 'chat.inputDisabledPlaceholder' : 'chat.inputPlaceholder', { ns: 'common', botName }) || '')} autoFocus minRows={1} value={query} onChange={e => handleQueryChange(e.target.value)} onKeyDown={handleKeyDown} onCompositionStart={handleCompositionStart} onCompositionEnd={handleCompositionEnd} onPaste={handleClipboardPasteFile} onDragEnter={handleDragFileEnter} onDragLeave={handleDragFileLeave} onDragOver={handleDragFileOver} onDrop={handleDropFile} readOnly={readonly} />
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
index d09ea0da5d..763071daf5 100644
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -56,7 +56,7 @@ const Operation: FC<OperationProps> = ({
                 disabled={readonly}
                 onClick={onShowVoiceInput}
               >
-                <RiMicLine className="h-5 w-5" aria-hidden="true" />
+                <RiMicLine className="size-5" aria-hidden="true" />
               </ActionButton>
             )
           }
@@ -74,7 +74,7 @@ const Operation: FC<OperationProps> = ({
               : {}
           }
         >
-          <RiSendPlane2Fill className="h-4 w-4" aria-hidden="true" />
+          <RiSendPlane2Fill className="size-4" aria-hidden="true" />
         </Button>
       </div>
     </div>
diff --git a/web/app/components/base/chat/chat/citation/index.tsx b/web/app/components/base/chat/chat/citation/index.tsx
index cd5998e74f..95b0ac0ace 100644
--- a/web/app/components/base/chat/chat/citation/index.tsx
+++ b/web/app/components/base/chat/chat/citation/index.tsx
@@ -112,7 +112,7 @@ const Citation: FC<CitationProps> = ({
               {
                 !showMore
                   ? `+ ${resourcesLength - limitNumberInOneLine}`
-                  : <div className="i-ri-arrow-down-s-line h-4 w-4 rotate-180 text-text-tertiary" />
+                  : <div className="i-ri-arrow-down-s-line size-4 rotate-180 text-text-tertiary" />
               }
             </div>
           )
diff --git a/web/app/components/base/chat/chat/citation/popup.tsx b/web/app/components/base/chat/chat/citation/popup.tsx
index 5854fdceac..790f4466ee 100644
--- a/web/app/components/base/chat/chat/citation/popup.tsx
+++ b/web/app/components/base/chat/chat/citation/popup.tsx
@@ -51,7 +51,7 @@ const Popup: FC<PopupProps> = ({
         nativeButton={false}
         render={(
           <div data-testid="popup-trigger" className="flex h-7 max-w-[240px] items-center rounded-lg bg-components-button-secondary-bg px-2">
-            <FileIcon type={fileType} className="mr-1 h-4 w-4 shrink-0" />
+            <FileIcon type={fileType} className="mr-1 size-4 shrink-0" />
             <div className="truncate text-xs text-text-tertiary">{data.documentName}</div>
           </div>
         )}
@@ -65,7 +65,7 @@ const Popup: FC<PopupProps> = ({
         <div data-testid="popup-content" className="max-w-[360px] rounded-xl bg-background-section-burn shadow-lg backdrop-blur-[5px]">
           <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" />
+              <FileIcon type={fileType} className="mr-1 size-4 shrink-0" />
               <div className="truncate system-xs-medium text-text-tertiary">
                 {(data.dataSourceType === 'upload_file' || data.dataSourceType === 'file') && !!data.sources?.[0]?.dataset_id
                   ? (
@@ -96,7 +96,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="mr-0.5 i-custom-vender-line-general-hash-02 h-3 w-3 text-text-quaternary" aria-hidden />
+                            <i className="mr-0.5 i-custom-vender-line-general-hash-02 size-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>
@@ -109,7 +109,7 @@ 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="ml-1 i-custom-vender-line-arrows-arrow-up-right h-3 w-3" aria-hidden />
+                                <i className="ml-1 i-custom-vender-line-arrows-arrow-up-right size-3" aria-hidden />
                               </Link>
                             )
                           }
@@ -121,17 +121,17 @@ const Popup: FC<PopupProps> = ({
                               <Tooltip
                                 text={t('chat.citation.characters', { ns: 'common' })}
                                 data={source.word_count}
-                                icon={<i className="mr-1 i-custom-vender-line-editor-type-square h-3 w-3" aria-hidden />}
+                                icon={<i className="mr-1 i-custom-vender-line-editor-type-square size-3" aria-hidden />}
                               />
                               <Tooltip
                                 text={t('chat.citation.hitCount', { ns: 'common' })}
                                 data={source.hit_count}
-                                icon={<i className="mr-1 i-custom-vender-line-general-target-04 h-3 w-3" aria-hidden />}
+                                icon={<i className="mr-1 i-custom-vender-line-general-target-04 size-3" aria-hidden />}
                               />
                               <Tooltip
                                 text={t('chat.citation.vectorHash', { ns: 'common' })}
                                 data={source.index_node_hash?.substring(0, 7)}
-                                icon={<i className="mr-1 i-custom-vender-line-editor-bezier-curve-03 h-3 w-3" aria-hidden />}
+                                icon={<i className="mr-1 i-custom-vender-line-editor-bezier-curve-03 size-3" aria-hidden />}
                               />
                               {
                                 !!source.score && (
diff --git a/web/app/components/base/chat/chat/log/index.tsx b/web/app/components/base/chat/chat/log/index.tsx
index a997ec4350..2e13a6996a 100644
--- a/web/app/components/base/chat/chat/log/index.tsx
+++ b/web/app/components/base/chat/chat/log/index.tsx
@@ -33,7 +33,7 @@ const Log: FC<LogProps> = ({
       }}
     >
       <ActionButton>
-        <RiFileList3Line className="h-4 w-4" />
+        <RiFileList3Line className="size-4" />
       </ActionButton>
     </div>
   )
diff --git a/web/app/components/base/chat/chat/question.stories.tsx b/web/app/components/base/chat/chat/question.stories.tsx
index 308a096864..fa3d3ef540 100644
--- a/web/app/components/base/chat/chat/question.stories.tsx
+++ b/web/app/components/base/chat/chat/question.stories.tsx
@@ -28,7 +28,7 @@ export const Default: Story = {
     theme: undefined,
     questionIcon: (
       <div className="h-full w-full rounded-full border-[0.5px] border-black/5">
-        <User className="h-full w-full" />
+        <User className="size-full" />
       </div>
     ),
   },
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index e5393d1737..4c323dde52 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -176,11 +176,11 @@ const Question: FC<QuestionProps> = ({
                 toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
               }}
             >
-              <div className="i-ri-clipboard-line h-4 w-4" aria-hidden="true" />
+              <div className="i-ri-clipboard-line size-4" aria-hidden="true" />
             </ActionButton>
             {enableEdit && (
               <ActionButton aria-label={editLabel} onClick={handleEdit}>
-                <div className="i-ri-edit-line h-4 w-4" aria-hidden="true" />
+                <div className="i-ri-edit-line size-4" aria-hidden="true" />
               </ActionButton>
             )}
           </div>
@@ -242,11 +242,11 @@ const Question: FC<QuestionProps> = ({
         <div className="mt-1 h-[18px]" />
       </div>
       {!hideAvatar && (
-        <div className="h-10 w-10 shrink-0">
+        <div className="size-10 shrink-0">
           {
             questionIcon || (
               <div className="h-full w-full rounded-full border-[0.5px] border-black/5">
-                <User className="question-default-user-icon h-full w-full" />
+                <User className="question-default-user-icon size-full" />
               </div>
             )
           }
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
index 1282126f7d..1c43894701 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
@@ -48,7 +48,7 @@ const InputsFormNode = ({
           isMobile && 'px-4 py-3',
         )}
         >
-          <div className="i-custom-public-other-message-3-fill h-6 w-6 shrink-0" />
+          <div className="i-custom-public-other-message-3-fill size-6 shrink-0" />
           <div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
           {collapsed && (
             <Button
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
index f7fc80819e..aa6f5d65cc 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
@@ -43,7 +43,7 @@ const ViewFormDropdown = ({
           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">
-            <div className="i-custom-public-other-message-3-fill h-6 w-6 shrink-0" />
+            <div className="i-custom-public-other-message-3-fill size-6 shrink-0" />
             <div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
           </div>
           <div className="p-6">
diff --git a/web/app/components/base/chip/index.tsx b/web/app/components/base/chip/index.tsx
index 35ad48039b..6ba5d9cb44 100644
--- a/web/app/components/base/chip/index.tsx
+++ b/web/app/components/base/chip/index.tsx
@@ -62,7 +62,7 @@ const Chip: FC<Props> = ({
             {showLeftIcon && (
               <div className="p-0.5">
                 {leftIcon || (
-                  <RiFilter3Line className={cn('h-4 w-4 text-text-tertiary', !!value && 'text-text-secondary')} />
+                  <RiFilter3Line className={cn('size-4 text-text-tertiary', !!value && 'text-text-secondary')} />
                 )}
               </div>
             )}
@@ -71,7 +71,7 @@ const Chip: FC<Props> = ({
                 {triggerContent}
               </div>
             </div>
-            {!value && <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />}
+            {!value && <RiArrowDownSLine className="size-4 text-text-tertiary" />}
             {!!value && (
               <div
                 className="group/clear cursor-pointer p-px"
@@ -80,7 +80,7 @@ const Chip: FC<Props> = ({
                   onClear()
                 }}
               >
-                <RiCloseCircleFill className="h-3.5 w-3.5 text-text-quaternary group-hover/clear:text-text-tertiary" />
+                <RiCloseCircleFill className="size-3.5 text-text-quaternary group-hover/clear:text-text-tertiary" />
               </div>
             )}
           </div>
@@ -107,7 +107,7 @@ const Chip: FC<Props> = ({
                 className="gap-2 rounded-lg px-2 py-[6px] pl-3"
               >
                 <div title={item.name} className="grow truncate system-sm-medium text-text-secondary">{item.name}</div>
-                {value === item.value && <RiCheckLine className="h-4 w-4 shrink-0 text-util-colors-blue-light-blue-light-600" />}
+                {value === item.value && <RiCheckLine className="size-4 shrink-0 text-util-colors-blue-light-blue-light-600" />}
               </DropdownMenuRadioItem>
             ))}
           </DropdownMenuRadioGroup>
diff --git a/web/app/components/base/copy-feedback/index.tsx b/web/app/components/base/copy-feedback/index.tsx
index 027e34d665..6b2eee6871 100644
--- a/web/app/components/base/copy-feedback/index.tsx
+++ b/web/app/components/base/copy-feedback/index.tsx
@@ -39,8 +39,8 @@ const CopyFeedback = ({ content }: Props) => {
       <TooltipTrigger
         render={(
           <ActionButton aria-label={safeText} onClick={handleCopy}>
-            {copied && <RiClipboardFill className="h-4 w-4" aria-hidden="true" />}
-            {!copied && <RiClipboardLine className="h-4 w-4" aria-hidden="true" />}
+            {copied && <RiClipboardFill className="size-4" aria-hidden="true" />}
+            {!copied && <RiClipboardLine className="size-4" aria-hidden="true" />}
           </ActionButton>
         )}
       />
@@ -74,11 +74,11 @@ export const CopyFeedbackNew = ({ content, className }: Pick<Props, 'className'
           <button
             type="button"
             aria-label={safeText}
-            className={`h-8 w-8 cursor-pointer rounded-lg border-none bg-transparent p-0 hover:bg-components-button-ghost-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden ${className ?? ''}`}
+            className={`size-8 cursor-pointer rounded-lg border-none bg-transparent p-0 hover:bg-components-button-ghost-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden ${className ?? ''}`}
             onClick={handleCopy}
           >
             <div
-              className={`h-full w-full ${copyStyle.copyIcon} ${copied ? copyStyle.copied : ''}`}
+              className={`size-full ${copyStyle.copyIcon} ${copied ? copyStyle.copied : ''}`}
             >
             </div>
           </button>
diff --git a/web/app/components/base/copy-icon/index.tsx b/web/app/components/base/copy-icon/index.tsx
index 2cc714dae5..d110c813a0 100644
--- a/web/app/components/base/copy-icon/index.tsx
+++ b/web/app/components/base/copy-icon/index.tsx
@@ -31,13 +31,13 @@ const CopyIcon = ({ content }: Props) => {
           <button
             type="button"
             aria-label={safeTooltipText}
-            className="mx-1 inline-flex h-3.5 w-3.5 cursor-pointer border-0 bg-transparent p-0 text-text-tertiary"
+            className="mx-1 inline-flex size-3.5 cursor-pointer border-0 bg-transparent p-0 text-text-tertiary"
             onClick={handleCopy}
             onMouseLeave={reset}
           >
             {!copied
-              ? (<span aria-hidden className="i-custom-vender-line-files-copy h-3.5 w-3.5" />)
-              : (<span aria-hidden className="i-custom-vender-line-files-copy-check h-3.5 w-3.5" />)}
+              ? (<span aria-hidden className="i-custom-vender-line-files-copy size-3.5" />)
+              : (<span aria-hidden className="i-custom-vender-line-files-copy-check size-3.5" />)}
           </button>
         )}
       />
diff --git a/web/app/components/base/date-and-time-picker/calendar/item.tsx b/web/app/components/base/date-and-time-picker/calendar/item.tsx
index 4a486131db..513a389ccf 100644
--- a/web/app/components/base/date-and-time-picker/calendar/item.tsx
+++ b/web/app/components/base/date-and-time-picker/calendar/item.tsx
@@ -26,7 +26,7 @@ const Item: FC<CalendarItemProps> = ({
       )}
     >
       {date.date()}
-      {isToday && <div className="absolute bottom-1 mx-auto h-1 w-1 rounded-full bg-components-button-primary-bg" />}
+      {isToday && <div className="absolute bottom-1 mx-auto size-1 rounded-full bg-components-button-primary-bg" />}
     </button>
   )
 }
diff --git a/web/app/components/base/date-and-time-picker/common/__tests__/option-list.spec.tsx b/web/app/components/base/date-and-time-picker/common/__tests__/option-list.spec.tsx
index 9e6a8cace9..07437e6ee0 100644
--- a/web/app/components/base/date-and-time-picker/common/__tests__/option-list.spec.tsx
+++ b/web/app/components/base/date-and-time-picker/common/__tests__/option-list.spec.tsx
@@ -12,7 +12,7 @@ describe('OptionList', () => {
     const list = screen.getByRole('list')
 
     expect(list).toHaveClass('overflow-y-auto')
-    expect(list).toHaveClass('[scrollbar-width:none]')
+    expect(list).toHaveClass('scrollbar-none')
     expect(list).toHaveClass('[&::-webkit-scrollbar]:hidden')
   })
 
diff --git a/web/app/components/base/date-and-time-picker/common/option-list.tsx b/web/app/components/base/date-and-time-picker/common/option-list.tsx
index 8fc2407089..b3e4d9fe5a 100644
--- a/web/app/components/base/date-and-time-picker/common/option-list.tsx
+++ b/web/app/components/base/date-and-time-picker/common/option-list.tsx
@@ -8,7 +8,7 @@ type OptionListProps = {
 
 const optionListClassName = cn(
   'flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]',
-  '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+  'scrollbar-none [&::-webkit-scrollbar]:hidden',
 )
 
 const OptionList = ({
diff --git a/web/app/components/base/date-and-time-picker/date-picker/footer.tsx b/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
index 0e0852a893..56f8f1ee5e 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
@@ -31,7 +31,7 @@ const Footer: FC<DatePickerFooterProps> = ({
                       system-xs-medium text-components-button-secondary-accent-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]"
           onClick={handleClickTimePicker}
         >
-          <RiTimeLine className="h-3.5 w-3.5" />
+          <RiTimeLine className="size-3.5" />
           {view === ViewType.date && <span>{displayTime}</span>}
           {view === ViewType.time && <span>{t('operation.pickDate', { ns: 'time' })}</span>}
         </button>
diff --git a/web/app/components/base/date-and-time-picker/date-picker/header.tsx b/web/app/components/base/date-and-time-picker/date-picker/header.tsx
index 272a4958d2..3058438cae 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/header.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/header.tsx
@@ -21,7 +21,7 @@ const Header: FC<DatePickerHeaderProps> = ({
           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" />
+          <RiArrowDownSLine className="size-4 text-text-tertiary" />
         </button>
       </div>
       <button
diff --git a/web/app/components/base/date-and-time-picker/date-picker/index.tsx b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
index 454ac1ad9c..8fdcb81fd5 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
@@ -227,14 +227,14 @@ const DatePicker = ({
                   value={isOpen ? '' : displayValue}
                   placeholder={placeholderDate}
                 />
-                <span className={cn('i-ri-calendar-line h-4 w-4 shrink-0 text-text-quaternary', isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary', (displayValue || (isOpen && selectedDate)) && 'group-hover:hidden')} />
+                <span className={cn('i-ri-calendar-line size-4 shrink-0 text-text-quaternary', isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary', (displayValue || (isOpen && selectedDate)) && 'group-hover:hidden')} />
                 <button
                   type="button"
                   aria-label={t('operation.clear', { ns: 'common' })}
-                  className={cn('hidden h-4 w-4 shrink-0 border-none bg-transparent p-0 text-text-quaternary hover:text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', (displayValue || (isOpen && selectedDate)) && 'group-hover:inline-block')}
+                  className={cn('hidden size-4 shrink-0 border-none bg-transparent p-0 text-text-quaternary hover:text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', (displayValue || (isOpen && selectedDate)) && 'group-hover:inline-block')}
                   onClick={handleClear}
                 >
-                  <span className="i-ri-close-circle-fill h-4 w-4" aria-hidden="true" />
+                  <span className="i-ri-close-circle-fill size-4" aria-hidden="true" />
                 </button>
               </div>
             )}
diff --git a/web/app/components/base/date-and-time-picker/time-picker/index.tsx b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
index f0aa55a316..a8a68c9f73 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
@@ -226,14 +226,14 @@ const TimePicker = ({
                 {showTimezone && timezone && (
                   <TimezoneLabel timezone={timezone} inline className="shrink-0 text-xs select-none" />
                 )}
-                <span className={cn('i-ri-time-line h-4 w-4 shrink-0 text-text-quaternary', isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary', (displayValue || (isOpen && selectedTime)) && !notClearable && 'group-hover:hidden')} />
+                <span className={cn('i-ri-time-line size-4 shrink-0 text-text-quaternary', isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary', (displayValue || (isOpen && selectedTime)) && !notClearable && 'group-hover:hidden')} />
                 <button
                   type="button"
-                  className={cn('hidden h-4 w-4 shrink-0 border-none bg-transparent p-0 text-text-quaternary hover:text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', (displayValue || (isOpen && selectedTime)) && !notClearable && 'group-hover:inline-block')}
+                  className={cn('hidden size-4 shrink-0 border-none bg-transparent p-0 text-text-quaternary hover:text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', (displayValue || (isOpen && selectedTime)) && !notClearable && 'group-hover:inline-block')}
                   aria-label={t('operation.clear', { ns: 'common' })}
                   onClick={handleClear}
                 >
-                  <span className="i-ri-close-circle-fill h-4 w-4" aria-hidden="true" />
+                  <span className="i-ri-close-circle-fill size-4" aria-hidden="true" />
                 </button>
               </div>
             )}
diff --git a/web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx b/web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx
index c0a90d7acb..5d5d7ca470 100644
--- a/web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx
+++ b/web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx
@@ -20,7 +20,7 @@ const Header: FC<YearAndMonthPickerHeaderProps> = ({
         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" />
+        <RiArrowUpSLine className="size-4 text-text-tertiary" />
       </button>
     </div>
   )
diff --git a/web/app/components/base/emoji-picker/Inner.tsx b/web/app/components/base/emoji-picker/Inner.tsx
index f05221989d..2c727aa767 100644
--- a/web/app/components/base/emoji-picker/Inner.tsx
+++ b/web/app/components/base/emoji-picker/Inner.tsx
@@ -72,7 +72,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
       <div className="flex w-full flex-col items-center px-3 pb-2">
         <div className="relative w-full">
           <div className="pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3">
-            <MagnifyingGlassIcon className="h-5 w-5 text-text-quaternary" aria-hidden="true" />
+            <MagnifyingGlassIcon className="size-5 text-text-quaternary" aria-hidden="true" />
           </div>
           <Input
             className="pl-10"
@@ -99,20 +99,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
           <>
             <div key="category-search" className="flex flex-col">
               <p className="mb-1 system-xs-medium-uppercase text-text-primary">Search</p>
-              <div className="grid h-full w-full grid-cols-8 gap-1">
+              <div className="grid size-full grid-cols-8 gap-1">
                 {searchedEmojis.map((emoji: string, index: number) => {
                   return (
                     <button
                       type="button"
                       key={`emoji-search-${index}`}
                       aria-label={emoji}
-                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg border-none bg-transparent p-0"
+                      className="inline-flex size-10 items-center justify-center rounded-lg border-none bg-transparent p-0"
                       onClick={() => {
                         setSelectedEmoji(emoji)
                         setShowStyleColors(true)
                       }}
                     >
-                      <span className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1">
+                      <span className="flex size-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1">
                         <em-emoji id={emoji} />
                       </span>
                     </button>
@@ -127,20 +127,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
           return (
             <div key={`category-${index}`} className="flex flex-col">
               <p className="mb-1 system-xs-medium-uppercase text-text-primary">{category.id}</p>
-              <div className="grid h-full w-full grid-cols-8 gap-1">
+              <div className="grid size-full grid-cols-8 gap-1">
                 {category.emojis.map((emoji, index: number) => {
                   return (
                     <button
                       type="button"
                       key={`emoji-${index}`}
                       aria-label={emoji}
-                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg border-none bg-transparent p-0"
+                      className="inline-flex size-10 items-center justify-center rounded-lg border-none bg-transparent p-0"
                       onClick={() => {
                         setSelectedEmoji(emoji)
                         setShowStyleColors(true)
                       }}
                     >
-                      <span className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1">
+                      <span className="flex size-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1">
                         <em-emoji id={emoji} />
                       </span>
                     </button>
@@ -162,7 +162,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
                 type="button"
                 aria-labelledby={styleColorsLabelId}
                 aria-expanded="true"
-                className="i-heroicons-chevron-down h-4 w-4 cursor-pointer border-none bg-transparent p-0 text-text-quaternary"
+                className="i-heroicons-chevron-down size-4 cursor-pointer border-none bg-transparent p-0 text-text-quaternary"
                 onClick={() => setShowStyleColors(!showStyleColors)}
               />
             )
@@ -171,7 +171,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
                 type="button"
                 aria-labelledby={styleColorsLabelId}
                 aria-expanded="false"
-                className="i-heroicons-chevron-up h-4 w-4 cursor-pointer border-none bg-transparent p-0 text-text-quaternary"
+                className="i-heroicons-chevron-up size-4 cursor-pointer border-none bg-transparent p-0 text-text-quaternary"
                 onClick={() => setShowStyleColors(!showStyleColors)}
               />
             )}
@@ -189,7 +189,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
                     'cursor-pointer',
                     'border-none bg-transparent p-0',
                     'ring-components-input-border-hover ring-offset-1 hover:ring-1',
-                    'inline-flex h-10 w-10 items-center justify-center rounded-lg',
+                    'inline-flex size-10 items-center justify-center rounded-lg',
                     color === selectedBackground ? 'ring-1 ring-components-input-border-hover' : '',
                   )
                 }
@@ -199,7 +199,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
               >
                 <span
                   className={cn(
-                    'flex h-8 w-8 items-center justify-center rounded-lg p-1',
+                    'flex size-8 items-center justify-center rounded-lg p-1',
                   )}
                   style={{ background: color }}
                 >
diff --git a/web/app/components/base/emoji-picker/index.stories.tsx b/web/app/components/base/emoji-picker/index.stories.tsx
index 0649f32e68..a9804adc40 100644
--- a/web/app/components/base/emoji-picker/index.stories.tsx
+++ b/web/app/components/base/emoji-picker/index.stories.tsx
@@ -42,7 +42,7 @@ const EmojiPickerDemo = () => {
 
       <div className="rounded-lg border border-divider-subtle bg-components-panel-bg p-4 text-sm text-text-secondary shadow-sm">
         <div className="font-medium text-text-primary">Selection preview</div>
-        <pre className="mt-2 max-h-44 overflow-auto rounded-md bg-background-default-subtle p-3 font-mono text-xs leading-tight text-text-primary">
+        <pre className="mt-2 max-h-44 overflow-auto rounded-md bg-background-default-subtle p-3 font-mono text-xs/tight text-text-primary">
           {selection ? JSON.stringify(selection, null, 2) : 'No emoji selected yet.'}
         </pre>
       </div>
diff --git a/web/app/components/base/encrypted-bottom/index.tsx b/web/app/components/base/encrypted-bottom/index.tsx
index 5a76de75ef..2bbb339adf 100644
--- a/web/app/components/base/encrypted-bottom/index.tsx
+++ b/web/app/components/base/encrypted-bottom/index.tsx
@@ -21,7 +21,7 @@ export const EncryptedBottom = (props: Props) => {
 
   return (
     <div className={cn('flex items-center justify-center rounded-b-2xl border-t-[0.5px] border-divider-subtle bg-background-soft px-2 py-3 system-xs-regular text-text-tertiary', className)}>
-      <RiLock2Fill className="mx-1 h-3 w-3 text-text-quaternary" />
+      <RiLock2Fill className="mx-1 size-3 text-text-quaternary" />
       {t(frontTextKey, { ns: 'common' })}
       <Link
         className="mx-1 text-text-accent"
diff --git a/web/app/components/base/error-boundary/index.tsx b/web/app/components/base/error-boundary/index.tsx
index ba629eb335..7fe60acab5 100644
--- a/web/app/components/base/error-boundary/index.tsx
+++ b/web/app/components/base/error-boundary/index.tsx
@@ -130,7 +130,7 @@ class ErrorBoundaryInner extends React.Component<
           )}
         >
           <div className="mb-4 flex items-center gap-2">
-            <RiAlertLine className="text-state-critical-solid h-8 w-8" />
+            <RiAlertLine className="text-state-critical-solid size-8" />
             <h2 className="text-xl font-semibold text-text-primary">
               {customTitle || copy.title}
             </h2>
@@ -144,7 +144,7 @@ class ErrorBoundaryInner extends React.Component<
             <details className="mb-6 w-full max-w-2xl">
               <summary className="mb-2 cursor-pointer text-sm font-medium text-text-tertiary hover:text-text-secondary">
                 <span className="inline-flex items-center gap-1">
-                  <RiBugLine className="h-4 w-4" />
+                  <RiBugLine className="size-4" />
                   {copy.details}
                 </span>
               </summary>
diff --git a/web/app/components/base/features/new-feature-panel/__tests__/feature-panel-drawer.spec.tsx b/web/app/components/base/features/new-feature-panel/__tests__/feature-panel-drawer.spec.tsx
index a4c45ff1e4..9abb5e7d70 100644
--- a/web/app/components/base/features/new-feature-panel/__tests__/feature-panel-drawer.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/__tests__/feature-panel-drawer.spec.tsx
@@ -37,9 +37,9 @@ describe('FeaturePanelDrawer', () => {
       )
 
       const drawer = screen.getByRole('dialog')
-      expect(drawer).toHaveClass('data-[swipe-direction=right]:!top-[112px]')
-      expect(drawer).toHaveClass('data-[swipe-direction=right]:!rounded-l-2xl')
-      expect(drawer).not.toHaveClass('data-[swipe-direction=right]:!rounded-2xl')
+      expect(drawer).toHaveClass('data-[swipe-direction=right]:top-[112px]!')
+      expect(drawer).toHaveClass('data-[swipe-direction=right]:rounded-l-2xl!')
+      expect(drawer).not.toHaveClass('data-[swipe-direction=right]:rounded-2xl!')
     })
 
     it('should apply non-workflow styles when inWorkflow is false', () => {
@@ -54,11 +54,11 @@ describe('FeaturePanelDrawer', () => {
 
       expect(layoutContainer).toBeInTheDocument()
 
-      expect(drawer).toHaveClass('data-[swipe-direction=right]:!top-[64px]')
-      expect(drawer).toHaveClass('data-[swipe-direction=right]:!right-2')
-      expect(drawer).toHaveClass('data-[swipe-direction=right]:!rounded-2xl')
-      expect(drawer).toHaveClass('data-[swipe-direction=right]:!border-[0.5px]')
-      expect(drawer).not.toHaveClass('data-[swipe-direction=right]:!rounded-l-2xl')
+      expect(drawer).toHaveClass('data-[swipe-direction=right]:top-[64px]!')
+      expect(drawer).toHaveClass('data-[swipe-direction=right]:right-2!')
+      expect(drawer).toHaveClass('data-[swipe-direction=right]:rounded-2xl!')
+      expect(drawer).toHaveClass('data-[swipe-direction=right]:border-[0.5px]!')
+      expect(drawer).not.toHaveClass('data-[swipe-direction=right]:rounded-l-2xl!')
     })
 
     it('should accept custom className', () => {
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx
index 090f4d459f..0bd27a5c13 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx
@@ -44,7 +44,7 @@ const AnnotationCtrlButton: FC<Props> = ({ cached, query, answer, appId, message
           <TooltipTrigger
             render={(
               <ActionButton onClick={onEdit}>
-                <RiEditLine className="h-4 w-4" />
+                <RiEditLine className="size-4" />
               </ActionButton>
             )}
           />
@@ -58,7 +58,7 @@ const AnnotationCtrlButton: FC<Props> = ({ cached, query, answer, appId, message
           <TooltipTrigger
             render={(
               <ActionButton onClick={handleAdd}>
-                <RiFileEditLine className="h-4 w-4" />
+                <RiFileEditLine className="size-4" />
               </ActionButton>
             )}
           />
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
index 9c341d4ec1..0b23ae63ad 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
@@ -65,7 +65,7 @@ const ConfigParamModal: FC<Props> = ({ isShow, onHide: doHide, onSave, isInit, a
           onHide()
       }}
     >
-      <DialogContent className="!mt-14 !w-[640px] !max-w-none border-none !p-6 text-left align-middle">
+      <DialogContent className="mt-14! w-[640px]! max-w-none! border-none p-6! text-left align-middle">
 
         <div className="mb-2 title-2xl-semi-bold text-text-primary">
           {t(`initSetup.${isInit ? 'title' : 'configTitle'}`, { ns: 'appAnnotation' })}
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
index b73699359b..0b1495221c 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
@@ -80,7 +80,7 @@ const AnnotationReply = ({
       <FeatureCard
         icon={(
           <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
-            <MessageFast className="h-4 w-4 text-text-primary-on-surface" />
+            <MessageFast className="size-4 text-text-primary-on-surface" />
           </div>
         )}
         title={t('feature.annotation.title', { ns: 'appDebug' })}
@@ -112,7 +112,7 @@ const AnnotationReply = ({
               {isHovering && (
                 <div className="flex items-center justify-between">
                   <Button className="w-[178px]" onClick={() => setIsShowAnnotationConfigInit(true)} disabled={disabled}>
-                    <RiEqualizer2Line className="mr-1 h-4 w-4" />
+                    <RiEqualizer2Line className="mr-1 size-4" />
                     {t('operation.params', { ns: 'common' })}
                   </Button>
                   <Button
@@ -121,7 +121,7 @@ const AnnotationReply = ({
                       router.push(`/app/${appId}/annotations`)
                     }}
                   >
-                    <RiExternalLinkLine className="mr-1 h-4 w-4" />
+                    <RiExternalLinkLine className="mr-1 size-4" />
                     {t('feature.annotation.cacheManagement', { ns: 'appDebug' })}
                   </Button>
                 </div>
diff --git a/web/app/components/base/features/new-feature-panel/citation.tsx b/web/app/components/base/features/new-feature-panel/citation.tsx
index b802a62c32..590a919b87 100644
--- a/web/app/components/base/features/new-feature-panel/citation.tsx
+++ b/web/app/components/base/features/new-feature-panel/citation.tsx
@@ -42,7 +42,7 @@ const Citation = ({
     <FeatureCard
       icon={(
         <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-warning-warning-500 p-1 shadow-xs">
-          <Citations className="h-4 w-4 text-text-primary-on-surface" />
+          <Citations className="size-4 text-text-primary-on-surface" />
         </div>
       )}
       title={t('feature.citation.title', { ns: 'appDebug' })}
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
index b85367ba93..0149dd2377 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
@@ -84,7 +84,7 @@ const ConversationOpener = ({
     <FeatureCard
       icon={(
         <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs">
-          <LoveMessage className="h-4 w-4 text-text-primary-on-surface" />
+          <LoveMessage className="size-4 text-text-primary-on-surface" />
         </div>
       )}
       title={t('feature.conversationOpener.title', { ns: 'appDebug' })}
@@ -107,7 +107,7 @@ const ConversationOpener = ({
             )}
             {isHovering && (
               <Button className="w-full" onClick={handleOpenOpeningModal} disabled={disabled}>
-                <RiEditLine className="mr-1 h-4 w-4" />
+                <RiEditLine className="mr-1 size-4" />
                 {t('openingStatement.writeOpener', { ns: 'appDebug' })}
               </Button>
             )}
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
index fb2f341e64..1fcdbd922e 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@@ -102,7 +102,7 @@ const OpeningSettingModal = ({
   const [deletingID, setDeletingID] = useState<number | null>(null)
   const [autoFocusQuestionID, setAutoFocusQuestionID] = useState<number | null>(null)
   const openerPlaceholder = (
-    <span className="block break-words whitespace-pre-wrap">
+    <span className="block wrap-break-word whitespace-pre-wrap">
       {t('openingStatement.placeholderLine1', { ns: 'appDebug' })}
       <br />
       {t('openingStatement.placeholderLine2', { ns: 'appDebug' })}
@@ -119,7 +119,7 @@ const OpeningSettingModal = ({
             </div>
             <Infotip
               aria-label={t('openingStatement.openingQuestionDescription', { ns: 'appDebug' })}
-              className="h-3.5 w-3.5"
+              className="size-3.5"
               popupClassName="max-w-[220px] system-sm-regular text-text-secondary"
               delay={0}
             >
@@ -156,7 +156,7 @@ const OpeningSettingModal = ({
                 )}
                 key={index}
               >
-                <span className="handle i-ri-draggable h-4 w-4 cursor-grab text-text-quaternary" />
+                <span className="handle i-ri-draggable size-4 cursor-grab text-text-quaternary" />
                 <input
                   type="input"
                   value={question || ''}
@@ -171,7 +171,7 @@ const OpeningSettingModal = ({
                     }))
                   }}
                   autoFocus={autoFocusQuestionID === index}
-                  className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pr-8 pl-1.5 text-sm leading-9 text-text-secondary focus:outline-hidden"
+                  className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pr-8 pl-1.5 text-sm/9 text-text-secondary focus:outline-hidden"
                   onFocus={() => {
                     setFocusID(index)
                     if (autoFocusQuestionID === index)
@@ -188,7 +188,7 @@ const OpeningSettingModal = ({
                   onMouseEnter={() => setDeletingID(index)}
                   onMouseLeave={() => setDeletingID(null)}
                 >
-                  <span className="i-ri-delete-bin-line h-3.5 w-3.5" data-testid={`delete-question-${question}`} />
+                  <span className="i-ri-delete-bin-line size-3.5" data-testid={`delete-question-${question}`} />
                 </div>
               </div>
             )
@@ -204,7 +204,7 @@ const OpeningSettingModal = ({
             }}
             className="mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3 text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover"
           >
-            <span className="i-ri-add-line h-4 w-4" />
+            <span className="i-ri-add-line size-4" />
             <div className="system-sm-medium text-[13px]">{t('variableConfig.addOption', { ns: 'appDebug' })}</div>
           </div>
         )}
@@ -223,7 +223,7 @@ const OpeningSettingModal = ({
             className="cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             onClick={onCancel}
           >
-            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <span className="i-ri-close-line size-4 text-text-tertiary" aria-hidden="true" />
           </button>
         </div>
         <div className="mb-8 space-y-4">
diff --git a/web/app/components/base/features/new-feature-panel/feature-bar.tsx b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
index bf9d1c6cf0..f92782c2f7 100644
--- a/web/app/components/base/features/new-feature-panel/feature-bar.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
@@ -42,9 +42,9 @@ const FeatureBar = ({
     <div className="m-1 mt-0 -translate-y-2 rounded-b-[10px] border-r border-b border-l border-components-panel-border-subtle bg-util-colors-indigo-indigo-50 px-2.5 py-2 pt-4">
       {noFeatureEnabled && (
         <div className="flex cursor-pointer items-end gap-1" onClick={() => onFeatureBarClick?.(true)}>
-          <RiApps2AddLine className="h-3.5 w-3.5 text-text-accent" />
+          <RiApps2AddLine className="size-3.5 text-text-accent" />
           <div className="body-xs-medium text-text-accent">{t('feature.bar.empty', { ns: 'appDebug' })}</div>
-          <RiArrowRightLine className="h-3.5 w-3.5 text-text-accent" />
+          <RiArrowRightLine className="size-3.5 text-text-accent" />
         </div>
       )}
       {!noFeatureEnabled && (
@@ -55,7 +55,7 @@ const FeatureBar = ({
                 <TooltipTrigger
                   render={(
                     <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs">
-                      <RiSparklingFill className="h-3.5 w-3.5 text-text-primary-on-surface" />
+                      <RiSparklingFill className="size-3.5 text-text-primary-on-surface" />
                     </div>
                   )}
                 />
@@ -69,7 +69,7 @@ const FeatureBar = ({
                 <TooltipTrigger
                   render={(
                     <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs">
-                      <LoveMessage className="h-3.5 w-3.5 text-text-primary-on-surface" />
+                      <LoveMessage className="size-3.5 text-text-primary-on-surface" />
                     </div>
                   )}
                 />
@@ -83,7 +83,7 @@ const FeatureBar = ({
                 <TooltipTrigger
                   render={(
                     <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-text-success p-1 shadow-xs">
-                      <ContentModeration className="h-3.5 w-3.5 text-text-primary-on-surface" />
+                      <ContentModeration className="size-3.5 text-text-primary-on-surface" />
                     </div>
                   )}
                 />
@@ -97,7 +97,7 @@ const FeatureBar = ({
                 <TooltipTrigger
                   render={(
                     <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs">
-                      <Microphone01 className="h-3.5 w-3.5 text-text-primary-on-surface" />
+                      <Microphone01 className="size-3.5 text-text-primary-on-surface" />
                     </div>
                   )}
                 />
@@ -112,7 +112,7 @@ const FeatureBar = ({
                   <TooltipTrigger
                     render={(
                       <div className={cn('shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs', !disabled && 'cursor-pointer')}>
-                        <TextToAudio className="h-3.5 w-3.5 text-text-primary-on-surface" />
+                        <TextToAudio className="size-3.5 text-text-primary-on-surface" />
                       </div>
                     )}
                   />
@@ -127,7 +127,7 @@ const FeatureBar = ({
                 <TooltipTrigger
                   render={(
                     <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-blue-600 p-1 shadow-xs">
-                      <FolderUpload className="h-3.5 w-3.5 text-text-primary-on-surface" />
+                      <FolderUpload className="size-3.5 text-text-primary-on-surface" />
                     </div>
                   )}
                 />
@@ -141,7 +141,7 @@ const FeatureBar = ({
                 <TooltipTrigger
                   render={(
                     <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs">
-                      <VirtualAssistant className="h-3.5 w-3.5 text-text-primary-on-surface" />
+                      <VirtualAssistant className="size-3.5 text-text-primary-on-surface" />
                     </div>
                   )}
                 />
@@ -155,7 +155,7 @@ const FeatureBar = ({
                 <TooltipTrigger
                   render={(
                     <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-warning-warning-500 p-1 shadow-xs">
-                      <Citations className="h-4 w-4 text-text-primary-on-surface" />
+                      <Citations className="size-4 text-text-primary-on-surface" />
                     </div>
                   )}
                 />
@@ -169,7 +169,7 @@ const FeatureBar = ({
                 <TooltipTrigger
                   render={(
                     <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
-                      <MessageFast className="h-3.5 w-3.5 text-text-primary-on-surface" />
+                      <MessageFast className="size-3.5 text-text-primary-on-surface" />
                     </div>
                   )}
                 />
@@ -184,7 +184,7 @@ const FeatureBar = ({
             !hideEditEntrance && (
               <Button className="shrink-0" variant="ghost-accent" size="small" onClick={() => onFeatureBarClick?.(true)}>
                 <div className="mx-1">{t('feature.bar.manage', { ns: 'appDebug' })}</div>
-                <RiArrowRightLine className="h-3.5 w-3.5 text-text-accent" />
+                <RiArrowRightLine className="size-3.5 text-text-accent" />
               </Button>
             )
           }
diff --git a/web/app/components/base/features/new-feature-panel/feature-card.tsx b/web/app/components/base/features/new-feature-panel/feature-card.tsx
index 953487352c..9d3322ecf3 100644
--- a/web/app/components/base/features/new-feature-panel/feature-card.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-card.tsx
@@ -40,7 +40,7 @@ const FeatureCard = ({
           {tooltip && (
             <Infotip
               aria-label={typeof tooltip === 'string' ? tooltip : String(title)}
-              className="ml-0.5 h-3.5 w-3.5"
+              className="ml-0.5 size-3.5"
             >
               {tooltip}
             </Infotip>
diff --git a/web/app/components/base/features/new-feature-panel/feature-panel-drawer.tsx b/web/app/components/base/features/new-feature-panel/feature-panel-drawer.tsx
index 42a89a156d..19c6ff5d3f 100644
--- a/web/app/components/base/features/new-feature-panel/feature-panel-drawer.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-panel-drawer.tsx
@@ -42,10 +42,10 @@ export function FeaturePanelDrawer({
           <DrawerPopup
             className={cn(
               'border-components-panel-border bg-components-panel-bg-alt p-0 text-left align-middle',
-              'data-[swipe-direction=right]:!h-auto data-[swipe-direction=right]:!w-[420px] data-[swipe-direction=right]:!max-w-[calc(100vw-2rem)]',
+              'data-[swipe-direction=right]:h-auto! data-[swipe-direction=right]:w-[420px]! data-[swipe-direction=right]:max-w-[calc(100vw-2rem)]!',
               inWorkflow
-                ? 'data-[swipe-direction=right]:!top-[112px] data-[swipe-direction=right]:!right-0 data-[swipe-direction=right]:!bottom-2 data-[swipe-direction=right]:!rounded-l-2xl data-[swipe-direction=right]:!rounded-r-none data-[swipe-direction=right]:!border-t-[0.5px] data-[swipe-direction=right]:!border-r-0 data-[swipe-direction=right]:!border-b-[0.5px] data-[swipe-direction=right]:!border-l-[0.5px]'
-                : 'data-[swipe-direction=right]:!top-[64px] data-[swipe-direction=right]:!right-2 data-[swipe-direction=right]:!bottom-2 data-[swipe-direction=right]:!rounded-2xl data-[swipe-direction=right]:!border-[0.5px]',
+                ? 'data-[swipe-direction=right]:top-[112px]! data-[swipe-direction=right]:right-0! data-[swipe-direction=right]:bottom-2! data-[swipe-direction=right]:rounded-l-2xl! data-[swipe-direction=right]:rounded-r-none! data-[swipe-direction=right]:border-t-[0.5px]! data-[swipe-direction=right]:border-r-0! data-[swipe-direction=right]:border-b-[0.5px]! data-[swipe-direction=right]:border-l-[0.5px]!'
+                : 'data-[swipe-direction=right]:top-[64px]! data-[swipe-direction=right]:right-2! data-[swipe-direction=right]:bottom-2! data-[swipe-direction=right]:rounded-2xl! data-[swipe-direction=right]:border-[0.5px]!',
               className,
             )}
           >
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
index 9406c29aaa..2cea0e7745 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
@@ -52,7 +52,7 @@ const FileUpload = ({
     <FeatureCard
       icon={(
         <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-blue-600 p-1 shadow-xs">
-          <FolderUpload className="h-4 w-4 text-text-primary-on-surface" />
+          <FolderUpload className="size-4 text-text-primary-on-surface" />
         </div>
       )}
       title={t('feature.fileUpload.title', { ns: 'appDebug' })}
@@ -91,7 +91,7 @@ const FileUpload = ({
                 onChange={onChange}
               >
                 <Button className="w-full" disabled={disabled}>
-                  <RiEqualizer2Line className="mr-1 h-4 w-4" />
+                  <RiEqualizer2Line className="mr-1 size-4" />
                   {t('operation.settings', { ns: 'common' })}
                 </Button>
               </SettingModal>
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
index 10d83f3a8f..2ccb93257e 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
@@ -64,7 +64,7 @@ const SettingContent = ({
           className="cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
           onClick={onClose}
         >
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          <span className="i-ri-close-line size-4 text-text-tertiary" aria-hidden="true" />
         </button>
       </div>
       <FileUploadSetting
diff --git a/web/app/components/base/features/new-feature-panel/follow-up-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/follow-up-setting-modal.tsx
index 24e89c3517..06865dde70 100644
--- a/web/app/components/base/features/new-feature-panel/follow-up-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/follow-up-setting-modal.tsx
@@ -177,7 +177,7 @@ const FollowUpSettingModal = ({
                 </div>
                 {promptMode === PROMPT_MODE.default && (
                   <div className="mt-3 rounded-lg border border-components-input-border-active bg-components-input-bg-normal px-3 py-2">
-                    <div className="system-sm-regular break-words whitespace-pre-wrap text-text-secondary">
+                    <div className="system-sm-regular wrap-break-word whitespace-pre-wrap text-text-secondary">
                       {DEFAULT_FOLLOW_UP_PROMPT}
                     </div>
                   </div>
diff --git a/web/app/components/base/features/new-feature-panel/follow-up.tsx b/web/app/components/base/features/new-feature-panel/follow-up.tsx
index b9fff4cc21..c988b4756c 100644
--- a/web/app/components/base/features/new-feature-panel/follow-up.tsx
+++ b/web/app/components/base/features/new-feature-panel/follow-up.tsx
@@ -75,7 +75,7 @@ const FollowUp = ({
       <FeatureCard
         icon={(
           <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs">
-            <VirtualAssistant className="h-4 w-4 text-text-primary-on-surface" />
+            <VirtualAssistant className="size-4 text-text-primary-on-surface" />
           </div>
         )}
         title={t('feature.suggestedQuestionsAfterAnswer.title', { ns: 'appDebug' })}
@@ -100,7 +100,7 @@ const FollowUp = ({
               )}
               {isHovering && (
                 <Button className="w-full" onClick={handleOpenSettingModal} disabled={disabled}>
-                  <RiEqualizer2Line className="mr-1 h-4 w-4" />
+                  <RiEqualizer2Line className="mr-1 size-4" />
                   {t('operation.settings', { ns: 'common' })}
                 </Button>
               )}
diff --git a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
index 374283e91e..606f06d43d 100644
--- a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
@@ -52,7 +52,7 @@ const FileUpload = ({
     <FeatureCard
       icon={(
         <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
-          <RiImage2Fill className="h-4 w-4 text-text-primary-on-surface" />
+          <RiImage2Fill className="size-4 text-text-primary-on-surface" />
         </div>
       )}
       title={(
@@ -100,7 +100,7 @@ const FileUpload = ({
                 onChange={onChange}
               >
                 <Button className="w-full" disabled={disabled}>
-                  <RiEqualizer2Line className="mr-1 h-4 w-4" />
+                  <RiEqualizer2Line className="mr-1 size-4" />
                   {t('operation.settings', { ns: 'common' })}
                 </Button>
               </SettingModal>
diff --git a/web/app/components/base/features/new-feature-panel/index.tsx b/web/app/components/base/features/new-feature-panel/index.tsx
index 61e961c82b..2d1e006342 100644
--- a/web/app/components/base/features/new-feature-panel/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/index.tsx
@@ -62,7 +62,7 @@ const NewFeaturePanel = ({
           </div>
           <DrawerCloseButton
             aria-label={t('operation.close', { ns: 'common' })}
-            className="h-8 w-8 p-2"
+            className="size-8 p-2"
           />
         </div>
         {/* list */}
diff --git a/web/app/components/base/features/new-feature-panel/moderation/index.tsx b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
index 4e5ea9208e..a6191e9050 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
@@ -127,7 +127,7 @@ const Moderation = ({
     <FeatureCard
       icon={(
         <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-text-success p-1 shadow-xs">
-          <ContentModeration className="h-4 w-4 text-text-primary-on-surface" />
+          <ContentModeration className="size-4 text-text-primary-on-surface" />
         </div>
       )}
       title={t('feature.moderation.title', { ns: 'appDebug' })}
@@ -158,7 +158,7 @@ const Moderation = ({
             )}
             {isHovering && (
               <Button className="w-full" onClick={handleOpenModerationSettingModal} disabled={disabled}>
-                <RiEqualizer2Line className="mr-1 h-4 w-4" />
+                <RiEqualizer2Line className="mr-1 size-4" />
                 {t('operation.settings', { ns: 'common' })}
               </Button>
             )}
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
index af4cb8c32c..c7513ea776 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
@@ -53,7 +53,7 @@ const ModerationContent: FC<ModerationContentProps> = ({
               <div className="relative h-20 rounded-lg bg-components-input-bg-normal px-3 py-2">
                 <textarea
                   value={config.preset_response || ''}
-                  className="block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-hidden"
+                  className="block size-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-hidden"
                   placeholder={t('feature.moderation.modal.content.placeholder', { ns: 'appDebug' }) || ''}
                   onChange={e => handleConfigChange('preset_response', e.target.value)}
                 />
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
index 064ac13e3d..8209603548 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -236,11 +236,11 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
             className="cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             onClick={onCancel}
           >
-            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <span className="i-ri-close-line size-4 text-text-tertiary" aria-hidden="true" />
           </button>
         </div>
         <div className="py-2">
-          <div className="text-sm leading-9 font-medium text-text-primary">
+          <div className="text-sm/9 font-medium text-text-primary">
             {t('feature.moderation.modal.provider.title', { ns: 'appDebug' })}
           </div>
           <div className="grid grid-cols-3 gap-2.5">
@@ -257,7 +257,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
                   onClick={() => handleDataTypeChange(provider.key)}
                 >
                   <div className={cn(
-                    'mr-2 h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
+                    'mr-2 size-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
                     localeData.type === provider.key && 'border-[5px] border-components-radio-border-checked',
                   )}
                   >
@@ -296,7 +296,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
                 <textarea
                   value={localeData.config?.keywords || ''}
                   onChange={handleDataKeywordsChange}
-                  className="block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-hidden"
+                  className="block size-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-hidden"
                   placeholder={t('feature.moderation.modal.keywords.placeholder', { ns: 'appDebug' }) || ''}
                 />
                 <div className="absolute right-2 bottom-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
@@ -322,7 +322,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
                   rel="noopener noreferrer"
                   className="group flex items-center text-xs text-text-tertiary hover:text-primary-600"
                 >
-                  <span className="mr-1 i-custom-vender-line-education-book-open-01 h-3 w-3 text-text-tertiary group-hover:text-primary-600" />
+                  <span className="mr-1 i-custom-vender-line-education-book-open-01 size-3 text-text-tertiary group-hover:text-primary-600" />
                   {t('apiBasedExtension.link', { ns: 'common' })}
                 </a>
               </div>
diff --git a/web/app/components/base/features/new-feature-panel/more-like-this.tsx b/web/app/components/base/features/new-feature-panel/more-like-this.tsx
index be969d2f34..d32bb0732d 100644
--- a/web/app/components/base/features/new-feature-panel/more-like-this.tsx
+++ b/web/app/components/base/features/new-feature-panel/more-like-this.tsx
@@ -42,7 +42,7 @@ const MoreLikeThis = ({
     <FeatureCard
       icon={(
         <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs">
-          <RiSparklingFill className="h-4 w-4 text-text-primary-on-surface" />
+          <RiSparklingFill className="size-4 text-text-primary-on-surface" />
         </div>
       )}
       title={t('feature.moreLikeThis.title', { ns: 'appDebug' })}
diff --git a/web/app/components/base/features/new-feature-panel/speech-to-text.tsx b/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
index b6474b0e65..a147aeb9bc 100644
--- a/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
+++ b/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
@@ -42,7 +42,7 @@ const SpeechToText = ({
     <FeatureCard
       icon={(
         <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs">
-          <Microphone01 className="h-4 w-4 text-text-primary-on-surface" />
+          <Microphone01 className="size-4 text-text-primary-on-surface" />
         </div>
       )}
       title={t('feature.speechToText.title', { ns: 'appDebug' })}
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
index 28482f0e0c..a3dc06c5a0 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
@@ -51,7 +51,7 @@ const TextToSpeech = ({
     <FeatureCard
       icon={(
         <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs">
-          <TextToAudio className="h-4 w-4 text-text-primary-on-surface" />
+          <TextToAudio className="size-4 text-text-primary-on-surface" />
         </div>
       )}
       title={t('feature.textToSpeech.title', { ns: 'appDebug' })}
@@ -88,7 +88,7 @@ const TextToSpeech = ({
             {(isHovering || modalOpen) && (
               <VoiceSettings open={modalOpen && !disabled} onOpen={setModalOpen} onChange={onChange}>
                 <Button className="w-full" disabled={disabled}>
-                  <RiEqualizer2Line className="mr-1 h-4 w-4" />
+                  <RiEqualizer2Line className="mr-1 size-4" />
                   {t('voice.voiceSettings.title', { ns: 'appDebug' })}
                 </Button>
               </VoiceSettings>
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index 5f3c895054..b3f85a225a 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -83,7 +83,7 @@ const VoiceParamConfig = ({
           aria-label={t('appDebug:voice.voiceSettings.close')}
           onClick={onClose}
         >
-          <span aria-hidden className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+          <span aria-hidden className="i-ri-close-line size-4 text-text-tertiary" />
         </button>
       </div>
       <div className="mb-3">
diff --git a/web/app/components/base/file-icon/index.stories.tsx b/web/app/components/base/file-icon/index.stories.tsx
index 65be658a7c..d7486a26b7 100644
--- a/web/app/components/base/file-icon/index.stories.tsx
+++ b/web/app/components/base/file-icon/index.stories.tsx
@@ -60,7 +60,7 @@ export const Gallery: Story = {
       <div className="grid grid-cols-5 gap-4 rounded-lg border border-divider-subtle bg-components-panel-bg p-4">
         {examples.map(type => (
           <div key={type} className="flex flex-col items-center gap-1">
-            <FileIcon type={type} className="h-9 w-9" />
+            <FileIcon type={type} className="size-9" />
             <span className="text-xs text-text-tertiary uppercase">{type}</span>
           </div>
         ))}
diff --git a/web/app/components/base/file-uploader/audio-preview.tsx b/web/app/components/base/file-uploader/audio-preview.tsx
index c60500bef9..9ee709995f 100644
--- a/web/app/components/base/file-uploader/audio-preview.tsx
+++ b/web/app/components/base/file-uploader/audio-preview.tsx
@@ -24,7 +24,7 @@ const AudioPreview: FC<AudioPreviewProps> = ({
       disablePointerDismissal
     >
       <DialogContent
-        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
+        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
         backdropClassName="bg-transparent!"
       >
         <div
@@ -43,10 +43,10 @@ const AudioPreview: FC<AudioPreviewProps> = ({
         <button
           type="button"
           aria-label={t('operation.close', { ns: 'common' })}
-          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/[0.08] p-0 backdrop-blur-[2px]"
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/8 p-0 backdrop-blur-[2px]"
           onClick={onCancel}
         >
-          <span className="i-ri-close-line h-4 w-4 text-gray-500" aria-hidden="true" />
+          <span className="i-ri-close-line size-4 text-gray-500" aria-hidden="true" />
         </button>
       </DialogContent>
     </Dialog>
diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
index 27c6c36f6c..03c1e3b7ac 100644
--- a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -119,7 +119,7 @@ const FileFromLinkOrLocal = ({
                 variant="secondary-accent"
                 disabled={disabled}
               >
-                <RiUploadCloud2Line className="mr-1 h-4 w-4" />
+                <RiUploadCloud2Line className="mr-1 size-4" />
                 {t('fileUploader.uploadFromComputer', { ns: 'common' })}
                 <FileInput fileConfig={fileConfig} />
               </Button>
diff --git a/web/app/components/base/file-uploader/file-image-render.tsx b/web/app/components/base/file-uploader/file-image-render.tsx
index 3119fb083b..98a234504d 100644
--- a/web/app/components/base/file-uploader/file-image-render.tsx
+++ b/web/app/components/base/file-uploader/file-image-render.tsx
@@ -19,7 +19,7 @@ const FileImageRender = ({
   return (
     <div className={cn('border-2 border-effects-image-frame shadow-xs', className)}>
       <img
-        className={cn('h-full w-full object-cover', showDownloadAction && 'cursor-pointer')}
+        className={cn('size-full object-cover', showDownloadAction && 'cursor-pointer')}
         alt={alt || 'Preview'}
         onLoad={onLoad}
         onError={onError}
diff --git a/web/app/components/base/file-uploader/file-list-in-log.tsx b/web/app/components/base/file-uploader/file-list-in-log.tsx
index c8cb76b8cf..d01a766eb5 100644
--- a/web/app/components/base/file-uploader/file-list-in-log.tsx
+++ b/web/app/components/base/file-uploader/file-list-in-log.tsx
@@ -60,7 +60,7 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
                         render={(
                           <div key={id}>
                             <FileImageRender
-                              className="h-8 w-8"
+                              className="size-8"
                               imageUrl={base64Url || url || ''}
                             />
                           </div>
@@ -100,7 +100,7 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
           onClick={() => setExpanded(!expanded)}
         >
           {!expanded && <div className="system-xs-medium-uppercase text-text-tertiary">{t('runDetail.fileListDetail', { ns: 'appLog' })}</div>}
-          <RiArrowRightSLine className={cn('h-4 w-4 text-text-tertiary', expanded && 'rotate-90')} aria-hidden="true" />
+          <RiArrowRightSLine className={cn('size-4 text-text-tertiary', expanded && 'rotate-90')} aria-hidden="true" />
         </button>
       </div>
       {expanded && (
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
index 4c23533d6f..b8521e8799 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
@@ -60,11 +60,11 @@ const FileInAttachmentItem = ({
             window.open(url || base64Url || '', '_blank')
         }}
       >
-        <div className="flex h-12 w-12 items-center justify-center">
+        <div className="flex size-12 items-center justify-center">
           {
             isImageFile && (
               <FileImageRender
-                className="h-8 w-8"
+                className="size-8"
                 imageUrl={base64Url || url || ''}
               />
             )
@@ -118,21 +118,21 @@ const FileInAttachmentItem = ({
                 className="mr-1"
                 onClick={() => onReUpload?.(id)}
               >
-                <ReplayLine className="h-4 w-4 text-text-tertiary" />
+                <ReplayLine className="size-4 text-text-tertiary" />
               </ActionButton>
             )
           }
           {
             showDeleteAction && (
               <ActionButton onClick={() => onRemove?.(id)}>
-                <RiDeleteBinLine className="h-4 w-4" />
+                <RiDeleteBinLine className="size-4" />
               </ActionButton>
             )
           }
           {
             canPreview && isImageFile && (
               <ActionButton className="mr-1" onClick={() => setImagePreviewUrl(url || '')}>
-                <RiEyeLine className="h-4 w-4" />
+                <RiEyeLine className="size-4" />
               </ActionButton>
             )
           }
@@ -143,7 +143,7 @@ const FileInAttachmentItem = ({
                 downloadUrl({ url: url || base64Url || '', fileName: name, target: '_blank' })
               }}
               >
-                <RiDownloadLine className="h-4 w-4" />
+                <RiDownloadLine className="size-4" />
               </ActionButton>
             )
           }
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
index b532bb7773..b30e7f5e3d 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
@@ -43,12 +43,12 @@ const FileUploaderInAttachment = ({
     {
       value: TransferMethod.local_file,
       label: t('fileUploader.uploadFromComputer', { ns: 'common' }),
-      icon: <RiUploadCloud2Line className="h-4 w-4" />,
+      icon: <RiUploadCloud2Line className="size-4" />,
     },
     {
       value: TransferMethod.remote_url,
       label: t('fileUploader.pasteFileLink', { ns: 'common' }),
-      icon: <RiLink className="h-4 w-4" />,
+      icon: <RiLink className="size-4" />,
     },
   ]
 
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
index 485a351e55..dbf721b941 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
@@ -46,13 +46,13 @@ const FileImageItem = ({
           showDeleteAction && (
             <Button
               aria-label={t('operation.remove', { ns: 'common' })}
-              className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
+              className="absolute -top-1.5 -right-1.5 z-11 hidden size-5 rounded-full p-0 group-hover/file-image:flex"
               onClick={(e) => {
                 e.stopPropagation()
                 onRemove?.(id)
               }}
             >
-              <RiCloseLine className="h-4 w-4 text-components-button-secondary-text" aria-hidden="true" />
+              <RiCloseLine className="size-4 text-components-button-secondary-text" aria-hidden="true" />
             </Button>
           )
         }
@@ -80,13 +80,13 @@ const FileImageItem = ({
               <button
                 type="button"
                 aria-label={t('operation.retry', { ns: 'common' })}
-                className="h-5 w-5 border-none bg-transparent p-0"
+                className="size-5 border-none bg-transparent p-0"
                 onClick={(e) => {
                   e.stopPropagation()
                   onReUpload?.(id)
                 }}
               >
-                <ReplayLine className="h-5 w-5" aria-hidden="true" />
+                <ReplayLine className="size-5" aria-hidden="true" />
               </button>
             </div>
           )
@@ -97,13 +97,13 @@ const FileImageItem = ({
               <button
                 type="button"
                 aria-label={t('operation.download', { ns: 'common' })}
-                className="absolute right-0.5 bottom-0.5 flex h-6 w-6 items-center justify-center rounded-lg border-none bg-components-actionbar-bg p-0 shadow-md"
+                className="absolute right-0.5 bottom-0.5 flex size-6 items-center justify-center rounded-lg border-none bg-components-actionbar-bg p-0 shadow-md"
                 onClick={(e) => {
                   e.stopPropagation()
                   downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
                 }}
               >
-                <RiDownloadLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                <RiDownloadLine className="size-4 text-text-tertiary" aria-hidden="true" />
               </button>
             </div>
           )
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
index ee65a79f6d..e8599f1a0b 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -59,10 +59,10 @@ const FileItem = ({
           showDeleteAction && (
             <Button
               aria-label={t('operation.remove', { ns: 'common' })}
-              className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-item:flex"
+              className="absolute -top-1.5 -right-1.5 z-11 hidden size-5 rounded-full p-0 group-hover/file-item:flex"
               onClick={() => onRemove?.(id)}
             >
-              <span className="i-ri-close-line h-4 w-4 text-components-button-secondary-text" aria-hidden="true" />
+              <span className="i-ri-close-line size-4 text-components-button-secondary-text" aria-hidden="true" />
             </Button>
           )
         }
@@ -103,7 +103,7 @@ const FileItem = ({
                   downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
                 }}
               >
-                <span className="i-ri-download-line h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" />
+                <span className="i-ri-download-line size-3.5 text-text-tertiary" aria-hidden="true" />
               </ActionButton>
             )
           }
@@ -121,10 +121,10 @@ const FileItem = ({
               <button
                 type="button"
                 aria-label={t('operation.retry', { ns: 'common' })}
-                className="h-4 w-4 cursor-pointer border-none bg-transparent p-0 text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                className="size-4 cursor-pointer border-none bg-transparent p-0 text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                 onClick={() => onReUpload?.(id)}
               >
-                <span className="i-custom-vender-other-replay-line block h-4 w-4" aria-hidden="true" />
+                <span className="i-custom-vender-other-replay-line block size-4" aria-hidden="true" />
               </button>
             )
           }
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
index 14a424d4f2..4acf9bf64f 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
@@ -26,7 +26,7 @@ const FileUploaderInChatInput = ({
         className={cn(open && 'bg-state-base-hover')}
         disabled={readonly}
       >
-        <RiAttachmentLine className="h-5 w-5" />
+        <RiAttachmentLine className="size-5" />
       </ActionButton>
     )
   }, [])
diff --git a/web/app/components/base/file-uploader/pdf-preview.tsx b/web/app/components/base/file-uploader/pdf-preview.tsx
index 07fb2bab76..9b3128ab06 100644
--- a/web/app/components/base/file-uploader/pdf-preview.tsx
+++ b/web/app/components/base/file-uploader/pdf-preview.tsx
@@ -59,7 +59,7 @@ const PdfPreview: FC<PdfPreviewProps> = ({
       disablePointerDismissal
     >
       <DialogContent
-        className={`inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 shadow-none! ${!isMobile ? 'p-8!' : 'p-0!'}`}
+        className={`inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 shadow-none! ${!isMobile ? 'p-8!' : 'p-0!'}`}
         backdropClassName="bg-transparent!"
       >
         <div
@@ -95,10 +95,10 @@ const PdfPreview: FC<PdfPreviewProps> = ({
               <button
                 type="button"
                 aria-label={zoomOutLabel}
-                className="absolute top-6 right-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                className="absolute top-6 right-24 flex size-8 cursor-pointer items-center justify-center rounded-lg"
                 onClick={zoomOut}
               >
-                <RiZoomOutLine className="h-4 w-4 text-gray-500" />
+                <RiZoomOutLine className="size-4 text-gray-500" />
               </button>
             )}
           />
@@ -112,10 +112,10 @@ const PdfPreview: FC<PdfPreviewProps> = ({
               <button
                 type="button"
                 aria-label={zoomInLabel}
-                className="absolute top-6 right-16 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                className="absolute top-6 right-16 flex size-8 cursor-pointer items-center justify-center rounded-lg"
                 onClick={zoomIn}
               >
-                <RiZoomInLine className="h-4 w-4 text-gray-500" />
+                <RiZoomInLine className="size-4 text-gray-500" />
               </button>
             )}
           />
@@ -132,7 +132,7 @@ const PdfPreview: FC<PdfPreviewProps> = ({
                 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" />
+                <RiCloseLine className="size-4 text-gray-500" />
               </button>
             )}
           />
diff --git a/web/app/components/base/file-uploader/video-preview.tsx b/web/app/components/base/file-uploader/video-preview.tsx
index c42fed42bf..79a270d584 100644
--- a/web/app/components/base/file-uploader/video-preview.tsx
+++ b/web/app/components/base/file-uploader/video-preview.tsx
@@ -24,7 +24,7 @@ const VideoPreview: FC<VideoPreviewProps> = ({
       disablePointerDismissal
     >
       <DialogContent
-        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
+        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
         backdropClassName="bg-transparent!"
       >
         <div
@@ -43,10 +43,10 @@ const VideoPreview: FC<VideoPreviewProps> = ({
         <button
           type="button"
           aria-label={t('operation.close', { ns: 'common' })}
-          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/[0.08] p-0 backdrop-blur-[2px]"
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/8 p-0 backdrop-blur-[2px]"
           onClick={onCancel}
         >
-          <span className="i-ri-close-line h-4 w-4 text-gray-500" aria-hidden="true" />
+          <span className="i-ri-close-line size-4 text-gray-500" aria-hidden="true" />
         </button>
       </DialogContent>
     </Dialog>
diff --git a/web/app/components/base/float-right-container/index.tsx b/web/app/components/base/float-right-container/index.tsx
index ee79b22226..14d8addf86 100644
--- a/web/app/components/base/float-right-container/index.tsx
+++ b/web/app/components/base/float-right-container/index.tsx
@@ -55,14 +55,14 @@ const FloatRightContainer = ({
                   {(title || showClose) && (
                     <div className="mb-4 flex shrink-0 items-center justify-between">
                       {title && (
-                        <DrawerTitle className="text-lg leading-6 font-medium text-text-primary">
+                        <DrawerTitle className="text-lg/6 font-medium text-text-primary">
                           {title}
                         </DrawerTitle>
                       )}
                       {showClose && (
                         <DrawerCloseButton
                           aria-label={t('operation.close', { ns: 'common' })}
-                          className="h-6 w-6 rounded-md"
+                          className="size-6 rounded-md"
                         />
                       )}
                     </div>
diff --git a/web/app/components/base/form/components/base/base-field.tsx b/web/app/components/base/form/components/base/base-field.tsx
index 97777f15a8..c83d9abcb2 100644
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/web/app/components/base/form/components/base/base-field.tsx
@@ -459,7 +459,7 @@ const BaseField = ({
             <span className="break-all">
               {translatedHelp}
             </span>
-            <div className="ml-1 i-ri-external-link-line h-3 w-3 shrink-0" />
+            <div className="ml-1 i-ri-external-link-line size-3 shrink-0" />
           </a>
         )
       }
diff --git a/web/app/components/base/form/components/field/input-type-select/option.tsx b/web/app/components/base/form/components/field/input-type-select/option.tsx
index d678a3e93d..b998c59acd 100644
--- a/web/app/components/base/form/components/field/input-type-select/option.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/option.tsx
@@ -11,7 +11,7 @@ const Option = ({
 }: OptionProps) => {
   return (
     <>
-      <option.Icon className="h-4 w-4 shrink-0 text-text-tertiary" />
+      <option.Icon className="size-4 shrink-0 text-text-tertiary" />
       <span className="grow px-1">{option.label}</span>
       <Badge text={option.type} uppercase={false} />
     </>
diff --git a/web/app/components/base/form/components/field/input-type-select/trigger.tsx b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
index fab37c81f7..062d110aa5 100644
--- a/web/app/components/base/form/components/field/input-type-select/trigger.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
@@ -16,7 +16,7 @@ const Trigger = ({
 
   return (
     <span className="flex min-w-0 items-center gap-x-0.5">
-      <option.Icon className="h-4 w-4 shrink-0 text-text-tertiary" />
+      <option.Icon className="size-4 shrink-0 text-text-tertiary" />
       <span className="min-w-0 grow truncate p-1">{option.label}</span>
       <span className="relative inline-flex h-5 shrink-0 items-center rounded-[5px] border border-divider-deep px-[5px] system-xs-medium leading-3 whitespace-nowrap text-text-tertiary">
         {option.type}
diff --git a/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx b/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx
index c4efd7b0a0..8fda84cfeb 100644
--- a/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx
+++ b/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx
@@ -17,7 +17,7 @@ const Placeholder = () => {
 
   return (
     <div
-      className="pointer-events-auto flex h-full w-full cursor-text items-center px-2"
+      className="pointer-events-auto flex size-full cursor-text items-center px-2"
       onClick={(e) => {
         e.stopPropagation()
         handleInsert('')
@@ -25,7 +25,7 @@ const Placeholder = () => {
     >
       <div className="flex grow items-center">
         Type or press
-        <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="mx-0.5 flex size-4 items-center justify-center rounded-sm bg-components-kbd-bg-gray system-kbd text-text-placeholder">/</div>
         <div
           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) => {
diff --git a/web/app/components/base/form/components/label.tsx b/web/app/components/base/form/components/label.tsx
index 8987e350ff..543b14060d 100644
--- a/web/app/components/base/form/components/label.tsx
+++ b/web/app/components/base/form/components/label.tsx
@@ -33,7 +33,7 @@ const Label = ({
       {!isRequired && showOptional && <div className="ml-1 system-xs-regular text-text-tertiary">{t('label.optional', { ns: 'common' })}</div>}
       {isRequired && <div className="ml-1 system-xs-regular text-text-destructive-secondary">*</div>}
       {tooltip && (
-        <Infotip aria-label={tooltip} className="ml-0.5 h-4 w-4" popupClassName="w-[200px]">
+        <Infotip aria-label={tooltip} className="ml-0.5 size-4" popupClassName="w-[200px]">
           {tooltip}
         </Infotip>
       )}
diff --git a/web/app/components/base/grid-mask/index.stories.tsx b/web/app/components/base/grid-mask/index.stories.tsx
index 318955ba4f..13477b97ca 100644
--- a/web/app/components/base/grid-mask/index.stories.tsx
+++ b/web/app/components/base/grid-mask/index.stories.tsx
@@ -19,7 +19,7 @@ const meta = {
     children: (
       <div className="relative z-10 flex flex-col gap-3 text-left text-white">
         <span className="text-xs tracking-[0.16em] text-white/70 uppercase">Grid Mask Demo</span>
-        <span className="text-2xl leading-tight font-semibold">Beautiful backgrounds for feature highlights</span>
+        <span className="text-2xl/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 leading-tight font-semibold">Use your own colors</span>
+        <span className="text-3xl/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>
diff --git a/web/app/components/base/grid-mask/index.tsx b/web/app/components/base/grid-mask/index.tsx
index fa446a2b7d..73ffc2b017 100644
--- a/web/app/components/base/grid-mask/index.tsx
+++ b/web/app/components/base/grid-mask/index.tsx
@@ -16,8 +16,8 @@ const GridMask: FC<GridMaskProps> = ({
 }) => {
   return (
     <div className={cn('relative bg-saas-background', wrapperClassName)}>
-      <div className={cn('absolute inset-0 z-0 h-full w-full opacity-70', canvasClassName, Style.gridBg)} />
-      <div className={cn('absolute z-1 h-full w-full rounded-lg bg-grid-mask-background', gradientClassName)} />
+      <div className={cn('absolute inset-0 z-0 size-full opacity-70', canvasClassName, Style.gridBg)} />
+      <div className={cn('absolute z-1 size-full rounded-lg bg-grid-mask-background', gradientClassName)} />
       <div className="relative z-2">{children}</div>
     </div>
   )
diff --git a/web/app/components/base/image-uploader/audio-preview.tsx b/web/app/components/base/image-uploader/audio-preview.tsx
index d5e15fd3bf..32d5e2459e 100644
--- a/web/app/components/base/image-uploader/audio-preview.tsx
+++ b/web/app/components/base/image-uploader/audio-preview.tsx
@@ -24,7 +24,7 @@ const AudioPreview: FC<AudioPreviewProps> = ({
       disablePointerDismissal
     >
       <DialogContent
-        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
+        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
         backdropClassName="bg-transparent!"
       >
         <div
@@ -44,10 +44,10 @@ const AudioPreview: FC<AudioPreviewProps> = ({
         <button
           type="button"
           aria-label={t('operation.close', { ns: 'common' })}
-          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/[0.08] p-0 backdrop-blur-[2px]"
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/8 p-0 backdrop-blur-[2px]"
           onClick={onCancel}
         >
-          <span className="i-ri-close-line h-4 w-4 text-gray-500" aria-hidden="true" />
+          <span className="i-ri-close-line size-4 text-gray-500" aria-hidden="true" />
         </button>
       </DialogContent>
     </Dialog>
diff --git a/web/app/components/base/image-uploader/chat-image-uploader.tsx b/web/app/components/base/image-uploader/chat-image-uploader.tsx
index 5093b33bd0..66891dea37 100644
--- a/web/app/components/base/image-uploader/chat-image-uploader.tsx
+++ b/web/app/components/base/image-uploader/chat-image-uploader.tsx
@@ -27,11 +27,11 @@ const UploadOnlyFromLocal: FC<UploadOnlyFromLocalProps> = ({
       {hovering => (
         <div
           className={`
-            relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg
+            relative flex size-8 cursor-pointer items-center justify-center rounded-lg
             ${hovering && 'bg-gray-100'}
           `}
         >
-          <span className="i-custom-vender-line-images-image-plus h-4 w-4 text-gray-500" />
+          <span className="i-custom-vender-line-images-image-plus size-4 text-gray-500" />
         </div>
       )}
     </Uploader>
@@ -77,9 +77,9 @@ const UploaderButton: FC<UploaderButtonProps> = ({
           <button
             type="button"
             disabled={disabled}
-            className="relative flex h-8 w-8 items-center justify-center rounded-lg enabled:hover:bg-gray-100 disabled:cursor-not-allowed"
+            className="relative flex size-8 items-center justify-center rounded-lg enabled:hover:bg-gray-100 disabled:cursor-not-allowed"
           >
-            <span className="i-custom-vender-line-images-image-plus h-4 w-4 text-gray-500" />
+            <span className="i-custom-vender-line-images-image-plus size-4 text-gray-500" />
           </button>
         )}
       />
@@ -109,7 +109,7 @@ const UploaderButton: FC<UploaderButtonProps> = ({
                       hovering && 'bg-primary-50',
                     )}
                   >
-                    <span className="mr-1 i-custom-vender-line-general-upload-03 h-4 w-4" />
+                    <span className="mr-1 i-custom-vender-line-general-upload-03 size-4" />
                     {t('imageUploader.uploadFromComputer', { ns: 'common' })}
                   </div>
                 )}
diff --git a/web/app/components/base/image-uploader/image-list.tsx b/web/app/components/base/image-uploader/image-list.tsx
index a149d675d2..0421c11cab 100644
--- a/web/app/components/base/image-uploader/image-list.tsx
+++ b/web/app/components/base/image-uploader/image-list.tsx
@@ -60,10 +60,10 @@ const ImageList: FC<ImageListProps> = ({
                   <button
                     type="button"
                     aria-label={t('operation.retry', { ns: 'common' })}
-                    className="h-5 w-5 border-none bg-transparent p-0 text-white focus-visible:ring-1 focus-visible:ring-white focus-visible:outline-hidden"
+                    className="size-5 border-none bg-transparent p-0 text-white focus-visible:ring-1 focus-visible:ring-white focus-visible:outline-hidden"
                     onClick={() => onReUpload?.(item._id)}
                   >
-                    <span className="i-custom-vender-line-arrows-refresh-ccw-01 h-5 w-5" aria-hidden="true" />
+                    <span className="i-custom-vender-line-arrows-refresh-ccw-01 size-5" aria-hidden="true" />
                   </button>
                 )}
               </div>
@@ -87,7 +87,7 @@ const ImageList: FC<ImageListProps> = ({
               data-testid="image-error-container"
             >
               {item.progress > -1 && (
-                <span className="i-ri-loader-2-line h-5 w-5 animate-spin text-white" data-testid="image-loader" />
+                <span className="i-ri-loader-2-line size-5 animate-spin text-white" data-testid="image-loader" />
               )}
               {item.progress === -1 && (
                 <Tooltip>
@@ -125,14 +125,14 @@ const ImageList: FC<ImageListProps> = ({
             <button
               type="button"
               className={cn(
-                'absolute -top-[9px] -right-[9px] z-10 h-[18px] w-[18px] items-center justify-center border-none bg-transparent p-0',
+                'absolute top-[-9px] right-[-9px] z-10 h-[18px] w-[18px] items-center justify-center border-none bg-transparent p-0',
                 'rounded-2xl shadow-lg hover:bg-state-base-hover',
                 item.progress === -1 ? 'flex' : 'hidden group-hover:flex',
               )}
               onClick={() => onRemove?.(item._id)}
               aria-label={t('operation.remove', { ns: 'common' })}
             >
-              <span className="i-ri-close-line h-3 w-3 text-text-tertiary" aria-hidden="true" />
+              <span className="i-ri-close-line size-3 text-text-tertiary" aria-hidden="true" />
             </button>
           )}
         </div>
diff --git a/web/app/components/base/image-uploader/image-preview.tsx b/web/app/components/base/image-uploader/image-preview.tsx
index 1400ac111f..013ead3f7f 100644
--- a/web/app/components/base/image-uploader/image-preview.tsx
+++ b/web/app/components/base/image-uploader/image-preview.tsx
@@ -190,14 +190,14 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       disablePointerDismissal
     >
       <DialogContent
-        className="image-preview-container inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
+        className="image-preview-container inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
         backdropClassName="bg-transparent!"
       >
         <div
           aria-label={title}
           data-testid="image-preview-container"
           tabIndex={-1}
-          className="flex h-full w-full items-center justify-center"
+          className="flex size-full items-center justify-center"
           onClick={e => e.stopPropagation()}
           onWheel={handleWheel}
           onMouseDown={handleMouseDown}
@@ -223,12 +223,12 @@ const ImagePreview: FC<ImagePreviewProps> = ({
               <button
                 type="button"
                 aria-label={copyImageLabel}
-                className="absolute top-6 right-48 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                className="absolute top-6 right-48 flex size-8 cursor-pointer items-center justify-center rounded-lg"
                 onClick={imageCopy}
               >
                 {isCopied
-                  ? <span className="i-ri-file-copy-line h-4 w-4 text-green-500" aria-hidden="true" />
-                  : <span className="i-ri-file-copy-line h-4 w-4 text-gray-500" aria-hidden="true" />}
+                  ? <span className="i-ri-file-copy-line size-4 text-green-500" aria-hidden="true" />
+                  : <span className="i-ri-file-copy-line size-4 text-gray-500" aria-hidden="true" />}
               </button>
             )}
           />
@@ -242,10 +242,10 @@ const ImagePreview: FC<ImagePreviewProps> = ({
               <button
                 type="button"
                 aria-label={zoomOutLabel}
-                className="absolute top-6 right-40 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                className="absolute top-6 right-40 flex size-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" aria-hidden="true" />
+                <span className="i-ri-zoom-out-line size-4 text-gray-500" aria-hidden="true" />
               </button>
             )}
           />
@@ -259,10 +259,10 @@ const ImagePreview: FC<ImagePreviewProps> = ({
               <button
                 type="button"
                 aria-label={zoomInLabel}
-                className="absolute top-6 right-32 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                className="absolute top-6 right-32 flex size-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" aria-hidden="true" />
+                <span className="i-ri-zoom-in-line size-4 text-gray-500" aria-hidden="true" />
               </button>
             )}
           />
@@ -276,10 +276,10 @@ const ImagePreview: FC<ImagePreviewProps> = ({
               <button
                 type="button"
                 aria-label={downloadLabel}
-                className="absolute top-6 right-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                className="absolute top-6 right-24 flex size-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" aria-hidden="true" />
+                <span className="i-ri-download-cloud-2-line size-4 text-gray-500" aria-hidden="true" />
               </button>
             )}
           />
@@ -293,10 +293,10 @@ const ImagePreview: FC<ImagePreviewProps> = ({
               <button
                 type="button"
                 aria-label={openInNewTabLabel}
-                className="absolute top-6 right-16 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                className="absolute top-6 right-16 flex size-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" aria-hidden="true" />
+                <span className="i-ri-add-box-line size-4 text-gray-500" aria-hidden="true" />
               </button>
             )}
           />
@@ -313,7 +313,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
                 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" aria-hidden="true" />
+                <span className="i-ri-close-line size-4 text-gray-500" aria-hidden="true" />
               </button>
             )}
           />
diff --git a/web/app/components/base/image-uploader/text-generation-image-uploader.tsx b/web/app/components/base/image-uploader/text-generation-image-uploader.tsx
index af05eb2a35..2cf46e0f4b 100644
--- a/web/app/components/base/image-uploader/text-generation-image-uploader.tsx
+++ b/web/app/components/base/image-uploader/text-generation-image-uploader.tsx
@@ -52,7 +52,7 @@ const PasteImageLinkButton: FC<PasteImageLinkButtonProps> = ({
               ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
             `}
           >
-            <Link03 className="mr-2 h-4 w-4" />
+            <Link03 className="mr-2 size-4" />
             {t('imageUploader.pasteImageLink', { ns: 'common' })}
           </div>
         )}
@@ -109,7 +109,7 @@ const TextGenerationImageUploader: FC<TextGenerationImageUploaderProps> = ({
             ${hovering && 'hover:bg-components-button-tertiary-bg-hover'}
           `}
           >
-            <ImagePlus className="mr-2 h-4 w-4" />
+            <ImagePlus className="mr-2 size-4" />
             {t('imageUploader.uploadFromComputer', { ns: 'common' })}
           </div>
         )
diff --git a/web/app/components/base/image-uploader/video-preview.tsx b/web/app/components/base/image-uploader/video-preview.tsx
index c7302d700f..6a6ad810db 100644
--- a/web/app/components/base/image-uploader/video-preview.tsx
+++ b/web/app/components/base/image-uploader/video-preview.tsx
@@ -24,7 +24,7 @@ const VideoPreview: FC<VideoPreviewProps> = ({
       disablePointerDismissal
     >
       <DialogContent
-        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
+        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
         backdropClassName="bg-transparent!"
       >
         <div
@@ -44,10 +44,10 @@ const VideoPreview: FC<VideoPreviewProps> = ({
         <button
           type="button"
           aria-label={t('operation.close', { ns: 'common' })}
-          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/[0.08] p-0 backdrop-blur-[2px]"
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/8 p-0 backdrop-blur-[2px]"
           onClick={onCancel}
         >
-          <span className="i-ri-close-line h-4 w-4 text-gray-500" aria-hidden="true" />
+          <span className="i-ri-close-line size-4 text-gray-500" aria-hidden="true" />
         </button>
       </DialogContent>
     </Dialog>
diff --git a/web/app/components/base/infotip/index.tsx b/web/app/components/base/infotip/index.tsx
index 94c35a101d..fd8382446b 100644
--- a/web/app/components/base/infotip/index.tsx
+++ b/web/app/components/base/infotip/index.tsx
@@ -71,11 +71,11 @@ export function Infotip({
         aria-label={ariaLabel}
         onClick={handleClick}
         className={cn(
-          'inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
+          'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
           className,
         )}
       >
-        <span aria-hidden className={cn('i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary', iconClassName)} />
+        <span aria-hidden className={cn('i-ri-question-line size-3.5 text-text-quaternary hover:text-text-tertiary', iconClassName)} />
       </PopoverTrigger>
       <PopoverContent
         placement={placement}
diff --git a/web/app/components/base/input-with-copy/index.tsx b/web/app/components/base/input-with-copy/index.tsx
index 7e1ee60331..e401b7bdb0 100644
--- a/web/app/components/base/input-with-copy/index.tsx
+++ b/web/app/components/base/input-with-copy/index.tsx
@@ -73,8 +73,8 @@ const InputWithCopy = React.forwardRef<HTMLInputElement, InputWithCopyProps>((
                   className="hover:bg-components-button-ghost-bg-hover"
                 >
                   {copied
-                    ? (<span className="i-ri-clipboard-fill h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" />)
-                    : (<span className="i-ri-clipboard-line h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" />)}
+                    ? (<span className="i-ri-clipboard-fill size-3.5 text-text-tertiary" aria-hidden="true" />)
+                    : (<span className="i-ri-clipboard-line size-3.5 text-text-tertiary" aria-hidden="true" />)}
                 </ActionButton>
               )}
             />
diff --git a/web/app/components/base/input/index.tsx b/web/app/components/base/input/index.tsx
index deeca1e3c4..ac486ec59a 100644
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@@ -82,7 +82,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   }
   return (
     <div className={cn('relative w-full', wrapperClassName)}>
-      {showLeftIcon && <span className={cn('absolute top-1/2 left-2 i-ri-search-line h-4 w-4 -translate-y-1/2 text-components-input-text-placeholder')} />}
+      {showLeftIcon && <span className={cn('absolute top-1/2 left-2 i-ri-search-line size-4 -translate-y-1/2 text-components-input-text-placeholder')} />}
       <input
         ref={ref}
         style={styleCss}
@@ -115,17 +115,17 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
           className={cn('group absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer border-none bg-transparent p-px')}
           onClick={onClear}
         >
-          <span className="i-ri-close-circle-fill h-3.5 w-3.5 cursor-pointer text-text-quaternary group-hover:text-text-tertiary" aria-hidden="true" />
+          <span className="i-ri-close-circle-fill size-3.5 cursor-pointer text-text-quaternary group-hover:text-text-tertiary" aria-hidden="true" />
         </button>
       )}
       {destructive && (
-        <span className="absolute top-1/2 right-2 i-ri-error-warning-line h-4 w-4 -translate-y-1/2 text-text-destructive-secondary" />
+        <span className="absolute top-1/2 right-2 i-ri-error-warning-line size-4 -translate-y-1/2 text-text-destructive-secondary" />
       )}
       {showCopyIcon && (
         <div className={cn('group absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer')}>
           <CopyFeedbackNew
             content={String(value ?? '')}
-            className="h-7! w-7! hover:bg-transparent"
+            className="size-7! hover:bg-transparent"
           />
         </div>
       )}
diff --git a/web/app/components/base/linked-apps-panel/index.tsx b/web/app/components/base/linked-apps-panel/index.tsx
index 8503a7bdfb..681817061f 100644
--- a/web/app/components/base/linked-apps-panel/index.tsx
+++ b/web/app/components/base/linked-apps-panel/index.tsx
@@ -29,13 +29,13 @@ const LikedItem = ({
   return (
     <Link className={cn('group/link-item flex h-8 w-full cursor-pointer items-center justify-between rounded-lg px-2 hover:bg-state-base-hover', isMobile && 'justify-center')} href={`/app/${detail?.id}/overview`}>
       <div className="flex items-center">
-        <div className={cn('relative h-6 w-6 rounded-md')}>
+        <div className={cn('relative size-6 rounded-md')}>
           <AppIcon size="tiny" iconType={detail.icon_type} icon={detail.icon} background={detail.icon_background} imageUrl={detail.icon_url} />
         </div>
         {!isMobile && <div className={cn('ml-2 truncate system-sm-medium text-text-primary')}>{detail?.name || '--'}</div>}
       </div>
       <div className="shrink-0 system-2xs-medium-uppercase text-text-tertiary group-hover/link-item:hidden">{appTypeMap[detail.mode]}</div>
-      <RiArrowRightUpLine className="hidden h-4 w-4 text-text-tertiary group-hover/link-item:block" />
+      <RiArrowRightUpLine className="hidden size-4 text-text-tertiary group-hover/link-item:block" />
     </Link>
   )
 }
diff --git a/web/app/components/base/list-empty/index.stories.tsx b/web/app/components/base/list-empty/index.stories.tsx
index 6c46b6865d..85808bc879 100644
--- a/web/app/components/base/list-empty/index.stories.tsx
+++ b/web/app/components/base/list-empty/index.stories.tsx
@@ -15,7 +15,7 @@ const meta = {
   args: {
     title: 'No items yet',
     description: (
-      <p className="text-xs leading-5 text-text-tertiary">
+      <p className="text-xs/5 text-text-tertiary">
         Add your first entry to see it appear here. Empty states help users discover what happens next.
       </p>
     ),
@@ -36,12 +36,12 @@ export const WithCustomIcon: Story = {
   args: {
     title: 'Connect a data source',
     description: (
-      <p className="text-xs leading-5 text-text-secondary">
+      <p className="text-xs/5 text-text-secondary">
         Choose a database, knowledge base, or upload documents to get started with retrieval.
       </p>
     ),
     icon: (
-      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-linear-to-br from-primary-100 via-primary-200 to-primary-300 text-primary-700 shadow-sm">
+      <div className="flex size-8 items-center justify-center rounded-lg bg-linear-to-br from-primary-100 via-primary-200 to-primary-300 text-primary-700 shadow-sm">
         {'\u{26A1}\u{FE0F}'}
       </div>
     ),
diff --git a/web/app/components/base/list-empty/index.tsx b/web/app/components/base/list-empty/index.tsx
index ac1b019e5c..71a7c29eb9 100644
--- a/web/app/components/base/list-empty/index.tsx
+++ b/web/app/components/base/list-empty/index.tsx
@@ -21,7 +21,7 @@ const ListEmpty = ({
         <div className="relative flex grow items-center justify-center gap-2 self-stretch rounded-[10px] border-[0.5px]
           border-components-card-border bg-components-card-bg p-1 shadow-lg"
         >
-          {icon || <Variable02 className="h-5 w-5 shrink-0 text-text-accent" />}
+          {icon || <Variable02 className="size-5 shrink-0 text-text-accent" />}
           <VerticalLine className="absolute top-1/2 -right-px -translate-y-1/4" />
           <VerticalLine className="absolute top-1/2 -left-px -translate-y-1/4" />
           <HorizontalLine className="absolute top-0 left-3/4 -translate-x-1/4 -translate-y-1/2" />
diff --git a/web/app/components/base/logo/logo-embedded-chat-avatar.tsx b/web/app/components/base/logo/logo-embedded-chat-avatar.tsx
index 59a77c04e0..16308280a2 100644
--- a/web/app/components/base/logo/logo-embedded-chat-avatar.tsx
+++ b/web/app/components/base/logo/logo-embedded-chat-avatar.tsx
@@ -10,7 +10,7 @@ const LogoEmbeddedChatAvatar: FC<LogoEmbeddedChatAvatarProps> = ({
   return (
     <img
       src={`${basePath}/logo/logo-embedded-chat-avatar.png`}
-      className={`block h-10 w-10 ${className}`}
+      className={`block size-10 ${className}`}
       alt="logo"
     />
   )
diff --git a/web/app/components/base/markdown-blocks/think-block.tsx b/web/app/components/base/markdown-blocks/think-block.tsx
index f666d3a218..b22caa6198 100644
--- a/web/app/components/base/markdown-blocks/think-block.tsx
+++ b/web/app/components/base/markdown-blocks/think-block.tsx
@@ -93,7 +93,7 @@ const ThinkBlock = ({ children, ...props }: ThinkBlockProps) => {
       <summary className="flex cursor-pointer list-none items-center pl-2 font-bold whitespace-nowrap text-text-secondary select-none">
         <div className="flex shrink-0 items-center">
           <svg
-            className="mr-2 h-3 w-3 transition-transform duration-500 group-open:rotate-90"
+            className="mr-2 size-3 transition-transform duration-500 group-open:rotate-90"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
diff --git a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx b/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx
index d73279f912..bb785a3ea1 100644
--- a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx
+++ b/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx
@@ -18,7 +18,7 @@ function WithIconCardItem({ icon, children, className, iconAlt }: WithIconItemPr
         width={40}
         height={40}
       />
-      <div className="min-w-0 grow overflow-hidden system-sm-medium text-text-secondary [&_p]:m-0! [&_p]:block [&_p]:w-full [&_p]:overflow-hidden [&_p]:text-ellipsis [&_p]:whitespace-nowrap">
+      <div className="min-w-0 grow overflow-hidden system-sm-medium text-text-secondary [&_p]:m-0! [&_p]:block [&_p]:w-full [&_p]:truncate">
         {children}
       </div>
     </div>
diff --git a/web/app/components/base/mermaid/index.tsx b/web/app/components/base/mermaid/index.tsx
index 75bc201071..bbb32b64bf 100644
--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@@ -464,7 +464,7 @@ const Flowchart = (props: FlowchartProps) => {
       'text-red-500': currentTheme === Theme.light,
       'text-red-400': currentTheme === Theme.dark,
     }),
-    errorIcon: cn('h-6 w-6', {
+    errorIcon: cn('size-6', {
       'text-red-500': currentTheme === Theme.light,
       'text-red-400': currentTheme === Theme.dark,
     }),
@@ -472,7 +472,7 @@ const Flowchart = (props: FlowchartProps) => {
       'text-gray-700': currentTheme === Theme.light,
       'text-gray-300': currentTheme === Theme.dark,
     }),
-    themeToggle: cn('flex h-10 w-10 items-center justify-center rounded-full shadow-md backdrop-blur-xs transition-all duration-300', {
+    themeToggle: cn('flex size-10 items-center justify-center rounded-full shadow-md backdrop-blur-xs transition-all duration-300', {
       'border border-gray-200 bg-white/80 text-gray-700 hover:bg-white hover:shadow-lg': currentTheme === Theme.light,
       'border border-slate-600 bg-slate-800/80 text-yellow-300 hover:bg-slate-700 hover:shadow-lg': currentTheme === Theme.dark,
     }),
@@ -551,7 +551,7 @@ const Flowchart = (props: FlowchartProps) => {
               title={themeToggleTitleByTheme[currentTheme] || ''}
               style={{ transform: 'translate3d(0, 0, 0)' }}
             >
-              {currentTheme === Theme.light ? <span className="i-heroicons-moon-solid h-5 w-5" /> : <span className="i-heroicons-sun-solid h-5 w-5" />}
+              {currentTheme === Theme.light ? <span className="i-heroicons-moon-solid size-5" /> : <span className="i-heroicons-sun-solid size-5" />}
             </button>
           </div>
 
diff --git a/web/app/components/base/message-log-modal/index.tsx b/web/app/components/base/message-log-modal/index.tsx
index 6b63ccdf3f..88ec651108 100644
--- a/web/app/components/base/message-log-modal/index.tsx
+++ b/web/app/components/base/message-log-modal/index.tsx
@@ -49,7 +49,7 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
         className="absolute top-4 right-3 z-20 cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
         onClick={onCancel}
       >
-        <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+        <span className="i-ri-close-line size-4 text-text-tertiary" aria-hidden="true" />
       </button>
       <Run
         hideResult
@@ -98,7 +98,7 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
         className="absolute top-4 right-3 z-20 cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
         onClick={onCancel}
       >
-        <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+        <span className="i-ri-close-line size-4 text-text-tertiary" aria-hidden="true" />
       </button>
       <Run
         hideResult
diff --git a/web/app/components/base/new-audio-button/index.tsx b/web/app/components/base/new-audio-button/index.tsx
index d9da5fd286..c702b829bd 100644
--- a/web/app/components/base/new-audio-button/index.tsx
+++ b/web/app/components/base/new-audio-button/index.tsx
@@ -92,7 +92,7 @@ const AudioBtn = ({
               onClick={handleToggle}
               disabled={audioState === 'loading'}
             >
-              <RiVolumeUpLine className="h-4 w-4" aria-hidden="true" />
+              <RiVolumeUpLine className="size-4" aria-hidden="true" />
             </ActionButton>
           </span>
         )}
diff --git a/web/app/components/base/node-status/__tests__/index.spec.tsx b/web/app/components/base/node-status/__tests__/index.spec.tsx
index 37b12946c8..a7dfee1663 100644
--- a/web/app/components/base/node-status/__tests__/index.spec.tsx
+++ b/web/app/components/base/node-status/__tests__/index.spec.tsx
@@ -49,8 +49,8 @@ describe('NodeStatus', () => {
     // The icon is the first child of the div
     const icon = container.querySelector('.custom-icon-class')
     expect(icon).toBeInTheDocument()
-    expect(icon).toHaveClass('h-3.5')
-    expect(icon).toHaveClass('w-3.5')
+    expect(icon).toHaveClass('size-3.5')
+    expect(icon).toHaveClass('size-3.5')
   })
 
   it('passes additional HTML attributes to the container', () => {
diff --git a/web/app/components/base/node-status/index.tsx b/web/app/components/base/node-status/index.tsx
index 398e2cf142..6b50a3470a 100644
--- a/web/app/components/base/node-status/index.tsx
+++ b/web/app/components/base/node-status/index.tsx
@@ -57,7 +57,7 @@ const NodeStatus = ({
       {...props}
     >
       <Icon
-        className={cn('h-3.5 w-3.5 shrink-0', iconClassName)}
+        className={cn('size-3.5 shrink-0', iconClassName)}
       />
       <span>{message ?? defaultMessage}</span>
       {children}
diff --git a/web/app/components/base/notion-connector/index.tsx b/web/app/components/base/notion-connector/index.tsx
index 8afb1a9f9f..fcdeb2f49e 100644
--- a/web/app/components/base/notion-connector/index.tsx
+++ b/web/app/components/base/notion-connector/index.tsx
@@ -19,7 +19,7 @@ const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
       <div className="mb-1 flex flex-col gap-y-1 pt-1 pb-3">
         <span className="system-md-semibold text-text-secondary">
           {t('stepOne.notionSyncTitle', { ns: 'datasetCreation' })}
-          <Icon3Dots className="relative -top-2.5 -left-1.5 inline h-4 w-4 text-text-secondary" />
+          <Icon3Dots className="relative -top-2.5 -left-1.5 inline size-4 text-text-secondary" />
         </span>
         <div className="system-sm-regular text-text-tertiary">{t('stepOne.notionSyncTip', { ns: 'datasetCreation' })}</div>
       </div>
diff --git a/web/app/components/base/notion-icon/index.tsx b/web/app/components/base/notion-icon/index.tsx
index f2b5146d73..2ed73ccf13 100644
--- a/web/app/components/base/notion-icon/index.tsx
+++ b/web/app/components/base/notion-icon/index.tsx
@@ -22,16 +22,16 @@ const NotionIcon = ({
           <img
             alt="workspace icon"
             src={src}
-            className={cn('block h-5 w-5 object-cover', className)}
+            className={cn('block size-5 object-cover', className)}
           />
         )
       }
       return (
-        <div className={cn('flex h-5 w-5 items-center justify-center', className)}>{src}</div>
+        <div className={cn('flex size-5 items-center justify-center', className)}>{src}</div>
       )
     }
     return (
-      <div className={cn('flex h-5 w-5 items-center justify-center rounded-sm bg-gray-200 text-xs font-medium text-gray-500', className)}>{name?.[0]!.toLocaleUpperCase()}</div>
+      <div className={cn('flex size-5 items-center justify-center rounded-sm bg-gray-200 text-xs font-medium text-gray-500', className)}>{name?.[0]!.toLocaleUpperCase()}</div>
     )
   }
 
@@ -41,17 +41,17 @@ const NotionIcon = ({
         <img
           alt="page icon"
           src={src.url || ''}
-          className={cn('block h-5 w-5 object-cover', className)}
+          className={cn('block size-5 object-cover', className)}
         />
       )
     }
     return (
-      <div className={cn('flex h-5 w-5 items-center justify-center', className)}>{src?.emoji}</div>
+      <div className={cn('flex size-5 items-center justify-center', className)}>{src?.emoji}</div>
     )
   }
 
   return (
-    <RiFileTextLine className={cn('h-5 w-5 text-text-tertiary', className)} />
+    <RiFileTextLine className={cn('size-5 text-text-tertiary', className)} />
   )
 }
 
diff --git a/web/app/components/base/notion-page-selector/page-selector/page-row.tsx b/web/app/components/base/notion-page-selector/page-selector/page-row.tsx
index 56d8ba8cff..fb018057d3 100644
--- a/web/app/components/base/notion-page-selector/page-selector/page-row.tsx
+++ b/web/app/components/base/notion-page-selector/page-selector/page-row.tsx
@@ -65,18 +65,18 @@ const NotionPageRow = ({
           )}
       {!searchValue && row.hasChild && (
         <div
-          className="mr-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-md hover:bg-components-button-ghost-bg-hover"
+          className="mr-1 flex size-5 shrink-0 items-center justify-center rounded-md hover:bg-components-button-ghost-bg-hover"
           style={{ marginLeft: row.depth * 8 }}
           onClick={() => onToggle(pageId)}
           data-testid={`notion-page-toggle-${pageId}`}
         >
           {row.expand
-            ? <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
-            : <RiArrowRightSLine className="h-4 w-4 text-text-tertiary" />}
+            ? <RiArrowDownSLine className="size-4 text-text-tertiary" />
+            : <RiArrowRightSLine className="size-4 text-text-tertiary" />}
         </div>
       )}
       {!searchValue && !row.hasChild && row.parentExists && (
-        <div className="mr-1 h-5 w-5 shrink-0" style={{ marginLeft: row.depth * 8 }} />
+        <div className="mr-1 size-5 shrink-0" style={{ marginLeft: row.depth * 8 }} />
       )}
       <NotionIcon
         className="mr-1 shrink-0"
diff --git a/web/app/components/base/notion-page-selector/search-input/index.tsx b/web/app/components/base/notion-page-selector/search-input/index.tsx
index a7102e19b2..5ad57fd845 100644
--- a/web/app/components/base/notion-page-selector/search-input/index.tsx
+++ b/web/app/components/base/notion-page-selector/search-input/index.tsx
@@ -26,7 +26,7 @@ const SearchInput = ({
       className={cn('flex h-8 w-[200px] items-center rounded-lg bg-components-input-bg-normal p-2')}
       data-testid="notion-search-input-container"
     >
-      <div className="mr-0.5 i-ri-search-line h-4 w-4 shrink-0 text-components-input-text-placeholder" />
+      <div className="mr-0.5 i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder" />
       <input
         className="min-w-0 grow appearance-none border-0 bg-transparent px-1 text-[13px] leading-[16px] text-components-input-text-filled outline-0 placeholder:text-components-input-text-placeholder"
         value={value}
@@ -40,10 +40,10 @@ const SearchInput = ({
               <button
                 type="button"
                 aria-label={t('operation.clear', { ns: 'common' })}
-                className="flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-components-input-border-active"
+                className="flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-components-input-border-active"
                 onClick={handleClear}
               >
-                <span className="i-ri-close-circle-fill h-4 w-4 text-components-input-text-placeholder" aria-hidden="true" />
+                <span className="i-ri-close-circle-fill size-4 text-components-input-text-placeholder" aria-hidden="true" />
               </button>
             )
           : null
diff --git a/web/app/components/base/pagination/index.tsx b/web/app/components/base/pagination/index.tsx
index 22335bdd11..b17a8ff06e 100644
--- a/web/app/components/base/pagination/index.tsx
+++ b/web/app/components/base/pagination/index.tsx
@@ -105,10 +105,10 @@ const CustomizedPagination: FC<Props> = ({
         >
           <Button
             variant="secondary"
-            className="h-7 w-7 px-1.5"
+            className="size-7 px-1.5"
             disabled={current === 0}
           >
-            <RiArrowLeftLine className="h-4 w-4" />
+            <RiArrowLeftLine className="size-4" />
           </Button>
         </Pagination.PrevButton>
         {!showInput && (
@@ -142,10 +142,10 @@ const CustomizedPagination: FC<Props> = ({
         >
           <Button
             variant="secondary"
-            className="h-7 w-7 px-1.5"
+            className="size-7 px-1.5"
             disabled={current === totalPages - 1}
           >
-            <RiArrowRightLine className="h-4 w-4" />
+            <RiArrowRightLine className="size-4" />
           </Button>
         </Pagination.NextButton>
       </div>
diff --git a/web/app/components/base/prompt-editor/index.stories.tsx b/web/app/components/base/prompt-editor/index.stories.tsx
index 4c8175ea12..d166813c29 100644
--- a/web/app/components/base/prompt-editor/index.stories.tsx
+++ b/web/app/components/base/prompt-editor/index.stories.tsx
@@ -13,7 +13,7 @@ const PromptEditorMock = ({ value, onChange, placeholder, editable, compact, cla
   return (
     <div className={wrapperClassName}>
       <textarea
-        className={`w-full resize-none outline-hidden ${compact ? 'text-[13px] leading-5' : 'text-sm leading-6'} ${className}`}
+        className={`w-full resize-none outline-hidden ${compact ? 'text-[13px] leading-5' : 'text-sm/6'} ${className}`}
         value={content}
         onChange={handleChange}
         placeholder={placeholder}
diff --git a/web/app/components/base/prompt-editor/plugins/__tests__/placeholder.spec.tsx b/web/app/components/base/prompt-editor/plugins/__tests__/placeholder.spec.tsx
index 577f15bb97..f653a80d47 100644
--- a/web/app/components/base/prompt-editor/plugins/__tests__/placeholder.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/__tests__/placeholder.spec.tsx
@@ -28,15 +28,14 @@ describe('Placeholder', () => {
 
       expect(wrapper).toHaveClass('text-[13px]')
       expect(wrapper).toHaveClass('leading-5')
-      expect(wrapper).not.toHaveClass('leading-6')
+      expect(wrapper).not.toHaveClass('text-sm/6')
     })
 
     it('should apply default text classes when compact is false', () => {
       const { container } = render(<Placeholder compact={false} />)
       const wrapper = container.firstElementChild
 
-      expect(wrapper).toHaveClass('text-sm')
-      expect(wrapper).toHaveClass('leading-6')
+      expect(wrapper).toHaveClass('text-sm/6')
       expect(wrapper).not.toHaveClass('leading-5')
     })
 
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
index fc8f7943e1..464bff78b1 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
@@ -103,7 +103,7 @@ export const usePromptOptions = (
         return (
           <PromptMenuItem
             title={t('promptEditor.requestURL.item.title', { ns: 'common' })}
-            icon={<RiGlobalLine className="h-4 w-4 text-util-colors-violet-violet-600" />}
+            icon={<RiGlobalLine className="size-4 text-util-colors-violet-violet-600" />}
             disabled={!requestURLBlock.selectable}
             isSelected={isSelected}
             onClick={onSelect}
@@ -274,7 +274,7 @@ export const useExternalToolOptions = (
           <VariableMenuItem
             title={t('promptEditor.variable.modal.addTool', { ns: 'common' })}
             icon={<Tool03 className="h-[14px] w-[14px] text-text-accent" />}
-            extraElement={<ArrowUpRight className="h-3 w-3 text-text-tertiary" />}
+            extraElement={<ArrowUpRight className="size-3 text-text-tertiary" />}
             queryString={queryString}
             isSelected={isSelected}
             onClick={onSelect}
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
index 10c371916b..01612689cf 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
@@ -238,7 +238,7 @@ const ComponentPicker = ({
             // The `LexicalMenu` will try to calculate the position of the floating menu based on the first child.
             // Since we use floating ui, we need to wrap it with a div to prevent the position calculation being affected.
             // See https://github.com/facebook/lexical/blob/ac97dfa9e14a73ea2d6934ff566282d7f758e8bb/packages/lexical-react/src/shared/LexicalMenu.ts#L493
-            <div className="h-0 w-0">
+            <div className="size-0">
               <div
                 className="w-[260px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg"
                 style={{
diff --git a/web/app/components/base/prompt-editor/plugins/history-block/component.tsx b/web/app/components/base/prompt-editor/plugins/history-block/component.tsx
index a9bc68ac30..c83356c26b 100644
--- a/web/app/components/base/prompt-editor/plugins/history-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/history-block/component.tsx
@@ -64,7 +64,7 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
               ref={triggerRef}
               onClick={e => e.preventDefault()}
             >
-              <RiMoreFill className="h-3 w-3" />
+              <RiMoreFill className="size-3" />
             </div>
           )}
         />
diff --git a/web/app/components/base/prompt-editor/plugins/placeholder.tsx b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
index 700d0a2f6a..d24a7e39dd 100644
--- a/web/app/components/base/prompt-editor/plugins/placeholder.tsx
+++ b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
@@ -16,8 +16,8 @@ const Placeholder = ({
 
   return (
     <div className={cn(
-      'pointer-events-none absolute top-0 left-0 h-full w-full text-sm text-components-input-text-placeholder select-none',
-      compact ? 'text-[13px] leading-5' : 'text-sm leading-6',
+      'pointer-events-none absolute top-0 left-0 size-full text-sm text-components-input-text-placeholder select-none',
+      compact ? 'text-[13px] leading-5' : 'text-sm/6',
       className,
     )}
     >
diff --git a/web/app/components/base/prompt-editor/plugins/request-url-block/component.tsx b/web/app/components/base/prompt-editor/plugins/request-url-block/component.tsx
index 469225d4de..40497b599e 100644
--- a/web/app/components/base/prompt-editor/plugins/request-url-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/request-url-block/component.tsx
@@ -24,7 +24,7 @@ const RequestURLBlockComponent: FC<RequestURLBlockComponentProps> = ({
       )}
       ref={ref}
     >
-      <RiGlobalLine className="mr-0.5 h-3.5 w-3.5 text-util-colors-violet-violet-600" />
+      <RiGlobalLine className="mr-0.5 size-3.5 text-util-colors-violet-violet-600" />
       <div className="system-xs-medium text-util-colors-violet-violet-600">{t('promptEditor.requestURL.item.title', { ns: 'common' })}</div>
     </div>
   )
diff --git a/web/app/components/base/prompt-editor/prompt-editor-content.tsx b/web/app/components/base/prompt-editor/prompt-editor-content.tsx
index 28a0863284..2c64a3c04e 100644
--- a/web/app/components/base/prompt-editor/prompt-editor-content.tsx
+++ b/web/app/components/base/prompt-editor/prompt-editor-content.tsx
@@ -132,7 +132,7 @@ const PromptEditorContent: FC<PromptEditorContentProps> = ({
           <ContentEditable
             className={cn(
               'group/editable text-text-secondary outline-hidden group-[.clamp]:max-h-24 group-[.clamp]:overflow-y-auto',
-              compact ? 'text-[13px] leading-5' : 'text-sm leading-6',
+              compact ? 'text-[13px] leading-5' : 'text-sm/6',
               className,
             )}
             style={style || {}}
diff --git a/web/app/components/base/prompt-log-modal/card.tsx b/web/app/components/base/prompt-log-modal/card.tsx
index 28a0a13922..53661440db 100644
--- a/web/app/components/base/prompt-log-modal/card.tsx
+++ b/web/app/components/base/prompt-log-modal/card.tsx
@@ -26,7 +26,7 @@ const Card: FC<CardProps> = ({
                 <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} />
+                    <CopyFeedbackNew className="hidden size-6 group-hover/card:block" content={item.text} />
                   </div>
                   <div className="whitespace-pre-line text-text-secondary">{item.text}</div>
                 </div>
diff --git a/web/app/components/base/prompt-log-modal/index.tsx b/web/app/components/base/prompt-log-modal/index.tsx
index b9225fabb4..be7d638393 100644
--- a/web/app/components/base/prompt-log-modal/index.tsx
+++ b/web/app/components/base/prompt-log-modal/index.tsx
@@ -50,7 +50,7 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
           {
             currentLogItem.log?.length === 1 && (
               <>
-                <CopyFeedbackNew className="h-6 w-6" content={currentLogItem.log[0]!.text} />
+                <CopyFeedbackNew className="size-6" content={currentLogItem.log[0]!.text} />
                 <div className="mx-2.5 h-[14px] w-px bg-divider-regular" />
               </>
             )
@@ -59,9 +59,9 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
             type="button"
             aria-label={t('operation.close', { ns: 'common' })}
             onClick={onCancel}
-            className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-components-button-secondary-accent-border"
+            className="flex size-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-components-button-secondary-accent-border"
           >
-            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <span className="i-ri-close-line size-4 text-text-tertiary" aria-hidden="true" />
           </button>
         </div>
       </div>
diff --git a/web/app/components/base/qrcode/index.tsx b/web/app/components/base/qrcode/index.tsx
index d4c9918aa6..05958347f5 100644
--- a/web/app/components/base/qrcode/index.tsx
+++ b/web/app/components/base/qrcode/index.tsx
@@ -56,11 +56,11 @@ const ShareQRCode = ({ content }: Props) => {
 
   return (
     <Tooltip>
-      <div className="relative h-6 w-6">
+      <div className="relative size-6">
         <TooltipTrigger
           render={(
             <ActionButton aria-label={safeTooltipText} onClick={toggleQRCode}>
-              <span className="i-ri-qr-code-line h-4 w-4" aria-hidden="true" />
+              <span className="i-ri-qr-code-line size-4" aria-hidden="true" />
             </ActionButton>
           )}
         />
diff --git a/web/app/components/base/radio-card/index.stories.tsx b/web/app/components/base/radio-card/index.stories.tsx
index 14f72c03ba..8e18f2b548 100644
--- a/web/app/components/base/radio-card/index.stories.tsx
+++ b/web/app/components/base/radio-card/index.stories.tsx
@@ -64,7 +64,7 @@ const RadioCardDemo = (args: any) => {
 export const Default: Story = {
   render: args => <RadioCardDemo {...args} />,
   args: {
-    icon: <RiRocketLine className="h-5 w-5 text-purple-600" />,
+    icon: <RiRocketLine className="size-5 text-purple-600" />,
     iconBgClassName: 'bg-purple-100',
     title: 'Quick Start',
     description: 'Get started quickly with default settings',
@@ -77,7 +77,7 @@ export const Default: Story = {
 export const Selected: Story = {
   render: args => <RadioCardDemo {...args} />,
   args: {
-    icon: <RiRocketLine className="h-5 w-5 text-purple-600" />,
+    icon: <RiRocketLine className="size-5 text-purple-600" />,
     iconBgClassName: 'bg-purple-100',
     title: 'Quick Start',
     description: 'Get started quickly with default settings',
@@ -90,7 +90,7 @@ export const Selected: Story = {
 export const NoRadio: Story = {
   render: args => <RadioCardDemo {...args} />,
   args: {
-    icon: <RiRocketLine className="h-5 w-5 text-purple-600" />,
+    icon: <RiRocketLine className="size-5 text-purple-600" />,
     iconBgClassName: 'bg-purple-100',
     title: 'Information Card',
     description: 'Card without radio indicator',
@@ -105,7 +105,7 @@ const WithConfigurationDemo = () => {
   return (
     <div style={{ width: '400px' }}>
       <RadioCard
-        icon={<RiDatabase2Line className="h-5 w-5 text-blue-600" />}
+        icon={<RiDatabase2Line className="size-5 text-blue-600" />}
         iconBgClassName="bg-blue-100"
         title="Database Storage"
         description="Store data in a managed database"
@@ -148,21 +148,21 @@ const MultipleCardsDemo = () => {
   const options = [
     {
       value: 'standard',
-      icon: <RiRocketLine className="h-5 w-5 text-purple-600" />,
+      icon: <RiRocketLine className="size-5 text-purple-600" />,
       iconBg: 'bg-purple-100',
       title: 'Standard',
       description: 'Perfect for most use cases',
     },
     {
       value: 'advanced',
-      icon: <RiCpuLine className="h-5 w-5 text-blue-600" />,
+      icon: <RiCpuLine className="size-5 text-blue-600" />,
       iconBg: 'bg-blue-100',
       title: 'Advanced',
       description: 'More features and customization',
     },
     {
       value: 'enterprise',
-      icon: <RiShieldLine className="h-5 w-5 text-green-600" />,
+      icon: <RiShieldLine className="size-5 text-green-600" />,
       iconBg: 'bg-green-100',
       title: 'Enterprise',
       description: 'Full features with premium support',
@@ -206,7 +206,7 @@ const CloudProviderSelectionDemo = () => {
       <h3 className="mb-4 text-lg font-semibold">Select Cloud Provider</h3>
       <div className="space-y-3">
         <RadioCard
-          icon={<RiCloudLine className="h-5 w-5 text-orange-600" />}
+          icon={<RiCloudLine className="size-5 text-orange-600" />}
           iconBgClassName="bg-orange-100"
           title="Amazon Web Services"
           description="Industry-leading cloud infrastructure"
@@ -229,7 +229,7 @@ const CloudProviderSelectionDemo = () => {
           )}
         />
         <RadioCard
-          icon={<RiCloudLine className="h-5 w-5 text-blue-600" />}
+          icon={<RiCloudLine className="size-5 text-blue-600" />}
           iconBgClassName="bg-blue-100"
           title="Microsoft Azure"
           description="Enterprise-grade cloud platform"
@@ -237,7 +237,7 @@ const CloudProviderSelectionDemo = () => {
           onChosen={() => setProvider('azure')}
         />
         <RadioCard
-          icon={<RiCloudLine className="h-5 w-5 text-red-600" />}
+          icon={<RiCloudLine className="size-5 text-red-600" />}
           iconBgClassName="bg-red-100"
           title="Google Cloud Platform"
           description="Scalable and reliable infrastructure"
@@ -264,7 +264,7 @@ const DeploymentStrategyDemo = () => {
       <p className="mb-4 text-sm text-gray-600">Choose how you want to deploy your application</p>
       <div className="space-y-3">
         <RadioCard
-          icon={<RiRocketLine className="h-5 w-5 text-green-600" />}
+          icon={<RiRocketLine className="size-5 text-green-600" />}
           iconBgClassName="bg-green-100"
           title="Rolling Deployment"
           description="Gradually replace instances with zero downtime"
@@ -281,7 +281,7 @@ const DeploymentStrategyDemo = () => {
           )}
         />
         <RadioCard
-          icon={<RiCpuLine className="h-5 w-5 text-blue-600" />}
+          icon={<RiCpuLine className="size-5 text-blue-600" />}
           iconBgClassName="bg-blue-100"
           title="Blue-Green Deployment"
           description="Switch between two identical environments"
@@ -298,7 +298,7 @@ const DeploymentStrategyDemo = () => {
           )}
         />
         <RadioCard
-          icon={<RiLightbulbLine className="h-5 w-5 text-yellow-600" />}
+          icon={<RiLightbulbLine className="size-5 text-yellow-600" />}
           iconBgClassName="bg-yellow-100"
           title="Canary Deployment"
           description="Test with a small subset of users first"
@@ -338,7 +338,7 @@ const StorageOptionsDemo = () => {
   const storageOptions = [
     {
       value: 'ssd',
-      icon: <RiDatabase2Line className="h-5 w-5 text-purple-600" />,
+      icon: <RiDatabase2Line className="size-5 text-purple-600" />,
       iconBg: 'bg-purple-100',
       title: 'SSD Storage',
       description: 'Fast and reliable solid state drives',
@@ -347,7 +347,7 @@ const StorageOptionsDemo = () => {
     },
     {
       value: 'hdd',
-      icon: <RiDatabase2Line className="h-5 w-5 text-gray-600" />,
+      icon: <RiDatabase2Line className="size-5 text-gray-600" />,
       iconBg: 'bg-gray-100',
       title: 'HDD Storage',
       description: 'Cost-effective magnetic disk storage',
@@ -356,7 +356,7 @@ const StorageOptionsDemo = () => {
     },
     {
       value: 'nvme',
-      icon: <RiDatabase2Line className="h-5 w-5 text-red-600" />,
+      icon: <RiDatabase2Line className="size-5 text-red-600" />,
       iconBg: 'bg-red-100',
       title: 'NVMe Storage',
       description: 'Ultra-fast PCIe-based storage',
@@ -422,7 +422,7 @@ const APIAuthMethodDemo = () => {
       <h3 className="mb-4 text-lg font-semibold">API Authentication</h3>
       <div className="space-y-3">
         <RadioCard
-          icon={<RiShieldLine className="h-5 w-5 text-blue-600" />}
+          icon={<RiShieldLine className="size-5 text-blue-600" />}
           iconBgClassName="bg-blue-100"
           title="API Key"
           description="Simple authentication using a secret key"
@@ -443,7 +443,7 @@ const APIAuthMethodDemo = () => {
           )}
         />
         <RadioCard
-          icon={<RiShieldLine className="h-5 w-5 text-green-600" />}
+          icon={<RiShieldLine className="size-5 text-green-600" />}
           iconBgClassName="bg-green-100"
           title="OAuth 2.0"
           description="Industry-standard authorization protocol"
@@ -461,7 +461,7 @@ const APIAuthMethodDemo = () => {
           )}
         />
         <RadioCard
-          icon={<RiShieldLine className="h-5 w-5 text-purple-600" />}
+          icon={<RiShieldLine className="size-5 text-purple-600" />}
           iconBgClassName="bg-purple-100"
           title="JWT Token"
           description="JSON Web Token based authentication"
@@ -490,7 +490,7 @@ const PlaygroundDemo = () => {
   return (
     <div style={{ width: '450px' }} className="space-y-3">
       <RadioCard
-        icon={<RiRocketLine className="h-5 w-5 text-purple-600" />}
+        icon={<RiRocketLine className="size-5 text-purple-600" />}
         iconBgClassName="bg-purple-100"
         title="Option 1"
         description="First option with icon and description"
@@ -498,7 +498,7 @@ const PlaygroundDemo = () => {
         onChosen={() => setSelected('option1')}
       />
       <RadioCard
-        icon={<RiDatabase2Line className="h-5 w-5 text-blue-600" />}
+        icon={<RiDatabase2Line className="size-5 text-blue-600" />}
         iconBgClassName="bg-blue-100"
         title="Option 2"
         description="Second option with different styling"
@@ -511,7 +511,7 @@ const PlaygroundDemo = () => {
         )}
       />
       <RadioCard
-        icon={<RiCloudLine className="h-5 w-5 text-green-600" />}
+        icon={<RiCloudLine className="size-5 text-green-600" />}
         iconBgClassName="bg-green-100"
         title="Option 3"
         description="Third option to demonstrate selection"
diff --git a/web/app/components/base/radio-card/index.tsx b/web/app/components/base/radio-card/index.tsx
index dad810e1e1..58de830e3e 100644
--- a/web/app/components/base/radio-card/index.tsx
+++ b/web/app/components/base/radio-card/index.tsx
@@ -53,7 +53,7 @@ const RadioCard: FC<Props> = ({
           <div className="absolute top-3 right-3">
             <div
               className={cn(
-                'h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
+                'size-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
                 isChosen && 'border-[5px] border-components-radio-border-checked',
               )}
               aria-hidden="true"
diff --git a/web/app/components/base/radio-card/simple/index.tsx b/web/app/components/base/radio-card/simple/index.tsx
index 237af7a596..85a9919767 100644
--- a/web/app/components/base/radio-card/simple/index.tsx
+++ b/web/app/components/base/radio-card/simple/index.tsx
@@ -32,7 +32,7 @@ const RadioCard: FC<Props> = ({
         {icon}
         <div>
           <div className="flex items-center justify-between">
-            <div className="text-sm leading-5 font-medium text-gray-900">{title}</div>
+            <div className="text-sm/5 font-medium text-gray-900">{title}</div>
             <div className={s.radio}></div>
           </div>
           <div className="text-xs leading-[18px] font-normal text-gray-500">{description}</div>
diff --git a/web/app/components/base/search-input/index.tsx b/web/app/components/base/search-input/index.tsx
index 34599b9b30..dc29c4d510 100644
--- a/web/app/components/base/search-input/index.tsx
+++ b/web/app/components/base/search-input/index.tsx
@@ -33,8 +33,8 @@ const SearchInput: FC<SearchInputProps> = ({
       className,
     )}
     >
-      <div className="pointer-events-none mr-1.5 flex h-4 w-4 shrink-0 items-center justify-center">
-        <RiSearchLine className="h-4 w-4 text-components-input-text-placeholder" aria-hidden="true" />
+      <div className="pointer-events-none mr-1.5 flex size-4 shrink-0 items-center justify-center">
+        <RiSearchLine className="size-4 text-components-input-text-placeholder" aria-hidden="true" />
       </div>
       <input
         ref={inputRef}
@@ -70,13 +70,13 @@ const SearchInput: FC<SearchInputProps> = ({
         <button
           type="button"
           aria-label={t('operation.clear', { ns: 'common' })}
-          className="group/clear flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0"
+          className="group/clear flex size-4 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0"
           onClick={() => {
             onChange('')
             inputRef.current?.focus()
           }}
         >
-          <RiCloseCircleFill className="h-4 w-4 text-text-quaternary group-hover/clear:text-text-tertiary" />
+          <RiCloseCircleFill className="size-4 text-text-quaternary group-hover/clear:text-text-tertiary" />
         </button>
       )}
     </div>
diff --git a/web/app/components/base/skeleton/index.stories.tsx b/web/app/components/base/skeleton/index.stories.tsx
index 24a7383e38..6710c56b95 100644
--- a/web/app/components/base/skeleton/index.stories.tsx
+++ b/web/app/components/base/skeleton/index.stories.tsx
@@ -27,7 +27,7 @@ const SkeletonDemo = () => {
       </div>
       <div className="space-y-3 rounded-xl border border-divider-subtle bg-background-default-subtle p-4">
         <SkeletonRow className="items-start">
-          <SkeletonRectangle className="mr-4 h-10 w-10 rounded-full" />
+          <SkeletonRectangle className="mr-4 size-10 rounded-full" />
           <SkeletonContainer className="w-full">
             <SkeletonRectangle className="h-3 w-1/3" />
             <SkeletonRectangle className="h-3 w-full" />
diff --git a/web/app/components/base/sort/index.tsx b/web/app/components/base/sort/index.tsx
index 57affdd96b..3f00876db3 100644
--- a/web/app/components/base/sort/index.tsx
+++ b/web/app/components/base/sort/index.tsx
@@ -57,7 +57,7 @@ const Sort: FC<Props> = ({
                   {triggerContent}
                 </div>
               </div>
-              <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
+              <RiArrowDownSLine className="size-4 text-text-tertiary" />
             </div>
           </DropdownMenuTrigger>
           <DropdownMenuContent
@@ -78,7 +78,7 @@ const Sort: FC<Props> = ({
                   className="gap-2 rounded-lg px-2 py-[6px] pl-3"
                 >
                   <div title={item.name} className="grow truncate system-sm-medium text-text-secondary">{item.name}</div>
-                  {value === item.value && <RiCheckLine className="h-4 w-4 shrink-0 text-util-colors-blue-light-blue-light-600" />}
+                  {value === item.value && <RiCheckLine className="size-4 shrink-0 text-util-colors-blue-light-blue-light-600" />}
                 </DropdownMenuRadioItem>
               ))}
             </DropdownMenuRadioGroup>
@@ -91,8 +91,8 @@ const Sort: FC<Props> = ({
         className="ml-px cursor-pointer rounded-r-lg border-none bg-components-button-tertiary-bg p-2 hover:bg-components-button-tertiary-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
         onClick={() => onSelect(`${order ? '' : '-'}${value}`)}
       >
-        {!order && <RiSortAsc className="h-4 w-4 text-components-button-tertiary-text" aria-hidden="true" />}
-        {order && <RiSortDesc className="h-4 w-4 text-components-button-tertiary-text" aria-hidden="true" />}
+        {!order && <RiSortAsc className="size-4 text-components-button-tertiary-text" aria-hidden="true" />}
+        {order && <RiSortDesc className="size-4 text-components-button-tertiary-text" aria-hidden="true" />}
       </button>
     </div>
 
diff --git a/web/app/components/base/spinner/index.tsx b/web/app/components/base/spinner/index.tsx
index 48ee65b99f..f457d8d07c 100644
--- a/web/app/components/base/spinner/index.tsx
+++ b/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! border-0! p-0! whitespace-nowrap! [clip:rect(0,0,0,0)]!"
+        className="absolute! -m-px! size-px! overflow-hidden! border-0! p-0! whitespace-nowrap! [clip:rect(0,0,0,0)]!"
       >
         Loading...
       </span>
diff --git a/web/app/components/base/svg/index.tsx b/web/app/components/base/svg/index.tsx
index 2cfc0d9416..0d212a4191 100644
--- a/web/app/components/base/svg/index.tsx
+++ b/web/app/components/base/svg/index.tsx
@@ -14,7 +14,7 @@ const SVGBtn = ({
 }: ISVGBtnProps) => {
   return (
     <ActionButton onClick={() => { setIsSVG(prevIsSVG => !prevIsSVG) }}>
-      <div className={cn('h-4 w-4', isSVG ? s.svgIconed : s.svgIcon)}></div>
+      <div className={cn('size-4', isSVG ? s.svgIconed : s.svgIcon)}></div>
     </ActionButton>
   )
 }
diff --git a/web/app/components/base/tab-slider-new/index.stories.tsx b/web/app/components/base/tab-slider-new/index.stories.tsx
index 83abb17974..75cec25fd6 100644
--- a/web/app/components/base/tab-slider-new/index.stories.tsx
+++ b/web/app/components/base/tab-slider-new/index.stories.tsx
@@ -4,8 +4,8 @@ import { useState } from 'react'
 import TabSliderNew from '.'
 
 const OPTIONS = [
-  { value: 'visual', text: 'Visual builder', icon: <RiSparklingFill className="mr-2 h-4 w-4 text-primary-500" /> },
-  { value: 'code', text: 'Code', icon: <RiTerminalBoxLine className="mr-2 h-4 w-4 text-text-tertiary" /> },
+  { value: 'visual', text: 'Visual builder', icon: <RiSparklingFill className="mr-2 size-4 text-primary-500" /> },
+  { value: 'code', text: 'Code', icon: <RiTerminalBoxLine className="mr-2 size-4 text-text-tertiary" /> },
 ]
 
 const TabSliderNewDemo = ({
diff --git a/web/app/components/base/tab-slider-plain/index.tsx b/web/app/components/base/tab-slider-plain/index.tsx
index 5db3d416c9..a70d8597de 100644
--- a/web/app/components/base/tab-slider-plain/index.tsx
+++ b/web/app/components/base/tab-slider-plain/index.tsx
@@ -43,7 +43,7 @@ const Item: FC<ItemProps> = ({
       {isActive && (
         <div
           data-testid="tab-active-indicator"
-          className="absolute right-0 bottom-0 left-0 h-0.5 bg-util-colors-blue-brand-blue-brand-600"
+          className="absolute inset-x-0 bottom-0 h-0.5 bg-util-colors-blue-brand-blue-brand-600"
         >
         </div>
       )}
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index 81f4d12af5..36760b2458 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -70,17 +70,17 @@ const TagInput: FC<TagInputProps> = ({ items, onChange, disableAdd, disableRemov
             <button
               type="button"
               aria-label={`${t('operation.remove', { ns: 'common' })} ${item}`}
-              className="flex h-4 w-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+              className="flex size-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
               onClick={() => handleRemove(index)}
             >
-              <span className="ml-0.5 i-ri-close-line h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" />
+              <span className="ml-0.5 i-ri-close-line size-3.5 text-text-tertiary" aria-hidden="true" />
             </button>
           )}
         </div>
       ))}
       {!disableAdd && (
         <div className={cn('group/tag-add mt-1 flex items-center gap-x-0.5', !isSpecialMode ? 'rounded-md border border-dashed border-divider-deep px-1.5' : '')}>
-          {!isSpecialMode && !focused && <span className="i-ri-add-line h-3.5 w-3.5 text-text-placeholder group-hover/tag-add:text-text-secondary" />}
+          {!isSpecialMode && !focused && <span className="i-ri-add-line size-3.5 text-text-placeholder group-hover/tag-add:text-text-secondary" />}
           <AutosizeInput
             inputClassName={cn('appearance-none text-text-primary caret-[#295EFF] outline-hidden placeholder:text-text-placeholder group-hover/tag-add:placeholder:text-text-secondary', isSpecialMode ? 'bg-transparent' : '', inputClassName)}
             className={cn(!isInWorkflow && 'max-w-[300px]', isInWorkflow && 'max-w-[146px]', 'overflow-hidden rounded-md py-1 system-xs-regular', isSpecialMode && 'border border-transparent px-1.5', focused && isSpecialMode && 'border-dashed border-divider-deep')}
diff --git a/web/app/components/base/tag/__tests__/index.spec.tsx b/web/app/components/base/tag/__tests__/index.spec.tsx
index cf3c2aaded..2e13cee74b 100644
--- a/web/app/components/base/tag/__tests__/index.spec.tsx
+++ b/web/app/components/base/tag/__tests__/index.spec.tsx
@@ -24,8 +24,7 @@ describe('Tag Component', () => {
         'rounded-md',
         'px-2.5',
         'py-px',
-        'text-xs',
-        'leading-5',
+        'text-xs/5',
       )
     })
   })
diff --git a/web/app/components/base/tag/index.tsx b/web/app/components/base/tag/index.tsx
index 251df7d0d5..c027fb17bb 100644
--- a/web/app/components/base/tag/index.tsx
+++ b/web/app/components/base/tag/index.tsx
@@ -31,7 +31,7 @@ const COLOR_MAP = {
 export default function Tag({ children, color = 'green', className = '', bordered = false, hideBg = false }: ITagProps) {
   return (
     <div className={
-      cn('inline-flex shrink-0 items-center rounded-md px-2.5 py-px text-xs leading-5', COLOR_MAP[color] ? `${COLOR_MAP[color].text} ${COLOR_MAP[color].bg}` : '', bordered ? 'border border-divider-regular' : '', hideBg ? 'bg-transparent' : '', className)
+      cn('inline-flex shrink-0 items-center rounded-md px-2.5 py-px text-xs/5', COLOR_MAP[color] ? `${COLOR_MAP[color].text} ${COLOR_MAP[color].bg}` : '', bordered ? 'border border-divider-regular' : '', hideBg ? 'bg-transparent' : '', className)
     }
     >
       {children}
diff --git a/web/app/components/base/theme-selector.tsx b/web/app/components/base/theme-selector.tsx
index 67dc7b7b29..e8bb0101cd 100644
--- a/web/app/components/base/theme-selector.tsx
+++ b/web/app/components/base/theme-selector.tsx
@@ -34,9 +34,9 @@ export default function ThemeSelector() {
 
   const getCurrentIcon = () => {
     switch (theme) {
-      case 'light': return <span className="i-ri-sun-line h-4 w-4 text-text-tertiary" />
-      case 'dark': return <span className="i-ri-moon-line h-4 w-4 text-text-tertiary" />
-      default: return <span className="i-ri-computer-line h-4 w-4 text-text-tertiary" />
+      case 'light': return <span className="i-ri-sun-line size-4 text-text-tertiary" />
+      case 'dark': return <span className="i-ri-moon-line size-4 text-text-tertiary" />
+      default: return <span className="i-ri-computer-line size-4 text-text-tertiary" />
     }
   }
 
@@ -55,17 +55,17 @@ export default function ThemeSelector() {
       <DropdownMenuContent placement="bottom-end" sideOffset={6} popupClassName="w-[144px]">
         <DropdownMenuRadioGroup value={theme || 'system'} onValueChange={handleThemeValueChange}>
           <DropdownMenuRadioItem value="light" closeOnClick>
-            <span className="i-ri-sun-line h-4 w-4 text-text-tertiary" />
+            <span className="i-ri-sun-line size-4 text-text-tertiary" />
             <span className="grow px-1 system-md-regular">{t('theme.light', { ns: 'common' })}</span>
             <DropdownMenuRadioItemIndicator data-testid="light-icon" />
           </DropdownMenuRadioItem>
           <DropdownMenuRadioItem value="dark" closeOnClick>
-            <span className="i-ri-moon-line h-4 w-4 text-text-tertiary" />
+            <span className="i-ri-moon-line size-4 text-text-tertiary" />
             <span className="grow px-1 system-md-regular">{t('theme.dark', { ns: 'common' })}</span>
             <DropdownMenuRadioItemIndicator data-testid="dark-icon" />
           </DropdownMenuRadioItem>
           <DropdownMenuRadioItem value="system" closeOnClick>
-            <span className="i-ri-computer-line h-4 w-4 text-text-tertiary" />
+            <span className="i-ri-computer-line size-4 text-text-tertiary" />
             <span className="grow px-1 system-md-regular">{t('theme.auto', { ns: 'common' })}</span>
             <DropdownMenuRadioItemIndicator data-testid="system-icon" />
           </DropdownMenuRadioItem>
diff --git a/web/app/components/base/theme-switcher.tsx b/web/app/components/base/theme-switcher.tsx
index 0f8212348e..6ac0e0f0f7 100644
--- a/web/app/components/base/theme-switcher.tsx
+++ b/web/app/components/base/theme-switcher.tsx
@@ -24,7 +24,7 @@ export default function ThemeSwitcher() {
         data-testid="system-theme-container"
       >
         <div className="p-0.5">
-          <span className="i-ri-computer-line h-4 w-4" />
+          <span className="i-ri-computer-line size-4" />
         </div>
       </button>
       <div className={cn('h-[14px] w-px bg-transparent', theme === 'dark' && 'bg-divider-regular')} data-testid="divider"></div>
@@ -39,7 +39,7 @@ export default function ThemeSwitcher() {
         data-testid="light-theme-container"
       >
         <div className="p-0.5">
-          <span className="i-ri-sun-line h-4 w-4" />
+          <span className="i-ri-sun-line size-4" />
         </div>
       </button>
       <div className={cn('h-[14px] w-px bg-transparent', theme === 'system' && 'bg-divider-regular')} data-testid="divider"></div>
@@ -54,7 +54,7 @@ export default function ThemeSwitcher() {
         data-testid="dark-theme-container"
       >
         <div className="p-0.5">
-          <span className="i-ri-moon-line h-4 w-4" />
+          <span className="i-ri-moon-line size-4" />
         </div>
       </button>
     </div>
diff --git a/web/app/components/base/voice-input/index.stories.tsx b/web/app/components/base/voice-input/index.stories.tsx
index efbc3bb08d..d46eac9f5f 100644
--- a/web/app/components/base/voice-input/index.stories.tsx
+++ b/web/app/components/base/voice-input/index.stories.tsx
@@ -42,7 +42,7 @@ const VoiceInputMock = ({ onConverted, onCancel }: any) => {
         </div>
 
         {state === 'converting' && (
-          <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-primary-700 border-t-transparent" />
+          <div className="mr-2 size-4 animate-spin rounded-full border-2 border-primary-700 border-t-transparent" />
         )}
 
         <div className="z-10 grow">
@@ -56,16 +56,16 @@ const VoiceInputMock = ({ onConverted, onCancel }: any) => {
 
         {state === 'recording' && (
           <div
-            className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-primary-100"
+            className="mr-1 flex size-8 cursor-pointer items-center justify-center rounded-lg hover:bg-primary-100"
             onClick={handleStop}
           >
-            <div className="h-5 w-5 rounded-sm bg-primary-600" />
+            <div className="size-5 rounded-sm bg-primary-600" />
           </div>
         )}
 
         {state === 'converting' && (
           <div
-            className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-200"
+            className="mr-1 flex size-8 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-200"
             onClick={onCancel}
           >
             <span className="text-lg text-gray-500">×</span>
@@ -177,7 +177,7 @@ const ChatInputWithVoiceDemo = () => {
       {/* Existing messages */}
       <div className="mb-4 h-64 space-y-3 overflow-y-auto">
         <div className="flex gap-3">
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white">
+          <div className="flex size-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white">
             U
           </div>
           <div className="flex-1">
@@ -187,7 +187,7 @@ const ChatInputWithVoiceDemo = () => {
           </div>
         </div>
         <div className="flex gap-3">
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-sm text-white">
+          <div className="flex size-8 items-center justify-center rounded-full bg-green-500 text-sm text-white">
             A
           </div>
           <div className="flex-1">
diff --git a/web/app/components/base/voice-input/index.tsx b/web/app/components/base/voice-input/index.tsx
index 91b746bcda..ffaf837a9c 100644
--- a/web/app/components/base/voice-input/index.tsx
+++ b/web/app/components/base/voice-input/index.tsx
@@ -164,7 +164,7 @@ const VoiceInput = ({
       <div className="absolute inset-[1.5px] flex items-center overflow-hidden rounded-[10.5px] bg-primary-25 py-[14px] pr-[6.5px] pl-[14.5px]">
         <canvas id="voice-input-record" className="absolute bottom-0 left-0 h-4 w-full" />
         {
-          startConvert && <div className="mr-2 i-ri-loader-2-line h-4 w-4 animate-spin text-primary-700" data-testid="voice-input-loader" />
+          startConvert && <div className="mr-2 i-ri-loader-2-line size-4 animate-spin text-primary-700" data-testid="voice-input-loader" />
         }
         <div className="grow">
           {
@@ -185,22 +185,22 @@ const VoiceInput = ({
         {
           startRecord && (
             <div
-              className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-primary-100"
+              className="mr-1 flex size-8 cursor-pointer items-center justify-center rounded-lg hover:bg-primary-100"
               onClick={handleStopRecorder}
               data-testid="voice-input-stop"
             >
-              <div className="i-ri-stop-circle-line h-5 w-5 text-primary-600" />
+              <div className="i-ri-stop-circle-line size-5 text-primary-600" />
             </div>
           )
         }
         {
           startConvert && (
             <div
-              className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-200"
+              className="mr-1 flex size-8 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-200"
               onClick={onCancel}
               data-testid="voice-input-cancel"
             >
-              <div className="i-ri-close-line h-4 w-4 text-gray-500" />
+              <div className="i-ri-close-line size-4 text-gray-500" />
             </div>
           )
         }
diff --git a/web/app/components/billing/billing-page/index.tsx b/web/app/components/billing/billing-page/index.tsx
index 835b1830fb..afafbe447f 100644
--- a/web/app/components/billing/billing-page/index.tsx
+++ b/web/app/components/billing/billing-page/index.tsx
@@ -49,7 +49,7 @@ const Billing: FC = () => {
           </div>
           <span className="inline-flex h-8 w-24 items-center justify-center gap-0.5 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-2 text-saas-dify-blue-accessible shadow-[0_1px_2px_rgba(9,9,11,0.05)] backdrop-blur-[5px]">
             <span className="system-sm-medium leading-none">{t('viewBillingAction', { ns: 'billing' })}</span>
-            <RiArrowRightUpLine className="h-4 w-4" />
+            <RiArrowRightUpLine className="size-4" />
           </span>
         </button>
       )}
diff --git a/web/app/components/billing/plan/index.tsx b/web/app/components/billing/plan/index.tsx
index 498736475c..69551c68bb 100644
--- a/web/app/components/billing/plan/index.tsx
+++ b/web/app/components/billing/plan/index.tsx
@@ -113,14 +113,14 @@ const PlanComp: FC<Props> = ({
           <div className="flex shrink-0 items-center gap-1">
             {enableEducationPlan && (!isEducationAccount || isAboutToExpire) && (
               <Button variant="ghost" onClick={handleVerify} disabled={isPending}>
-                <RiGraduationCapLine className="mr-1 h-4 w-4" />
+                <RiGraduationCapLine className="mr-1 size-4" />
                 {t('toVerified', { ns: 'education' })}
                 {isPending && <Loading className="ml-1 animate-spin-slow" />}
               </Button>
             )}
             {enableEducationPlan && isEducationAccount && type === Plan.sandbox && isCurrentWorkspaceManager && (
               <Button variant="ghost" onClick={handleEducationDiscount} disabled={isEducationDiscountLoading}>
-                <RiGraduationCapLine className="mr-1 h-4 w-4" />
+                <RiGraduationCapLine className="mr-1 size-4" />
                 {t('useEducationDiscount', { ns: 'education' })}
                 {isEducationDiscountLoading && <Loading className="ml-1 animate-spin-slow" />}
               </Button>
diff --git a/web/app/components/billing/pricing/index.tsx b/web/app/components/billing/pricing/index.tsx
index 6d9b0f67cf..268c655e85 100644
--- a/web/app/components/billing/pricing/index.tsx
+++ b/web/app/components/billing/pricing/index.tsx
@@ -61,13 +61,13 @@ const Pricing: FC<PricingProps> = ({
       }}
     >
       <DialogContent
-        className="inset-0 h-full max-h-none w-full max-w-none translate-x-0 translate-y-0 overflow-hidden rounded-none border-none bg-saas-background p-0 shadow-none"
+        className="inset-0 size-full max-h-none max-w-none translate-0 overflow-hidden rounded-none border-none bg-saas-background p-0 shadow-none"
       >
         <ScrollAreaRoot className={pricingScrollAreaClassNames.root}>
           <ScrollAreaViewport className={pricingScrollAreaClassNames.viewport}>
             <ScrollAreaContent className={pricingScrollAreaClassNames.content}>
               <div className="relative grid min-h-full grid-rows-[1fr_auto_auto_1fr] overflow-hidden">
-                <div className="absolute -top-12 right-0 left-0 -z-10">
+                <div className="absolute inset-x-0 -top-12 -z-10">
                   <NoiseTop />
                 </div>
                 <Header onClose={onCancel} />
@@ -84,7 +84,7 @@ const Pricing: FC<PricingProps> = ({
                   canPay={canPay}
                 />
                 <Footer pricingPageURL={pricingPageURL} currentCategory={currentCategory} />
-                <div className="absolute right-0 -bottom-12 left-0 -z-10">
+                <div className="absolute inset-x-0 -bottom-12 -z-10">
                   <NoiseBottom />
                 </div>
               </div>
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
index 5e3f1cab0d..1e40377db2 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
@@ -50,7 +50,7 @@ const Button = ({
         {!isPlanDisabled && <span className="i-ri-arrow-right-line size-5 shrink-0" />}
       </button>
       {warningText && (
-        <div className="absolute top-full right-0 left-0 mt-1.5 text-left system-2xs-medium text-text-tertiary">
+        <div className="absolute inset-x-0 top-full mt-1.5 text-left system-2xs-medium text-text-tertiary">
           {warningText}
         </div>
       )}
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
index 8dee91d4a2..5851a47e87 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
@@ -23,7 +23,7 @@ const STYLE_MAP = {
     icon: <Premium />,
     bg: 'bg-billing-plan-card-premium-bg opacity-10',
     noise: (
-      <div className="absolute -top-12 right-0 left-0 -z-10">
+      <div className="absolute inset-x-0 -top-12 -z-10">
         <PremiumNoise />
       </div>
     ),
@@ -32,7 +32,7 @@ const STYLE_MAP = {
     icon: <Enterprise />,
     bg: 'bg-billing-plan-card-enterprise-bg opacity-10',
     noise: (
-      <div className="absolute -top-12 right-0 left-0 -z-10">
+      <div className="absolute inset-x-0 -top-12 -z-10">
         <EnterpriseNoise />
       </div>
     ),
diff --git a/web/app/components/billing/usage-info/index.tsx b/web/app/components/billing/usage-info/index.tsx
index ee1929863f..6129c92a4e 100644
--- a/web/app/components/billing/usage-info/index.tsx
+++ b/web/app/components/billing/usage-info/index.tsx
@@ -174,7 +174,7 @@ const UsageInfo: FC<Props> = ({
   return (
     <div className={cn('flex flex-col gap-2 rounded-xl bg-components-panel-bg p-4', className)}>
       {!hideIcon && Icon && (
-        <Icon className="h-4 w-4 text-text-tertiary" />
+        <Icon className="size-4 text-text-tertiary" />
       )}
       <div className="flex items-center gap-1">
         <div className="system-xs-medium text-text-tertiary">{name}</div>
diff --git a/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
index 1ea03c7bc6..06be55580d 100644
--- a/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
@@ -19,17 +19,17 @@ const ChatPreviewCard = ({
     <div className="flex h-[320px] grow basis-1/2 overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border-subtle bg-background-default-burn">
       <div className="flex h-full w-[232px] shrink-0 flex-col p-1 pr-0">
         <div className="flex items-center gap-3 p-3 pr-2">
-          <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-blue-light-solid')}>
-            <span className="i-custom-vender-solid-communication-bubble-text-mod h-4 w-4 text-components-avatar-shape-fill-stop-100" />
+          <div className={cn('inline-flex size-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-blue-light-solid')}>
+            <span className="i-custom-vender-solid-communication-bubble-text-mod size-4 text-components-avatar-shape-fill-stop-100" />
           </div>
           <div className="grow system-md-semibold text-text-secondary">Chatflow App</div>
           <div className="p-1.5">
-            <span className="i-ri-layout-left-2-line h-4 w-4 text-text-tertiary" />
+            <span className="i-ri-layout-left-2-line size-4 text-text-tertiary" />
           </div>
         </div>
         <div className="shrink-0 px-4 py-3">
           <Button variant="secondary-accent" className="w-full justify-center">
-            <span className="mr-1 i-ri-edit-box-line h-4 w-4" />
+            <span className="mr-1 i-ri-edit-box-line size-4" />
             <div className="p-1 opacity-20">
               <div className="h-2 w-[94px] rounded-xs bg-text-accent-light-mode-only"></div>
             </div>
@@ -48,7 +48,7 @@ const ChatPreviewCard = ({
         </div>
         <div className="flex shrink-0 items-center justify-between p-3">
           <div className="p-1.5">
-            <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+            <span className="i-ri-equalizer-2-line size-4 text-text-tertiary" />
           </div>
           <div className="flex items-center gap-1.5">
             <PoweredByBrand
diff --git a/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
index b4f30827bc..0aa97e9e72 100644
--- a/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
@@ -19,12 +19,12 @@ const WorkflowPreviewCard = ({
     <div className="flex h-[320px] grow basis-1/2 flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border-subtle bg-background-default-burn">
       <div className="w-full border-b-[0.5px] border-divider-subtle p-4 pb-0">
         <div className="mb-2 flex items-center gap-3">
-          <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-indigo-solid')}>
-            <span className="i-ri-exchange-2-fill h-4 w-4 text-components-avatar-shape-fill-stop-100" />
+          <div className={cn('inline-flex size-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-indigo-solid')}>
+            <span className="i-ri-exchange-2-fill size-4 text-components-avatar-shape-fill-stop-100" />
           </div>
           <div className="grow system-md-semibold text-text-secondary">Workflow App</div>
           <div className="p-1.5">
-            <span className="i-ri-layout-left-2-line h-4 w-4 text-text-tertiary" />
+            <span className="i-ri-layout-left-2-line size-4 text-text-tertiary" />
           </div>
         </div>
         <div className="flex items-center gap-4">
@@ -44,7 +44,7 @@ const WorkflowPreviewCard = ({
             <div className="h-2 w-10 rounded-xs bg-text-quaternary opacity-20"></div>
           </Button>
           <Button variant="primary" size="small" disabled>
-            <span className="mr-1 i-ri-play-large-line h-4 w-4" />
+            <span className="mr-1 i-ri-play-large-line size-4" />
             <span>Execute</span>
           </Button>
         </div>
diff --git a/web/app/components/custom/custom-web-app-brand/index.tsx b/web/app/components/custom/custom-web-app-brand/index.tsx
index 53e6ff36ec..0eae4261cc 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -64,7 +64,7 @@ const CustomWebAppBrand = () => {
                 className="relative mr-2"
                 disabled={uploadDisabled}
               >
-                <span className="mr-1 i-ri-image-add-line h-4 w-4" />
+                <span className="mr-1 i-ri-image-add-line size-4" />
                 {
                   (webappLogo || fileId)
                     ? t('change', { ns: 'custom' })
@@ -87,7 +87,7 @@ const CustomWebAppBrand = () => {
                 className="relative mr-2"
                 disabled={true}
               >
-                <span className="mr-1 i-ri-loader-2-line h-4 w-4 animate-spin" />
+                <span className="mr-1 i-ri-loader-2-line size-4 animate-spin" />
                 {t('uploading', { ns: 'custom' })}
               </Button>
             )
diff --git a/web/app/components/datasets/common/__tests__/chunking-mode-label.spec.tsx b/web/app/components/datasets/common/__tests__/chunking-mode-label.spec.tsx
index 76c20c1016..92ea3929dc 100644
--- a/web/app/components/datasets/common/__tests__/chunking-mode-label.spec.tsx
+++ b/web/app/components/datasets/common/__tests__/chunking-mode-label.spec.tsx
@@ -55,7 +55,7 @@ describe('ChunkingModeLabel', () => {
     it('should apply correct icon size classes', () => {
       const { container } = render(<ChunkingModeLabel isGeneralMode={true} isQAMode={false} />)
       const iconElement = container.querySelector('svg')
-      expect(iconElement).toHaveClass('h-3', 'w-3')
+      expect(iconElement).toHaveClass('size-3')
     })
   })
 })
diff --git a/web/app/components/datasets/common/chunking-mode-label.tsx b/web/app/components/datasets/common/chunking-mode-label.tsx
index f85f9d7a36..7afc56f0d6 100644
--- a/web/app/components/datasets/common/chunking-mode-label.tsx
+++ b/web/app/components/datasets/common/chunking-mode-label.tsx
@@ -21,7 +21,7 @@ const ChunkingModeLabel: FC<Props> = ({
   return (
     <Badge>
       <div className="flex h-full items-center space-x-0.5 text-text-tertiary">
-        <TypeIcon className="h-3 w-3" />
+        <TypeIcon className="size-3" />
         <span className="system-2xs-medium-uppercase">{isGeneralMode ? `${t('chunkingMode.general', { ns: 'dataset' })}${generalSuffix}` : t('chunkingMode.parentChild', { ns: 'dataset' })}</span>
       </div>
     </Badge>
diff --git a/web/app/components/datasets/common/document-picker/index.tsx b/web/app/components/datasets/common/document-picker/index.tsx
index 07f7443764..24a84357ef 100644
--- a/web/app/components/datasets/common/document-picker/index.tsx
+++ b/web/app/components/datasets/common/document-picker/index.tsx
@@ -83,10 +83,10 @@ function DocumentPickerTriggerValue({
           <span className="max-w-[280px] min-w-0 truncate system-md-semibold text-text-primary">
             {document?.name || '--'}
           </span>
-          <ArrowIcon className="h-4 w-4 shrink-0 text-text-primary" aria-hidden="true" />
+          <ArrowIcon className="size-4 shrink-0 text-text-primary" aria-hidden="true" />
         </span>
         <span className="flex h-3 max-w-[300px] items-center gap-0.5 text-text-tertiary">
-          <TypeIcon className="h-3 w-3 shrink-0" />
+          <TypeIcon className="size-3 shrink-0" />
           <span className={cn('truncate system-2xs-medium-uppercase', isParentChild && 'mt-0.5')}>
             {isGeneralMode && t('chunkingMode.general', { ns: 'dataset' })}
             {isQAMode && t('chunkingMode.qa', { ns: 'dataset' })}
@@ -153,7 +153,7 @@ export function DocumentPicker({
         aria-label={value?.name || t('operation.search', { ns: 'common' })}
         icon={false}
         className={cn(
-          'ml-1 flex h-auto w-auto rounded-lg border-0 bg-transparent px-2 py-1 hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active data-open:bg-state-base-hover',
+          'ml-1 flex size-auto rounded-lg border-0 bg-transparent px-2 py-1 hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active data-open:bg-state-base-hover',
         )}
       >
         <ComboboxValue>
diff --git a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
index 08053aa7bf..ce93201e81 100644
--- a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
@@ -56,7 +56,7 @@ const StatusAction: FC<Props> = ({
       }
       />
       <div className="relative z-10 flex h-full items-center space-x-2">
-        <Icon className={cn('h-4 w-4', color)} />
+        <Icon className={cn('size-4', color)} />
         <div className="text-[13px] font-normal text-text-secondary">{description}</div>
         {onAction && actionText && (
           <>
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx
index af405b6301..b5a744daac 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx
@@ -54,10 +54,10 @@ const ImageItem = ({
       {
         showDeleteAction && (
           <Button
-            className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
+            className="absolute -top-1.5 -right-1.5 z-11 hidden size-5 rounded-full p-0 group-hover/file-image:flex"
             onClick={handleRemove}
           >
-            <RiCloseLine className="h-4 w-4 text-components-button-secondary-text" />
+            <RiCloseLine className="size-4 text-components-button-secondary-text" />
           </Button>
         )
       }
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx
index 49c95852be..1e9ad455ad 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx
@@ -54,10 +54,10 @@ const ImageItem = ({
       {
         showDeleteAction && (
           <Button
-            className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
+            className="absolute -top-1.5 -right-1.5 z-11 hidden size-5 rounded-full p-0 group-hover/file-image:flex"
             onClick={handleRemove}
           >
-            <RiCloseLine className="h-4 w-4 text-components-button-secondary-text" />
+            <RiCloseLine className="size-4 text-components-button-secondary-text" />
           </Button>
         )
       }
diff --git a/web/app/components/datasets/common/retrieval-param-config/index.tsx b/web/app/components/datasets/common/retrieval-param-config/index.tsx
index 93392f2821..7cc2dd56b4 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -153,7 +153,7 @@ const RetrievalParamConfig: FC<Props> = ({
                 />
                 {showMultiModalTip && (
                   <div className="mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]">
-                    <div className="absolute top-0 right-0 bottom-0 left-0 bg-dataset-warning-message-bg opacity-40" />
+                    <div className="absolute inset-0 bg-dataset-warning-message-bg opacity-40" />
                     <div className="p-1">
                       <AlertTriangle className="size-4 text-text-warning-secondary" />
                     </div>
@@ -277,7 +277,7 @@ const RetrievalParamConfig: FC<Props> = ({
                   />
                   {showMultiModalTip && (
                     <div className="mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]">
-                      <div className="absolute top-0 right-0 bottom-0 left-0 bg-dataset-warning-message-bg opacity-40" />
+                      <div className="absolute inset-0 bg-dataset-warning-message-bg opacity-40" />
                       <div className="p-1">
                         <AlertTriangle className="size-4 text-text-warning-secondary" />
                       </div>
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
index 9b4cf2c488..cc2c159fa2 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
@@ -87,7 +87,7 @@ const Uploader: FC<Props> = ({ file, updateFile, className }) => {
         {!file && (
           <div className={cn('flex h-12 items-center rounded-[10px] border border-dashed border-components-dropzone-border bg-components-dropzone-bg text-sm font-normal', dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
             <div className="flex w-full items-center justify-center space-x-2">
-              <RiUploadCloud2Line className="h-6 w-6 text-text-tertiary" />
+              <RiUploadCloud2Line className="size-6 text-text-tertiary" />
               <div className="text-text-tertiary">
                 {t('dslUploader.button', { ns: 'app' })}
                 <button
@@ -99,16 +99,16 @@ const Uploader: FC<Props> = ({ file, updateFile, className }) => {
                 </button>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
+            {dragging && <div ref={dragRef} className="absolute top-0 left-0 size-full" />}
           </div>
         )}
         {file && (
           <div className="group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover">
             <div className="flex items-center justify-center p-3">
-              <RiNodeTree className="h-6 w-6 shrink-0 text-text-secondary" />
+              <RiNodeTree className="size-6 shrink-0 text-text-secondary" />
             </div>
             <div className="flex grow flex-col items-start gap-0.5 py-1 pr-2">
-              <span className="font-inter max-w-[calc(100%_-_30px)] overflow-hidden text-[12px] leading-4 font-medium text-ellipsis whitespace-nowrap text-text-secondary">
+              <span className="font-inter max-w-[calc(100%-30px)] overflow-hidden text-[12px] leading-4 font-medium text-ellipsis whitespace-nowrap text-text-secondary">
                 {file.name}
               </span>
               <div className="font-inter flex h-3 items-center gap-1 self-stretch text-[10px] leading-3 font-medium text-text-tertiary uppercase">
@@ -119,7 +119,7 @@ const Uploader: FC<Props> = ({ file, updateFile, className }) => {
             </div>
             <div className="hidden items-center pr-3 group-hover:flex">
               <ActionButton onClick={removeFile}>
-                <RiDeleteBinLine className="h-4 w-4 text-text-tertiary" />
+                <RiDeleteBinLine className="size-4 text-text-tertiary" />
               </ActionButton>
             </div>
           </div>
diff --git a/web/app/components/datasets/create/file-preview/index.tsx b/web/app/components/datasets/create/file-preview/index.tsx
index ae1cdd3dd1..fe86ea69cc 100644
--- a/web/app/components/datasets/create/file-preview/index.tsx
+++ b/web/app/components/datasets/create/file-preview/index.tsx
@@ -52,11 +52,11 @@ const FilePreview = ({
           <span>{t('stepOne.filePreview', { ns: 'datasetCreation' })}</span>
           <button
             type="button"
-            className="flex h-6 w-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            className="flex size-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             aria-label={t('operation.close', { ns: 'common' })}
             onClick={hidePreview}
           >
-            <XMarkIcon className="h-4 w-4" aria-hidden="true"></XMarkIcon>
+            <XMarkIcon className="size-4" aria-hidden="true"></XMarkIcon>
           </button>
         </div>
         <div className={cn(s.fileName, 'system-xs-medium')}>
diff --git a/web/app/components/datasets/create/file-uploader/components/file-list-item.tsx b/web/app/components/datasets/create/file-uploader/components/file-list-item.tsx
index 2f51a9f767..2092ee0a2c 100644
--- a/web/app/components/datasets/create/file-uploader/components/file-list-item.tsx
+++ b/web/app/components/datasets/create/file-uploader/components/file-list-item.tsx
@@ -53,7 +53,7 @@ const FileListItem = ({
       </div>
       <div className="flex shrink grow flex-col gap-0.5">
         <div className="flex w-full">
-          <div className="w-0 grow truncate text-sm leading-4 text-text-secondary">
+          <div className="w-0 grow truncate text-sm/4 text-text-secondary">
             {fileItem.file.name}
           </div>
         </div>
@@ -76,7 +76,7 @@ const FileListItem = ({
           <RiErrorWarningFill className="size-4 text-text-destructive" />
         )}
         <span
-          className="flex h-6 w-6 cursor-pointer items-center justify-center"
+          className="flex size-6 cursor-pointer items-center justify-center"
           onClick={handleRemove}
         >
           <RiDeleteBinLine className="size-4 text-text-tertiary" />
diff --git a/web/app/components/datasets/create/file-uploader/components/upload-dropzone.tsx b/web/app/components/datasets/create/file-uploader/components/upload-dropzone.tsx
index be05fd55ba..c9b363dce5 100644
--- a/web/app/components/datasets/create/file-uploader/components/upload-dropzone.tsx
+++ b/web/app/components/datasets/create/file-uploader/components/upload-dropzone.tsx
@@ -51,7 +51,7 @@ const UploadDropzone = ({
           dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent',
         )}
       >
-        <div className="flex min-h-5 items-center justify-center text-sm leading-4 text-text-secondary">
+        <div className="flex min-h-5 items-center justify-center text-sm/4 text-text-secondary">
           <span className="mr-2 i-ri-upload-cloud-2-line size-5" />
           <span>
             {supportBatchUpload
@@ -83,7 +83,7 @@ const UploadDropzone = ({
                 batchCount: fileUploadConfig.batch_count_limit,
               })}
         </div>
-        {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
+        {dragging && <div ref={dragRef} className="absolute top-0 left-0 size-full" />}
       </div>
     </>
   )
diff --git a/web/app/components/datasets/create/file-uploader/index.tsx b/web/app/components/datasets/create/file-uploader/index.tsx
index 0bf9c3c052..1b59edfe07 100644
--- a/web/app/components/datasets/create/file-uploader/index.tsx
+++ b/web/app/components/datasets/create/file-uploader/index.tsx
@@ -51,7 +51,7 @@ const FileUploader = ({
 
   return (
     <div className="mb-5 w-[640px]">
-      <div className={cn('mb-1 text-sm leading-6 font-semibold text-text-secondary', titleClassName)}>
+      <div className={cn('mb-1 text-sm/6 font-semibold text-text-secondary', titleClassName)}>
         {t('stepOne.uploader.title', { ns: 'datasetCreation' })}
       </div>
 
diff --git a/web/app/components/datasets/create/notion-page-preview/index.tsx b/web/app/components/datasets/create/notion-page-preview/index.tsx
index c2eed225c0..dabcf13131 100644
--- a/web/app/components/datasets/create/notion-page-preview/index.tsx
+++ b/web/app/components/datasets/create/notion-page-preview/index.tsx
@@ -54,11 +54,11 @@ const NotionPagePreview = ({
           <span>{t('stepOne.pagePreview', { ns: 'datasetCreation' })}</span>
           <button
             type="button"
-            className="flex h-6 w-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            className="flex size-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             aria-label={t('operation.close', { ns: 'common' })}
             onClick={hidePreview}
           >
-            <XMarkIcon className="h-4 w-4" aria-hidden="true"></XMarkIcon>
+            <XMarkIcon className="size-4" aria-hidden="true"></XMarkIcon>
           </button>
         </div>
         <div className={cn(s.fileName, 'system-xs-medium')}>
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 821e190b2d..e94a44ebb2 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -157,7 +157,7 @@ const StepOne = ({
   }, [dataSourceType, doOnStepChange, files, supportBatchUpload, notionPages, showPlanUpgradeModal, websitePages])
 
   return (
-    <div className="h-full w-full overflow-x-auto">
+    <div className="size-full overflow-x-auto">
       <div className="flex h-full w-full min-w-[1440px]">
         {/* Left Panel - Form */}
         <div className="relative h-full w-1/2 overflow-y-auto">
diff --git a/web/app/components/datasets/create/step-three/__tests__/index.spec.tsx b/web/app/components/datasets/create/step-three/__tests__/index.spec.tsx
index 1b64aea60a..f5b8eec015 100644
--- a/web/app/components/datasets/create/step-three/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/step-three/__tests__/index.spec.tsx
@@ -176,7 +176,7 @@ describe('StepThree', () => {
       const { container } = renderStepThree()
 
       const outerDiv = container.firstChild as HTMLElement
-      expect(outerDiv).toHaveClass('flex', 'h-full', 'max-h-full', 'w-full', 'justify-center', 'overflow-y-auto')
+      expect(outerDiv).toHaveClass('flex', 'size-full', 'max-h-full', 'justify-center', 'overflow-y-auto')
     })
   })
 
@@ -597,7 +597,7 @@ describe('StepThree', () => {
 
       const outerDiv = container.firstChild as HTMLElement
       expect(outerDiv).toHaveClass('flex')
-      expect(outerDiv).toHaveClass('h-full')
+      expect(outerDiv).toHaveClass('size-full')
       expect(outerDiv).toHaveClass('justify-center')
     })
 
diff --git a/web/app/components/datasets/create/step-three/index.tsx b/web/app/components/datasets/create/step-three/index.tsx
index 6d9a306bf6..94f8d25837 100644
--- a/web/app/components/datasets/create/step-three/index.tsx
+++ b/web/app/components/datasets/create/step-three/index.tsx
@@ -33,7 +33,7 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
   }
 
   return (
-    <div className="flex h-full max-h-full w-full justify-center overflow-y-auto">
+    <div className="flex size-full max-h-full justify-center overflow-y-auto">
       <div className="h-full max-w-[960px] shrink-0 grow overflow-y-auto px-14 sm:px-16">
         <div className="mx-auto max-w-[640px] pt-10 pb-8">
           {!datasetId && (
diff --git a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
index 8e32989d3f..ad217d5b9b 100644
--- a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
+++ b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
@@ -104,7 +104,7 @@ export const GeneralChunkingOptions: FC<GeneralChunkingOptionsProps> = ({
       actions={(
         <>
           <Button variant="secondary-accent" onClick={onPreview}>
-            <RiSearchEyeLine className="mr-0.5 h-4 w-4" />
+            <RiSearchEyeLine className="mr-0.5 size-4" />
             {t('stepTwo.previewChunk', { ns: 'datasetCreation' })}
           </Button>
           <Button variant="ghost" onClick={onReset}>
@@ -195,7 +195,7 @@ export const GeneralChunkingOptions: FC<GeneralChunkingOptionsProps> = ({
                   />
                   <Infotip
                     aria-label={t('stepTwo.QATip', { ns: 'datasetCreation' })}
-                    className="h-3.5 w-3.5"
+                    className="size-3.5"
                     iconClassName="h-full w-full"
                   >
                     {t('stepTwo.QATip', { ns: 'datasetCreation' })}
diff --git a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
index 2ddcc81d5e..0083901ff4 100644
--- a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
+++ b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
@@ -94,10 +94,10 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
       >
         <AlertDialogContent className="w-[432px]">
           <div className="flex flex-col gap-2 p-6 pb-4">
-            <AlertDialogTitle className="text-lg leading-7 font-semibold text-text-primary">
+            <AlertDialogTitle className="text-lg/7 font-semibold text-text-primary">
               {t('stepTwo.qaSwitchHighQualityTipTitle', { ns: 'datasetCreation' })}
             </AlertDialogTitle>
-            <AlertDialogDescription className="text-sm leading-5 text-text-secondary">
+            <AlertDialogDescription className="text-sm/5 text-text-secondary">
               {t('stepTwo.qaSwitchHighQualityTipContent', { ns: 'datasetCreation' })}
             </AlertDialogDescription>
           </div>
@@ -160,7 +160,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
       {/* High quality tip */}
       {!hasSetIndexType && indexType === IndexingType.QUALIFIED && (
         <div className="mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]">
-          <div className="absolute top-0 right-0 bottom-0 left-0 bg-dataset-warning-message-bg opacity-40"></div>
+          <div className="absolute inset-0 bg-dataset-warning-message-bg opacity-40"></div>
           <div className="p-1">
             <AlertTriangle className="size-4 text-text-warning-secondary" />
           </div>
diff --git a/web/app/components/datasets/create/step-two/components/option-card.tsx b/web/app/components/datasets/create/step-two/components/option-card.tsx
index 43f0924d92..c00baa0245 100644
--- a/web/app/components/datasets/create/step-two/components/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/components/option-card.tsx
@@ -22,9 +22,9 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
   return (
     <div className={cn('relative flex flex-1 overflow-hidden rounded-t-xl', isActive && activeClassName, !disabled && 'cursor-pointer')}>
       <div className="relative flex size-14 items-center justify-center overflow-hidden">
-        {isActive && effectImg && <img src={effectImg} className="absolute top-0 left-0 h-full w-full" alt="" width={56} height={56} />}
+        {isActive && effectImg && <img src={effectImg} className="absolute top-0 left-0 size-full" alt="" width={56} height={56} />}
         <div className="p-1">
-          <div className="flex size-8 justify-center rounded-lg border border-components-panel-border-subtle bg-background-default-dodge p-1.5 shadow-md">
+          <div className="flex action-btn-l justify-center border border-components-panel-border-subtle bg-background-default-dodge shadow-md">
             {icon}
           </div>
         </div>
diff --git a/web/app/components/datasets/create/step-two/components/parent-child-options.tsx b/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
index a7e447eaf7..d5d837982b 100644
--- a/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
+++ b/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
@@ -96,7 +96,7 @@ export const ParentChildOptions: FC<ParentChildOptionsProps> = ({
       actions={(
         <>
           <Button variant="secondary-accent" onClick={onPreview}>
-            <RiSearchEyeLine className="mr-0.5 h-4 w-4" />
+            <RiSearchEyeLine className="mr-0.5 size-4" />
             {t('stepTwo.previewChunk', { ns: 'datasetCreation' })}
           </Button>
           <Button variant="ghost" onClick={onReset}>
diff --git a/web/app/components/datasets/create/step-two/components/preview-panel.tsx b/web/app/components/datasets/create/step-two/components/preview-panel.tsx
index 9f10863288..41ae859775 100644
--- a/web/app/components/datasets/create/step-two/components/preview-panel.tsx
+++ b/web/app/components/datasets/create/step-two/components/preview-panel.tsx
@@ -141,7 +141,7 @@ export const PreviewPanel: FC<PreviewPanelProps> = ({
 
         {/* Idle State */}
         {isIdle && (
-          <div className="flex h-full w-full items-center justify-center">
+          <div className="flex size-full items-center justify-center">
             <div className="flex flex-col items-center justify-center gap-3">
               <RiSearchEyeLine className="size-10 text-text-empty-state-icon" />
               <p className="text-sm text-text-tertiary">
diff --git a/web/app/components/datasets/create/step-two/components/step-two-footer.tsx b/web/app/components/datasets/create/step-two/components/step-two-footer.tsx
index 768ed906ae..cbead04f6f 100644
--- a/web/app/components/datasets/create/step-two/components/step-two-footer.tsx
+++ b/web/app/components/datasets/create/step-two/components/step-two-footer.tsx
@@ -26,7 +26,7 @@ export const StepTwoFooter: FC<StepTwoFooterProps> = ({
     return (
       <div className="mt-8 flex items-center py-2">
         <Button onClick={onPrevious}>
-          <RiArrowLeftLine className="mr-1 h-4 w-4" />
+          <RiArrowLeftLine className="mr-1 size-4" />
           {t('stepTwo.previousStep', { ns: 'datasetCreation' })}
         </Button>
         <Button
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 3d87de985f..e3144c411d 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -195,7 +195,7 @@ const StepTwo: FC<StepTwoProps> = ({
   const showParentChildOption = (isInUpload && currentDataset!.doc_form === ChunkingMode.parentChild) || isUploadInEmptyDataset || isInInit
 
   return (
-    <div className="flex h-full w-full">
+    <div className="flex size-full">
       <div className={cn('relative h-full w-1/2 overflow-y-auto py-6', isMobile ? 'px-4' : 'px-12')}>
         <div className="mb-1 system-md-semibold text-text-secondary">{t('stepTwo.segmentation', { ns: 'datasetCreation' })}</div>
         {showGeneralOption && (
diff --git a/web/app/components/datasets/create/top-bar/__tests__/index.spec.tsx b/web/app/components/datasets/create/top-bar/__tests__/index.spec.tsx
index c038a371d6..b182efa59a 100644
--- a/web/app/components/datasets/create/top-bar/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/top-bar/__tests__/index.spec.tsx
@@ -364,7 +364,7 @@ describe('TopBar', () => {
       const { container } = renderTopBar({ activeIndex: 0 })
 
       // Assert - Check for centered positioning classes
-      const centeredContainer = container.querySelector('.absolute.left-1\\/2.top-1\\/2.-translate-x-1\\/2.-translate-y-1\\/2')
+      const centeredContainer = container.querySelector('.absolute.left-1\\/2.top-1\\/2.-translate-1\\/2')
       expect(centeredContainer).toBeInTheDocument()
     })
 
diff --git a/web/app/components/datasets/create/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index 43b07e5fb1..7741cb4140 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -36,7 +36,7 @@ export const TopBar: FC<TopBarProps> = (props) => {
           {t('steps.header.fallbackRoute', { ns: 'datasetCreation' })}
         </p>
       </Link>
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+      <div className="absolute top-1/2 left-1/2 -translate-1/2">
         <Stepper
           steps={Array.from({ length: 3 }, (_, i) => ({
             name: t(STEP_T_MAP[(i + 1) as keyof typeof STEP_T_MAP], { ns: 'datasetCreation' }),
diff --git a/web/app/components/datasets/create/website/base/error-message.tsx b/web/app/components/datasets/create/website/base/error-message.tsx
index 6b530192fb..74b80ef8cf 100644
--- a/web/app/components/datasets/create/website/base/error-message.tsx
+++ b/web/app/components/datasets/create/website/base/error-message.tsx
@@ -18,7 +18,7 @@ const ErrorMessage: FC<Props> = ({
   return (
     <div className={cn(className, 'border-t border-divider-subtle bg-dataset-warning-message-bg px-4 py-2 opacity-40')}>
       <div className="flex h-5 items-center">
-        <AlertTriangle className="mr-2 h-4 w-4 text-text-warning-secondary" />
+        <AlertTriangle className="mr-2 size-4 text-text-warning-secondary" />
         <div className="system-md-medium text-text-warning">{title}</div>
       </div>
       {errorMsg && (
diff --git a/web/app/components/datasets/create/website/base/options-wrap.tsx b/web/app/components/datasets/create/website/base/options-wrap.tsx
index 37e09db338..569b0c8ee4 100644
--- a/web/app/components/datasets/create/website/base/options-wrap.tsx
+++ b/web/app/components/datasets/create/website/base/options-wrap.tsx
@@ -39,10 +39,10 @@ const OptionsWrap: FC<Props> = ({
         onClick={foldToggle}
       >
         <div className="flex grow items-center">
-          <RiEqualizer2Line className="mr-1 h-4 w-4 text-text-secondary" />
+          <RiEqualizer2Line className="mr-1 size-4 text-text-secondary" />
           <span className="text-[13px] leading-[16px] font-semibold text-text-secondary uppercase">{t(`${I18N_PREFIX}.options`, { ns: 'datasetCreation' })}</span>
         </div>
-        <ChevronRight className={cn(!fold && 'rotate-90', 'h-4 w-4 shrink-0 text-text-tertiary')} />
+        <ChevronRight className={cn(!fold && 'rotate-90', 'size-4 shrink-0 text-text-tertiary')} />
       </div>
       {!fold && (
         <div className="mb-4">
diff --git a/web/app/components/datasets/create/website/preview.tsx b/web/app/components/datasets/create/website/preview.tsx
index edbd72d9a1..b475dff1f0 100644
--- a/web/app/components/datasets/create/website/preview.tsx
+++ b/web/app/components/datasets/create/website/preview.tsx
@@ -24,11 +24,11 @@ const WebsitePreview = ({
           <span>{t('stepOne.pagePreview', { ns: 'datasetCreation' })}</span>
           <button
             type="button"
-            className="flex h-6 w-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            className="flex size-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             aria-label={t('operation.close', { ns: 'common' })}
             onClick={hidePreview}
           >
-            <XMarkIcon className="h-4 w-4" aria-hidden="true"></XMarkIcon>
+            <XMarkIcon className="size-4" aria-hidden="true"></XMarkIcon>
           </button>
         </div>
         <div className="title-sm-semi-bold wrap-break-word text-text-primary">
diff --git a/web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx b/web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx
index b6b28a63fe..e4c4fe31c1 100644
--- a/web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx
+++ b/web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx
@@ -119,7 +119,7 @@ const DocumentTableRow = React.memo(({
                     className="cursor-pointer rounded-md p-1 hover:bg-state-base-hover"
                     onClick={handleRenameClick}
                   >
-                    <span className="i-ri-edit-line h-4 w-4 text-text-tertiary" />
+                    <span className="i-ri-edit-line size-4 text-text-tertiary" />
                   </div>
                 )}
               />
diff --git a/web/app/components/datasets/documents/components/document-list/components/sort-header.tsx b/web/app/components/datasets/documents/components/document-list/components/sort-header.tsx
index a8843b505f..5d79cfff3b 100644
--- a/web/app/components/datasets/documents/components/document-list/components/sort-header.tsx
+++ b/web/app/components/datasets/documents/components/document-list/components/sort-header.tsx
@@ -30,7 +30,7 @@ const SortHeader: FC<SortHeaderProps> = React.memo(({
       {label}
       <span
         className={cn(
-          'ml-0.5 i-ri-arrow-down-line h-3 w-3 transition-all',
+          'ml-0.5 i-ri-arrow-down-line size-3 transition-all',
           isActive ? 'text-text-tertiary' : 'text-text-disabled',
           isActive && !isDesc ? 'rotate-180' : '',
         )}
diff --git a/web/app/components/datasets/documents/components/documents-header.tsx b/web/app/components/datasets/documents/components/documents-header.tsx
index 9744831f9a..3e9f6463f7 100644
--- a/web/app/components/datasets/documents/components/documents-header.tsx
+++ b/web/app/components/datasets/documents/components/documents-header.tsx
@@ -128,7 +128,7 @@ const DocumentsHeader: FC<DocumentsHeaderProps> = ({
             href={docLink('/use-dify/knowledge/integrate-knowledge-within-application')}
           >
             <span>{t('list.learnMore', { ns: 'datasetDocuments' })}</span>
-            <RiExternalLinkLine className="h-3 w-3" />
+            <RiExternalLinkLine className="size-3" />
           </a>
         </div>
       </div>
@@ -192,7 +192,7 @@ const DocumentsHeader: FC<DocumentsHeaderProps> = ({
           )}
           {embeddingAvailable && (
             <Button variant="primary" onClick={onAddDocument} className="shrink-0">
-              <PlusIcon className="mr-2 h-4 w-4 stroke-current" />
+              <PlusIcon className="mr-2 size-4 stroke-current" />
               {addButtonText}
             </Button>
           )}
diff --git a/web/app/components/datasets/documents/components/list.tsx b/web/app/components/datasets/documents/components/list.tsx
index 64cb626c05..8bcac95e97 100644
--- a/web/app/components/datasets/documents/components/list.tsx
+++ b/web/app/components/datasets/documents/components/list.tsx
@@ -111,7 +111,7 @@ const DocumentList = ({
   }, [onUpdate])
 
   return (
-    <div className="relative mt-3 flex h-full w-full flex-col">
+    <div className="relative mt-3 flex size-full flex-col">
       <CheckboxGroup
         value={selectedIds}
         onValueChange={nextSelectedIds => onSelectedIdChange(nextSelectedIds)}
@@ -119,7 +119,7 @@ const DocumentList = ({
         className="relative h-0 grow overflow-x-auto"
       >
         <table className={`w-full max-w-full min-w-[700px] border-collapse border-0 text-sm ${s.documentTable}`}>
-          <thead className="h-8 border-b border-divider-subtle text-xs leading-8 font-medium text-text-tertiary uppercase">
+          <thead className="h-8 border-b border-divider-subtle text-xs/8 font-medium text-text-tertiary uppercase">
             <tr>
               <td className="w-12">
                 <div className="flex items-center" onClick={e => e.stopPropagation()}>
diff --git a/web/app/components/datasets/documents/components/operations.tsx b/web/app/components/datasets/documents/components/operations.tsx
index d4bd828de6..83b5a8d126 100644
--- a/web/app/components/datasets/documents/components/operations.tsx
+++ b/web/app/components/datasets/documents/components/operations.tsx
@@ -216,7 +216,7 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
                 </Popover>
               )
             : <Switch checked={enabled} onCheckedChange={v => handleSwitch(v ? 'enable' : 'disable')} size="md" />}
-          <Divider className="!mr-2 !ml-4 !h-3" type="vertical" />
+          <Divider className="mr-2! ml-4! h-3!" type="vertical" />
         </>
       )}
       {embeddingAvailable && (
@@ -232,7 +232,7 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
                     : 'border-none bg-transparent p-0.5 hover:bg-state-base-hover')}
                   onClick={() => router.push(`/datasets/${datasetId}/documents/${detail.id}/settings`)}
                 >
-                  <span aria-hidden className="i-ri-equalizer-2-line h-4 w-4 text-components-button-secondary-text" />
+                  <span aria-hidden className="i-ri-equalizer-2-line size-4 text-components-button-secondary-text" />
                 </button>
               )}
             />
@@ -246,10 +246,10 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
               className={cn(
                 isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail,
                 'inline-flex items-center justify-center',
-                !isListScene && '!h-8 !w-8 rounded-lg backdrop-blur-[5px]',
+                !isListScene && 'h-8! w-8! rounded-lg backdrop-blur-[5px]',
                 isOperationsMenuOpen
-                  ? '!shadow-none hover:!bg-state-base-hover'
-                  : isListScene && '!bg-transparent',
+                  ? 'shadow-none! hover:bg-state-base-hover!'
+                  : isListScene && 'bg-transparent!',
               )}
               onClick={(e) => {
                 e.stopPropagation()
@@ -257,7 +257,7 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
               }}
             >
               <div className={cn(s.commonIcon)}>
-                <span aria-hidden className="i-ri-more-fill h-4 w-4 text-components-button-secondary-text" />
+                <span aria-hidden className="i-ri-more-fill size-4 text-components-button-secondary-text" />
               </div>
             </DropdownMenuTrigger>
             <DropdownMenuContent
@@ -269,24 +269,24 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
                 {!archived && (
                   <>
                     <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={handleShowRename}>
-                      <span aria-hidden className="i-ri-edit-line h-4 w-4 text-text-tertiary" />
+                      <span aria-hidden className="i-ri-edit-line size-4 text-text-tertiary" />
                       <span className={s.actionName}>{t('list.table.rename', { ns: 'datasetDocuments' })}</span>
                     </button>
                     {data_source_type === DataSourceType.FILE && (
                       <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={handleDownloadClick}>
-                        <span aria-hidden className="i-ri-download-2-line h-4 w-4 text-text-tertiary" />
+                        <span aria-hidden className="i-ri-download-2-line size-4 text-text-tertiary" />
                         <span className={s.actionName}>{t('list.action.download', { ns: 'datasetDocuments' })}</span>
                       </button>
                     )}
                     {['notion_import', DataSourceType.WEB].includes(data_source_type) && (
                       <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={() => handleMenuOperation('sync')}>
-                        <span aria-hidden className="i-ri-loop-left-line h-4 w-4 text-text-tertiary" />
+                        <span aria-hidden className="i-ri-loop-left-line size-4 text-text-tertiary" />
                         <span className={s.actionName}>{t('list.action.sync', { ns: 'datasetDocuments' })}</span>
                       </button>
                     )}
                     {IS_CE_EDITION && (
                       <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={() => handleMenuOperation('summary')}>
-                        <span aria-hidden className="i-custom-vender-knowledge-search-lines-sparkle h-4 w-4 text-text-tertiary" />
+                        <span aria-hidden className="i-custom-vender-knowledge-search-lines-sparkle size-4 text-text-tertiary" />
                         <span className={s.actionName}>{t('list.action.summary', { ns: 'datasetDocuments' })}</span>
                       </button>
                     )}
@@ -296,7 +296,7 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
                 {archived && data_source_type === DataSourceType.FILE && (
                   <>
                     <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={handleDownloadClick}>
-                      <span aria-hidden className="i-ri-download-2-line h-4 w-4 text-text-tertiary" />
+                      <span aria-hidden className="i-ri-download-2-line size-4 text-text-tertiary" />
                       <span className={s.actionName}>{t('list.action.download', { ns: 'datasetDocuments' })}</span>
                     </button>
                     <Divider className="my-1" />
@@ -304,30 +304,30 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
                 )}
                 {!archived && display_status?.toLowerCase() === 'indexing' && (
                   <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={() => handleMenuOperation('pause')}>
-                    <span aria-hidden className="i-ri-pause-circle-line h-4 w-4 text-text-tertiary" />
+                    <span aria-hidden className="i-ri-pause-circle-line size-4 text-text-tertiary" />
                     <span className={s.actionName}>{t('list.action.pause', { ns: 'datasetDocuments' })}</span>
                   </button>
                 )}
                 {!archived && display_status?.toLowerCase() === 'paused' && (
                   <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={() => handleMenuOperation('resume')}>
-                    <span aria-hidden className="i-ri-play-circle-line h-4 w-4 text-text-tertiary" />
+                    <span aria-hidden className="i-ri-play-circle-line size-4 text-text-tertiary" />
                     <span className={s.actionName}>{t('list.action.resume', { ns: 'datasetDocuments' })}</span>
                   </button>
                 )}
                 {!archived && (
                   <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={() => handleMenuOperation('archive')}>
-                    <span aria-hidden className="i-ri-archive-2-line h-4 w-4 text-text-tertiary" />
+                    <span aria-hidden className="i-ri-archive-2-line size-4 text-text-tertiary" />
                     <span className={s.actionName}>{t('list.action.archive', { ns: 'datasetDocuments' })}</span>
                   </button>
                 )}
                 {archived && (
                   <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={() => handleMenuOperation('un_archive')}>
-                    <span aria-hidden className="i-ri-archive-2-line h-4 w-4 text-text-tertiary" />
+                    <span aria-hidden className="i-ri-archive-2-line size-4 text-text-tertiary" />
                     <span className={s.actionName}>{t('list.action.unarchive', { ns: 'datasetDocuments' })}</span>
                   </button>
                 )}
                 <button type="button" className={cn(menuDeleteActionClassName, 'text-left')} onClick={handleDeleteClick}>
-                  <span aria-hidden className="i-ri-delete-bin-line h-4 w-4 text-text-tertiary group-hover:text-text-destructive" />
+                  <span aria-hidden className="i-ri-delete-bin-line size-4 text-text-tertiary group-hover:text-text-destructive" />
                   <span className={cn(s.actionName, 'group-hover:text-text-destructive')}>{t('list.action.delete', { ns: 'datasetDocuments' })}</span>
                 </button>
               </div>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx
index 2ed589faf9..5261319e98 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx
@@ -29,7 +29,7 @@ const DatasourceIcon: FC<DatasourceIconProps> = ({
     }
     >
       <div
-        className="h-full w-full shrink-0 rounded-md bg-cover bg-center"
+        className="size-full shrink-0 rounded-md bg-cover bg-center"
         style={{
           backgroundImage: `url(${iconUrl})`,
         }}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
index c91012bf4a..3d3f1c5554 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
@@ -40,7 +40,7 @@ const Header = ({
                 aria-label={configurationTip}
                 onClick={onClickConfiguration}
               >
-                <span aria-hidden className="i-ri-equalizer-2-line h-4 w-4" />
+                <span aria-hidden className="i-ri-equalizer-2-line size-4" />
               </Button>
             )}
           />
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/file-list-item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/file-list-item.tsx
index 9bad3f3102..8430539e14 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/file-list-item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/file-list-item.tsx
@@ -58,7 +58,7 @@ const FileListItem = ({
         <div className="flex w-full">
           <div className="w-0 grow truncate text-xs text-text-secondary">{fileItem.file.name}</div>
         </div>
-        <div className="w-full truncate text-2xs leading-3 text-text-tertiary">
+        <div className="w-full truncate text-2xs/3 text-text-tertiary">
           <span className="uppercase">{getFileType(fileItem.file)}</span>
           <span className="px-1 text-text-quaternary">·</span>
           <span>{formatFileSize(fileItem.file.size)}</span>
@@ -72,7 +72,7 @@ const FileListItem = ({
           <RiErrorWarningFill className="size-4 text-text-destructive" />
         )}
         <span
-          className="flex h-6 w-6 cursor-pointer items-center justify-center"
+          className="flex size-6 cursor-pointer items-center justify-center"
           onClick={handleRemove}
         >
           <RiDeleteBinLine className="size-4 text-text-tertiary" />
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/upload-dropzone.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/upload-dropzone.tsx
index eab0dd4ce0..883326a930 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/upload-dropzone.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/upload-dropzone.tsx
@@ -53,11 +53,11 @@ const UploadDropzone = ({
       <div
         ref={dropRef}
         className={cn(
-          'relative box-border flex min-h-20 flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg px-4 py-3 text-xs leading-4 text-text-tertiary',
+          'relative box-border flex min-h-20 flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg px-4 py-3 text-xs/4 text-text-tertiary',
           dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent',
         )}
       >
-        <div className="flex min-h-5 items-center justify-center text-sm leading-4 text-text-secondary">
+        <div className="flex min-h-5 items-center justify-center text-sm/4 text-text-secondary">
           <span className="mr-2 i-ri-upload-cloud-2-line size-5" />
           <span>
             {supportBatchUpload ? t('stepOne.uploader.button', { ns: 'datasetCreation' }) : t('stepOne.uploader.buttonSingleFile', { ns: 'datasetCreation' })}
@@ -82,7 +82,7 @@ const UploadDropzone = ({
                 batchCount: fileUploadConfig.batch_count_limit,
               })}
         </div>
-        {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
+        {dragging && <div ref={dragRef} className="absolute top-0 left-0 size-full" />}
       </div>
     </>
   )
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/__tests__/index.spec.tsx
index 8d9787f126..c4bd37232c 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/__tests__/index.spec.tsx
@@ -149,7 +149,7 @@ describe('PageSelector', () => {
       render(<PageSelector {...props} />)
 
       // Assert - NotionIcon renders svg when page_icon is null
-      const notionIcon = document.querySelector('.h-5.w-5')
+      const notionIcon = document.querySelector('.size-5')
       expect(notionIcon)!.toBeInTheDocument()
     })
 
@@ -1071,7 +1071,7 @@ describe('PageSelector', () => {
       render(<PageSelector {...props} />)
 
       // Assert - NotionIcon renders svg (RiFileTextLine) when page_icon is null
-      const notionIcon = document.querySelector('.h-5.w-5')
+      const notionIcon = document.querySelector('.size-5')
       expect(notionIcon)!.toBeInTheDocument()
     })
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/__tests__/index.spec.tsx
index c4ce60274b..5ad964699c 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/__tests__/index.spec.tsx
@@ -95,7 +95,7 @@ describe('Header', () => {
       const { container } = render(<Header {...props} />)
 
       // Assert - Input should have search icon class
-      const searchIcon = container.querySelector('.i-ri-search-line.h-4.w-4')
+      const searchIcon = container.querySelector('.i-ri-search-line.size-4')
       expect(searchIcon)!.toBeInTheDocument()
     })
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx
index dd52c027fb..62056c1f5a 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx
@@ -20,7 +20,7 @@ const ErrorMessage = ({
     )}
     >
       <div className="flex size-6 items-center justify-center">
-        <RiErrorWarningFill className="h-4 w-4 text-text-destructive" />
+        <RiErrorWarningFill className="size-4 text-text-destructive" />
       </div>
       <div className="flex flex-col gap-y-0.5 py-1">
         <div className="system-xs-medium text-text-primary">{title}</div>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
index 46c6c6f462..a997054b00 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
@@ -88,7 +88,7 @@ const Options = ({
           <span className="system-sm-semibold-uppercase text-text-secondary">
             {t(`${I18N_PREFIX}.options`, { ns: 'datasetCreation' })}
           </span>
-          <ArrowDownRoundFill className={cn('h-4 w-4 shrink-0 text-text-quaternary', fold && '-rotate-90')} />
+          <ArrowDownRoundFill className={cn('size-4 shrink-0 text-text-quaternary', fold && '-rotate-90')} />
         </div>
         <Button
           variant="primary"
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/__tests__/loading.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/__tests__/loading.spec.tsx
index ada7aa7b7f..ed5b8ccea8 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/__tests__/loading.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/__tests__/loading.spec.tsx
@@ -17,8 +17,7 @@ describe('CreateFromPipelinePreviewLoading', () => {
 
     expect(container.firstElementChild).toHaveClass(
       'flex',
-      'h-full',
-      'w-full',
+      'size-full',
       'flex-col',
       'overflow-hidden',
       'px-6',
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
index 9b56c6c8a3..a43e614ef7 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
@@ -160,7 +160,7 @@ const ChunkPreview = ({
           </div>
         </PreviewHeader>
       )}
-      className="relative flex h-full w-full shrink-0"
+      className="relative flex size-full shrink-0"
       mainClassName="space-y-6"
     >
       {!isPending && currentDocForm === ChunkingMode.qa && estimateData?.qa_preview && (
@@ -216,7 +216,7 @@ const ChunkPreview = ({
         })
       )}
       {isIdle && (
-        <div className="flex h-full w-full items-center justify-center">
+        <div className="flex size-full items-center justify-center">
           <div className="flex flex-col items-center justify-center gap-3 pb-4">
             <RiSearchEyeLine className="size-10 text-text-empty-state-icon" />
             <p className="text-sm text-text-tertiary">
@@ -229,7 +229,7 @@ const ChunkPreview = ({
         </div>
       )}
       {isPending && (
-        <div className="h-full w-full space-y-6 overflow-hidden">
+        <div className="size-full space-y-6 overflow-hidden">
           {Array.from({ length: 10 }, (_, i) => (
             <SkeletonContainer key={i}>
               <SkeletonRow>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.tsx
index d8cee8b040..fcbef198cd 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.tsx
@@ -29,7 +29,7 @@ const FilePreview = ({
   }, [file])
 
   return (
-    <div className="flex h-full w-full flex-col rounded-t-xl border-t border-l border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5">
+    <div className="flex size-full flex-col rounded-t-xl border-t border-l border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5">
       <div className="flex gap-x-2 border-b border-divider-subtle pt-4 pr-4 pb-3 pl-6">
         <div className="flex grow flex-col gap-y-1">
           <div className="system-2xs-semibold-uppercase text-text-accent">{t('addDocuments.stepOne.preview', { ns: 'datasetPipeline' })}</div>
@@ -53,7 +53,7 @@ const FilePreview = ({
         </div>
         <button
           type="button"
-          className="flex h-8 w-8 shrink-0 items-center justify-center"
+          className="flex size-8 shrink-0 items-center justify-center"
           onClick={hidePreview}
         >
           <RiCloseLine className="size-[18px]" />
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/loading.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/loading.tsx
index 3d0cc4d7d7..55aebfaa2d 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/loading.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/loading.tsx
@@ -3,7 +3,7 @@ import { SkeletonContainer, SkeletonRectangle } from '@/app/components/base/skel
 
 const Loading = () => {
   return (
-    <div className="flex h-full w-full flex-col gap-y-3 overflow-hidden bg-linear-to-b from-components-panel-bg-transparent to-components-panel-bg px-6 py-5">
+    <div className="flex size-full flex-col gap-y-3 overflow-hidden bg-linear-to-b from-components-panel-bg-transparent to-components-panel-bg px-6 py-5">
       <SkeletonContainer className="w-full gap-0">
         <SkeletonRectangle className="my-1.5 w-full" />
         <SkeletonRectangle className="my-1.5 w-full" />
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.tsx
index 793ba1f22b..f93aa2d418 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.tsx
@@ -50,7 +50,7 @@ const OnlineDocumentPreview = ({
   }, [currentPage.page_id])
 
   return (
-    <div className="flex h-full w-full flex-col rounded-t-xl border-t border-l border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5">
+    <div className="flex size-full flex-col rounded-t-xl border-t border-l border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5">
       <div className="flex gap-x-2 border-b border-divider-subtle pt-4 pr-4 pb-3 pl-6">
         <div className="flex grow flex-col gap-y-1">
           <div className="system-2xs-semibold-uppercase text-text-accent">{t('addDocuments.stepOne.preview', { ns: 'datasetPipeline' })}</div>
@@ -64,7 +64,7 @@ const OnlineDocumentPreview = ({
         </div>
         <button
           type="button"
-          className="flex h-8 w-8 shrink-0 items-center justify-center"
+          className="flex size-8 shrink-0 items-center justify-center"
           onClick={hidePreview}
         >
           <RiCloseLine className="size-[18px]" />
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/web-preview.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/web-preview.tsx
index f83d68902f..c978eb5389 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/web-preview.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/web-preview.tsx
@@ -17,7 +17,7 @@ const WebsitePreview = ({
   const { t } = useTranslation()
 
   return (
-    <div className="flex h-full w-full flex-col rounded-t-xl border-t border-l border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5">
+    <div className="flex size-full flex-col rounded-t-xl border-t border-l border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5">
       <div className="flex gap-x-2 border-b border-divider-subtle pt-4 pr-4 pb-3 pl-6">
         <div className="flex grow flex-col gap-y-1">
           <div className="system-2xs-semibold-uppercase">{t('addDocuments.stepOne.preview', { ns: 'datasetPipeline' })}</div>
@@ -32,7 +32,7 @@ const WebsitePreview = ({
         </div>
         <button
           type="button"
-          className="flex h-8 w-8 shrink-0 items-center justify-center"
+          className="flex size-8 shrink-0 items-center justify-center"
           onClick={hidePreview}
         >
           <RiCloseLine className="size-[18px]" />
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/__tests__/index.spec.tsx
index 688d26f245..22459a963d 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/__tests__/index.spec.tsx
@@ -499,7 +499,7 @@ describe('Processing', () => {
       const { container } = render(<Processing {...props} />)
 
       // Assert - Check for flex layout with proper widths
-      const mainContainer = container.querySelector('.flex.h-full.w-full.justify-center')
+      const mainContainer = container.querySelector('.flex.size-full.justify-center')
       expect(mainContainer).toBeInTheDocument()
 
       // Check for left panel (3/5 width)
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/index.tsx
index 2f5946240e..23942daecf 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/index.tsx
@@ -23,7 +23,7 @@ const Processing = ({
   const retrievalMethod = useDatasetDetailContextWithSelector(s => s.dataset?.retrieval_model_dict?.search_method)
 
   return (
-    <div className="flex h-full w-full justify-center overflow-hidden">
+    <div className="flex size-full justify-center overflow-hidden">
       <div className="h-full w-3/5 overflow-y-auto pt-10 pb-8">
         <div className="max-w-[640px]">
           <EmbeddingProcess
diff --git a/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx b/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx
index fa5c48efed..56ea12caeb 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx
@@ -22,7 +22,7 @@ const StepIndicator = ({
         return (
           <div
             key={step.value}
-            className={cn('h-1 w-1 rounded-lg bg-divider-solid', isActive && 'w-2 bg-state-accent-solid')}
+            className={cn('size-1 rounded-lg bg-divider-solid', isActive && 'w-2 bg-state-accent-solid')}
           />
         )
       })}
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
index 0ef734b079..f9d69bc136 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
@@ -121,7 +121,7 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
         data={getTemplate()}
       >
         <div className="flex h-[18px] items-center space-x-1 text-xs font-medium text-text-accent">
-          <DownloadIcon className="mr-1 h-3 w-3" />
+          <DownloadIcon className="mr-1 size-3" />
           {t('list.batchModal.template', { ns: 'datasetDocuments' })}
         </div>
       </CSVDownloader>
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
index 15d6d803d4..b96f50932e 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -184,7 +184,7 @@ const CSVUploader: FC<Props> = ({ file, updateFile }) => {
                 </button>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
+            {dragging && <div ref={dragRef} className="absolute top-0 left-0 size-full" />}
           </div>
         )}
         {file && (
@@ -209,7 +209,7 @@ const CSVUploader: FC<Props> = ({ file, updateFile }) => {
                 aria-label={t('operation.delete', { ns: 'common' })}
                 onClick={removeFile}
               >
-                <RiDeleteBinLine className="h-4 w-4 text-text-secondary" aria-hidden="true" />
+                <RiDeleteBinLine className="size-4 text-text-secondary" aria-hidden="true" />
               </button>
             </div>
           </div>
diff --git a/web/app/components/datasets/documents/detail/completed/__tests__/display-toggle.spec.tsx b/web/app/components/datasets/documents/detail/completed/__tests__/display-toggle.spec.tsx
index 73d5ec920c..3444e05a47 100644
--- a/web/app/components/datasets/documents/detail/completed/__tests__/display-toggle.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/__tests__/display-toggle.spec.tsx
@@ -32,7 +32,7 @@ describe('DisplayToggle', () => {
       )
 
       // Assert - RiLineHeight icon for expand
-      const icon = container.querySelector('.h-4.w-4')
+      const icon = container.querySelector('.size-4')
       expect(icon).toBeInTheDocument()
     })
 
@@ -42,7 +42,7 @@ describe('DisplayToggle', () => {
       )
 
       // Assert - Collapse icon
-      const icon = container.querySelector('.h-4.w-4')
+      const icon = container.querySelector('.size-4')
       expect(icon).toBeInTheDocument()
     })
   })
@@ -91,7 +91,7 @@ describe('DisplayToggle', () => {
       rerender(<DisplayToggle isCollapsed={false} toggleCollapsed={vi.fn()} />)
 
       // Assert - icon should still be present
-      const icon = container.querySelector('.h-4.w-4')
+      const icon = container.querySelector('.size-4')
       expect(icon).toBeInTheDocument()
     })
 
diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
index c4b3fc89f4..7bb2adc64a 100644
--- a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
@@ -102,20 +102,20 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
           <button
             type="button"
             aria-label={t(fullScreen ? 'operation.zoomOut' : 'operation.zoomIn', { ns: 'common' })}
-            className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            className="mr-1 flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
             onClick={toggleFullScreen}
           >
             {fullScreen
-              ? <RiCollapseDiagonalLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
-              : <RiExpandDiagonalLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />}
+              ? <RiCollapseDiagonalLine className="size-4 text-text-tertiary" aria-hidden="true" />
+              : <RiExpandDiagonalLine className="size-4 text-text-tertiary" aria-hidden="true" />}
           </button>
           <button
             type="button"
             aria-label={t('operation.close', { ns: 'common' })}
-            className="flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            className="flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
             onClick={onCancel}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
         </div>
       </div>
diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
index 05d1294d2a..d2ad8a2755 100644
--- a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
@@ -95,7 +95,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
     if (!isParagraphMode)
       return null
     const Icon = collapsed ? RiArrowRightSLine : RiArrowDownSLine
-    return <Icon className={cn('mr-0.5 h-4 w-4 text-text-secondary', collapsed && 'opacity-50')} />
+    return <Icon className={cn('mr-0.5 size-4 text-text-secondary', collapsed && 'opacity-50')} />
   }
 
   const renderChildChunkItem = (childChunk: ChildChunkDetail) => {
@@ -138,7 +138,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
     }
     if (inputValue !== '') {
       return (
-        <div className="h-full w-full">
+        <div className="size-full">
           <Empty onClearFilter={onClearFilter!} />
         </div>
       )
diff --git a/web/app/components/datasets/documents/detail/completed/common/__tests__/empty.spec.tsx b/web/app/components/datasets/documents/detail/completed/common/__tests__/empty.spec.tsx
index f957789926..0124c50deb 100644
--- a/web/app/components/datasets/documents/detail/completed/common/__tests__/empty.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/__tests__/empty.spec.tsx
@@ -18,7 +18,7 @@ describe('Empty', () => {
       const { container } = render(<Empty onClearFilter={vi.fn()} />)
 
       // Assert - RiFileList2Line icon should be rendered
-      const icon = container.querySelector('.h-6.w-6')
+      const icon = container.querySelector('.size-6')
       expect(icon).toBeInTheDocument()
     })
 
diff --git a/web/app/components/datasets/documents/detail/completed/common/__tests__/segment-index-tag.spec.tsx b/web/app/components/datasets/documents/detail/completed/common/__tests__/segment-index-tag.spec.tsx
index 4e73c86209..6b31df0896 100644
--- a/web/app/components/datasets/documents/detail/completed/common/__tests__/segment-index-tag.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/__tests__/segment-index-tag.spec.tsx
@@ -13,7 +13,7 @@ describe('SegmentIndexTag', () => {
     it('should render the Chunk icon', () => {
       const { container } = render(<SegmentIndexTag positionId={1} />)
 
-      const icon = container.querySelector('.h-3.w-3')
+      const icon = container.querySelector('.size-3')
       expect(icon).toBeInTheDocument()
     })
 
diff --git a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
index 2b04d21d6d..f0913405c4 100644
--- a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
@@ -64,7 +64,7 @@ const BatchAction: FC<IBatchActionProps> = ({
     <div className={cn('pointer-events-none flex w-full justify-center gap-x-2', className)}>
       <div className="pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5">
         <div className="inline-flex items-center gap-x-2 py-1 pr-3 pl-2">
-          <span className="flex h-5 w-5 items-center justify-center rounded-md bg-text-accent system-xs-medium text-text-primary-on-surface">
+          <span className="flex size-5 items-center justify-center rounded-md bg-text-accent system-xs-medium text-text-primary-on-surface">
             {selectedIds.length}
           </span>
           <span className="system-sm-semibold text-text-accent">{t(`${i18nPrefix}.selected`, { ns: 'dataset' })}</span>
diff --git a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
index 84dc1feeba..8444035876 100644
--- a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
@@ -176,7 +176,7 @@ const ChunkContent: FC<IChunkContentProps> = ({
   if (!isEditMode) {
     return (
       <Markdown
-        className="h-full w-full text-text-secondary!"
+        className="size-full text-text-secondary!"
         content={question}
         customDisallowedElements={['input']}
       />
diff --git a/web/app/components/datasets/documents/detail/completed/common/empty.tsx b/web/app/components/datasets/documents/detail/completed/common/empty.tsx
index d4c9d8ea0b..49a31370e9 100644
--- a/web/app/components/datasets/documents/detail/completed/common/empty.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/empty.tsx
@@ -46,12 +46,12 @@ const Empty: FC<IEmptyProps> = ({
   return (
     <div className="relative z-0 flex h-full items-center justify-center">
       <div className="flex flex-col items-center">
-        <div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-xl border border-divider-subtle bg-components-card-bg shadow-lg shadow-shadow-shadow-5">
-          <RiFileList2Line className="h-6 w-6 text-text-secondary" />
+        <div className="relative z-10 flex size-14 items-center justify-center rounded-xl border border-divider-subtle bg-components-card-bg shadow-lg shadow-shadow-shadow-5">
+          <RiFileList2Line className="size-6 text-text-secondary" />
           <Line className="absolute top-1/2 -right-px -translate-y-1/2" />
           <Line className="absolute top-1/2 -left-px -translate-y-1/2" />
-          <Line className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90" />
-          <Line className="absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90" />
+          <Line className="absolute top-0 left-1/2 -translate-1/2 rotate-90" />
+          <Line className="absolute top-full left-1/2 -translate-1/2 rotate-90" />
         </div>
         <div className="mt-3 system-md-regular text-text-tertiary">
           {t('segment.empty', { ns: 'datasetDocuments' })}
@@ -64,14 +64,14 @@ const Empty: FC<IEmptyProps> = ({
           {t('segment.clearFilter', { ns: 'datasetDocuments' })}
         </button>
       </div>
-      <div className="absolute top-0 left-0 -z-20 flex h-full w-full flex-col gap-y-3 overflow-hidden">
+      <div className="absolute top-0 left-0 -z-20 flex size-full flex-col gap-y-3 overflow-hidden">
         {
           Array.from({ length: 10 }).map((_, i) => (
             <EmptyCard key={i} />
           ))
         }
       </div>
-      <div className="absolute top-0 left-0 -z-10 h-full w-full bg-dataset-chunk-list-mask-bg" />
+      <div className="absolute top-0 left-0 -z-10 size-full bg-dataset-chunk-list-mask-bg" />
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
index 3999e113af..e0b7a5f885 100644
--- a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
@@ -55,7 +55,7 @@ const RegeneratingContent: FC = React.memo(() => {
       </div>
       <div className="flex justify-end pt-6">
         <Button variant="primary" tone="destructive" disabled className="inline-flex items-center gap-x-0.5">
-          <RiLoader2Line className="h-4 w-4 animate-spin text-components-button-destructive-primary-text-disabled" />
+          <RiLoader2Line className="size-4 animate-spin text-components-button-destructive-primary-text-disabled" />
           <span>{t('operation.regenerate', { ns: 'common' })}</span>
         </Button>
       </div>
diff --git a/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx b/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
index a35f6e9140..fb44062c91 100644
--- a/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
@@ -29,7 +29,7 @@ export const SegmentIndexTag: FC<ISegmentIndexTagProps> = ({
   }, [positionId, labelPrefix])
   return (
     <div className={cn('flex items-center', className)}>
-      <Chunk className={cn('mr-0.5 h-3 w-3 p-px text-text-tertiary', iconClassName)} />
+      <Chunk className={cn('mr-0.5 size-3 p-px text-text-tertiary', iconClassName)} />
       <div className={cn('system-xs-medium text-text-tertiary', labelClassName)}>
         {label || localPositionId}
       </div>
diff --git a/web/app/components/datasets/documents/detail/completed/common/summary-status.tsx b/web/app/components/datasets/documents/detail/completed/common/summary-status.tsx
index 06a7eb353a..18c6191d18 100644
--- a/web/app/components/datasets/documents/detail/completed/common/summary-status.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/summary-status.tsx
@@ -27,7 +27,7 @@ const SummaryStatus = ({ status }: SummaryStatusProps) => {
         render={(
           <span className="inline-flex">
             <Badge className="border-text-accent-secondary text-text-accent-secondary">
-              <SearchLinesSparkle aria-hidden className="mr-0.5 h-3 w-3" />
+              <SearchLinesSparkle aria-hidden className="mr-0.5 size-3" />
               <span>{t('list.summary.generating', { ns: 'datasetDocuments' })}</span>
             </Badge>
           </span>
diff --git a/web/app/components/datasets/documents/detail/completed/display-toggle.tsx b/web/app/components/datasets/documents/detail/completed/display-toggle.tsx
index 6735399cd2..21392ecb30 100644
--- a/web/app/components/datasets/documents/detail/completed/display-toggle.tsx
+++ b/web/app/components/datasets/documents/detail/completed/display-toggle.tsx
@@ -30,8 +30,8 @@ const DisplayToggle: FC<DisplayToggleProps> = ({
           >
             {
               isCollapsed
-                ? <RiLineHeight className="h-4 w-4 text-components-button-secondary-text" />
-                : <Collapse className="h-4 w-4 text-components-button-secondary-text" />
+                ? <RiLineHeight className="size-4 text-components-button-secondary-text" />
+                : <Collapse className="size-4 text-components-button-secondary-text" />
             }
           </button>
         )}
diff --git a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
index aac2ad8348..92254a6d6e 100644
--- a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
+++ b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
@@ -114,18 +114,18 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
           <button
             type="button"
             aria-label={t('operation.zoomIn', { ns: 'common' })}
-            className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            className="mr-1 flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
             onClick={toggleFullScreen}
           >
-            <RiExpandDiagonalLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiExpandDiagonalLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
           <button
             type="button"
             aria-label={t('operation.close', { ns: 'common' })}
-            className="flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            className="flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
             onClick={handleCancel.bind(null, 'esc')}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
         </div>
       </div>
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
index c30d123052..66a5ab2083 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
@@ -188,13 +188,13 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                                 <button
                                   type="button"
                                   aria-label={t('operation.edit', { ns: 'common' })}
-                                  className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent p-0 hover:bg-state-base-hover"
+                                  className="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent p-0 hover:bg-state-base-hover"
                                   onClick={(e) => {
                                     e.stopPropagation()
                                     onClickEdit?.()
                                   }}
                                 >
-                                  <RiEditLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                                  <RiEditLine className="size-4 text-text-tertiary" aria-hidden="true" />
                                 </button>
                               )}
                             />
@@ -206,13 +206,13 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                                 <button
                                   type="button"
                                   aria-label={t('operation.delete', { ns: 'common' })}
-                                  className="group/delete flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent p-0 hover:bg-state-destructive-hover"
+                                  className="group/delete flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent p-0 hover:bg-state-destructive-hover"
                                   onClick={(e) => {
                                     e.stopPropagation()
                                     setShowModal(true)
                                   }}
                                 >
-                                  <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover/delete:text-text-destructive" aria-hidden="true" />
+                                  <RiDeleteBinLine className="size-4 text-text-tertiary group-hover/delete:text-text-destructive" aria-hidden="true" />
                                 </button>
                               )}
                             />
diff --git a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
index 0713289ef4..c5f282b959 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
@@ -154,22 +154,22 @@ export function SegmentDetail({
           <button
             type="button"
             aria-label={t(fullScreen ? 'operation.zoomOut' : 'operation.zoomIn', { ns: 'common' })}
-            className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            className="mr-1 flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
             onClick={toggleFullScreen}
           >
             {
               fullScreen
-                ? <RiCollapseDiagonalLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
-                : <RiExpandDiagonalLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                ? <RiCollapseDiagonalLine className="size-4 text-text-tertiary" aria-hidden="true" />
+                : <RiExpandDiagonalLine className="size-4 text-text-tertiary" aria-hidden="true" />
             }
           </button>
           <button
             type="button"
             aria-label={t('operation.close', { ns: 'common' })}
-            className="flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            className="flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
             onClick={onCancel}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
         </div>
       </div>
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx
index 388f2f85de..5f48a8603b 100644
--- a/web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx
@@ -16,7 +16,7 @@ Slice.displayName = 'Slice'
 const FullDocListSkeleton = () => {
   return (
     <div className="relative z-10 flex w-full grow flex-col gap-y-3 overflow-y-hidden">
-      <div className="absolute top-0 bottom-14 left-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg" />
+      <div className="absolute top-0 bottom-14 left-0 z-20 size-full bg-dataset-chunk-list-mask-bg" />
       {Array.from({ length: 15 }).map((_, index) => <Slice key={index} />)}
     </div>
   )
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx
index e27c5020c1..068b9fbe39 100644
--- a/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx
@@ -49,7 +49,7 @@ CardSkelton.displayName = 'CardSkelton'
 const GeneralListSkeleton = () => {
   return (
     <div className="relative z-10 flex grow flex-col overflow-y-hidden">
-      <div className="absolute top-0 left-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg" />
+      <div className="absolute top-0 left-0 z-20 size-full bg-dataset-chunk-list-mask-bg" />
       {Array.from({ length: 10 }).map((_, index) => {
         return (
           <div key={index} className="flex items-start gap-x-2">
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx
index a664589568..25a87757e0 100644
--- a/web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx
@@ -37,7 +37,7 @@ const CardSkelton = React.memo(() => {
       <SkeletonContainer className="p-1 pb-2">
         <SkeletonRow>
           <SkeletonRow className="h-7 gap-x-0.5 rounded-lg bg-dataset-child-chunk-expand-btn-bg pr-3 pl-1">
-            <RiArrowRightSLine className="h-4 w-4 text-text-secondary opacity-20" />
+            <RiArrowRightSLine className="size-4 text-text-secondary opacity-20" />
             <SkeletonRectangle className="w-32 bg-text-quaternary" />
           </SkeletonRow>
         </SkeletonRow>
@@ -51,7 +51,7 @@ CardSkelton.displayName = 'CardSkelton'
 const ParagraphListSkeleton = () => {
   return (
     <div className="relative z-10 flex h-full flex-col overflow-y-hidden">
-      <div className="absolute top-0 left-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg" />
+      <div className="absolute top-0 left-0 z-20 size-full bg-dataset-chunk-list-mask-bg" />
       {Array.from({ length: 10 }).map((_, index) => {
         return (
           <div key={index} className="flex items-start gap-x-2">
diff --git a/web/app/components/datasets/documents/detail/completed/status-item.tsx b/web/app/components/datasets/documents/detail/completed/status-item.tsx
index 1efac774cc..ebb4b661e6 100644
--- a/web/app/components/datasets/documents/detail/completed/status-item.tsx
+++ b/web/app/components/datasets/documents/detail/completed/status-item.tsx
@@ -19,7 +19,7 @@ const StatusItem: FC<IStatusItemProps> = ({
   return (
     <div className="flex items-center justify-between px-2 py-1.5">
       <span className="system-md-regular">{item.name}</span>
-      {selected && <RiCheckLine className="h-4 w-4 text-text-accent" />}
+      {selected && <RiCheckLine className="size-4 text-text-accent" />}
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/detail/embedding/components/status-header.tsx b/web/app/components/datasets/documents/detail/embedding/components/status-header.tsx
index 0c07abae94..dad6065e3f 100644
--- a/web/app/components/datasets/documents/detail/embedding/components/status-header.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/components/status-header.tsx
@@ -45,7 +45,7 @@ const StatusHeader: FC<StatusHeaderProps> = React.memo(({
 
   return (
     <div className="flex h-6 items-center gap-x-1">
-      {isEmbedding && <RiLoader2Line className="h-4 w-4 animate-spin text-text-secondary" />}
+      {isEmbedding && <RiLoader2Line className="size-4 animate-spin text-text-secondary" />}
       <span className="grow system-md-semibold-uppercase text-text-secondary">
         {getStatusText()}
       </span>
@@ -56,7 +56,7 @@ const StatusHeader: FC<StatusHeaderProps> = React.memo(({
           onClick={onPause}
           disabled={isPauseLoading}
         >
-          <RiPauseCircleLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+          <RiPauseCircleLine className="size-3.5 text-components-button-secondary-text" />
           <span className="pr-[3px] system-xs-medium text-components-button-secondary-text">
             {t('embedding.pause', { ns: 'datasetDocuments' })}
           </span>
@@ -69,7 +69,7 @@ const StatusHeader: FC<StatusHeaderProps> = React.memo(({
           onClick={onResume}
           disabled={isResumeLoading}
         >
-          <RiPlayCircleLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+          <RiPlayCircleLine className="size-3.5 text-components-button-secondary-text" />
           <span className="pr-[3px] system-xs-medium text-components-button-secondary-text">
             {t('embedding.resume', { ns: 'datasetDocuments' })}
           </span>
diff --git a/web/app/components/datasets/documents/detail/embedding/skeleton/index.tsx b/web/app/components/datasets/documents/detail/embedding/skeleton/index.tsx
index 767d3a68ce..ca3a8a6e6b 100644
--- a/web/app/components/datasets/documents/detail/embedding/skeleton/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/skeleton/index.tsx
@@ -48,7 +48,7 @@ CardSkelton.displayName = 'CardSkelton'
 const EmbeddingSkeleton = () => {
   return (
     <div className="relative z-10 flex grow flex-col overflow-y-hidden">
-      <div className="absolute top-0 left-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg" />
+      <div className="absolute top-0 left-0 z-20 size-full bg-dataset-chunk-list-mask-bg" />
       {Array.from({ length: 5 }).map((_, index) => {
         return (
           <div key={index} className="w-full px-11">
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index 190cf8edf7..c0c9629bfd 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -191,11 +191,11 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
             aria-label={backButtonLabel}
             title={backButtonLabel}
             onClick={backToPrev}
-            className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0 hover:bg-components-button-tertiary-bg focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            className="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0 hover:bg-components-button-tertiary-bg focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
           >
             <span
               aria-hidden="true"
-              className="i-ri-arrow-left-line h-4 w-4 text-components-button-ghost-text hover:text-text-tertiary"
+              className="i-ri-arrow-left-line size-4 text-components-button-ghost-text hover:text-text-tertiary"
             />
           </button>
           <DocumentTitle
@@ -247,8 +247,8 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
             >
               {
                 showMetadata
-                  ? <span aria-hidden="true" className="i-ri-layout-left-2-line h-4 w-4 text-components-button-secondary-text" />
-                  : <span aria-hidden="true" className="i-ri-layout-right-2-line h-4 w-4 text-components-button-secondary-text" />
+                  ? <span aria-hidden="true" className="i-ri-layout-left-2-line size-4 text-components-button-secondary-text" />
+                  : <span aria-hidden="true" className="i-ri-layout-right-2-line size-4 text-components-button-secondary-text" />
               }
             </button>
           </div>
@@ -257,7 +257,7 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
           {isDetailLoading
             ? <Loading type="app" />
             : (
-                <div className={cn('flex h-full min-w-0 grow flex-col', !embedding && isFullDocMode && 'relative pt-4 pr-11 pl-11', !embedding && !isFullDocMode && 'relative pt-3 pr-11 pl-5')}>
+                <div className={cn('flex h-full min-w-0 grow flex-col', !embedding && isFullDocMode && 'relative px-11 pt-4', !embedding && !isFullDocMode && 'relative pt-3 pr-11 pl-5')}>
                   {embedding
                     ? (
                         <Embedding
diff --git a/web/app/components/datasets/documents/detail/new-segment.tsx b/web/app/components/datasets/documents/detail/new-segment.tsx
index 92e3aafd46..5a83ef4c24 100644
--- a/web/app/components/datasets/documents/detail/new-segment.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment.tsx
@@ -145,18 +145,18 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
           <button
             type="button"
             aria-label={t('operation.zoomIn', { ns: 'common' })}
-            className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            className="mr-1 flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
             onClick={toggleFullScreen}
           >
-            <RiExpandDiagonalLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiExpandDiagonalLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
           <button
             type="button"
             aria-label={t('operation.close', { ns: 'common' })}
-            className="flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            className="flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
             onClick={handleCancel.bind(null, 'esc')}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
         </div>
       </div>
diff --git a/web/app/components/datasets/documents/detail/segment-add/index.tsx b/web/app/components/datasets/documents/detail/segment-add/index.tsx
index 43b30f7906..566a14720e 100644
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx
@@ -69,14 +69,14 @@ export function SegmentAdd({
             shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]"
           >
             <div className={cn('absolute top-0 left-0 z-0 h-full border-r-[1.5px] border-r-components-progress-bar-progress-highlight bg-components-progress-bar-progress', importStatus === segmentImportStatus.waiting ? 'w-3/12' : 'w-2/3')} />
-            <span aria-hidden className="mr-1 i-ri-loader-2-line h-4 w-4 animate-spin" />
+            <span aria-hidden className="mr-1 i-ri-loader-2-line size-4 animate-spin" />
             <span className="z-10 pr-0.5 system-sm-medium">{t('list.batchModal.processing', { ns: 'datasetDocuments' })}</span>
           </div>
         )}
         {importStatus === segmentImportStatus.completed && (
           <div className="relative mr-2 inline-flex items-center overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]">
             <div className="inline-flex items-center border-r border-r-divider-subtle px-2.5 py-2 text-text-success">
-              <span aria-hidden className="mr-1 i-custom-vender-solid-general-check-circle h-4 w-4" />
+              <span aria-hidden className="mr-1 i-custom-vender-solid-general-check-circle size-4" />
               <span className="pr-0.5 system-sm-medium">{t('list.batchModal.completed', { ns: 'datasetDocuments' })}</span>
             </div>
             <div className="m-1 inline-flex items-center">
@@ -88,13 +88,13 @@ export function SegmentAdd({
                 {t('list.batchModal.ok', { ns: 'datasetDocuments' })}
               </button>
             </div>
-            <div className="absolute top-0 left-0 -z-10 h-full w-full bg-dataset-chunk-process-success-bg opacity-40" />
+            <div className="absolute top-0 left-0 -z-10 size-full bg-dataset-chunk-process-success-bg opacity-40" />
           </div>
         )}
         {importStatus === segmentImportStatus.error && (
           <div className="relative mr-2 inline-flex items-center overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]">
             <div className="inline-flex items-center border-r border-r-divider-subtle px-2.5 py-2 text-text-destructive">
-              <span aria-hidden className="mr-1 i-ri-error-warning-fill h-4 w-4" />
+              <span aria-hidden className="mr-1 i-ri-error-warning-fill size-4" />
               <span className="pr-0.5 system-sm-medium">{t('list.batchModal.error', { ns: 'datasetDocuments' })}</span>
             </div>
             <div className="m-1 inline-flex items-center">
@@ -106,7 +106,7 @@ export function SegmentAdd({
                 {t('list.batchModal.ok', { ns: 'datasetDocuments' })}
               </button>
             </div>
-            <div className="absolute top-0 left-0 -z-10 h-full w-full bg-dataset-chunk-process-error-bg opacity-40" />
+            <div className="absolute top-0 left-0 -z-10 size-full bg-dataset-chunk-process-error-bg opacity-40" />
           </div>
         )}
       </>
@@ -128,7 +128,7 @@ export function SegmentAdd({
         onClick={handleAddClick}
         disabled={embedding}
       >
-        <span aria-hidden className={cn('i-ri-add-line h-4 w-4', textColor)} />
+        <span aria-hidden className={cn('i-ri-add-line size-4', textColor)} />
         <span className={cn('ml-0.5 px-0.5 text-[13px] leading-[16px] font-medium capitalize', textColor)}>
           {t('list.action.addButton', { ns: 'datasetDocuments' })}
         </span>
@@ -144,7 +144,7 @@ export function SegmentAdd({
           )}
         >
           <div className="flex items-center justify-center">
-            <span aria-hidden className={cn('i-ri-arrow-down-s-line h-4 w-4', textColor)} />
+            <span aria-hidden className={cn('i-ri-arrow-down-s-line size-4', textColor)} />
           </div>
         </DropdownMenuTrigger>
         <DropdownMenuContent
diff --git a/web/app/components/datasets/external-api/external-api-modal/Form.tsx b/web/app/components/datasets/external-api/external-api-modal/Form.tsx
index 5f1ba03bff..b181fb6b0f 100644
--- a/web/app/components/datasets/external-api/external-api-modal/Form.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/Form.tsx
@@ -62,7 +62,7 @@ const Form: FC<FormProps> = React.memo(({
               rel="noopener noreferrer"
               className="flex items-center body-xs-regular text-text-accent"
             >
-              <RiBookOpenLine className="mr-1 h-3 w-3 text-text-accent" />
+              <RiBookOpenLine className="mr-1 size-3 text-text-accent" />
               {t('externalAPIPanelDocumentation', { ns: 'dataset' })}
             </a>
           )}
diff --git a/web/app/components/datasets/external-api/external-api-modal/index.tsx b/web/app/components/datasets/external-api/external-api-modal/index.tsx
index 406ab815e6..7998a91dec 100644
--- a/web/app/components/datasets/external-api/external-api-modal/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/index.tsx
@@ -143,9 +143,9 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                       render={(
                         <button
                           type="button"
-                          className="flex h-3.5 w-3.5 items-center justify-center rounded-sm outline-hidden hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
+                          className="flex size-3.5 items-center justify-center rounded-sm outline-hidden hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
                         >
-                          <RiInformation2Line className="h-3.5 w-3.5" />
+                          <RiInformation2Line className="size-3.5" />
                         </button>
                       )}
                     />
@@ -159,7 +159,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                         </div>
                         {datasetBindings?.map(binding => (
                           <div key={binding.id} className="flex items-center gap-1 self-stretch px-2 py-1">
-                            <RiBook2Line className="h-4 w-4 text-text-secondary" />
+                            <RiBook2Line className="size-4 text-text-secondary" />
                             <div className="system-sm-medium text-text-secondary">{binding.name}</div>
                           </div>
                         ))}
@@ -197,7 +197,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
           <div className="flex shrink-0 items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px] border-divider-subtle
             bg-background-soft px-2 py-3 system-xs-regular text-text-tertiary"
           >
-            <RiLock2Fill className="h-3 w-3 text-text-quaternary" />
+            <RiLock2Fill className="size-3 text-text-quaternary" />
             {t('externalAPIForm.encrypted.front', { ns: 'dataset' })}
             <a className="text-text-accent" target="_blank" rel="noopener noreferrer" href="https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html">
               PKCS1_OAEP
diff --git a/web/app/components/datasets/external-api/external-api-panel/index.tsx b/web/app/components/datasets/external-api/external-api-panel/index.tsx
index cee1dcc83d..32f7def506 100644
--- a/web/app/components/datasets/external-api/external-api-panel/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-panel/index.tsx
@@ -57,13 +57,13 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
               href={docLink('/use-dify/knowledge/external-knowledge-api')}
               target="_blank"
             >
-              <RiBookOpenLine className="h-3 w-3 text-text-accent" />
+              <RiBookOpenLine className="size-3 text-text-accent" />
               <div className="grow body-xs-regular text-text-accent">{t('externalAPIPanelDocumentation', { ns: 'dataset' })}</div>
             </a>
           </div>
           <div className="flex items-center">
             <ActionButton onClick={() => onClose()}>
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+              <RiCloseLine className="size-4 text-text-tertiary" />
             </ActionButton>
           </div>
         </div>
@@ -73,7 +73,7 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
             className="flex items-center justify-center gap-0.5 px-3 py-2"
             onClick={handleOpenExternalAPIModal}
           >
-            <RiAddLine className="h-4 w-4 text-components-button-primary-text" />
+            <RiAddLine className="size-4 text-components-button-primary-text" />
             <div className="system-sm-medium text-components-button-primary-text">{t('createExternalAPI', { ns: 'dataset' })}</div>
           </Button>
         </div>
diff --git a/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx b/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
index ee21fe9884..3d2e839198 100644
--- a/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
+++ b/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
@@ -120,14 +120,14 @@ const ExternalKnowledgeAPICard: React.FC<ExternalKnowledgeAPICardProps> = ({ api
       >
         <div className="flex grow flex-col items-start justify-center gap-1.5 py-1">
           <div className="flex items-center gap-1 self-stretch text-text-secondary">
-            <ApiConnectionMod className="h-4 w-4" />
+            <ApiConnectionMod className="size-4" />
             <div className="system-sm-medium">{api.name}</div>
           </div>
           <div className="self-stretch system-xs-regular text-text-tertiary">{api.settings.endpoint}</div>
         </div>
         <div className="flex items-start gap-1">
           <ActionButton onClick={handleEditClick}>
-            <RiEditLine className="h-4 w-4 text-text-tertiary hover:text-text-secondary" />
+            <RiEditLine className="size-4 text-text-tertiary hover:text-text-secondary" />
           </ActionButton>
           <ActionButton
             className="hover:bg-state-destructive-hover"
@@ -135,7 +135,7 @@ const ExternalKnowledgeAPICard: React.FC<ExternalKnowledgeAPICardProps> = ({ api
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
           >
-            <RiDeleteBinLine className="h-4 w-4 text-text-tertiary hover:text-text-destructive" />
+            <RiDeleteBinLine className="size-4 text-text-tertiary hover:text-text-destructive" />
           </ActionButton>
         </div>
       </div>
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
index 0e26d290d9..adb4a6f583 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
@@ -67,7 +67,7 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onS
         {selectedItem
           ? (
               <div className="flex items-center gap-2 self-stretch rounded-lg p-1">
-                <ApiConnectionMod className="h-4 w-4 text-text-secondary" />
+                <ApiConnectionMod className="size-4 text-text-secondary" />
                 <div className="flex grow items-center">
                   <span className="overflow-hidden system-sm-regular text-ellipsis text-components-input-text-filled">{selectedItem.name}</span>
                 </div>
@@ -76,7 +76,7 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onS
           : (
               <span className="system-sm-regular text-components-input-text-placeholder">{t('selectExternalKnowledgeAPI.placeholder', { ns: 'dataset' })}</span>
             )}
-        <RiArrowDownSLine className={`h-4 w-4 text-text-quaternary transition-transform ${isOpen ? 'text-text-secondary' : ''}`} />
+        <RiArrowDownSLine className={`size-4 text-text-quaternary transition-transform ${isOpen ? 'text-text-secondary' : ''}`} />
       </div>
       {isOpen && (
         <div className="absolute z-10 mt-1 w-full rounded-xl border border-components-panel-border bg-components-panel-bg-blur shadow-lg">
@@ -87,7 +87,7 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onS
               onClick={() => handleSelect(item)}
             >
               <div className="flex w-full items-center gap-2 self-stretch rounded-lg p-2 hover:bg-state-base-hover">
-                <ApiConnectionMod className="h-4 w-4 text-text-secondary" />
+                <ApiConnectionMod className="size-4 text-text-secondary" />
                 <span className="grow overflow-hidden system-sm-medium text-ellipsis text-text-secondary">{item.name}</span>
                 <span className="overflow-hidden text-right system-xs-regular text-ellipsis text-text-tertiary">{item.url}</span>
               </div>
@@ -98,7 +98,7 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onS
               className="flex cursor-pointer items-center gap-2 self-stretch rounded-lg p-2 hover:bg-state-base-hover"
               onClick={handleAddNewAPI}
             >
-              <RiAddLine className="h-4 w-4 text-text-secondary" />
+              <RiAddLine className="size-4 text-text-secondary" />
               <span className="grow overflow-hidden system-sm-medium text-ellipsis text-text-secondary">{t('createNewExternalAPI', { ns: 'dataset' })}</span>
             </div>
           </div>
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
index a4e846abbf..75eecbc0e7 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
@@ -78,7 +78,7 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
             )
           : (
               <Button variant="tertiary" onClick={handleAddNewAPI} className="justify-start gap-0.5">
-                <RiAddLine className="h-4 w-4 text-text-tertiary" />
+                <RiAddLine className="size-4 text-text-tertiary" />
                 <span className="system-sm-regular text-text-tertiary">{t('noExternalKnowledge', { ns: 'dataset' })}</span>
               </Button>
             )}
diff --git a/web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx b/web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx
index 83888c6e42..7c6ecf08af 100644
--- a/web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx
@@ -10,7 +10,7 @@ const InfoPanel = () => {
     <div className="flex w-[360px] flex-col items-start pt-[108px] pr-8 pb-2">
       <div className="flex w-full min-w-[240px] flex-col items-start gap-3 self-stretch rounded-xl bg-background-section p-6">
         <div className="flex h-10 w-10 grow items-center justify-center gap-2 self-stretch rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg p-1">
-          <RiBookOpenLine className="h-5 w-5 text-text-accent" />
+          <RiBookOpenLine className="size-5 text-text-accent" />
         </div>
         <p className="flex flex-col items-start gap-2 self-stretch">
           <span className="self-stretch system-xl-semibold text-text-secondary">
diff --git a/web/app/components/datasets/external-knowledge-base/create/index.tsx b/web/app/components/datasets/external-knowledge-base/create/index.tsx
index ea7a02a859..18bd0cbd37 100644
--- a/web/app/components/datasets/external-knowledge-base/create/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/index.tsx
@@ -74,7 +74,7 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
                 variant="tertiary"
                 onClick={navBackHandle}
               >
-                <RiArrowLeftLine className="h-4 w-4 text-text-tertiary" />
+                <RiArrowLeftLine className="size-4 text-text-tertiary" />
               </Button>
             </div>
             <KnowledgeBaseInfo
@@ -119,7 +119,7 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
                 loading={loading}
               >
                 <div className="system-sm-medium text-components-button-primary-text">{t('externalKnowledgeForm.connect', { ns: 'dataset' })}</div>
-                <RiArrowRightLine className="h-4 w-4 text-components-button-primary-text" />
+                <RiArrowRightLine className="size-4 text-components-button-primary-text" />
               </Button>
             </div>
           </div>
diff --git a/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx b/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
index 2c0f08a8d0..4ba5ede666 100644
--- a/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
+++ b/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
@@ -96,7 +96,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
                 }}
                 state={ActionButtonState.Destructive}
               >
-                <RiDeleteBinLine className="h-4 w-4" />
+                <RiDeleteBinLine className="size-4" />
               </ActionButton>
             </span>
           </FloatingFocusManager>
diff --git a/web/app/components/datasets/hit-testing/components/empty-records.tsx b/web/app/components/datasets/hit-testing/components/empty-records.tsx
index 110112e81c..dd905acffd 100644
--- a/web/app/components/datasets/hit-testing/components/empty-records.tsx
+++ b/web/app/components/datasets/hit-testing/components/empty-records.tsx
@@ -7,7 +7,7 @@ const EmptyRecords = () => {
   return (
     <div className="rounded-2xl bg-workflow-process-bg p-5">
       <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
-        <RiHistoryLine className="h-5 w-5 text-text-tertiary" />
+        <RiHistoryLine className="size-5 text-text-tertiary" />
       </div>
       <div className="my-2 text-[13px] leading-4 font-medium text-text-tertiary">{t('noRecentTip', { ns: 'datasetHitTesting' })}</div>
     </div>
diff --git a/web/app/components/datasets/hit-testing/components/query-input/index.tsx b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
index 99796015c6..9f3b489cd9 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/index.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
@@ -215,7 +215,7 @@ const QueryInput = ({
                   size="small"
                   onClick={() => setIsSettingsOpen(!isSettingsOpen)}
                 >
-                  <RiEqualizer2Line className="h-3.5 w-3.5 text-components-button-secondary-text" />
+                  <RiEqualizer2Line className="size-3.5 text-components-button-secondary-text" />
                   <div className="flex items-center justify-center gap-1 px-[3px]">
                     <span className="system-xs-medium text-components-button-secondary-text">{t('settingTitle', { ns: 'datasetHitTesting' })}</span>
                   </div>
diff --git a/web/app/components/datasets/hit-testing/components/result-item.tsx b/web/app/components/datasets/hit-testing/components/result-item.tsx
index ccf05f9f93..07c42c8b19 100644
--- a/web/app/components/datasets/hit-testing/components/result-item.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item.tsx
@@ -78,7 +78,7 @@ const ResultItem = ({
                 toggleFold()
               }}
             >
-              <Icon className={cn('h-4 w-4', isFold && 'opacity-50')} />
+              <Icon className={cn('size-4', isFold && 'opacity-50')} />
               <div className="text-xs font-semibold uppercase">{t(`${i18nPrefix}hitChunks`, { ns: 'datasetHitTesting', num: child_chunks.length })}</div>
             </div>
             {!isFold && (
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index 7c1ce62860..8320629159 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -104,7 +104,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
 
   const renderEmptyState = () => (
     <div className="flex h-full flex-col items-center justify-center rounded-tl-2xl bg-background-body px-4 py-3">
-      <div className={cn(docStyle.commonIcon, docStyle.targetIcon, 'h-14! w-14! bg-text-quaternary!')} />
+      <div className={cn(docStyle.commonIcon, docStyle.targetIcon, 'size-14! bg-text-quaternary!')} />
       <div className="mt-3 text-[13px] text-text-quaternary">
         {t('hit.emptyTip', { ns: 'datasetHitTesting' })}
       </div>
@@ -121,7 +121,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
   }, [isMobile, setShowRightPanel])
 
   return (
-    <div className="relative flex h-full w-full gap-x-6 overflow-y-auto pl-6">
+    <div className="relative flex size-full gap-x-6 overflow-y-auto pl-6">
       <div className="flex min-w-0 flex-1 flex-col py-3">
         <div className="mb-4 flex flex-col justify-center">
           <h1 className="text-base font-semibold text-text-primary">{t('title', { ns: 'datasetHitTesting' })}</h1>
diff --git a/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
index 35fdc3ccf7..cd2be30210 100644
--- a/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
@@ -48,7 +48,7 @@ const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps>
       <div className="flex items-center justify-between self-stretch p-4 pb-2">
         <div className="grow system-xl-semibold text-text-primary">{t('settingTitle', { ns: 'datasetHitTesting' })}</div>
         <ActionButton className="ml-auto" onClick={onClose}>
-          <RiCloseLine className="h-4 w-4 shrink-0" />
+          <RiCloseLine className="size-4 shrink-0" />
         </ActionButton>
       </div>
       <div className="flex flex-col items-start justify-center gap-4 self-stretch p-4 pt-2">
diff --git a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
index 02103e02c8..87151657f3 100644
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@@ -87,11 +87,11 @@ const ModifyRetrievalModal: FC<Props> = ({ indexMethod, value, isShow, onHide, o
         <div className="flex">
           <button
             type="button"
-            className="flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            className="flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             aria-label={t('operation.close', { ns: 'common' })}
             onClick={onHide}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
         </div>
       </div>
diff --git a/web/app/components/datasets/list/dataset-card/components/__tests__/operations-dropdown.spec.tsx b/web/app/components/datasets/list/dataset-card/components/__tests__/operations-dropdown.spec.tsx
index 2bb138e6dc..6f7faf51ce 100644
--- a/web/app/components/datasets/list/dataset-card/components/__tests__/operations-dropdown.spec.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/__tests__/operations-dropdown.spec.tsx
@@ -119,7 +119,7 @@ describe('OperationsDropdown', () => {
     it('should have icon with correct size classes', () => {
       const { container } = render(<OperationsDropdown {...defaultProps} />)
       const icon = container.querySelector('.i-ri-more-fill')
-      expect(icon).toHaveClass('h-5', 'w-5', 'text-text-tertiary')
+      expect(icon).toHaveClass('size-5', 'text-text-tertiary')
     })
 
     it('should have aria-label on trigger for accessibility', () => {
diff --git a/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx b/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
index a7918ef033..fc32d0b8af 100644
--- a/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
@@ -46,7 +46,7 @@ const OperationsDropdown = ({
           )}
           aria-label="Dataset operations"
         >
-          <span className="i-ri-more-fill h-5 w-5 text-text-tertiary" />
+          <span className="i-ri-more-fill size-5 text-text-tertiary" />
         </DropdownMenuTrigger>
         <DropdownMenuContent
           placement="bottom-end"
diff --git a/web/app/components/datasets/list/dataset-footer/index.tsx b/web/app/components/datasets/list/dataset-footer/index.tsx
index 96a7c1ad88..267f77247e 100644
--- a/web/app/components/datasets/list/dataset-footer/index.tsx
+++ b/web/app/components/datasets/list/dataset-footer/index.tsx
@@ -8,8 +8,8 @@ const DatasetFooter = () => {
 
   return (
     <footer className="shrink-0 px-12 py-6">
-      <h3 className="text-gradient text-xl leading-tight font-semibold">{t('didYouKnow', { ns: 'dataset' })}</h3>
-      <p className="mt-1 text-sm leading-tight font-normal text-text-secondary">
+      <h3 className="text-gradient text-xl/tight font-semibold">{t('didYouKnow', { ns: 'dataset' })}</h3>
+      <p className="mt-1 text-sm/tight font-normal text-text-secondary">
         {t('intro1', { ns: 'dataset' })}
         <span className="inline-flex items-center gap-1 text-text-accent">{t('intro2', { ns: 'dataset' })}</span>
         {t('intro3', { ns: 'dataset' })}
diff --git a/web/app/components/datasets/list/index.tsx b/web/app/components/datasets/list/index.tsx
index 3d405de95d..147491419e 100644
--- a/web/app/components/datasets/list/index.tsx
+++ b/web/app/components/datasets/list/index.tsx
@@ -87,7 +87,7 @@ const List = () => {
             className="gap-0.5 shadow-xs"
             onClick={() => setShowExternalApiPanel(true)}
           >
-            <span className="i-custom-vender-solid-development-api-connection-mod h-4 w-4 text-components-button-secondary-text" />
+            <span className="i-custom-vender-solid-development-api-connection-mod size-4 text-components-button-secondary-text" />
             <span className="flex items-center justify-center gap-1 px-0.5 system-sm-medium text-components-button-secondary-text">{t('externalAPIPanelTitle', { ns: 'dataset' })}</span>
           </Button>
         </div>
diff --git a/web/app/components/datasets/list/new-dataset-card/__tests__/index.spec.tsx b/web/app/components/datasets/list/new-dataset-card/__tests__/index.spec.tsx
index 133e97871f..fca563c70c 100644
--- a/web/app/components/datasets/list/new-dataset-card/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/list/new-dataset-card/__tests__/index.spec.tsx
@@ -21,7 +21,7 @@ describe('New Dataset Card Integration', () => {
 
       it('should render icon with correct sizing class', () => {
         const { container } = render(<Option Icon={RiAddLine} text="Test" href="/test" />)
-        const icon = container.querySelector('.h-4.w-4')
+        const icon = container.querySelector('.size-4')
         expect(icon).toBeInTheDocument()
       })
     })
diff --git a/web/app/components/datasets/list/new-dataset-card/__tests__/option.spec.tsx b/web/app/components/datasets/list/new-dataset-card/__tests__/option.spec.tsx
index 3f0d1f952c..f416407409 100644
--- a/web/app/components/datasets/list/new-dataset-card/__tests__/option.spec.tsx
+++ b/web/app/components/datasets/list/new-dataset-card/__tests__/option.spec.tsx
@@ -24,7 +24,7 @@ describe('Option', () => {
     it('should render the icon', () => {
       render(<Option {...defaultProps} />)
       // Icon should be rendered with correct size class
-      const icon = document.querySelector('.h-4.w-4')
+      const icon = document.querySelector('.size-4')
       expect(icon).toBeInTheDocument()
     })
   })
diff --git a/web/app/components/datasets/list/new-dataset-card/option.tsx b/web/app/components/datasets/list/new-dataset-card/option.tsx
index b9a1d2f8ff..71ef88dd01 100644
--- a/web/app/components/datasets/list/new-dataset-card/option.tsx
+++ b/web/app/components/datasets/list/new-dataset-card/option.tsx
@@ -18,7 +18,7 @@ const Option = ({
       className="flex w-full items-center gap-x-2 rounded-lg bg-transparent px-4 py-2 text-text-tertiary shadow-shadow-shadow-3 hover:bg-background-default-dodge hover:text-text-secondary hover:shadow-xs"
       href={href}
     >
-      <Icon className="h-4 w-4 shrink-0" />
+      <Icon className="size-4 shrink-0" />
       <span className="grow text-left system-sm-medium">{text}</span>
     </Link>
   )
diff --git a/web/app/components/datasets/metadata/base/date-picker.tsx b/web/app/components/datasets/metadata/base/date-picker.tsx
index b76c2e8060..6d82434f32 100644
--- a/web/app/components/datasets/metadata/base/date-picker.tsx
+++ b/web/app/components/datasets/metadata/base/date-picker.tsx
@@ -56,7 +56,7 @@ const WrappedDatePicker = ({
           <RiCalendarLine
             aria-hidden="true"
             className={cn(
-              'block h-4 w-4 shrink-0',
+              'block size-4 shrink-0',
               hasValue ? 'text-text-quaternary group-hover:hidden' : 'text-text-tertiary',
             )}
           />
@@ -67,14 +67,14 @@ const WrappedDatePicker = ({
                 type="button"
                 aria-label={t('operation.clear', { ns: 'common' })}
                 className={cn(
-                  'hidden h-4 w-4 cursor-pointer rounded-full border-none bg-transparent p-0 text-text-quaternary group-hover:block hover:text-components-input-text-filled focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden',
+                  'hidden size-4 cursor-pointer rounded-full border-none bg-transparent p-0 text-text-quaternary group-hover:block hover:text-components-input-text-filled focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden',
                 )}
                 onClick={(event) => {
                   event.stopPropagation()
                   handleDateChange()
                 }}
               >
-                <RiCloseCircleFill className="h-4 w-4" aria-hidden="true" />
+                <RiCloseCircleFill className="size-4" aria-hidden="true" />
               </button>
             )
           : null}
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
index 3ac9baa006..183940998c 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
@@ -54,8 +54,8 @@ const InputCombined: FC<Props> = ({
               className={cn(className, 'rounded-l-md')}
             />
             <NumberFieldControls className="overflow-hidden">
-              <NumberFieldIncrement className="pt-0 pb-0" />
-              <NumberFieldDecrement className="pt-0 pb-0" />
+              <NumberFieldIncrement className="py-0" />
+              <NumberFieldDecrement className="py-0" />
             </NumberFieldControls>
           </NumberFieldGroup>
         </NumberField>
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
index 10f5e5cbc4..f5642e833a 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
@@ -96,7 +96,7 @@ const EditMetadataBatchModal: FC<Props> = ({ datasetId, documentNum, list, onSav
           onHide()
       }}
     >
-      <DialogContent className="w-full !max-w-[640px] overflow-hidden! border-none text-left align-middle">
+      <DialogContent className="w-full max-w-[640px]! overflow-hidden! border-none text-left align-middle">
         <DialogCloseButton />
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {t(`${i18nPrefix}.editMetadata`, { ns: 'dataset' })}
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
index 9bf31766c0..68c031349e 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@@ -212,12 +212,12 @@ const DatasetMetadataDrawer: FC<Props> = ({
           <DrawerPopup className="data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[420px]">
             <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
               <div className="flex shrink-0 justify-between px-4 pt-6 pb-4">
-                <DrawerTitle className="text-lg leading-6 font-medium text-text-primary">
+                <DrawerTitle className="text-lg/6 font-medium text-text-primary">
                   {t('metadata.metadata', { ns: 'dataset' })}
                 </DrawerTitle>
                 <DrawerCloseButton
                   aria-label={t('operation.close', { ns: 'common' })}
-                  className="h-6 w-6 rounded-md"
+                  className="size-6 rounded-md"
                 />
               </div>
               <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-6">
diff --git a/web/app/components/datasets/metadata/metadata-document/__tests__/no-data.spec.tsx b/web/app/components/datasets/metadata/metadata-document/__tests__/no-data.spec.tsx
index dd954a49c3..62798dbc8d 100644
--- a/web/app/components/datasets/metadata/metadata-document/__tests__/no-data.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/__tests__/no-data.spec.tsx
@@ -20,7 +20,7 @@ describe('NoData', () => {
       const handleStart = vi.fn()
       const { container } = render(<NoData onStart={handleStart} />)
       // Title should have correct styling
-      const title = container.querySelector('.text-xs.font-semibold')
+      const title = container.querySelector('.text-xs\\/5.font-semibold')
       expect(title).toBeInTheDocument()
     })
 
@@ -103,7 +103,7 @@ describe('NoData', () => {
     it('should have correct title styling', () => {
       const handleStart = vi.fn()
       const { container } = render(<NoData onStart={handleStart} />)
-      const title = container.querySelector('.text-xs.font-semibold')
+      const title = container.querySelector('.text-xs\\/5.font-semibold')
       expect(title).toBeInTheDocument()
     })
 
diff --git a/web/app/components/datasets/metadata/metadata-document/no-data.tsx b/web/app/components/datasets/metadata/metadata-document/no-data.tsx
index ee04c80be2..82c4b8c274 100644
--- a/web/app/components/datasets/metadata/metadata-document/no-data.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/no-data.tsx
@@ -15,7 +15,7 @@ const NoData: FC<Props> = ({
   const { t } = useTranslation()
   return (
     <div className="rounded-xl bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4 pt-3">
-      <div className="text-xs leading-5 font-semibold text-text-secondary">{t('metadata.metadata', { ns: 'dataset' })}</div>
+      <div className="text-xs/5 font-semibold text-text-secondary">{t('metadata.metadata', { ns: 'dataset' })}</div>
       <div className="mt-1 system-xs-regular text-text-tertiary">{t('metadata.documentMetadata.metadataToolTip', { ns: 'dataset' })}</div>
       <Button variant="primary" className="mt-2" onClick={onStart}>
         <div>{t('metadata.documentMetadata.startLabeling', { ns: 'dataset' })}</div>
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index d2750ae21b..71f8afcc92 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -99,7 +99,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
             aria-label={t('operation.close', { ns: 'common' })}
             onClick={onClose}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
         </div>
         <div>
diff --git a/web/app/components/datasets/settings/form/components/external-knowledge-section.tsx b/web/app/components/datasets/settings/form/components/external-knowledge-section.tsx
index cb5c4d0028..fb9c0eed72 100644
--- a/web/app/components/datasets/settings/form/components/external-knowledge-section.tsx
+++ b/web/app/components/datasets/settings/form/components/external-knowledge-section.tsx
@@ -52,7 +52,7 @@ const ExternalKnowledgeSection = ({
         </div>
         <div className="w-full">
           <div className="flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2">
-            <ApiConnectionMod className="h-4 w-4 text-text-secondary" />
+            <ApiConnectionMod className="size-4 text-text-secondary" />
             <div className="overflow-hidden system-sm-medium text-ellipsis text-text-secondary">
               {currentDataset.external_knowledge_info.external_knowledge_api_name}
             </div>
diff --git a/web/app/components/datasets/settings/form/components/indexing-section.tsx b/web/app/components/datasets/settings/form/components/indexing-section.tsx
index 51afe7dfbf..09aceea0f2 100644
--- a/web/app/components/datasets/settings/form/components/indexing-section.tsx
+++ b/web/app/components/datasets/settings/form/components/indexing-section.tsx
@@ -116,7 +116,7 @@ const IndexingSection = ({
             />
             {showUpgradeWarning && (
               <div className="relative mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-2 shadow-xs shadow-shadow-shadow-3">
-                <div className="absolute top-0 left-0 flex h-full w-full items-center bg-toast-warning-bg opacity-40" />
+                <div className="absolute top-0 left-0 flex size-full items-center bg-toast-warning-bg opacity-40" />
                 <div className="p-1">
                   <RiAlertFill className="size-4 text-text-warning-secondary" />
                 </div>
diff --git a/web/app/components/datasets/settings/index-method/keyword-number.tsx b/web/app/components/datasets/settings/index-method/keyword-number.tsx
index b6a90155f0..66ef75d90f 100644
--- a/web/app/components/datasets/settings/index-method/keyword-number.tsx
+++ b/web/app/components/datasets/settings/index-method/keyword-number.tsx
@@ -38,7 +38,7 @@ const KeyWordNumber = ({
         </div>
         <Infotip
           aria-label={t('form.numberOfKeywords', { ns: 'datasetSettings' })}
-          className="h-3.5 w-3.5"
+          className="size-3.5"
         >
           {t('form.numberOfKeywords', { ns: 'datasetSettings' })}
         </Infotip>
diff --git a/web/app/components/datasets/settings/permission-selector/index.tsx b/web/app/components/datasets/settings/permission-selector/index.tsx
index 724a239c94..d4611a8eda 100644
--- a/web/app/components/datasets/settings/permission-selector/index.tsx
+++ b/web/app/components/datasets/settings/permission-selector/index.tsx
@@ -169,7 +169,7 @@ const PermissionSelector = ({
               }
               <RiArrowDownSLine
                 className={cn(
-                  'h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary',
+                  'size-4 shrink-0 text-text-quaternary group-hover:text-text-secondary',
                   open && 'text-text-secondary',
                   disabled && 'text-components-input-text-placeholder!',
                 )}
diff --git a/web/app/components/develop/__tests__/index.spec.tsx b/web/app/components/develop/__tests__/index.spec.tsx
index f8653ef012..61dd43c094 100644
--- a/web/app/components/develop/__tests__/index.spec.tsx
+++ b/web/app/components/develop/__tests__/index.spec.tsx
@@ -224,13 +224,13 @@ describe('DevelopMain', () => {
 
     it('should have horizontal padding on content', () => {
       const { container } = render(<DevelopMain appId="app-123" />)
-      const content = container.querySelector('.px-4')
+      const content = container.querySelector('.p-4')
       expect(content).toBeInTheDocument()
     })
 
     it('should have vertical padding on content', () => {
       const { container } = render(<DevelopMain appId="app-123" />)
-      const content = container.querySelector('.py-4')
+      const content = container.querySelector('.p-4')
       expect(content).toBeInTheDocument()
     })
 
diff --git a/web/app/components/develop/__tests__/tag.spec.tsx b/web/app/components/develop/__tests__/tag.spec.tsx
index 9c01f4b0a2..161fd6c79f 100644
--- a/web/app/components/develop/__tests__/tag.spec.tsx
+++ b/web/app/components/develop/__tests__/tag.spec.tsx
@@ -125,7 +125,7 @@ describe('Tag', () => {
     it('should always have correct font-size class', () => {
       render(<Tag>GET</Tag>)
       const tag = screen.getByText('GET')
-      expect(tag.className).toContain('text-[0.625rem]')
+      expect(tag.className).toContain('text-2xs/6')
     })
 
     it('should always have font-semibold class', () => {
@@ -134,10 +134,10 @@ describe('Tag', () => {
       expect(tag.className).toContain('font-semibold')
     })
 
-    it('should always have leading-6 class', () => {
+    it('should always have text-2xs/6 class', () => {
       render(<Tag>GET</Tag>)
       const tag = screen.getByText('GET')
-      expect(tag.className).toContain('leading-6')
+      expect(tag.className).toContain('text-2xs/6')
     })
   })
 
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx
index 2ecd13f4ab..f06d4d7261 100644
--- a/web/app/components/develop/code.tsx
+++ b/web/app/components/develop/code.tsx
@@ -68,7 +68,7 @@ function CopyButton({ code }: { code: string }) {
         aria-hidden={copied}
         className={cn('pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300', copied && '-translate-y-1.5 opacity-0')}
       >
-        <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
+        <ClipboardIcon className="size-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
         Copy
       </span>
       <span
@@ -93,7 +93,7 @@ function CodePanelHeader({ tag, label }: { tag?: string, label?: string }) {
         </div>
       )}
       {tag && label && (
-        <span className="h-0.5 w-0.5 rounded-full bg-zinc-500" />
+        <span className="size-0.5 rounded-full bg-zinc-500" />
       )}
       {label && (
         <span className="font-mono text-xs text-zinc-400">{label}</span>
diff --git a/web/app/components/develop/index.tsx b/web/app/components/develop/index.tsx
index 484092ae7d..bf82facb6a 100644
--- a/web/app/components/develop/index.tsx
+++ b/web/app/components/develop/index.tsx
@@ -25,7 +25,7 @@ const DevelopMain = ({ appId }: IDevelopMainProps) => {
         <div className="text-lg font-medium text-text-primary"></div>
         <ApiServer apiBaseUrl={appDetail.api_base_url} appId={appId} />
       </div>
-      <div className="grow overflow-auto px-4 py-4 sm:px-10">
+      <div className="grow overflow-auto p-4 sm:px-10">
         <Doc appDetail={appDetail} />
       </div>
     </div>
diff --git a/web/app/components/develop/md.tsx b/web/app/components/develop/md.tsx
index d19e10b35b..9e07effb86 100644
--- a/web/app/components/develop/md.tsx
+++ b/web/app/components/develop/md.tsx
@@ -45,7 +45,7 @@ export const Heading = function H2({
     <>
       <span id={name?.replace(/^#/, '')} className="relative -top-28" />
       <div className="flex items-center gap-x-3">
-        <span className={`rounded-lg px-1.5 font-mono text-[0.625rem] leading-6 font-semibold ring-1 ring-inset ${style}`}>{method}</span>
+        <span className={`rounded-lg px-1.5 font-mono text-2xs/6 font-semibold ring-1 ring-inset ${style}`}>{method}</span>
         {/* <span className="h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600"></span> */}
         <span className="font-mono text-xs text-zinc-400">{url}</span>
       </div>
diff --git a/web/app/components/develop/secret-key/__tests__/secret-key-button.spec.tsx b/web/app/components/develop/secret-key/__tests__/secret-key-button.spec.tsx
index b4f5c139e0..22342b18b5 100644
--- a/web/app/components/develop/secret-key/__tests__/secret-key-button.spec.tsx
+++ b/web/app/components/develop/secret-key/__tests__/secret-key-button.spec.tsx
@@ -150,7 +150,7 @@ describe('SecretKeyButton', () => {
 
     it('should have correct icon dimensions', () => {
       const { container } = render(<SecretKeyButton />)
-      const iconContainer = container.querySelector('.h-3\\.5.w-3\\.5')
+      const iconContainer = container.querySelector('.size-3\\.5')
       expect(iconContainer)!.toBeInTheDocument()
     })
 
diff --git a/web/app/components/develop/secret-key/__tests__/secret-key-modal.spec.tsx b/web/app/components/develop/secret-key/__tests__/secret-key-modal.spec.tsx
index 0dbf7318b2..00948180eb 100644
--- a/web/app/components/develop/secret-key/__tests__/secret-key-modal.spec.tsx
+++ b/web/app/components/develop/secret-key/__tests__/secret-key-modal.spec.tsx
@@ -190,7 +190,7 @@ describe('SecretKeyModal', () => {
       await renderModal(<SecretKeyModal {...defaultProps} appId="app-123" />)
       const buttons = screen.getAllByRole('button')
       expect(buttons.length).toBeGreaterThanOrEqual(2)
-      const deleteIcon = document.body.querySelector('svg[class*="h-4"][class*="w-4"]')
+      const deleteIcon = document.body.querySelector('svg[class*="size-4"]')
       expect(deleteIcon).toBeInTheDocument()
     })
 
@@ -397,7 +397,7 @@ describe('SecretKeyModal', () => {
     it('should have delete button visible for managers', async () => {
       await renderModal(<SecretKeyModal {...defaultProps} appId="app-123" />)
 
-      const deleteIcon = document.body.querySelector('svg[class*="h-4"][class*="w-4"]')
+      const deleteIcon = document.body.querySelector('svg[class*="size-4"]')
       const deleteButton = deleteIcon?.closest('button')
       expect(deleteButton).toBeInTheDocument()
     })
diff --git a/web/app/components/develop/secret-key/input-copy.tsx b/web/app/components/develop/secret-key/input-copy.tsx
index 741cdd9bf5..df540a5ec5 100644
--- a/web/app/components/develop/secret-key/input-copy.tsx
+++ b/web/app/components/develop/secret-key/input-copy.tsx
@@ -44,7 +44,7 @@ const InputCopy = ({
         <div className="relative h-full grow text-[13px]">
           <button
             type="button"
-            className="r-0 absolute top-0 left-0 w-full cursor-pointer truncate border-none bg-transparent py-0 pr-2 pl-2 text-left"
+            className="r-0 absolute top-0 left-0 w-full cursor-pointer truncate border-none bg-transparent px-2 py-0 text-left"
             aria-label={copyLabel}
             onClick={handleCopy}
           >
diff --git a/web/app/components/develop/secret-key/secret-key-button.tsx b/web/app/components/develop/secret-key/secret-key-button.tsx
index ca5eb18403..edeaf531be 100644
--- a/web/app/components/develop/secret-key/secret-key-button.tsx
+++ b/web/app/components/develop/secret-key/secret-key-button.tsx
@@ -22,8 +22,8 @@ const SecretKeyButton = ({ className, appId, textCls }: ISecretKeyButtonProps) =
         size="small"
         variant="ghost"
       >
-        <div className="flex h-3.5 w-3.5 items-center justify-center">
-          <RiKey2Line className="h-3.5 w-3.5 text-text-tertiary" />
+        <div className="flex size-3.5 items-center justify-center">
+          <RiKey2Line className="size-3.5 text-text-tertiary" />
         </div>
         <div className={`px-[3px] system-xs-medium text-text-tertiary ${textCls}`}>{t('apiKey', { ns: 'appApi' })}</div>
       </Button>
diff --git a/web/app/components/develop/secret-key/secret-key-generate.tsx b/web/app/components/develop/secret-key/secret-key-generate.tsx
index cc9b4c778d..47f163b63e 100644
--- a/web/app/components/develop/secret-key/secret-key-generate.tsx
+++ b/web/app/components/develop/secret-key/secret-key-generate.tsx
@@ -36,7 +36,7 @@ const SecretKeyGenerateModal = ({
         </DialogTitle>
 
         <div className="-mt-6 -mr-2 mb-4 flex justify-end">
-          <XMarkIcon className="h-6 w-6 cursor-pointer text-text-tertiary" onClick={onClose} />
+          <XMarkIcon className="size-6 cursor-pointer text-text-tertiary" onClick={onClose} />
         </div>
         <p className="mt-1 text-[13px] leading-5 font-normal text-text-tertiary">{t('apiKeyModal.generateTips', { ns: 'appApi' })}</p>
         <div className="my-4">
diff --git a/web/app/components/develop/secret-key/secret-key-modal.tsx b/web/app/components/develop/secret-key/secret-key-modal.tsx
index 71cb87019c..7d949d7864 100644
--- a/web/app/components/develop/secret-key/secret-key-modal.tsx
+++ b/web/app/components/develop/secret-key/secret-key-modal.tsx
@@ -124,7 +124,7 @@ const SecretKeyModal = ({
           </DialogTitle>
 
           <div className="-mt-6 -mr-2 mb-4 flex justify-end">
-            <XMarkIcon className="h-6 w-6 cursor-pointer text-text-tertiary" onClick={handleClose} />
+            <XMarkIcon className="size-6 cursor-pointer text-text-tertiary" onClick={handleClose} />
           </div>
           <p className="mt-1 shrink-0 text-[13px] leading-5 font-normal text-text-tertiary">{t('apiKeyModal.apiSecretKeyTips', { ns: 'appApi' })}</p>
           {isApiKeysLoading && <div className="mt-4"><Loading /></div>}
@@ -152,7 +152,7 @@ const SecretKeyModal = ({
                               setShowConfirmDelete(true)
                             }}
                           >
-                            <RiDeleteBinLine className="h-4 w-4" />
+                            <RiDeleteBinLine className="size-4" />
                           </ActionButton>
                         )}
                       </div>
@@ -164,7 +164,7 @@ const SecretKeyModal = ({
           }
           <div className="flex">
             <Button className={`mt-4 flex shrink-0 ${s.autoWidth}`} onClick={onCreate} disabled={!currentWorkspace || !isCurrentWorkspaceEditor}>
-              <PlusIcon className="mr-1 flex h-4 w-4 shrink-0" />
+              <PlusIcon className="mr-1 flex size-4 shrink-0" />
               <div className="text-xs font-medium text-text-secondary">{t('apiKeyModal.createNewSecretKey', { ns: 'appApi' })}</div>
             </Button>
           </div>
diff --git a/web/app/components/develop/tag.tsx b/web/app/components/develop/tag.tsx
index 082d63a798..ae7e0bc6e1 100644
--- a/web/app/components/develop/tag.tsx
+++ b/web/app/components/develop/tag.tsx
@@ -53,7 +53,7 @@ export function Tag({
 }: ITagProps) {
   return (
     <span
-      className={cn('font-mono text-[0.625rem] leading-6 font-semibold', variantStyles[variant], colorStyles[color]![variant])}
+      className={cn('font-mono text-2xs/6 font-semibold', variantStyles[variant], colorStyles[color]![variant])}
     >
       {children}
     </span>
diff --git a/web/app/components/develop/toc-panel.tsx b/web/app/components/develop/toc-panel.tsx
index c9087a7f25..bd696129c5 100644
--- a/web/app/components/develop/toc-panel.tsx
+++ b/web/app/components/develop/toc-panel.tsx
@@ -22,7 +22,7 @@ const TocPanel = ({ toc, activeSection, isTocExpanded, onToggle, onItemClick }:
         className="group flex h-11 w-11 items-center justify-center rounded-full border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg transition-all duration-150 hover:bg-background-default-hover hover:shadow-xl"
         aria-label="Open table of contents"
       >
-        <span className="i-ri-list-unordered h-5 w-5 text-text-tertiary transition-colors group-hover:text-text-secondary" />
+        <span className="i-ri-list-unordered size-5 text-text-tertiary transition-colors group-hover:text-text-secondary" />
       </button>
     )
   }
@@ -36,17 +36,17 @@ const TocPanel = ({ toc, activeSection, isTocExpanded, onToggle, onItemClick }:
         <button
           type="button"
           onClick={() => onToggle(false)}
-          className="group flex h-6 w-6 items-center justify-center rounded-md transition-colors hover:bg-state-base-hover"
+          className="group flex size-6 items-center justify-center rounded-md transition-colors hover:bg-state-base-hover"
           aria-label="Close"
         >
-          <span className="i-ri-close-line h-3 w-3 text-text-quaternary transition-colors group-hover:text-text-secondary" />
+          <span className="i-ri-close-line size-3 text-text-quaternary transition-colors group-hover:text-text-secondary" />
         </button>
       </div>
 
       <div className="pointer-events-none absolute top-[41px] right-0 left-0 z-10 h-2 bg-linear-to-b from-components-panel-border-subtle/20 to-transparent"></div>
       <div className="pointer-events-none absolute top-[43px] right-0 left-0 z-10 h-3 bg-linear-to-b from-background-default-hover to-transparent"></div>
 
-      <div className="relative flex-1 overflow-y-auto px-3 py-3 pt-1">
+      <div className="relative flex-1 overflow-y-auto p-3 pt-1">
         {toc.length === 0
           ? (
               <div className="px-2 py-8 text-center text-xs text-text-quaternary">
@@ -71,7 +71,7 @@ const TocPanel = ({ toc, activeSection, isTocExpanded, onToggle, onItemClick }:
                       >
                         <span
                           className={cn(
-                            'mr-2 h-1.5 w-1.5 rounded-full transition-all duration-200',
+                            'mr-2 size-1.5 rounded-full transition-all duration-200',
                             isActive
                               ? 'scale-100 bg-text-accent'
                               : 'scale-75 bg-components-panel-border',
@@ -88,7 +88,7 @@ const TocPanel = ({ toc, activeSection, isTocExpanded, onToggle, onItemClick }:
             )}
       </div>
 
-      <div className="pointer-events-none absolute right-0 bottom-0 left-0 z-10 h-4 rounded-b-xl bg-linear-to-t from-background-default-hover to-transparent"></div>
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-4 rounded-b-xl bg-linear-to-t from-background-default-hover to-transparent"></div>
     </nav>
   )
 }
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 3a6d4962e2..d458ec38fa 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -56,12 +56,12 @@ const AppCard = ({
           />
           <AppTypeIcon
             wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm"
-            className="h-3 w-3"
+            className="size-3"
             type={appBasicInfo.mode}
           />
         </div>
         <div className="w-0 grow py-px">
-          <div className="flex items-center text-sm leading-5 font-semibold text-text-secondary">
+          <div className="flex items-center text-sm/5 font-semibold text-text-secondary">
             <div className="truncate" title={appBasicInfo.name}>{appBasicInfo.name}</div>
           </div>
           <div className="flex items-center text-[10px] leading-[18px] font-medium text-text-tertiary">
@@ -84,7 +84,7 @@ const AppCard = ({
             {
               canCreate && (
                 <Button variant="primary" className="h-7" onClick={() => onCreate()}>
-                  <PlusIcon className="mr-1 h-4 w-4" />
+                  <PlusIcon className="mr-1 size-4" />
                   <span className="text-xs">{t('appCard.addToWorkspace', { ns: 'explore' })}</span>
                 </Button>
               )
diff --git a/web/app/components/explore/banner/banner-item.tsx b/web/app/components/explore/banner/banner-item.tsx
index 46b2f4a9a2..7c326b25ce 100644
--- a/web/app/components/explore/banner/banner-item.tsx
+++ b/web/app/components/explore/banner/banner-item.tsx
@@ -165,7 +165,7 @@ export const BannerItem: FC<BannerItemProps> = ({
               style={viewMoreStyle}
             >
               <div className="flex h-4 w-4 items-center justify-center rounded-full bg-text-accent p-[2px]">
-                <RiArrowRightLine className="h-3 w-3 text-text-primary-on-surface" />
+                <RiArrowRightLine className="size-3 text-text-primary-on-surface" />
               </div>
               <span className="system-sm-semibold-uppercase text-text-accent">
                 {t('banner.viewMore', { ns: 'explore' })}
diff --git a/web/app/components/explore/category.tsx b/web/app/components/explore/category.tsx
index ef7ac13cd5..a088d9ffd8 100644
--- a/web/app/components/explore/category.tsx
+++ b/web/app/components/explore/category.tsx
@@ -44,7 +44,7 @@ const Category: FC<ICategoryProps> = ({
         className={itemClassName(isAllCategories)}
         onClick={() => onChange(allCategoriesEn)}
       >
-        <ThumbsUp className="mr-1 h-3.5 w-3.5" />
+        <ThumbsUp className="mr-1 size-3.5" />
         {t('apps.allCategories', { ns: 'explore' })}
       </div>
       {list.filter(name => name !== allCategoriesEn).map(name => (
diff --git a/web/app/components/explore/installed-app/index.tsx b/web/app/components/explore/installed-app/index.tsx
index 78191f2873..65addeb54f 100644
--- a/web/app/components/explore/installed-app/index.tsx
+++ b/web/app/components/explore/installed-app/index.tsx
@@ -93,7 +93,7 @@ const InstalledApp = ({
   if (userCanAccessApp && !userCanAccessApp.result) {
     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." />
+        <AppUnavailable className="size-auto" code={403} unknownReason="no permission." />
       </div>
     )
   }
diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
index 0d9d57841e..d7942170e2 100644
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -54,7 +54,7 @@ const ItemOperation: FC<IItemOperationProps> = ({
     >
       <DropdownMenuTrigger
         data-testid="item-operation-trigger"
-        className={cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', (isItemHovering || open) && `${s.open} bg-components-actionbar-bg! shadow-none!`)}
+        className={cn(className, s.btn, 'size-6 rounded-md border-none py-1', (isItemHovering || open) && `${s.open} bg-components-actionbar-bg! shadow-none!`)}
         onClick={(e) => {
           e.stopPropagation()
         }}
@@ -78,7 +78,7 @@ const ItemOperation: FC<IItemOperationProps> = ({
             togglePin()
           }}
         >
-          <Pin02 className="h-4 w-4 shrink-0 text-text-secondary" />
+          <Pin02 className="size-4 shrink-0 text-text-secondary" />
           <span className={s.actionName}>{isPinned ? t('sidebar.action.unpin') : t('sidebar.action.pin')}</span>
         </DropdownMenuItem>
         {isShowRenameConversation && (
@@ -89,7 +89,7 @@ const ItemOperation: FC<IItemOperationProps> = ({
               onRenameConversation?.()
             }}
           >
-            <RiEditLine className="h-4 w-4 shrink-0 text-text-secondary" />
+            <RiEditLine className="size-4 shrink-0 text-text-secondary" />
             <span className={s.actionName}>{t('sidebar.action.rename')}</span>
           </DropdownMenuItem>
         )}
@@ -101,7 +101,7 @@ const ItemOperation: FC<IItemOperationProps> = ({
               onDelete()
             }}
           >
-            <RiDeleteBinLine className={cn(s.deleteActionItemChild, 'h-4 w-4 shrink-0 stroke-current stroke-2 text-inherit')} />
+            <RiDeleteBinLine className={cn(s.deleteActionItemChild, 'size-4 shrink-0 stroke-current stroke-2 text-inherit')} />
             <span className={cn(s.actionName, s.deleteActionItemChild, 'text-inherit')}>{t('sidebar.action.delete')}</span>
           </DropdownMenuItem>
         )}
diff --git a/web/app/components/explore/sidebar/app-nav-item/index.tsx b/web/app/components/explore/sidebar/app-nav-item/index.tsx
index c2156d9dec..2dd8286e8c 100644
--- a/web/app/components/explore/sidebar/app-nav-item/index.tsx
+++ b/web/app/components/explore/sidebar/app-nav-item/index.tsx
@@ -46,7 +46,7 @@ export default function AppNavItem({
     <div
       ref={ref}
       key={id}
-      className={cn('flex h-8 items-center justify-between rounded-lg px-2 system-sm-medium text-sm font-normal text-components-menu-item-text mobile:justify-center mobile:px-1', isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover')}
+      className={cn('flex h-8 items-center justify-between rounded-lg px-2 body-sm-regular text-sm text-components-menu-item-text mobile:justify-center mobile:px-1', isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover')}
       onClick={() => {
         router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
       }}
diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
index c6128cb560..542332bd19 100644
--- a/web/app/components/explore/sidebar/index.tsx
+++ b/web/app/components/explore/sidebar/index.tsx
@@ -133,7 +133,7 @@ const SideBar = () => {
       )}
 
       {!isMobile && (
-        <div className="mt-auto flex pt-3 pb-3">
+        <div className="mt-auto flex py-3">
           <button
             type="button"
             aria-label={isFold ? t('sidebar.expandSidebar', { ns: 'layout' }) : t('sidebar.collapseSidebar', { ns: 'layout' })}
@@ -151,7 +151,7 @@ const SideBar = () => {
 
       <AlertDialog open={showConfirm} onOpenChange={setShowConfirm}>
         <AlertDialogContent>
-          <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-6 pb-4 pl-6">
+          <div className="flex flex-col items-start gap-2 self-stretch px-6 pt-6 pb-4">
             <AlertDialogTitle className="w-full title-2xl-semi-bold text-text-primary">
               {t('sidebar.delete.title', { ns: 'explore' })}
             </AlertDialogTitle>
diff --git a/web/app/components/explore/try-app/app-info/index.tsx b/web/app/components/explore/try-app/app-info/index.tsx
index c5749bee7c..ec595ea247 100644
--- a/web/app/components/explore/try-app/app-info/index.tsx
+++ b/web/app/components/explore/try-app/app-info/index.tsx
@@ -74,12 +74,12 @@ const AppInfo: FC<Props> = ({
           />
           <AppTypeIcon
             wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm"
-            className="h-3 w-3"
+            className="size-3"
             type={mode}
           />
         </div>
         <div className="w-0 grow py-px">
-          <div className="flex items-center text-sm leading-5 font-semibold text-text-secondary">
+          <div className="flex items-center text-sm/5 font-semibold text-text-secondary">
             <div className="truncate" title={appDetail.name}>{appDetail.name}</div>
           </div>
           <div className="flex items-center text-[10px] leading-[18px] font-medium text-text-tertiary">
diff --git a/web/app/components/explore/try-app/app/__tests__/index.spec.tsx b/web/app/components/explore/try-app/app/__tests__/index.spec.tsx
index 1c244e547d..9064fa1c2a 100644
--- a/web/app/components/explore/try-app/app/__tests__/index.spec.tsx
+++ b/web/app/components/explore/try-app/app/__tests__/index.spec.tsx
@@ -176,7 +176,7 @@ describe('TryApp (app/index.tsx)', () => {
       const { container } = render(<TryApp appId="test-app-id" appDetail={appDetail} />)
 
       const wrapper = container.firstChild as HTMLElement
-      expect(wrapper).toHaveClass('flex', 'h-full', 'w-full')
+      expect(wrapper).toHaveClass('flex', 'size-full')
     })
   })
 })
diff --git a/web/app/components/explore/try-app/app/index.tsx b/web/app/components/explore/try-app/app/index.tsx
index f5dc14510d..4224719bbd 100644
--- a/web/app/components/explore/try-app/app/index.tsx
+++ b/web/app/components/explore/try-app/app/index.tsx
@@ -22,7 +22,7 @@ const TryApp: FC<Props> = ({
 
   useDocumentTitle(appDetail?.site?.title || '')
   return (
-    <div className="flex h-full w-full">
+    <div className="flex size-full">
       {isChat && (
         <Chat appId={appId} appDetail={appDetail} className="h-full grow" />
       )}
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index 52937f0fd7..0c11ebb289 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -55,11 +55,11 @@ const TryApp: FC<Props> = ({
           </div>
         ) : isError ? (
           <div className="flex h-full items-center justify-center">
-            <AppUnavailable className="h-auto w-auto" isUnknownReason={!error} unknownReason={error instanceof Error ? error.message : undefined} />
+            <AppUnavailable className="size-auto" isUnknownReason={!error} unknownReason={error instanceof Error ? error.message : undefined} />
           </div>
         ) : !appDetail ? (
           <div className="flex h-full items-center justify-center">
-            <AppUnavailable className="h-auto w-auto" isUnknownReason />
+            <AppUnavailable className="size-auto" isUnknownReason />
           </div>
         ) : (
           <div className="flex h-full flex-col">
diff --git a/web/app/components/explore/try-app/preview/__tests__/flow-app-preview.spec.tsx b/web/app/components/explore/try-app/preview/__tests__/flow-app-preview.spec.tsx
index 22410a1e81..29ac8ce8a4 100644
--- a/web/app/components/explore/try-app/preview/__tests__/flow-app-preview.spec.tsx
+++ b/web/app/components/explore/try-app/preview/__tests__/flow-app-preview.spec.tsx
@@ -173,7 +173,7 @@ describe('FlowAppPreview', () => {
       const { container } = render(<FlowAppPreview appId="test-app-id" />)
 
       const wrapper = container.firstChild as HTMLElement
-      expect(wrapper).toHaveClass('h-full', 'w-full')
+      expect(wrapper).toHaveClass('size-full')
     })
   })
 })
diff --git a/web/app/components/explore/try-app/preview/__tests__/index.spec.tsx b/web/app/components/explore/try-app/preview/__tests__/index.spec.tsx
index 701253a302..f1f66a962f 100644
--- a/web/app/components/explore/try-app/preview/__tests__/index.spec.tsx
+++ b/web/app/components/explore/try-app/preview/__tests__/index.spec.tsx
@@ -121,7 +121,7 @@ describe('Preview', () => {
       const { container } = render(<Preview appId="test-app-id" appDetail={appDetail} />)
 
       const wrapper = container.firstChild as HTMLElement
-      expect(wrapper).toHaveClass('h-full', 'w-full')
+      expect(wrapper).toHaveClass('size-full')
     })
   })
 })
diff --git a/web/app/components/explore/try-app/preview/basic-app-preview.tsx b/web/app/components/explore/try-app/preview/basic-app-preview.tsx
index ef29e1305a..cbc56377fd 100644
--- a/web/app/components/explore/try-app/preview/basic-app-preview.tsx
+++ b/web/app/components/explore/try-app/preview/basic-app-preview.tsx
@@ -335,9 +335,9 @@ const BasicAppPreview: FC<Props> = ({
   return (
     <ConfigContext.Provider value={value as any}>
       <FeaturesProvider features={featuresData}>
-        <div className="flex h-full w-full flex-col bg-components-panel-on-panel-item-bg">
+        <div className="flex size-full flex-col bg-components-panel-on-panel-item-bg">
           <div className="relative flex h-[200px] grow">
-            <div className="flex h-full w-full shrink-0 flex-col sm:w-1/2">
+            <div className="flex size-full shrink-0 flex-col sm:w-1/2">
               <Config />
             </div>
             {!isMobile && (
diff --git a/web/app/components/explore/try-app/preview/flow-app-preview.tsx b/web/app/components/explore/try-app/preview/flow-app-preview.tsx
index bb7ddfff91..89a68a2ec1 100644
--- a/web/app/components/explore/try-app/preview/flow-app-preview.tsx
+++ b/web/app/components/explore/try-app/preview/flow-app-preview.tsx
@@ -27,7 +27,7 @@ const FlowAppPreview: FC<Props> = ({
   if (!data)
     return null
   return (
-    <div className="h-full w-full">
+    <div className="size-full">
       <WorkflowPreview
         {...data.graph}
         className={cn(className)}
diff --git a/web/app/components/explore/try-app/preview/index.tsx b/web/app/components/explore/try-app/preview/index.tsx
index a0c5fdc594..3acaf63117 100644
--- a/web/app/components/explore/try-app/preview/index.tsx
+++ b/web/app/components/explore/try-app/preview/index.tsx
@@ -17,7 +17,7 @@ const Preview: FC<Props> = ({
   const isBasicApp = ['agent-chat', 'chat', 'completion'].includes(appDetail.mode)
 
   return (
-    <div className="h-full w-full">
+    <div className="size-full">
       {isBasicApp ? <BasicAppPreview appId={appId} /> : <FlowAppPreview appId={appId} className="h-full" />}
     </div>
   )
diff --git a/web/app/components/goto-anything/actions/app.tsx b/web/app/components/goto-anything/actions/app.tsx
index b14d8b58fe..4524ba741f 100644
--- a/web/app/components/goto-anything/actions/app.tsx
+++ b/web/app/components/goto-anything/actions/app.tsx
@@ -40,7 +40,7 @@ const appIcon = (app: App) => (
     />
     <AppTypeIcon
       wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-sm border border-divider-regular outline-solid outline-components-panel-on-panel-item-bg"
-      className="h-3 w-3"
+      className="size-3"
       type={app.mode}
     />
   </div>
@@ -83,7 +83,7 @@ const parserWithSections = (apps: App[]): SearchResult[] => {
         path: section.path,
         icon: (
           <div className="flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg">
-            <section.icon className="h-4 w-4 text-text-tertiary" />
+            <section.icon className="size-4 text-text-tertiary" />
           </div>
         ),
         data: app,
diff --git a/web/app/components/goto-anything/actions/commands/account.tsx b/web/app/components/goto-anything/actions/commands/account.tsx
index d1fa36b6f0..770eabbc08 100644
--- a/web/app/components/goto-anything/actions/commands/account.tsx
+++ b/web/app/components/goto-anything/actions/commands/account.tsx
@@ -29,7 +29,7 @@ export const accountCommand: SlashCommandHandler<AccountDeps> = {
       type: 'command' as const,
       icon: (
         <div className="flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg">
-          <RiUser3Line className="h-4 w-4 text-text-tertiary" />
+          <RiUser3Line className="size-4 text-text-tertiary" />
         </div>
       ),
       data: { command: 'navigation.account', args: {} },
diff --git a/web/app/components/goto-anything/actions/commands/community.tsx b/web/app/components/goto-anything/actions/commands/community.tsx
index 685149402d..dec35603c2 100644
--- a/web/app/components/goto-anything/actions/commands/community.tsx
+++ b/web/app/components/goto-anything/actions/commands/community.tsx
@@ -30,7 +30,7 @@ export const communityCommand: SlashCommandHandler<CommunityDeps> = {
       type: 'command' as const,
       icon: (
         <div className="flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg">
-          <RiDiscordLine className="h-4 w-4 text-text-tertiary" />
+          <RiDiscordLine className="size-4 text-text-tertiary" />
         </div>
       ),
       data: { command: 'navigation.community', args: { url: 'https://discord.gg/5AEfbxcd9k' } },
diff --git a/web/app/components/goto-anything/actions/commands/docs.tsx b/web/app/components/goto-anything/actions/commands/docs.tsx
index 8b04e84157..6de7a7f979 100644
--- a/web/app/components/goto-anything/actions/commands/docs.tsx
+++ b/web/app/components/goto-anything/actions/commands/docs.tsx
@@ -35,7 +35,7 @@ export const docsCommand: SlashCommandHandler<DocDeps> = {
       type: 'command' as const,
       icon: (
         <div className="flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg">
-          <RiBookOpenLine className="h-4 w-4 text-text-tertiary" />
+          <RiBookOpenLine className="size-4 text-text-tertiary" />
         </div>
       ),
       data: { command: 'navigation.doc', args: {} },
diff --git a/web/app/components/goto-anything/actions/commands/forum.tsx b/web/app/components/goto-anything/actions/commands/forum.tsx
index 36116ceb1f..184bc13877 100644
--- a/web/app/components/goto-anything/actions/commands/forum.tsx
+++ b/web/app/components/goto-anything/actions/commands/forum.tsx
@@ -30,7 +30,7 @@ export const forumCommand: SlashCommandHandler<ForumDeps> = {
       type: 'command' as const,
       icon: (
         <div className="flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg">
-          <RiFeedbackLine className="h-4 w-4 text-text-tertiary" />
+          <RiFeedbackLine className="size-4 text-text-tertiary" />
         </div>
       ),
       data: { command: 'navigation.forum', args: { url: 'https://forum.dify.ai' } },
diff --git a/web/app/components/goto-anything/actions/commands/go.tsx b/web/app/components/goto-anything/actions/commands/go.tsx
index 54de829897..095f192276 100644
--- a/web/app/components/goto-anything/actions/commands/go.tsx
+++ b/web/app/components/goto-anything/actions/commands/go.tsx
@@ -40,7 +40,7 @@ export const goCommand: SlashCommandHandler = {
       type: 'command' as const,
       icon: (
         <div className="flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg">
-          <item.icon className="h-4 w-4 text-text-tertiary" />
+          <item.icon className="size-4 text-text-tertiary" />
         </div>
       ),
       data: { command: 'navigation.go', args: { path: item.path } },
diff --git a/web/app/components/goto-anything/actions/commands/theme.tsx b/web/app/components/goto-anything/actions/commands/theme.tsx
index ba1416229d..b05231b74b 100644
--- a/web/app/components/goto-anything/actions/commands/theme.tsx
+++ b/web/app/components/goto-anything/actions/commands/theme.tsx
@@ -15,19 +15,19 @@ const THEME_ITEMS = [
     id: 'system',
     titleKey: 'gotoAnything.actions.themeSystem',
     descKey: 'gotoAnything.actions.themeSystemDesc',
-    icon: <RiComputerLine className="h-4 w-4 text-text-tertiary" />,
+    icon: <RiComputerLine className="size-4 text-text-tertiary" />,
   },
   {
     id: 'light',
     titleKey: 'gotoAnything.actions.themeLight',
     descKey: 'gotoAnything.actions.themeLightDesc',
-    icon: <RiSunLine className="h-4 w-4 text-text-tertiary" />,
+    icon: <RiSunLine className="size-4 text-text-tertiary" />,
   },
   {
     id: 'dark',
     titleKey: 'gotoAnything.actions.themeDark',
     descKey: 'gotoAnything.actions.themeDarkDesc',
-    icon: <RiMoonLine className="h-4 w-4 text-text-tertiary" />,
+    icon: <RiMoonLine className="size-4 text-text-tertiary" />,
   },
 ] as const
 
diff --git a/web/app/components/goto-anything/actions/commands/zen.tsx b/web/app/components/goto-anything/actions/commands/zen.tsx
index f4e0bec7a9..e23ef619c2 100644
--- a/web/app/components/goto-anything/actions/commands/zen.tsx
+++ b/web/app/components/goto-anything/actions/commands/zen.tsx
@@ -40,7 +40,7 @@ export const zenCommand: SlashCommandHandler<ZenDeps> = {
       type: 'command' as const,
       icon: (
         <div className="flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg">
-          <RiFullscreenLine className="h-4 w-4 text-text-tertiary" />
+          <RiFullscreenLine className="size-4 text-text-tertiary" />
         </div>
       ),
       data: { command: 'workflow.zen', args: {} },
diff --git a/web/app/components/goto-anything/components/__tests__/search-input.spec.tsx b/web/app/components/goto-anything/components/__tests__/search-input.spec.tsx
index 130c1e55ec..85d84c26f2 100644
--- a/web/app/components/goto-anything/components/__tests__/search-input.spec.tsx
+++ b/web/app/components/goto-anything/components/__tests__/search-input.spec.tsx
@@ -186,7 +186,7 @@ describe('SearchInput', () => {
       render(<SearchInput {...defaultProps} />)
 
       const icon = screen.getByTestId('search-icon')
-      expect(icon).toHaveClass('h-4', 'w-4', 'text-text-quaternary')
+      expect(icon).toHaveClass('size-4', 'text-text-quaternary')
     })
 
     it('should have mode badge styling when visible', () => {
diff --git a/web/app/components/goto-anything/components/empty-state.tsx b/web/app/components/goto-anything/components/empty-state.tsx
index 1f18fec6d5..c48796e0f0 100644
--- a/web/app/components/goto-anything/components/empty-state.tsx
+++ b/web/app/components/goto-anything/components/empty-state.tsx
@@ -25,7 +25,7 @@ const EmptyState: FC<EmptyStateProps> = ({
     return (
       <div className="flex items-center justify-center py-8 text-center text-text-tertiary">
         <div className="flex items-center gap-2">
-          <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-gray-600"></div>
+          <div className="size-4 animate-spin rounded-full border-2 border-gray-300 border-t-gray-600"></div>
           <span className="text-sm">{t('gotoAnything.searching', { ns: 'app' })}</span>
         </div>
       </div>
diff --git a/web/app/components/goto-anything/components/search-input.tsx b/web/app/components/goto-anything/components/search-input.tsx
index 4cca85fea9..b1cf1123e0 100644
--- a/web/app/components/goto-anything/components/search-input.tsx
+++ b/web/app/components/goto-anything/components/search-input.tsx
@@ -36,7 +36,7 @@ const SearchInput: FC<SearchInputProps> = ({
 
   return (
     <div className="flex items-center gap-3 border-b border-divider-subtle bg-components-panel-bg-blur px-4 py-3">
-      <RiSearchLine className="h-4 w-4 text-text-quaternary" />
+      <RiSearchLine className="size-4 text-text-quaternary" />
       <div className="flex flex-1 items-center gap-2">
         <Input
           ref={inputRef}
diff --git a/web/app/components/header/account-about/index.tsx b/web/app/components/header/account-about/index.tsx
index a47b24a743..fb72c60237 100644
--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -38,11 +38,11 @@ export default function AccountAbout({
         <div className="relative">
           <button
             type="button"
-            className="absolute top-0 right-0 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            className="absolute top-0 right-0 flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             aria-label={t('operation.close', { ns: 'common' })}
             onClick={onCancel}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
           <div className="flex flex-col items-center gap-4 py-8">
             {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index b62eb42482..cc1bd06641 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -154,7 +154,7 @@ export default function AppSelector() {
                   {userProfile.name}
                   {isEducationAccount && (
                     <PremiumBadge size="s" color="blue" className="ml-1 px-2!">
-                      <span aria-hidden className="mr-1 i-ri-graduation-cap-fill h-3 w-3" />
+                      <span aria-hidden className="mr-1 i-ri-graduation-cap-fill size-3" />
                       <span className="system-2xs-medium">EDU</span>
                     </PremiumBadge>
                   )}
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index 934a003c4c..d776e9bad4 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -31,7 +31,7 @@ const WorkplaceSelectorItem = memo(({
 }: WorkplaceSelectorItemProps) => (
   <SelectItem value={workspace.id} className="gap-2 py-1 pr-2 pl-3">
     <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]">
-      <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle leading-6 font-semibold text-shadow-shadow-1 uppercase opacity-90">
+      <span className="h-6 bg-linear-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle leading-6 font-semibold text-shadow-shadow-1 uppercase opacity-90">
         {workspace.name[0]?.toLocaleUpperCase()}
       </span>
     </div>
@@ -93,7 +93,7 @@ const WorkplaceSelector = () => {
       >
         <div className="flex items-center">
           <div className="mr-1.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px] max-[800px]:mr-0">
-            <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle leading-6 font-semibold text-shadow-shadow-1 uppercase opacity-90">
+            <span className="h-6 bg-linear-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle leading-6 font-semibold text-shadow-shadow-1 uppercase opacity-90">
               {currentWorkspace?.name[0]?.toLocaleUpperCase()}
             </span>
           </div>
diff --git a/web/app/components/header/account-setting/Integrations-page/index.tsx b/web/app/components/header/account-setting/Integrations-page/index.tsx
index 6d8c7a769c..d1c8d2585d 100644
--- a/web/app/components/header/account-setting/Integrations-page/index.tsx
+++ b/web/app/components/header/account-setting/Integrations-page/index.tsx
@@ -38,7 +38,7 @@ export default function IntegrationsPage() {
               return null
             return (
               <div key={integrate.provider} className="mb-2 flex items-center rounded-lg border-[0.5px] border-gray-200 bg-gray-50 px-3 py-2">
-                <div className={cn('mr-3 h-8 w-8 rounded-lg border border-gray-100 bg-white', s[`${integrate.provider}-icon`])} />
+                <div className={cn('mr-3 size-8 rounded-lg border border-gray-100 bg-white', s[`${integrate.provider}-icon`])} />
                 <div className="grow">
                   <div className="text-sm leading-[21px] font-medium text-gray-800">{info.name}</div>
                   <div className="text-xs leading-[18px] font-normal text-gray-500">{info.description}</div>
diff --git a/web/app/components/header/account-setting/api-based-extension-page/empty.tsx b/web/app/components/header/account-setting/api-based-extension-page/empty.tsx
index 61ff99a4c6..16a87d67ed 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/empty.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/empty.tsx
@@ -12,7 +12,7 @@ export function Empty() {
   return (
     <div className="mb-2 rounded-xl bg-background-section p-6">
       <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg-alt shadow-lg backdrop-blur-xs">
-        <RiPuzzle2Line className="h-5 w-5 text-text-accent" />
+        <RiPuzzle2Line className="size-5 text-text-accent" />
       </div>
       <div className="mb-1 system-sm-medium text-text-secondary">{t('apiBasedExtension.title', { ns: 'common' })}</div>
       <a
@@ -22,7 +22,7 @@ export function Empty() {
         rel="noopener noreferrer"
       >
         {t('apiBasedExtension.link', { ns: 'common' })}
-        <RiExternalLinkLine className="ml-1 h-3 w-3" />
+        <RiExternalLinkLine className="ml-1 size-3" />
       </a>
     </div>
   )
diff --git a/web/app/components/header/account-setting/api-based-extension-page/index.tsx b/web/app/components/header/account-setting/api-based-extension-page/index.tsx
index 9c76ab912f..4180d12479 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/index.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/index.tsx
@@ -62,7 +62,7 @@ export function ApiBasedExtensionPage() {
         className="w-full"
         onClick={handleOpenApiBasedExtensionModal}
       >
-        <span className="mr-1 i-ri-add-line h-4 w-4" aria-hidden="true" />
+        <span className="mr-1 i-ri-add-line size-4" aria-hidden="true" />
         {t('apiBasedExtension.add', { ns: 'common' })}
       </Button>
       {
diff --git a/web/app/components/header/account-setting/api-based-extension-page/item.tsx b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
index 63138108cf..25485226b2 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/item.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
@@ -50,13 +50,13 @@ export function Item({
         <Button
           onClick={handleOpenApiBasedExtensionModal}
         >
-          <span className="mr-1 i-ri-edit-line h-4 w-4" aria-hidden="true" />
+          <span className="mr-1 i-ri-edit-line size-4" aria-hidden="true" />
           {t('operation.edit', { ns: 'common' })}
         </Button>
         <Button
           onClick={() => setShowDeleteConfirm(true)}
         >
-          <span className="mr-1 i-ri-delete-bin-line h-4 w-4" aria-hidden="true" />
+          <span className="mr-1 i-ri-delete-bin-line size-4" aria-hidden="true" />
           {t('operation.delete', { ns: 'common' })}
         </Button>
       </div>
diff --git a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
index 394f3b204a..b310b8b796 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
@@ -105,7 +105,7 @@ export function ApiBasedExtensionModal(props: ApiBasedExtensionModalProps) {
                 rel="noopener noreferrer"
                 className="inline-flex w-fit items-center text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
               >
-                <span className="mr-1 i-custom-vender-line-education-book-open-01 h-3 w-3" aria-hidden="true" />
+                <span className="mr-1 i-custom-vender-line-education-book-open-01 size-3" aria-hidden="true" />
                 {t('apiBasedExtension.link', { ns: 'common' })}
               </a>
             </FieldDescription>
diff --git a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
index e346c84261..22cdbeac7a 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
@@ -56,14 +56,14 @@ export function ApiBasedExtensionSelector({
                           <div className="mr-1.5 w-[270px] truncate text-right text-xs text-text-quaternary">
                             {currentItem.api_endpoint}
                           </div>
-                          <span className={`i-ri-arrow-down-s-line h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} aria-hidden="true" />
+                          <span className={`i-ri-arrow-down-s-line size-4 text-text-secondary ${!open && 'opacity-60'}`} aria-hidden="true" />
                         </div>
                       </div>
                     )
                   : (
                       <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pr-2.5 pl-3 text-sm text-text-quaternary">
                         {t('apiBasedExtension.selector.placeholder', { ns: 'common' })}
-                        <span className={`i-ri-arrow-down-s-line h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} aria-hidden="true" />
+                        <span className={`i-ri-arrow-down-s-line size-4 text-text-secondary ${!open && 'opacity-60'}`} aria-hidden="true" />
                       </div>
                     )
               }
@@ -91,7 +91,7 @@ export function ApiBasedExtensionSelector({
                   }}
                 >
                   {t('apiBasedExtension.selector.manage', { ns: 'common' })}
-                  <span className="ml-0.5 i-custom-vender-line-arrows-arrow-up-right h-3 w-3" aria-hidden="true" />
+                  <span className="ml-0.5 i-custom-vender-line-arrows-arrow-up-right size-3" aria-hidden="true" />
                 </button>
               </div>
               <div className="max-h-[250px] overflow-y-auto">
@@ -120,7 +120,7 @@ export function ApiBasedExtensionSelector({
                   setAddModalOpen(true)
                 }}
               >
-                <span className="mr-2 i-ri-add-line h-4 w-4" aria-hidden="true" />
+                <span className="mr-2 i-ri-add-line size-4" aria-hidden="true" />
                 {t('operation.add', { ns: 'common' })}
               </button>
             </div>
diff --git a/web/app/components/header/account-setting/collapse/index.tsx b/web/app/components/header/account-setting/collapse/index.tsx
index 78003bad3a..e135d4aeea 100644
--- a/web/app/components/header/account-setting/collapse/index.tsx
+++ b/web/app/components/header/account-setting/collapse/index.tsx
@@ -34,8 +34,8 @@ const Collapse = ({
         {title}
         {
           open
-            ? <ChevronDownIcon className="h-3 w-3 text-components-button-tertiary-text" aria-hidden="true" />
-            : <ChevronRightIcon className="h-3 w-3 text-components-button-tertiary-text" aria-hidden="true" />
+            ? <ChevronDownIcon className="size-3 text-components-button-tertiary-text" aria-hidden="true" />
+            : <ChevronRightIcon className="size-3 text-components-button-tertiary-text" aria-hidden="true" />
         }
       </button>
       {
diff --git a/web/app/components/header/account-setting/data-source-page-new/card.tsx b/web/app/components/header/account-setting/data-source-page-new/card.tsx
index 3d875ab8fa..a69b236a2c 100644
--- a/web/app/components/header/account-setting/data-source-page-new/card.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/card.tsx
@@ -124,7 +124,7 @@ const Card = ({
       <div className="flex items-center p-3 pb-2">
         <img
           src={icon}
-          className="mr-3 flex h-10 w-10 shrink-0 items-center justify-center"
+          className="mr-3 flex size-10 shrink-0 items-center justify-center"
         />
         <div className="grow">
           <div className="system-md-semibold text-text-primary">
diff --git a/web/app/components/header/account-setting/data-source-page-new/configure.tsx b/web/app/components/header/account-setting/data-source-page-new/configure.tsx
index f242d17079..1ce203d6ef 100644
--- a/web/app/components/header/account-setting/data-source-page-new/configure.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/configure.tsx
@@ -72,7 +72,7 @@ const Configure = ({
             <Button
               variant="secondary-accent"
             >
-              <RiAddLine className="h-4 w-4" />
+              <RiAddLine className="size-4" />
               {t('dataSource.configure', { ns: 'common' })}
             </Button>
           )}
diff --git a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
index 9deff0cc1f..d56a7f5c0e 100644
--- a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
@@ -54,14 +54,14 @@ const InstallFromMarketplace = ({
           className="flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left system-md-semibold text-text-primary"
           onClick={() => setCollapse(!collapse)}
         >
-          <RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} aria-hidden="true" />
+          <RiArrowDownSLine className={cn('size-4', collapse && '-rotate-90')} aria-hidden="true" />
           {t('modelProvider.installDataSourceProvider', { ns: 'common' })}
         </button>
         <div className="mb-2 flex items-center pt-2">
           <span className="pr-1 system-sm-regular text-text-tertiary">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
           <Link target="_blank" href={getMarketplaceUrl('', { theme })} className="inline-flex items-center system-sm-medium text-text-accent">
             {t('marketplace.difyMarketplace', { ns: 'plugin' })}
-            <RiArrowRightUpLine className="h-4 w-4" />
+            <RiArrowRightUpLine className="size-4" />
           </Link>
         </div>
       </div>
diff --git a/web/app/components/header/account-setting/data-source-page-new/item.tsx b/web/app/components/header/account-setting/data-source-page-new/item.tsx
index b00db1687f..8fb3ca305a 100644
--- a/web/app/components/header/account-setting/data-source-page-new/item.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/item.tsx
@@ -75,7 +75,7 @@ const Item = ({
         )
       }
       <div className="flex shrink-0 items-center">
-        <div className="mr-1 flex h-3 w-3 items-center justify-center">
+        <div className="mr-1 flex size-3 items-center justify-center">
           <Indicator color="green" />
         </div>
         <div className="system-xs-semibold-uppercase text-util-colors-green-green-600">
diff --git a/web/app/components/header/account-setting/data-source-page-new/operator.tsx b/web/app/components/header/account-setting/data-source-page-new/operator.tsx
index ccdc13a8a0..226051c2e1 100644
--- a/web/app/components/header/account-setting/data-source-page-new/operator.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/operator.tsx
@@ -53,36 +53,36 @@ const Operator = ({
             className={cn(open && 'bg-state-base-hover', 'focus-visible:ring-2 focus-visible:ring-state-accent-solid')}
             aria-label={t('operation.more', { ns: 'common' })}
           >
-            <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
+            <span aria-hidden className="i-ri-more-fill size-4 text-text-tertiary" />
           </ActionButton>
         )}
       />
       <DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="min-w-[200px]">
         <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('setDefault')}>
-          <span aria-hidden className="i-ri-home-9-line h-4 w-4 text-text-tertiary" />
+          <span aria-hidden className="i-ri-home-9-line size-4 text-text-tertiary" />
           <div className="system-sm-semibold text-text-secondary">{t('auth.setDefault', { ns: 'plugin' })}</div>
         </DropdownMenuItem>
         {type === CredentialTypeEnum.OAUTH2 && (
           <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('rename')}>
-            <span aria-hidden className="i-ri-edit-line h-4 w-4 text-text-tertiary" />
+            <span aria-hidden className="i-ri-edit-line size-4 text-text-tertiary" />
             <div className="system-sm-semibold text-text-secondary">{t('operation.rename', { ns: 'common' })}</div>
           </DropdownMenuItem>
         )}
         {type === CredentialTypeEnum.API_KEY && (
           <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('edit')}>
-            <span aria-hidden className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+            <span aria-hidden className="i-ri-equalizer-2-line size-4 text-text-tertiary" />
             <div className="system-sm-semibold text-text-secondary">{t('operation.edit', { ns: 'common' })}</div>
           </DropdownMenuItem>
         )}
         {type === CredentialTypeEnum.OAUTH2 && (
           <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('change')}>
-            <span aria-hidden className="i-ri-sticky-note-add-line h-4 w-4 text-text-tertiary" />
+            <span aria-hidden className="i-ri-sticky-note-add-line size-4 text-text-tertiary" />
             <div className="mb-1 system-sm-semibold text-text-secondary">{t('dataSource.notion.changeAuthorizedPages', { ns: 'common' })}</div>
           </DropdownMenuItem>
         )}
         <DropdownMenuSeparator />
         <DropdownMenuItem variant="destructive" className="h-auto gap-2 py-2" onClick={() => handleAction('delete')}>
-          <span aria-hidden className="i-ri-delete-bin-line h-4 w-4" />
+          <span aria-hidden className="i-ri-delete-bin-line size-4" />
           <div className="system-sm-semibold">
             {t('operation.remove', { ns: 'common' })}
           </div>
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index de835826b8..19dee39709 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -197,7 +197,7 @@ export default function AccountSetting({
               aria-label={t('operation.close', { ns: 'common' })}
               onClick={handleClose}
             >
-              <span className="i-ri-close-line h-5 w-5" />
+              <span className="i-ri-close-line size-5" />
             </Button>
             <div className="mt-1 system-2xs-medium-uppercase text-text-tertiary">ESC</div>
           </div>
diff --git a/web/app/components/header/account-setting/key-validator/index.tsx b/web/app/components/header/account-setting/key-validator/index.tsx
index 0e65eb9a35..1b944fedbd 100644
--- a/web/app/components/header/account-setting/key-validator/index.tsx
+++ b/web/app/components/header/account-setting/key-validator/index.tsx
@@ -111,7 +111,7 @@ const KeyValidator = ({
             }
             <a className="flex cursor-pointer items-center text-xs text-primary-600" href={keyFrom.link} target="_blank" rel="noopener noreferrer">
               {keyFrom.text}
-              <LinkExternal02 className="ml-1 h-3 w-3 text-primary-600" />
+              <LinkExternal02 className="ml-1 size-3 text-primary-600" />
             </a>
           </div>
         )
diff --git a/web/app/components/header/account-setting/members-page/index.tsx b/web/app/components/header/account-setting/members-page/index.tsx
index 694d9ffeed..bac95a0f9b 100644
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -79,7 +79,7 @@ const MembersPage = () => {
                         >
                           <span
                             aria-hidden="true"
-                            className="i-ri-pencil-line h-4 w-4 text-text-tertiary"
+                            className="i-ri-pencil-line size-4 text-text-tertiary"
                           />
                         </button>
                       )}
diff --git a/web/app/components/header/account-setting/members-page/invite-button.tsx b/web/app/components/header/account-setting/members-page/invite-button.tsx
index a9a8b88dcf..da2cea5639 100644
--- a/web/app/components/header/account-setting/members-page/invite-button.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-button.tsx
@@ -27,7 +27,7 @@ const InviteButton = (props: InviteButtonProps) => {
   }
   return (
     <Button variant="primary" {...props}>
-      <RiUserAddLine className="mr-1 h-4 w-4" />
+      <RiUserAddLine className="mr-1 size-4" />
       {t('members.invite', { ns: 'common' })}
     </Button>
   )
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
index 3227a23d4c..d80b93cdb3 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -90,10 +90,10 @@ const InviteModal = ({
         {!isEmailSetup && (
           <div className="grow basis-0 overflow-y-auto pb-4">
             <div className="relative mb-1 rounded-xl border border-components-panel-border p-2 shadow-xs">
-              <div className="absolute top-0 left-0 h-full w-full rounded-xl opacity-40" style={{ background: 'linear-gradient(92deg, rgba(255, 171, 0, 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="absolute top-0 left-0 size-full rounded-xl opacity-40" style={{ background: 'linear-gradient(92deg, rgba(255, 171, 0, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
+              <div className="relative flex size-full items-start">
                 <div className="mr-0.5 shrink-0 p-0.5">
-                  <div className="i-ri-error-warning-fill h-5 w-5 text-text-warning" />
+                  <div className="i-ri-error-warning-fill size-5 text-text-warning" />
                 </div>
                 <div className="system-xs-medium text-text-primary">
                   <span>{t('members.emailNotSetup', { ns: 'common' })}</span>
@@ -107,7 +107,7 @@ const InviteModal = ({
           <div className="mb-2 text-sm font-medium text-text-primary">{t('members.email', { ns: 'common' })}</div>
           <div className="mb-8 flex h-36 flex-col items-stretch">
             <ReactMultiEmail
-              className={cn('h-full w-full border-components-input-border-active bg-components-input-bg-normal! px-3 pt-2 outline-hidden', 'appearance-none overflow-y-auto rounded-lg text-sm text-text-primary!')}
+              className={cn('size-full border-components-input-border-active bg-components-input-bg-normal! px-3 pt-2 outline-hidden', 'appearance-none overflow-y-auto rounded-lg text-sm text-text-primary!')}
               autoFocus
               emails={emails}
               inputClassName="bg-transparent"
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
index f22be94ddf..af821e3bde 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
@@ -39,8 +39,8 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
           open && 'bg-state-base-hover',
         )}
       >
-        <div className="mr-2 grow text-sm leading-5 text-text-primary">{t('members.invitedAsRole', { ns: 'common', role: t(roleI18nKeyMap[value], { ns: 'common' }) })}</div>
-        <div className="i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-secondary" />
+        <div className="mr-2 grow text-sm/5 text-text-primary">{t('members.invitedAsRole', { ns: 'common', role: t(roleI18nKeyMap[value], { ns: 'common' }) })}</div>
+        <div className="i-ri-arrow-down-s-line size-4 shrink-0 text-text-secondary" />
       </PopoverTrigger>
       <PopoverContent
         placement="bottom-start"
@@ -58,12 +58,12 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
             }}
           >
             <div className="relative pl-5">
-              <div className="text-sm leading-5 text-text-secondary">{t('members.normal', { ns: 'common' })}</div>
+              <div className="text-sm/5 text-text-secondary">{t('members.normal', { ns: 'common' })}</div>
               <div className="text-xs leading-[18px] text-text-tertiary">{t('members.normalTip', { ns: 'common' })}</div>
               {value === 'normal' && (
                 <div
                   aria-hidden="true"
-                  className="absolute top-0.5 left-0 i-custom-vender-line-general-check h-4 w-4 text-text-accent"
+                  className="absolute top-0.5 left-0 i-custom-vender-line-general-check size-4 text-text-accent"
                 />
               )}
             </div>
@@ -78,12 +78,12 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
             }}
           >
             <div className="relative pl-5">
-              <div className="text-sm leading-5 text-text-secondary">{t('members.editor', { ns: 'common' })}</div>
+              <div className="text-sm/5 text-text-secondary">{t('members.editor', { ns: 'common' })}</div>
               <div className="text-xs leading-[18px] text-text-tertiary">{t('members.editorTip', { ns: 'common' })}</div>
               {value === 'editor' && (
                 <div
                   aria-hidden="true"
-                  className="absolute top-0.5 left-0 i-custom-vender-line-general-check h-4 w-4 text-text-accent"
+                  className="absolute top-0.5 left-0 i-custom-vender-line-general-check size-4 text-text-accent"
                 />
               )}
             </div>
@@ -98,12 +98,12 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
             }}
           >
             <div className="relative pl-5">
-              <div className="text-sm leading-5 text-text-secondary">{t('members.admin', { ns: 'common' })}</div>
+              <div className="text-sm/5 text-text-secondary">{t('members.admin', { ns: 'common' })}</div>
               <div className="text-xs leading-[18px] text-text-tertiary">{t('members.adminTip', { ns: 'common' })}</div>
               {value === 'admin' && (
                 <div
                   aria-hidden="true"
-                  className="absolute top-0.5 left-0 i-custom-vender-line-general-check h-4 w-4 text-text-accent"
+                  className="absolute top-0.5 left-0 i-custom-vender-line-general-check size-4 text-text-accent"
                 />
               )}
             </div>
@@ -119,12 +119,12 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
               }}
             >
               <div className="relative pl-5">
-                <div className="text-sm leading-5 text-text-secondary">{t('members.datasetOperator', { ns: 'common' })}</div>
+                <div className="text-sm/5 text-text-secondary">{t('members.datasetOperator', { ns: 'common' })}</div>
                 <div className="text-xs leading-[18px] text-text-tertiary">{t('members.datasetOperatorTip', { ns: 'common' })}</div>
                 {value === 'dataset_operator' && (
                   <div
                     aria-hidden="true"
-                    className="absolute top-0.5 left-0 i-custom-vender-line-general-check h-4 w-4 text-text-accent"
+                    className="absolute top-0.5 left-0 i-custom-vender-line-general-check size-4 text-text-accent"
                   />
                 )}
               </div>
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
index 52cc69f726..8ac60da1f4 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
@@ -78,7 +78,7 @@ const InvitedModal = ({
                                 render={(
                                   <div className="flex items-center justify-center gap-1 text-sm">
                                     {item.email}
-                                    <div className="i-ri-question-line h-4 w-4 text-red-300" />
+                                    <div className="i-ri-question-line size-4 text-red-300" />
                                   </div>
                                 )}
                               />
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
index 098c87cc99..a1a9a6509a 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
@@ -44,7 +44,7 @@ const InvitationLink = ({
               render={(
                 <button
                   type="button"
-                  className="absolute top-0 right-0 left-0 block w-full cursor-pointer truncate border-none bg-transparent p-0 pr-2 pl-2 text-left text-text-primary"
+                  className="absolute inset-x-0 top-0 block w-full cursor-pointer truncate border-none bg-transparent p-0 px-2 text-left text-text-primary"
                   onClick={copyHandle}
                 >
                   {value.url}
diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx
index 7d2f609177..19d6dfbaa6 100644
--- a/web/app/components/header/account-setting/members-page/operation/index.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/index.tsx
@@ -84,10 +84,10 @@ const Operation = ({ member, operatorRole, onOperate }: IOperationProps) => {
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger
-        render={<button type="button" className={cn('group flex h-full w-full cursor-pointer items-center justify-between border-none bg-transparent px-3 text-left system-sm-regular text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')} />}
+        render={<button type="button" className={cn('group flex size-full cursor-pointer items-center justify-between border-none bg-transparent px-3 text-left system-sm-regular text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')} />}
       >
         {RoleMap[member.role] || RoleMap.normal}
-        <span aria-hidden className={cn('i-ri-arrow-down-s-line h-4 w-4 shrink-0 group-hover:block', open ? 'block' : 'hidden')} />
+        <span aria-hidden className={cn('i-ri-arrow-down-s-line size-4 shrink-0 group-hover:block', open ? 'block' : 'hidden')} />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-end"
diff --git a/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx b/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx
index e46989643e..7b0359c511 100644
--- a/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx
@@ -38,12 +38,12 @@ const TransferOwnership = ({ onOperate }: Props) => {
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger
         className={cn(
-          'group flex h-full w-full cursor-pointer items-center justify-between px-3 system-sm-regular text-text-secondary outline-hidden',
+          'group flex size-full cursor-pointer items-center justify-between px-3 system-sm-regular text-text-secondary outline-hidden',
           'hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover data-popup-open:bg-state-base-hover',
         )}
       >
         {t('members.owner', { ns: 'common' })}
-        <RiArrowDownSLine className="hidden h-4 w-4 group-hover:block group-data-popup-open:block" />
+        <RiArrowDownSLine className="hidden size-4 group-hover:block group-data-popup-open:block" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-end"
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
index 6dab5ab93a..2b613b2f5d 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
@@ -111,7 +111,7 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
           aria-label={t('operation.close', { ns: 'common' })}
           onClick={onClose}
         >
-          <span className="i-ri-close-line h-5 w-5 text-text-tertiary" aria-hidden="true" />
+          <span className="i-ri-close-line size-5 text-text-tertiary" aria-hidden="true" />
         </button>
         {step === STEP.start && (
           <>
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
index 6dc0f56a0a..2e6ab10e26 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
@@ -68,7 +68,7 @@ const MemberSelector: FC<Props> = ({
                 <div className="system-xs-regular text-text-quaternary">{currentValue.email}</div>
               </>
             )}
-            <div className={cn('i-ri-arrow-down-s-line h-4 w-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+            <div className={cn('i-ri-arrow-down-s-line size-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
           </div>
         )}
       />
diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx
index 9bd2df5fa4..fece598844 100644
--- a/web/app/components/header/account-setting/menu-dialog.tsx
+++ b/web/app/components/header/account-setting/menu-dialog.tsx
@@ -29,7 +29,7 @@ const MenuDialog = ({
       <DialogContent
         backdropClassName="bg-transparent"
         className={cn(
-          'top-0 left-0 h-full max-h-none w-full max-w-none translate-x-0 translate-y-0 overflow-hidden rounded-none border-none bg-background-sidenav-bg p-0 shadow-none backdrop-blur-md',
+          'top-0 left-0 size-full max-h-none max-w-none translate-0 overflow-hidden rounded-none border-none bg-background-sidenav-bg p-0 shadow-none backdrop-blur-md',
           className,
         )}
       >
diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx
index 6522ea2db4..5390d52707 100644
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@@ -138,10 +138,10 @@ const ModelProviderPage = ({ searchText }: Props) => {
           showWarning && 'border-components-panel-border bg-components-panel-bg-blur pl-2 shadow-xs',
         )}
         >
-          {showWarning && <div className="absolute top-0 right-0 bottom-0 left-0 opacity-40" style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
+          {showWarning && <div className="absolute inset-0 opacity-40" style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
           {showWarning && (
             <div className="flex items-center gap-1 system-xs-medium text-text-primary">
-              <span className="i-ri-alert-fill h-4 w-4 text-text-warning-secondary" />
+              <span className="i-ri-alert-fill size-4 text-text-warning-secondary" />
               <span className="max-w-[460px] truncate" title={t(warningTextKey, { ns: 'common' })}>{t(warningTextKey, { ns: 'common' })}</span>
             </div>
           )}
@@ -160,7 +160,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
       {!filteredConfiguredProviders?.length && (
         <div className="mb-2 rounded-[10px] bg-workflow-process-bg p-4">
           <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-sm">
-            <span className="i-ri-brain-line h-5 w-5 text-text-primary" />
+            <span className="i-ri-brain-line size-5 text-text-primary" />
           </div>
           <div className="mt-2 system-sm-medium text-text-secondary">{t('modelProvider.emptyProviderTitle', { ns: 'common' })}</div>
           <div className="mt-1 system-xs-regular text-text-tertiary">{t('modelProvider.emptyProviderTip', { ns: 'common' })}</div>
diff --git a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
index dd4784916f..aa719cecec 100644
--- a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
@@ -49,7 +49,7 @@ const InstallFromMarketplace = ({
           onClick={() => setCollapse(prev => !prev)}
           aria-expanded={!collapse}
         >
-          <span className={cn('i-ri-arrow-down-s-line h-4 w-4', collapse && '-rotate-90')} />
+          <span className={cn('i-ri-arrow-down-s-line size-4', collapse && '-rotate-90')} />
           {t('modelProvider.installProvider', { ns: 'common' })}
         </button>
         <div className="mb-2 flex items-center pt-2">
@@ -61,7 +61,7 @@ const InstallFromMarketplace = ({
             className="inline-flex items-center system-sm-medium text-text-accent"
           >
             {t('marketplace.difyMarketplace', { ns: 'plugin' })}
-            <span className="i-ri-arrow-right-up-line h-4 w-4" />
+            <span className="i-ri-arrow-right-up-line size-4" />
           </Link>
         </div>
       </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
index 79e4bb9b3f..9d83d1632a 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
@@ -51,7 +51,7 @@ const AddCredentialInLoadBalancing = ({
         open && 'bg-state-base-hover',
       )}
       >
-        <RiAddLine className="mr-2 h-4 w-4" />
+        <RiAddLine className="mr-2 size-4" />
         {t('modelProvider.auth.addCredential', { ns: 'common' })}
       </div>
     )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
index 5191357d83..0834d045c0 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
@@ -83,7 +83,7 @@ const AddCustomModel = ({
           notAllowCustomCredential && !!noModels && 'cursor-not-allowed opacity-50',
         )}
       >
-        <RiAddCircleFill className="mr-1 h-3.5 w-3.5" />
+        <RiAddCircleFill className="mr-1 size-3.5" />
         {t('modelProvider.addModel', { ns: 'common' })}
       </Button>
     )
@@ -128,7 +128,7 @@ const AddCustomModel = ({
                   }}
                 >
                   <ModelIcon
-                    className="mr-1 h-5 w-5 shrink-0"
+                    className="mr-1 size-5 shrink-0"
                     iconClassName="h-5 w-5"
                     provider={provider}
                     modelName={model.model}
@@ -152,7 +152,7 @@ const AddCustomModel = ({
                   handleOpenModalForAddNewCustomModel()
                 }}
               >
-                <RiAddLine className="mr-1 h-4 w-4" />
+                <RiAddLine className="mr-1 size-4" />
                 {t('modelProvider.auth.addNewModel', { ns: 'common' })}
               </div>
             )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/authorized-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/authorized-item.tsx
index b0d45375a5..7e7bd9b7d8 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/authorized-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/authorized-item.tsx
@@ -63,7 +63,7 @@ export const AuthorizedItem = ({
             {
               model?.model && (
                 <ModelIcon
-                  className="mr-1 h-5 w-5 shrink-0"
+                  className="mr-1 size-5 shrink-0"
                   provider={provider}
                   modelName={model.model}
                 />
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
index 714c492137..8e315ccd75 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
@@ -62,10 +62,10 @@ const CredentialItem = ({
       <div className="flex w-0 grow items-center space-x-1.5">
         {
           showSelectedIcon && (
-            <div className="h-4 w-4">
+            <div className="size-4">
               {
                 selectedCredentialId === credential.credential_id && (
-                  <span className="i-ri-check-line h-4 w-4 text-text-accent" />
+                  <span className="i-ri-check-line size-4 text-text-accent" />
                 )
               }
             </div>
@@ -101,7 +101,7 @@ const CredentialItem = ({
                           onEdit?.(credential)
                         }}
                       >
-                        <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+                        <span className="i-ri-equalizer-2-line size-4 text-text-tertiary" />
                       </ActionButton>
                     )}
                   />
@@ -124,7 +124,7 @@ const CredentialItem = ({
                         }}
                       >
                         <span className={cn(
-                          'i-ri-delete-bin-line h-4 w-4 text-text-tertiary',
+                          'i-ri-delete-bin-line size-4 text-text-tertiary',
                           !disableDeleteWhenSelected && 'hover:text-text-destructive',
                           disableDeleteWhenSelected && 'opacity-50',
                         )}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
index d86eaf40c5..9b2480207f 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
@@ -240,7 +240,7 @@ const Authorized = ({
                   )}
                   className="flex h-[40px] cursor-pointer items-center px-3 system-xs-medium text-text-accent-light-mode-only"
                 >
-                  <RiAddLine className="mr-1 h-4 w-4" />
+                  <RiAddLine className="mr-1 size-4" />
                   {t('modelProvider.auth.addModelCredential', { ns: 'common' })}
                 </div>
               )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
index b570a5335e..ca6198f994 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
@@ -28,9 +28,9 @@ const ConfigModel = ({
         className="relative flex h-[18px] cursor-pointer items-center rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1.5 system-2xs-medium-uppercase text-text-warning"
         onClick={onClick}
       >
-        <RiScales3Line className="mr-0.5 h-3 w-3" />
+        <RiScales3Line className="mr-0.5 size-3" />
         {t('modelProvider.auth.authorizationError', { ns: 'common' })}
-        <Indicator color="orange" className="absolute -top-px -right-px h-1.5 w-1.5" />
+        <Indicator color="orange" className="absolute -top-px -right-px size-1.5" />
       </div>
     )
   }
@@ -56,7 +56,7 @@ const ConfigModel = ({
       {
         !loadBalancingEnabled && !credentialRemoved && !loadBalancingInvalid && (
           <>
-            <RiEqualizer2Line className="mr-1 h-4 w-4" />
+            <RiEqualizer2Line className="mr-1 size-4" />
             {t('operation.config', { ns: 'common' })}
           </>
         )
@@ -64,7 +64,7 @@ const ConfigModel = ({
       {
         loadBalancingEnabled && !credentialRemoved && !loadBalancingInvalid && (
           <>
-            <RiScales3Line className="mr-1 h-4 w-4" />
+            <RiScales3Line className="mr-1 size-4" />
             {t('modelProvider.auth.configLoadBalancing', { ns: 'common' })}
           </>
         )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
index 7529ef9afb..07b5d070a1 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
@@ -45,7 +45,7 @@ const ConfigProvider = ({
         variant={!authorized ? 'secondary-accent' : 'secondary'}
         title={text}
       >
-        <RiEqualizer2Line className="mr-1 h-3.5 w-3.5 shrink-0" />
+        <RiEqualizer2Line className="mr-1 size-3.5 shrink-0" />
         <span className="w-0 grow truncate text-left">
           {text}
         </span>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx
index 8eaf18440f..85ff918847 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx
@@ -76,7 +76,7 @@ const CredentialSelector = ({
             <div className="grow truncate system-sm-regular text-components-input-text-placeholder">{t('modelProvider.auth.selectModelCredential', { ns: 'common' })}</div>
           )
         }
-        <RiArrowDownSLine className="h-4 w-4 text-text-quaternary" />
+        <RiArrowDownSLine className="size-4 text-text-quaternary" />
       </PopoverTrigger>
       <PopoverContent
         sideOffset={0}
@@ -105,7 +105,7 @@ const CredentialSelector = ({
               className="flex h-10 cursor-pointer items-center border-t border-t-divider-subtle px-7 system-xs-medium text-text-accent-light-mode-only"
               onClick={handleAddNewCredential}
             >
-              <RiAddLine className="mr-1 h-4 w-4" />
+              <RiAddLine className="mr-1 size-4" />
               {t('modelProvider.auth.addNewModelCredential', { ns: 'common' })}
             </div>
           )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
index 8ccfc0a640..30bc17d159 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
@@ -84,7 +84,7 @@ const SwitchCredentialInLoadBalancing = ({
             <Badge className="ml-2">Enterprise</Badge>
           )
         }
-        <RiArrowDownSLine className="h-4 w-4" />
+        <RiArrowDownSLine className="size-4" />
       </Button>
     )
     if (empty && notAllowCustomCredential) {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
index 1203019fa0..610e7aa066 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
@@ -28,11 +28,11 @@ const ModelIcon: FC<ModelIconProps> = ({
   const { theme } = useTheme()
   const language = useLanguage()
   if (provider?.provider && ['openai', 'langgenius/openai/openai'].includes(provider.provider) && modelName?.startsWith('o'))
-    return <div className="flex items-center justify-center"><OpenaiYellow className={cn('h-5 w-5', className)} /></div>
+    return <div className="flex items-center justify-center"><OpenaiYellow className={cn('size-5', className)} /></div>
 
   if (provider?.icon_small) {
     return (
-      <div className={cn('flex h-5 w-5 items-center justify-center', isDeprecated && 'opacity-50', className)}>
+      <div className={cn('flex size-5 items-center justify-center', isDeprecated && 'opacity-50', className)}>
         <img
           alt="model-icon"
           src={renderI18nObject(
@@ -53,8 +53,8 @@ const ModelIcon: FC<ModelIconProps> = ({
       className,
     )}
     >
-      <div className={cn('flex h-5 w-5 items-center justify-center opacity-35', iconClassName)}>
-        <Group className="h-3 w-3 text-text-tertiary" />
+      <div className={cn('flex size-5 items-center justify-center opacity-35', iconClassName)}>
+        <Group className="size-3 text-text-tertiary" />
       </div>
     </div>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
index 884a9cce70..ecc0cf48e4 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -226,7 +226,7 @@ const ModelModal: FC<ModelModalProps> = ({
       return (
         <div className="mt-2 flex items-center">
           <ModelIcon
-            className="mr-2 h-4 w-4 shrink-0"
+            className="mr-2 size-4 shrink-0"
             provider={provider}
           />
           <div className="mr-1 system-md-regular text-text-secondary">{renderI18nObject(provider.label)}</div>
@@ -237,7 +237,7 @@ const ModelModal: FC<ModelModalProps> = ({
       return (
         <div className="mt-2 flex items-center">
           <ModelIcon
-            className="mr-2 h-4 w-4 shrink-0"
+            className="mr-2 size-4 shrink-0"
             provider={provider}
             modelName={model.model}
           />
@@ -297,7 +297,7 @@ const ModelModal: FC<ModelModalProps> = ({
         backdropProps={{ forceRender: true }}
         className="flex w-[640px] max-w-[640px] flex-col overflow-hidden p-0"
       >
-        <DialogCloseButton className="top-5 right-5 h-8 w-8" />
+        <DialogCloseButton className="top-5 right-5 size-8" />
         <div className="shrink-0 p-6 pb-3">
           {modalTitle}
           {modalDesc}
@@ -412,7 +412,7 @@ const ModelModal: FC<ModelModalProps> = ({
           (mode === ModelModalModeEnum.configCustomModel || mode === ModelModalModeEnum.configProviderCredential) && (
             <div className="shrink-0 border-t-[0.5px] border-t-divider-regular">
               <div className="flex items-center justify-center rounded-b-2xl bg-background-section-burn py-3 text-xs text-text-tertiary">
-                <Lock01 className="mr-1 h-3 w-3 text-text-tertiary" />
+                <Lock01 className="mr-1 size-3 text-text-tertiary" />
                 {t('modelProvider.encrypted.front', { ns: 'common' })}
                 <a
                   className="mx-1 text-text-accent"
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
index 37a1f3de7d..1df71b3276 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
@@ -131,7 +131,7 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
               )}
               {modelProvider && !disabled && !needsConfiguration && (
                 <div className="flex items-center pr-1">
-                  <RiEqualizer2Line className="h-4 w-4 text-text-tertiary group-hover:text-text-secondary" />
+                  <RiEqualizer2Line className="size-4 text-text-tertiary group-hover:text-text-secondary" />
                 </div>
               )}
             </>
@@ -139,12 +139,12 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
         : (
             <>
               <div className="flex grow items-center gap-1 p-1 pl-2">
-                <span className="overflow-hidden system-sm-regular text-ellipsis whitespace-nowrap text-components-input-text-placeholder">
+                <span className="truncate system-sm-regular text-components-input-text-placeholder">
                   {t('nodes.agent.configureModel', { ns: 'workflow' })}
                 </span>
               </div>
               <div className="flex items-center pr-1">
-                <RiEqualizer2Line className="h-4 w-4 text-text-tertiary group-hover:text-text-secondary" />
+                <RiEqualizer2Line className="size-4 text-text-tertiary group-hover:text-text-secondary" />
               </div>
             </>
           )}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
index f0764fade0..226c8675e9 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
@@ -180,7 +180,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
             {t('modelProvider.modelSettings', { ns: 'common' })}
           </div>
           <PopoverClose className="absolute top-2.5 right-2.5 flex items-center justify-center rounded-lg p-1.5 hover:bg-state-base-hover">
-            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+            <span className="i-ri-close-line size-4 text-text-tertiary" />
           </PopoverClose>
         </div>
         <div className="max-h-[420px] overflow-y-auto">
@@ -246,7 +246,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                 ? t('debugAsSingleModel', { ns: 'appDebug' })
                 : t('debugAsMultipleModel', { ns: 'appDebug' })
             }
-            <ArrowNarrowLeft className="h-3 w-3 rotate-180" />
+            <ArrowNarrowLeft className="size-3 rotate-180" />
           </div>
         )}
       </PopoverContent>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
index 6fcca9dab7..f9c0410bb6 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
@@ -54,7 +54,7 @@ function PresetsParameter({ onSelect, supportedParameterNames }: PresetsParamete
         )}
       >
         {t('modelProvider.loadPresets', { ns: 'common' })}
-        <span className="ml-0.5 i-ri-arrow-down-s-line h-3.5 w-3.5" />
+        <span className="ml-0.5 i-ri-arrow-down-s-line size-3.5" />
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         {visiblePresetTones.map(tone => (
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
index bc505657e2..f3d021ad55 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
@@ -75,7 +75,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
                   ariaLabel={t('nodes.agent.modelSelectorTooltips.deprecated', { ns: 'workflow' })}
                   content={t('nodes.agent.modelSelectorTooltips.deprecated', { ns: 'workflow' })}
                 >
-                  <RiErrorWarningFill className="h-4 w-4 text-text-destructive" />
+                  <RiErrorWarningFill className="size-4 text-text-destructive" />
                 </StatusPopover>
               )
             : !pluginInfo
@@ -89,7 +89,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
                         '/plugins',
                       )}
                     >
-                      <RiErrorWarningFill className="h-4 w-4 text-text-destructive" />
+                      <RiErrorWarningFill className="size-4 text-text-destructive" />
                     </StatusPopover>
                   )
                 : (
@@ -113,7 +113,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
             '/plugins',
           )}
         >
-          <RiErrorWarningFill className="h-4 w-4 text-text-destructive" />
+          <RiErrorWarningFill className="size-4 text-text-destructive" />
         </StatusPopover>
       )}
     </>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
index d9cb29abbf..8970dc1cb2 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
@@ -57,15 +57,15 @@ const Trigger: FC<TriggerProps> = ({
             : 'border border-text-warning bg-state-warning-hover ring-text-warning ring-inset hover:ring-[0.5px]',
         )}
       >
-        <div className="mr-2 flex h-6 w-6 shrink-0 items-center justify-center">
+        <div className="mr-2 flex size-6 shrink-0 items-center justify-center">
           <div className="flex h-5 w-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle">
-            <span className="i-ri-brain-2-line h-3.5 w-3.5 text-text-quaternary" />
+            <span className="i-ri-brain-2-line size-3.5 text-text-quaternary" />
           </div>
         </div>
         <div className="mr-1 flex-1 truncate text-[13px] font-normal text-text-secondary">
           {t('workflow:errorMsg.configureModel')}
         </div>
-        <span className={cn('i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary', isInWorkflow && 'absolute top-[9px] right-2 h-3.5 w-3.5')} />
+        <span className={cn('i-ri-arrow-down-s-line size-4 shrink-0 text-text-tertiary', isInWorkflow && 'absolute top-[9px] right-2 h-3.5 w-3.5')} />
       </div>
     )
   }
@@ -98,7 +98,7 @@ const Trigger: FC<TriggerProps> = ({
                     render={(
                       <div className="flex shrink-0 items-center pr-0.5">
                         <div className="flex min-w-[20px] shrink-0 items-center justify-center gap-[3px] rounded-md border border-text-warning bg-components-badge-bg-dimm px-[5px] py-0.5">
-                          <span className="i-ri-alert-fill h-3 w-3 text-text-warning" />
+                          <span className="i-ri-alert-fill size-3 text-text-warning" />
                           <span className="system-xs-medium whitespace-nowrap text-text-warning">
                             {badgeLabel}
                           </span>
@@ -114,7 +114,7 @@ const Trigger: FC<TriggerProps> = ({
             : (
                 <div className="flex shrink-0 items-center pr-0.5">
                   <div className="flex min-w-[20px] shrink-0 items-center justify-center gap-[3px] rounded-md border border-text-warning bg-components-badge-bg-dimm px-[5px] py-0.5">
-                    <span className="i-ri-alert-fill h-3 w-3 text-text-warning" />
+                    <span className="i-ri-alert-fill size-3 text-text-warning" />
                     <span className="system-xs-medium whitespace-nowrap text-text-warning">
                       {badgeLabel}
                     </span>
@@ -124,12 +124,12 @@ const Trigger: FC<TriggerProps> = ({
         )}
         {!badgeKey && (
           <div className="flex shrink-0 items-center pr-1">
-            <span className="i-ri-arrow-down-s-line h-4 w-4 text-text-tertiary" />
+            <span className="i-ri-arrow-down-s-line size-4 text-text-tertiary" />
           </div>
         )}
       </div>
       <div ref={settingsRef} className={cn('flex shrink-0 items-center justify-center rounded-r-lg p-2', isInWorkflow ? 'border border-workflow-block-parma-bg bg-workflow-block-parma-bg' : 'bg-components-button-tertiary-bg')}>
-        <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+        <span className="i-ri-equalizer-2-line size-4 text-text-tertiary" />
       </div>
     </div>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/marketplace-section.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/marketplace-section.tsx
index 33079a80c6..1d16571e59 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/marketplace-section.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/marketplace-section.tsx
@@ -42,7 +42,7 @@ function MarketplaceSection({
             onClick={() => onMarketplaceCollapsedChange(!marketplaceCollapsed)}
           >
             {t('modelProvider.selector.fromMarketplace', { ns: 'common' })}
-            <span className={cn('i-custom-vender-solid-general-arrow-down-round-fill h-4 w-4 text-text-quaternary', marketplaceCollapsed && '-rotate-90')} />
+            <span className={cn('i-custom-vender-solid-general-arrow-down-round-fill size-4 text-text-quaternary', marketplaceCollapsed && '-rotate-90')} />
           </button>
         </div>
         {!marketplaceCollapsed && (
@@ -56,7 +56,7 @@ function MarketplaceSection({
                   className="group flex cursor-pointer items-center gap-1 rounded-lg py-0.5 pr-0.5 pl-3 hover:bg-state-base-hover"
                 >
                   <div className="flex flex-1 items-center gap-2 py-0.5">
-                    <Icon className="h-5 w-5 shrink-0 rounded-md" />
+                    <Icon className="size-5 shrink-0 rounded-md" />
                     <span className="system-sm-regular text-text-secondary">{modelNameMap[key]}</span>
                   </div>
                   <Button
@@ -69,7 +69,7 @@ function MarketplaceSection({
                     disabled={isInstalling || isMarketplacePluginsLoading}
                     onClick={() => onInstallPlugin(key)}
                   >
-                    {isInstalling && <span className="i-ri-loader-2-line h-3.5 w-3.5 animate-spin" />}
+                    {isInstalling && <span className="i-ri-loader-2-line size-3.5 animate-spin" />}
                     {isInstalling
                       ? t('installModal.installing', { ns: 'plugin' })
                       : t('modelProvider.selector.install', { ns: 'common' })}
@@ -86,7 +86,7 @@ function MarketplaceSection({
               <span className="flex-1 system-xs-regular text-text-accent">
                 {t('modelProvider.selector.discoverMoreInMarketplace', { ns: 'common' })}
               </span>
-              <span className="i-ri-arrow-right-up-line h-3! w-3! text-text-accent" />
+              <span className="i-ri-arrow-right-up-line size-3! text-text-accent" />
             </a>
           </div>
         )}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx
index e63b94aea3..5da01e61a0 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx
@@ -77,9 +77,9 @@ function ModelSelectorTrigger({
     >
       {isEmpty
         ? (
-            <div className="flex h-6 w-6 items-center justify-center">
+            <div className="flex size-6 items-center justify-center">
               <div className="flex h-5 w-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle">
-                <span className="i-ri-brain-2-line h-3.5 w-3.5 text-text-quaternary" />
+                <span className="i-ri-brain-2-line size-3.5 text-text-quaternary" />
               </div>
             </div>
           )
@@ -122,7 +122,7 @@ function ModelSelectorTrigger({
                     isCreditsExhausted && 'min-w-5 justify-center bg-components-badge-bg-dimm',
                   )}
                 >
-                  <span className="i-ri-alert-fill h-3 w-3 text-text-warning" />
+                  <span className="i-ri-alert-fill size-3 text-text-warning" />
                   <span className="system-xs-medium whitespace-nowrap text-text-warning">
                     {statusLabel}
                   </span>
@@ -142,7 +142,7 @@ function ModelSelectorTrigger({
             <TooltipTrigger
               render={(
                 <div className="flex shrink-0 items-center gap-0.75 rounded-md border border-text-warning bg-components-badge-bg-dimm px-1.25 py-0.5">
-                  <span className="i-ri-alert-fill h-3 w-3 text-text-warning" />
+                  <span className="i-ri-alert-fill size-3 text-text-warning" />
                   <span className="system-xs-medium whitespace-nowrap text-text-warning">
                     {deprecatedStatusLabel}
                   </span>
@@ -156,7 +156,7 @@ function ModelSelectorTrigger({
         )}
 
         {!readonly && (isActive || isEmpty) && (
-          <span className="i-ri-arrow-down-s-line h-3.5 w-3.5 shrink-0 text-text-tertiary" />
+          <span className="i-ri-arrow-down-s-line size-3.5 shrink-0 text-text-tertiary" />
         )}
       </div>
     </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-empty-state.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-empty-state.tsx
index c68e2df8fe..74908f3b5a 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-empty-state.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-empty-state.tsx
@@ -13,7 +13,7 @@ function ModelSelectorEmptyState({
   return (
     <div className="mx-2 flex flex-col gap-2 rounded-[10px] bg-linear-to-r from-state-base-hover to-background-gradient-mask-transparent p-4">
       <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-[5px]">
-        <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
+        <span className="i-ri-brain-2-line size-5 text-text-tertiary" />
       </div>
       <div className="flex flex-col gap-1">
         <p className="system-sm-medium text-text-secondary">
@@ -29,7 +29,7 @@ function ModelSelectorEmptyState({
         onClick={onConfigure}
       >
         {t('modelProvider.selector.configure', { ns: 'common' })}
-        <span className="i-ri-arrow-right-line h-4 w-4" />
+        <span className="i-ri-arrow-right-line size-4" />
       </Button>
     </div>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
index d262634cbb..0a936d1aa5 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
@@ -97,7 +97,7 @@ function PopupItem({
           onClick={() => setCollapsed(prev => !prev)}
         >
           <span className="truncate">{model.label[language] || model.label.en_US}</span>
-          <span className={cn('i-custom-vender-solid-general-arrow-down-round-fill h-4 w-4 shrink-0 text-text-quaternary', collapsed && '-rotate-90')} />
+          <span className={cn('i-custom-vender-solid-general-arrow-down-round-fill size-4 shrink-0 text-text-quaternary', collapsed && '-rotate-90')} />
         </button>
         <Popover open={dropdownOpen} onOpenChange={setDropdownOpen}>
           <PopoverTrigger
@@ -108,13 +108,13 @@ function PopupItem({
                       hasCredits
                         ? (
                             <>
-                              <CreditsCoin className="h-3 w-3" />
+                              <CreditsCoin className="size-3" />
                               <span className="ml-1 truncate">{t('modelProvider.selector.aiCredits', { ns: 'common' })}</span>
                             </>
                           )
                         : (
                             <>
-                              <span className="i-ri-alert-fill h-3 w-3 shrink-0 text-text-warning-secondary" />
+                              <span className="i-ri-alert-fill size-3 shrink-0 text-text-warning-secondary" />
                               <span className="ml-1 truncate text-text-warning">{t('modelProvider.selector.creditsExhausted', { ns: 'common' })}</span>
                             </>
                           )
@@ -122,17 +122,17 @@ function PopupItem({
                   : credentialName
                     ? (
                         <>
-                          <span className={cn('h-1.5 w-1.5 shrink-0 rounded-xs border', isApiKeyActive ? 'border-components-badge-status-light-success-border-inner bg-components-badge-status-light-success-bg' : 'border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg')} />
+                          <span className={cn('size-1.5 shrink-0 rounded-xs border', isApiKeyActive ? 'border-components-badge-status-light-success-border-inner bg-components-badge-status-light-success-bg' : 'border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg')} />
                           <span className="ml-1 truncate text-text-tertiary">{credentialName}</span>
                         </>
                       )
                     : (
                         <>
-                          <span className="h-1.5 w-1.5 shrink-0 rounded-xs border border-components-badge-status-light-disabled-border-inner bg-components-badge-status-light-disabled-bg" />
+                          <span className="size-1.5 shrink-0 rounded-xs border border-components-badge-status-light-disabled-border-inner bg-components-badge-status-light-disabled-bg" />
                           <span className="ml-1 truncate text-text-tertiary">{t('modelProvider.selector.configureRequired', { ns: 'common' })}</span>
                         </>
                       )}
-                <span className="i-ri-arrow-down-s-line h-3.5! w-3.5! shrink-0 translate-y-px text-text-tertiary" />
+                <span className="i-ri-arrow-down-s-line size-3.5! shrink-0 translate-y-px text-text-tertiary" />
               </button>
             )}
           />
@@ -156,7 +156,7 @@ function PopupItem({
           <>
             <div className="flex min-w-0 items-center gap-2">
               <ModelIcon
-                className={cn('h-5 w-5 shrink-0')}
+                className={cn('size-5 shrink-0')}
                 provider={model}
                 modelName={modelItem.model}
               />
@@ -168,7 +168,7 @@ function PopupItem({
             {
               defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
                 <ComboboxItemIndicator className="shrink-0 text-text-accent">
-                  <span className="i-custom-vender-line-general-check h-4 w-4" aria-hidden="true" />
+                  <span className="i-custom-vender-line-general-check size-4" aria-hidden="true" />
                 </ComboboxItemIndicator>
               )
             }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-layout.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-layout.tsx
index 95c930ef28..b1beed2345 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-layout.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-layout.tsx
@@ -47,7 +47,7 @@ export function ModelSelectorSearchHeader({
       >
         <span
           className={`
-            mr-0.5 i-ri-search-line h-4 w-4 shrink-0
+            mr-0.5 i-ri-search-line size-4 shrink-0
             ${inputValue ? 'text-text-tertiary' : 'text-text-quaternary'}
           `}
           aria-hidden="true"
@@ -66,7 +66,7 @@ export function ModelSelectorSearchHeader({
               onClick={() => onInputValueChange('')}
               onPointerDown={event => event.preventDefault()}
             >
-              <span className="i-custom-vender-solid-general-x-circle h-3.5 w-3.5" aria-hidden="true" />
+              <span className="i-custom-vender-solid-general-x-circle size-3.5" aria-hidden="true" />
             </button>
           )
         }
@@ -129,7 +129,7 @@ export function ModelProviderSettingsFooter({
         className="flex h-8 w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
         onClick={onOpenSettings}
       >
-        <span className="i-ri-equalizer-2-line h-4 w-4 shrink-0" />
+        <span className="i-ri-equalizer-2-line size-4 shrink-0" />
         <span className="system-xs-medium">{t('modelProvider.selector.modelProviderSettings', { ns: 'common' })}</span>
       </button>
     </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
index 8e64e6ce8f..16153a199b 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@@ -198,7 +198,7 @@ function Popup({
             />
           )}
           {!filteredModelList.length && installedModelList.length > 0 && (
-            <div className="px-3 py-1.5 text-center text-xs leading-4.5 break-all text-text-tertiary">
+            <div className="px-3 py-1.5 text-center text-xs/4.5 break-all text-text-tertiary">
               {`No model found for \u201C${inputValue}\u201D`}
             </div>
           )}
@@ -256,7 +256,7 @@ function ModelSelectorPreviewCard({
       <div className="flex flex-col gap-1">
         <div className="flex flex-col items-start gap-2">
           <ModelIcon
-            className="h-5 w-5 shrink-0"
+            className="size-5 shrink-0"
             provider={provider}
             modelName={modelItem.model}
           />
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx
index 84690f3a36..c7aea665d4 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx
@@ -57,7 +57,7 @@ const CooldownTimer = ({ secondsRemaining, onFinish }: CooldownTimerProps) => {
         <Tooltip>
           <TooltipTrigger
             render={(
-              <SimplePieChart percentage={Math.round(displayTime / 60 * 100)} className="h-3 w-3" />
+              <SimplePieChart percentage={Math.round(displayTime / 60 * 100)} className="size-3" />
             )}
           />
           <TooltipContent>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
index 67a30740e6..190b05209f 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
@@ -72,7 +72,7 @@ function TextLabel({ variant }: { variant: CardVariant }) {
         {t(labelKey, { ns: 'common' })}
       </span>
       {variant === 'credits-fallback' && (
-        <Warning className="h-3 w-3 shrink-0 text-text-warning" />
+        <Warning className="size-3 shrink-0 text-text-warning" />
       )}
     </>
   )
@@ -96,7 +96,7 @@ function StatusLabel({ variant, credentialName }: {
         {credentialName}
       </span>
       {showWarning && (
-        <Warning className="ml-auto h-3 w-3 shrink-0 text-text-warning" />
+        <Warning className="ml-auto size-3 shrink-0 text-text-warning" />
       )}
     </>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
index 3439206785..70966aee4a 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
@@ -136,17 +136,17 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
                     ? t('modelProvider.modelsNum', { ns: 'common', num: modelList.length })
                     : t('modelProvider.showModels', { ns: 'common' })
                 }
-                {!loading && <div className="i-ri-arrow-right-s-line h-4 w-4" aria-hidden="true" />}
+                {!loading && <div className="i-ri-arrow-right-s-line size-4" aria-hidden="true" />}
                 {
                   loading && (
-                    <div className="ml-0.5 i-ri-loader-2-line h-3 w-3 animate-spin" />
+                    <div className="ml-0.5 i-ri-loader-2-line size-3 animate-spin" />
                   )
                 }
               </button>
             )}
             {!showModelProvider && notConfigured && (
               <div className="flex h-6 items-center pr-1.5 pl-1">
-                <div className="mr-1 i-ri-information-2-fill h-4 w-4 text-text-accent" />
+                <div className="mr-1 i-ri-information-2-fill size-4 text-text-accent" />
                 <span className="system-xs-medium text-text-secondary">{t('modelProvider.configureTip', { ns: 'common' })}</span>
               </div>
             )}
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx
index 69a7f488b3..f7e40a0426 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx
@@ -54,7 +54,7 @@ export default function CreditsExhaustedAlert({ hasApiKeyFallback }: CreditsExha
             {t('modelProvider.card.usageLabel', { ns: 'common' })}
           </MeterLabel>
           <div className="flex items-center gap-0.5 system-xs-regular text-text-tertiary">
-            <CreditsCoin className="h-3 w-3" />
+            <CreditsCoin className="size-3" />
             <span>
               {formatNumber(usedCredits)}
               /
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
index 67f73f6941..f64b7a1c24 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
@@ -62,7 +62,7 @@ function ModelAuthDropdown({
             variant={buttonConfig.variant}
             title={buttonConfig.text}
           >
-            <span className="mr-1 i-ri-equalizer-2-line h-3.5 w-3.5 shrink-0" />
+            <span className="mr-1 i-ri-equalizer-2-line size-3.5 shrink-0" />
             <span className="w-0 grow truncate text-left">
               {buttonConfig.text}
             </span>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
index b491f07889..ed04aff55b 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
@@ -26,7 +26,7 @@ export default function UsagePrioritySection({ value, disabled, onSelect }: Usag
     <div className="p-1">
       <div className="flex items-center gap-1 rounded-lg p-1">
         <div className="shrink-0 px-0.5 py-1">
-          <span aria-hidden="true" className="i-ri-arrow-up-double-line block h-4 w-4 text-text-tertiary" />
+          <span aria-hidden="true" className="i-ri-arrow-up-double-line block size-4 text-text-tertiary" />
         </div>
         <div className="flex min-w-0 flex-1 items-center gap-0.5 py-0.5">
           <span className="truncate system-sm-medium text-text-secondary">
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
index 8ef0f11901..a0a561a8eb 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
@@ -86,7 +86,7 @@ const ModelListItem = ({ model, provider, isConfigurable, onChange, onModifyLoad
       <div className="flex shrink-0 items-center">
         {modelLoadBalancingEnabled && !model.deprecated && model.load_balancing_enabled && !model.has_invalid_load_balancing_configs && (
           <Badge className="mr-1 h-[18px] w-[18px] items-center justify-center border-text-accent-secondary p-0">
-            <Balance className="h-3 w-3 text-text-accent-secondary" />
+            <Balance className="size-3 text-text-accent-secondary" />
           </Badge>
         )}
         {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
index f292397525..344d3de0f6 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
@@ -57,14 +57,14 @@ const ModelList: FC<ModelListProps> = ({
           <span className="group mr-2 flex shrink-0 items-center">
             <span className="inline-flex h-6 items-center pr-1.5 pl-1 system-xs-medium text-text-tertiary group-hover:hidden">
               {t('modelProvider.modelsNum', { ns: 'common', num: models.length })}
-              <RiArrowRightSLine className="mr-0.5 h-4 w-4 rotate-90" />
+              <RiArrowRightSLine className="mr-0.5 size-4 rotate-90" />
             </span>
             <span
               className="hidden h-6 cursor-pointer items-center rounded-lg bg-state-base-hover pr-1.5 pl-1 system-xs-medium text-text-tertiary group-hover:inline-flex"
               onClick={() => onCollapse()}
             >
               {t('modelProvider.modelsNum', { ns: 'common', num: models.length })}
-              <RiArrowRightSLine className="mr-0.5 h-4 w-4 rotate-90" />
+              <RiArrowRightSLine className="mr-0.5 size-4 rotate-90" />
             </span>
           </span>
           {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
index 6d87e6af33..b18539d515 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
@@ -147,15 +147,15 @@ const ModelLoadBalancingConfigs = ({
         data-testid="load-balancing-main-panel"
       >
         <div className="flex items-center gap-2 px-[15px] py-3 select-none">
-          <div className="flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-util-colors-indigo-indigo-100 bg-util-colors-indigo-indigo-50 text-util-colors-blue-blue-600">
-            <div className="i-custom-vender-line-financeandecommerce-balance h-4 w-4" />
+          <div className="flex size-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-util-colors-indigo-indigo-100 bg-util-colors-indigo-indigo-50 text-util-colors-blue-blue-600">
+            <div className="i-custom-vender-line-financeandecommerce-balance size-4" />
           </div>
           <div className="grow">
             <div className="flex items-center gap-1 text-sm text-text-primary">
               {t('modelProvider.loadBalancing', { ns: 'common' })}
               <Infotip
                 aria-label={t('modelProvider.loadBalancingInfo', { ns: 'common' })}
-                className="h-3 w-3"
+                className="size-3"
                 iconClassName="h-full w-full"
                 popupClassName="max-w-[300px]"
               >
@@ -185,7 +185,7 @@ const ModelLoadBalancingConfigs = ({
               return (
                 <div key={config.id || index} className="group flex h-10 items-center rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg px-3 shadow-xs">
                   <div className="flex grow items-center">
-                    <div className="mr-2 flex h-3 w-3 items-center justify-center">
+                    <div className="mr-2 flex size-3 items-center justify-center">
                       {(config.in_cooldown && Boolean(config.ttl))
                         ? (
                             <CooldownTimer secondsRemaining={config.ttl} onFinish={() => clearCountdown(index)} />
@@ -223,11 +223,11 @@ const ModelLoadBalancingConfigs = ({
                             <TooltipTrigger
                               render={(
                                 <span
-                                  className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-components-button-secondary-bg text-text-tertiary transition-colors hover:bg-components-button-secondary-bg-hover"
+                                  className="flex size-8 cursor-pointer items-center justify-center rounded-lg bg-components-button-secondary-bg text-text-tertiary transition-colors hover:bg-components-button-secondary-bg-hover"
                                   onClick={() => updateConfigEntry(index, () => undefined)}
                                   data-testid={`load-balancing-remove-${config.id || index}`}
                                 >
-                                  <div className="i-ri-indeterminate-circle-line h-4 w-4" />
+                                  <div className="i-ri-indeterminate-circle-line size-4" />
                                 </span>
                               )}
                             />
@@ -282,7 +282,7 @@ const ModelLoadBalancingConfigs = ({
         <GridMask canvasClassName="rounded-xl!">
           <div className="mt-2 flex h-14 items-center justify-between rounded-xl border-[0.5px] border-components-panel-border px-4 shadow-md">
             <div
-              className={cn('text-gradient text-sm leading-tight font-semibold', s.textGradient)}
+              className={cn('text-gradient text-sm/tight font-semibold', s.textGradient)}
             >
               {t('modelProvider.upgradeForLoadBalancing', { ns: 'common' })}
             </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index 4ed93a98e8..dd791bbb1a 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -211,7 +211,7 @@ const ModelLoadBalancingModal = ({ provider, configurateMethod, currentCustomCon
                   <div className="py-2">
                     <div className={cn('min-h-16 rounded-xl border bg-components-panel-bg transition-colors', draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600')} onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}>
                       <div className="flex items-center gap-2 px-[15px] py-3 select-none">
-                        <div className="flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-components-card-border bg-components-card-bg">
+                        <div className="flex size-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-components-card-border bg-components-card-bg">
                           {Boolean(model) && (<ModelIcon className="shrink-0" provider={provider} modelName={model!.model} />)}
                         </div>
                         <div className="grow">
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx
index ce647416ea..a69ae90d39 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx
@@ -9,8 +9,8 @@ const PriorityUseTip = () => {
     <Tooltip>
       <TooltipTrigger
         render={(
-          <div className="absolute -top-[5px] -right-[5px] cursor-pointer rounded-[5px] border-[0.5px] border-components-panel-border-subtle bg-util-colors-indigo-indigo-50 shadow-xs">
-            <ChevronDownDouble className="h-3 w-3 rotate-180 text-util-colors-indigo-indigo-600" />
+          <div className="absolute top-[-5px] right-[-5px] cursor-pointer rounded-[5px] border-[0.5px] border-components-panel-border-subtle bg-util-colors-indigo-indigo-50 shadow-xs">
+            <ChevronDownDouble className="size-3 rotate-180 text-util-colors-indigo-indigo-600" />
           </div>
         )}
       />
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
index 861c4afa7a..9157fead4b 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
@@ -94,7 +94,7 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
               text={(
                 <>
                   <span>{version}</span>
-                  {isFromMarketplace && <span className="ml-1 i-ri-arrow-left-right-line h-3 w-3" />}
+                  {isFromMarketplace && <span className="ml-1 i-ri-arrow-left-right-line size-3" />}
                 </>
               )}
               hasRedCornerMark={hasNewVersion}
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
index 8de8167dc2..3b72f66429 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
@@ -143,10 +143,10 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
                     aria-label={tooltipText}
                     render={(
                       <div
-                        className={cn('relative h-6 w-6', !providerType && 'cursor-pointer hover:opacity-80')}
+                        className={cn('relative size-6', !providerType && 'cursor-pointer hover:opacity-80')}
                         onClick={() => handleIconClick(key)}
                       >
-                        <Icon className="h-6 w-6 rounded-lg" />
+                        <Icon className="size-6 rounded-lg" />
                         {!providerType && (
                           <div className="absolute inset-0 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge opacity-30" />
                         )}
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
index 89e9ee8dd7..2ee75e3fd8 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
@@ -46,7 +46,7 @@ const ProviderIcon: FC<ProviderIconProps> = ({
             : provider.icon_small,
           language,
         )}
-        className="h-6 w-6"
+        className="size-6"
       />
       <div className="system-md-semibold text-text-primary">
         {renderI18nObject(provider.label, language)}
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index c750d82160..4fd42dfc58 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -155,8 +155,8 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
         onClick={() => setOpen(true)}
       >
         {isLoading
-          ? <span className="mr-1 i-ri-loader-2-line h-3.5 w-3.5 animate-spin" />
-          : <span className="mr-1 i-ri-equalizer-2-line h-3.5 w-3.5" />}
+          ? <span className="mr-1 i-ri-loader-2-line size-3.5 animate-spin" />
+          : <span className="mr-1 i-ri-equalizer-2-line size-3.5" />}
         {t('modelProvider.systemModelSettings', { ns: 'common' })}
       </Button>
       <Dialog open={open} onOpenChange={setOpen}>
diff --git a/web/app/components/header/account-setting/plugin-page/index.tsx b/web/app/components/header/account-setting/plugin-page/index.tsx
index 7f8e9a32f7..15d8302874 100644
--- a/web/app/components/header/account-setting/plugin-page/index.tsx
+++ b/web/app/components/header/account-setting/plugin-page/index.tsx
@@ -19,7 +19,7 @@ const PluginPage = () => {
         {plugins?.map(plugin => Plugin_MAP[plugin.tool_name]!(plugin))}
       </div>
       <div className="fixed bottom-0 flex h-[42px] w-[472px] items-center bg-white text-xs text-gray-500">
-        <LockClosedIcon className="mr-1 h-3 w-3" />
+        <LockClosedIcon className="mr-1 size-3" />
         {t('provider.encrypted.front', { ns: 'common' })}
         <Link
           className="mx-1 text-primary-600"
diff --git a/web/app/components/header/app-nav/index.tsx b/web/app/components/header/app-nav/index.tsx
index a65477e4df..0c02600e29 100644
--- a/web/app/components/header/app-nav/index.tsx
+++ b/web/app/components/header/app-nav/index.tsx
@@ -100,8 +100,8 @@ const AppNav = () => {
     <>
       <Nav
         isApp
-        icon={<RiRobot2Line className="h-4 w-4" />}
-        activeIcon={<RiRobot2Fill className="h-4 w-4" />}
+        icon={<RiRobot2Line className="size-4" />}
+        activeIcon={<RiRobot2Fill className="size-4" />}
         text={t('menus.apps', { ns: 'common' })}
         activeSegment={['apps', 'app']}
         link="/apps"
diff --git a/web/app/components/header/dataset-nav/index.tsx b/web/app/components/header/dataset-nav/index.tsx
index 0b39560884..943047ad4b 100644
--- a/web/app/components/header/dataset-nav/index.tsx
+++ b/web/app/components/header/dataset-nav/index.tsx
@@ -84,8 +84,8 @@ const DatasetNav = () => {
   return (
     <Nav
       isApp={false}
-      icon={<RiBook2Line className="h-4 w-4" />}
-      activeIcon={<RiBook2Fill className="h-4 w-4" />}
+      icon={<RiBook2Line className="size-4" />}
+      activeIcon={<RiBook2Fill className="size-4" />}
       text={t('menus.datasets', { ns: 'common' })}
       activeSegment="datasets"
       link="/datasets"
diff --git a/web/app/components/header/env-nav/index.tsx b/web/app/components/header/env-nav/index.tsx
index a42f8f81ab..6323f3428e 100644
--- a/web/app/components/header/env-nav/index.tsx
+++ b/web/app/components/header/env-nav/index.tsx
@@ -27,7 +27,7 @@ const EnvNav = () => {
       {
         langGeniusVersionInfo.current_env === 'TESTING' && (
           <>
-            <Beaker02 className="h-3 w-3" />
+            <Beaker02 className="size-3" />
             <div className="ml-1 max-[1280px]:hidden">{t('environment.testing', { ns: 'common' })}</div>
           </>
         )
@@ -35,7 +35,7 @@ const EnvNav = () => {
       {
         langGeniusVersionInfo.current_env === 'DEVELOPMENT' && (
           <>
-            <TerminalSquare className="h-3 w-3" />
+            <TerminalSquare className="size-3" />
             <div className="ml-1 max-[1280px]:hidden">{t('environment.development', { ns: 'common' })}</div>
           </>
         )
diff --git a/web/app/components/header/explore-nav/index.tsx b/web/app/components/header/explore-nav/index.tsx
index d8bbc014b9..ed456f13ab 100644
--- a/web/app/components/header/explore-nav/index.tsx
+++ b/web/app/components/header/explore-nav/index.tsx
@@ -27,8 +27,8 @@ const ExploreNav = ({
     >
       {
         activated
-          ? <RiPlanetFill className="h-4 w-4" />
-          : <RiPlanetLine className="h-4 w-4" />
+          ? <RiPlanetFill className="size-4" />
+          : <RiPlanetLine className="size-4" />
       }
       <div className="ml-2 max-[1024px]:hidden">
         {t('menus.explore', { ns: 'common' })}
diff --git a/web/app/components/header/maintenance-notice.tsx b/web/app/components/header/maintenance-notice.tsx
index 2c60477584..c60830c3cc 100644
--- a/web/app/components/header/maintenance-notice.tsx
+++ b/web/app/components/header/maintenance-notice.tsx
@@ -43,10 +43,10 @@ const MaintenanceNotice = () => {
       <button
         type="button"
         aria-label={t('operation.close', { ns: 'common' })}
-        className="h-4 w-4 shrink-0 cursor-pointer border-none bg-transparent p-0 text-gray-500"
+        className="size-4 shrink-0 cursor-pointer border-none bg-transparent p-0 text-gray-500"
         onClick={handleCloseNotice}
       >
-        <X className="h-4 w-4" aria-hidden="true" />
+        <X className="size-4" aria-hidden="true" />
       </button>
     </div>
   )
diff --git a/web/app/components/header/nav/index.tsx b/web/app/components/header/nav/index.tsx
index 766aca14e3..016c8a8c22 100644
--- a/web/app/components/header/nav/index.tsx
+++ b/web/app/components/header/nav/index.tsx
@@ -60,7 +60,7 @@ const Nav = ({
           <div>
             {
               (hovered && curNav)
-                ? <ArrowNarrowLeft className="h-4 w-4" />
+                ? <ArrowNarrowLeft className="size-4" />
                 : isActivated
                   ? activeIcon
                   : icon
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index 5a8c1ae9e3..057e50dabf 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -71,7 +71,7 @@ const AppCreateMenu = ({
           className="h-9 gap-2 px-3 py-[6px]"
         >
           <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-background-default">
-            <span className="i-ri-add-line h-4 w-4 text-text-primary" />
+            <span className="i-ri-add-line size-4 text-text-primary" />
           </div>
           <span className="grow text-left text-[14px] font-normal text-text-secondary">{createText}</span>
         </DropdownMenuSubTrigger>
@@ -86,14 +86,14 @@ const AppCreateMenu = ({
             className="h-9 px-3 py-[6px] font-normal text-text-secondary"
             onClick={() => handleCreate('blank')}
           >
-            <FilePlus01 className="mr-2 h-4 w-4 shrink-0 text-text-secondary" />
+            <FilePlus01 className="mr-2 size-4 shrink-0 text-text-secondary" />
             {startFromBlankText}
           </DropdownMenuItem>
           <DropdownMenuItem
             className="h-9 px-3 py-[6px] font-normal text-text-secondary"
             onClick={() => handleCreate('template')}
           >
-            <FilePlus02 className="mr-2 h-4 w-4 shrink-0 text-text-secondary" />
+            <FilePlus02 className="mr-2 size-4 shrink-0 text-text-secondary" />
             {startFromTemplateText}
           </DropdownMenuItem>
         </div>
@@ -102,7 +102,7 @@ const AppCreateMenu = ({
             className="h-9 px-3 py-[6px] font-normal text-text-secondary"
             onClick={() => handleCreate('dsl')}
           >
-            <FileArrow01 className="mr-2 h-4 w-4 shrink-0 text-text-secondary" />
+            <FileArrow01 className="mr-2 size-4 shrink-0 text-text-secondary" />
             {importDSLText}
           </DropdownMenuItem>
         </div>
@@ -136,7 +136,7 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
       >
         <div className="max-w-[157px] truncate" title={curNav?.name}>{curNav?.name}</div>
         <RiArrowDownSLine
-          className="ml-1 h-3 w-3 shrink-0 opacity-50 group-hover:opacity-100 group-data-popup-open:opacity-100"
+          className="ml-1 size-3 shrink-0 opacity-50 group-hover:opacity-100 group-data-popup-open:opacity-100"
           aria-hidden="true"
         />
       </DropdownMenuTrigger>
@@ -159,7 +159,7 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
                 }}
                 title={nav.name}
               >
-                <div className="relative mr-2 h-6 w-6 shrink-0 rounded-md">
+                <div className="relative mr-2 size-6 shrink-0 rounded-md">
                   <AppIcon
                     size="tiny"
                     iconType={nav.icon_type}
@@ -168,7 +168,7 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
                     imageUrl={nav.icon_url}
                   />
                   {!!nav.mode && (
-                    <AppTypeIcon type={nav.mode} wrapperClassName="absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 shadow-sm" className="h-2.5 w-2.5" />
+                    <AppTypeIcon type={nav.mode} wrapperClassName="absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 shadow-sm" className="size-2.5" />
                   )}
                 </div>
                 <div className="min-w-0 truncate">
@@ -190,7 +190,7 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
               onClick={() => onCreate('')}
             >
               <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-background-default">
-                <RiAddLine className="h-4 w-4 text-text-primary" />
+                <RiAddLine className="size-4 text-text-primary" />
               </div>
               <div className="grow text-left text-[14px] font-normal text-text-secondary">{createText}</div>
             </DropdownMenuItem>
diff --git a/web/app/components/header/plan-badge/index.tsx b/web/app/components/header/plan-badge/index.tsx
index c889e9d5ae..85b66e794e 100644
--- a/web/app/components/header/plan-badge/index.tsx
+++ b/web/app/components/header/plan-badge/index.tsx
@@ -75,7 +75,7 @@ export function PlanBadge({ plan, allowHover, sandboxAsUpgrade = false, onClick
       <PlanBadgeShell size="s" color="blue" allowHover={allowHover} onClick={onClick}>
         <div className="system-2xs-medium-uppercase">
           <span className="inline-flex items-center gap-1 p-1">
-            {isEducationWorkspace && <RiGraduationCapFill aria-hidden="true" className="h-3 w-3" />}
+            {isEducationWorkspace && <RiGraduationCapFill aria-hidden="true" className="size-3" />}
             pro
           </span>
         </div>
diff --git a/web/app/components/header/plugins-nav/index.tsx b/web/app/components/header/plugins-nav/index.tsx
index dee8fa26fa..ca3ebdbbb6 100644
--- a/web/app/components/header/plugins-nav/index.tsx
+++ b/web/app/components/header/plugins-nav/index.tsx
@@ -43,10 +43,10 @@ const PluginsNav = ({
             />
           )
         }
-        <div className="mr-0.5 flex h-5 w-5 items-center justify-center">
+        <div className="mr-0.5 flex size-5 items-center justify-center">
           {
             (!(isInstalling || isInstallingWithError) || activated) && (
-              <Group className="h-4 w-4" />
+              <Group className="size-4" />
             )
           }
           {
diff --git a/web/app/components/header/tools-nav/index.tsx b/web/app/components/header/tools-nav/index.tsx
index 06d19382ac..7890e86683 100644
--- a/web/app/components/header/tools-nav/index.tsx
+++ b/web/app/components/header/tools-nav/index.tsx
@@ -27,8 +27,8 @@ const ToolsNav = ({
     >
       {
         activated
-          ? <RiHammerFill className="h-4 w-4" />
-          : <RiHammerLine className="h-4 w-4" />
+          ? <RiHammerFill className="size-4" />
+          : <RiHammerLine className="size-4" />
       }
       <div className="ml-2 max-[1024px]:hidden">
         {t('menus.tools', { ns: 'common' })}
diff --git a/web/app/components/plugins/base/badges/__tests__/icon-with-tooltip.spec.tsx b/web/app/components/plugins/base/badges/__tests__/icon-with-tooltip.spec.tsx
index d4a87fa8a5..22cfb337c7 100644
--- a/web/app/components/plugins/base/badges/__tests__/icon-with-tooltip.spec.tsx
+++ b/web/app/components/plugins/base/badges/__tests__/icon-with-tooltip.spec.tsx
@@ -99,7 +99,7 @@ describe('IconWithTooltip', () => {
       expect(icon).toHaveClass('custom-class')
     })
 
-    it('should apply default h-5 w-5 class to icon', () => {
+    it('should apply default size-5 class to icon', () => {
       render(
         <IconWithTooltip
           theme={Theme.light}
@@ -109,8 +109,7 @@ describe('IconWithTooltip', () => {
       )
 
       const icon = screen.getByTestId('light-icon')
-      expect(icon).toHaveClass('h-5')
-      expect(icon).toHaveClass('w-5')
+      expect(icon).toHaveClass('size-5')
     })
 
     it('should merge custom className with default classes', () => {
@@ -124,8 +123,7 @@ describe('IconWithTooltip', () => {
       )
 
       const icon = screen.getByTestId('light-icon')
-      expect(icon).toHaveClass('h-5')
-      expect(icon).toHaveClass('w-5')
+      expect(icon).toHaveClass('size-5')
       expect(icon).toHaveClass('ml-2')
     })
 
diff --git a/web/app/components/plugins/base/badges/icon-with-tooltip.tsx b/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
index 2cb40adf0a..f1b30b6a8c 100644
--- a/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
+++ b/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
@@ -20,7 +20,7 @@ const IconWithTooltip: FC<IconWithTooltipProps> = ({
   BadgeIconDark,
 }) => {
   const isDark = theme === Theme.dark
-  const iconClassName = cn('h-5 w-5', className)
+  const iconClassName = cn('size-5', className)
   const Icon = isDark ? BadgeIconDark : BadgeIconLight
   const icon = (
     <span
diff --git a/web/app/components/plugins/base/deprecation-notice.tsx b/web/app/components/plugins/base/deprecation-notice.tsx
index 8f16be8e8c..9636e2dc57 100644
--- a/web/app/components/plugins/base/deprecation-notice.tsx
+++ b/web/app/components/plugins/base/deprecation-notice.tsx
@@ -62,7 +62,7 @@ const DeprecationNotice: FC<DeprecationNoticeProps> = ({
         innerWrapperClassName,
       )}
       >
-        <div className="absolute top-0 left-0 -z-10 h-full w-full bg-toast-warning-bg opacity-40" />
+        <div className="absolute top-0 left-0 -z-10 size-full bg-toast-warning-bg opacity-40" />
         <div className={cn('flex size-6 shrink-0 items-center justify-center', iconWrapperClassName)}>
           <RiAlertFill className="size-4 text-text-warning-secondary" />
         </div>
diff --git a/web/app/components/plugins/base/key-value-item.tsx b/web/app/components/plugins/base/key-value-item.tsx
index a2a3459b5d..822eefdcdc 100644
--- a/web/app/components/plugins/base/key-value-item.tsx
+++ b/web/app/components/plugins/base/key-value-item.tsx
@@ -56,8 +56,8 @@ const KeyValueItem: FC<Props> = ({
             render={(
               <ActionButton aria-label={copyLabel} onClick={handleCopy}>
                 {isCopied
-                  ? <CopyCheck aria-hidden className="h-3.5 w-3.5 shrink-0 text-text-tertiary" />
-                  : <span aria-hidden className="i-ri-clipboard-line h-3.5 w-3.5 shrink-0 text-text-tertiary" />}
+                  ? <CopyCheck aria-hidden className="size-3.5 shrink-0 text-text-tertiary" />
+                  : <span aria-hidden className="i-ri-clipboard-line size-3.5 shrink-0 text-text-tertiary" />}
               </ActionButton>
             )}
           />
diff --git a/web/app/components/plugins/card/base/card-icon.tsx b/web/app/components/plugins/card/base/card-icon.tsx
index 5e3eebab20..868ab336a1 100644
--- a/web/app/components/plugins/card/base/card-icon.tsx
+++ b/web/app/components/plugins/card/base/card-icon.tsx
@@ -37,7 +37,7 @@ const Icon = ({
           icon={src.content}
           background={src.background}
           className="rounded-md"
-          innerIcon={shouldUseMcpIcon(src) ? <Mcp className="h-8 w-8 text-text-primary-on-surface" /> : undefined}
+          innerIcon={shouldUseMcpIcon(src) ? <Mcp className="size-8 text-text-primary-on-surface" /> : undefined}
         />
       </div>
     )
@@ -54,7 +54,7 @@ const Icon = ({
         installed
         && (
           <div className={cn(iconClassName, 'bg-state-success-solid')}>
-            <RiCheckLine className="h-3 w-3 text-text-primary-on-surface" />
+            <RiCheckLine className="size-3 text-text-primary-on-surface" />
           </div>
         )
       }
@@ -62,7 +62,7 @@ const Icon = ({
         installFailed
         && (
           <div className={cn(iconClassName, 'bg-state-destructive-solid')}>
-            <RiCloseLine className="h-3 w-3 text-text-primary-on-surface" />
+            <RiCloseLine className="size-3 text-text-primary-on-surface" />
           </div>
         )
       }
diff --git a/web/app/components/plugins/card/base/download-count.tsx b/web/app/components/plugins/card/base/download-count.tsx
index 91541cb931..db822158a7 100644
--- a/web/app/components/plugins/card/base/download-count.tsx
+++ b/web/app/components/plugins/card/base/download-count.tsx
@@ -11,7 +11,7 @@ const DownloadCountComponent = ({
 }: Props) => {
   return (
     <div className="flex items-center space-x-1 text-text-tertiary">
-      <RiInstallLine className="h-3 w-3 shrink-0" />
+      <RiInstallLine className="size-3 shrink-0" />
       <div className="system-xs-regular">{formatNumber(downloadCount)}</div>
     </div>
   )
diff --git a/web/app/components/plugins/card/base/placeholder.tsx b/web/app/components/plugins/card/base/placeholder.tsx
index 1a1a58673e..d8679e31be 100644
--- a/web/app/components/plugins/card/base/placeholder.tsx
+++ b/web/app/components/plugins/card/base/placeholder.tsx
@@ -23,7 +23,7 @@ const Placeholder = ({
           className="flex h-10 w-10 items-center justify-center gap-2 rounded-[10px] border-[0.5px]
               border-components-panel-border bg-background-default p-1 backdrop-blur-xs"
         >
-          <div className="flex h-5 w-5 items-center justify-center">
+          <div className="flex size-5 items-center justify-center">
             <Group className="text-text-tertiary" />
           </div>
         </div>
diff --git a/web/app/components/plugins/card/index.tsx b/web/app/components/plugins/card/index.tsx
index 087afe65c8..3208d97969 100644
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@@ -84,8 +84,8 @@ const Card = ({
           <div className="ml-3 w-0 grow">
             <div className="flex h-5 items-center">
               <Title title={getLocalizedText(label)} />
-              {isPartner && <Partner className="ml-0.5 h-4 w-4" text={t('marketplace.partnerTip', { ns: 'plugin' })} />}
-              {verified && <Verified className="ml-0.5 h-4 w-4" text={t('marketplace.verifiedTip', { ns: 'plugin' })} />}
+              {isPartner && <Partner className="ml-0.5 size-4" text={t('marketplace.partnerTip', { ns: 'plugin' })} />}
+              {verified && <Verified className="ml-0.5 size-4" text={t('marketplace.verifiedTip', { ns: 'plugin' })} />}
               {titleLeft}
               {' '}
               {/* This can be version badge */}
@@ -106,8 +106,8 @@ const Card = ({
       </div>
       {limitedInstall
         && (
-          <div className="relative flex h-8 items-center gap-x-2 px-3 after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-toast-warning-bg after:opacity-40">
-            <RiAlertFill className="h-3 w-3 shrink-0 text-text-warning-secondary" />
+          <div className="relative flex h-8 items-center gap-x-2 px-3 after:absolute after:inset-0 after:bg-toast-warning-bg after:opacity-40">
+            <RiAlertFill className="size-3 shrink-0 text-text-warning-secondary" />
             <p className="z-10 grow system-xs-regular text-text-secondary">
               {t('installModal.installWarning', { ns: 'plugin' })}
             </p>
diff --git a/web/app/components/plugins/install-plugin/base/loading-error.tsx b/web/app/components/plugins/install-plugin/base/loading-error.tsx
index 62409ee49b..6f5116e4d1 100644
--- a/web/app/components/plugins/install-plugin/base/loading-error.tsx
+++ b/web/app/components/plugins/install-plugin/base/loading-error.tsx
@@ -20,11 +20,11 @@ const LoadingError: FC = () => {
             className="relative flex h-10 w-10 items-center justify-center gap-2 rounded-[10px] border-[0.5px]
               border-state-destructive-border bg-state-destructive-hover p-1 backdrop-blur-xs"
           >
-            <div className="flex h-5 w-5 items-center justify-center">
+            <div className="flex size-5 items-center justify-center">
               <Group className="text-text-quaternary" />
             </div>
             <div className="absolute right-[-4px] bottom-[-4px] rounded-full border-2 border-components-panel-bg bg-state-destructive-solid">
-              <RiCloseLine className="h-3 w-3 text-text-primary-on-surface" />
+              <RiCloseLine className="size-3 text-text-primary-on-surface" />
             </div>
           </div>
           <div className="ml-3 grow">
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
index 2751108eea..ab4c3c6a79 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@@ -211,7 +211,7 @@ const Install: FC<Props> = ({
               disabled={!canInstall || isInstalling || selectedPlugins.length === 0 || !canInstallPluginFromMarketplace}
               onClick={handleInstall}
             >
-              {isInstalling && <RiLoader2Line className="h-4 w-4 animate-spin-slow" />}
+              {isInstalling && <RiLoader2Line className="size-4 animate-spin-slow" />}
               <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`, { ns: 'plugin' })}</span>
             </Button>
           </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
index ff7630e3a2..de122ed430 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
@@ -171,7 +171,7 @@ const Loaded: React.FC<LoadedProps> = ({
           onClick={handleInstall}
           disabled={isInstalling || isLoading}
         >
-          {isInstalling && <RiLoader2Line className="h-4 w-4 animate-spin-slow" />}
+          {isInstalling && <RiLoader2Line className="size-4 animate-spin-slow" />}
           <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`, { ns: 'plugin' })}</span>
         </Button>
       </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
index 7c0a90f179..961b8eecbb 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
@@ -159,7 +159,7 @@ const Installed: FC<Props> = ({
           disabled={isInstalling || isLoading}
           onClick={handleInstall}
         >
-          {isInstalling && <RiLoader2Line className="h-4 w-4 animate-spin-slow" />}
+          {isInstalling && <RiLoader2Line className="size-4 animate-spin-slow" />}
           <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`, { ns: 'plugin' })}</span>
         </Button>
       </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
index ea90975ec5..7db491e064 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
@@ -108,7 +108,7 @@ const Uploading: FC<Props> = ({
     <>
       <div className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
         <div className="flex items-center gap-1 self-stretch">
-          <span className="i-ri-loader-2-line h-4 w-4 animate-spin-slow text-text-accent" />
+          <span className="i-ri-loader-2-line size-4 animate-spin-slow text-text-accent" />
           <div className="system-md-regular text-text-secondary">
             {t(`${i18nPrefix}.uploadingPackage`, {
               ns: 'plugin',
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
index 91397f3189..1461d2f754 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
@@ -169,7 +169,7 @@ const Installed: FC<Props> = ({
           disabled={isInstalling || isLoading || !canInstall}
           onClick={handleInstall}
         >
-          {isInstalling && <RiLoader2Line className="h-4 w-4 animate-spin-slow" />}
+          {isInstalling && <RiLoader2Line className="size-4 animate-spin-slow" />}
           <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`, { ns: 'plugin' })}</span>
         </Button>
       </div>
diff --git a/web/app/components/plugins/marketplace/empty/__tests__/index.spec.tsx b/web/app/components/plugins/marketplace/empty/__tests__/index.spec.tsx
index 323e6dcdd0..2033f60c95 100644
--- a/web/app/components/plugins/marketplace/empty/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/empty/__tests__/index.spec.tsx
@@ -325,7 +325,7 @@ describe('Empty', () => {
       const { container } = render(<Empty />)
 
       // Icon wrapper should be present
-      const iconWrapper = container.querySelector('.h-14.w-14')
+      const iconWrapper = container.querySelector('.size-14')
       expect(iconWrapper).toBeInTheDocument()
     })
 
@@ -558,7 +558,7 @@ describe('Empty', () => {
     it('should render icon container centered', () => {
       const { container } = render(<Empty />)
 
-      const centerWrapper = container.querySelector('.-translate-x-1\\/2.-translate-y-1\\/2')
+      const centerWrapper = container.querySelector('.-translate-1\\/2')
       expect(centerWrapper).toBeInTheDocument()
     })
 
@@ -785,7 +785,7 @@ describe('Empty and Line Integration', () => {
     expect(container.querySelectorAll('.h-\\[144px\\]').length).toBe(16)
 
     // Icon container
-    expect(container.querySelector('.h-14.w-14')).toBeInTheDocument()
+    expect(container.querySelector('.size-14')).toBeInTheDocument()
 
     // Line components (4) + Group icon (1) = 5 SVGs total
     expect(container.querySelectorAll('svg').length).toBe(5)
diff --git a/web/app/components/plugins/marketplace/empty/index.tsx b/web/app/components/plugins/marketplace/empty/index.tsx
index 0c6c0c6009..2ce95d06bd 100644
--- a/web/app/components/plugins/marketplace/empty/index.tsx
+++ b/web/app/components/plugins/marketplace/empty/index.tsx
@@ -43,13 +43,13 @@ const Empty = ({
           </div>
         )
       }
-      <div className="absolute top-1/2 left-1/2 z-2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center">
-        <div className="relative mb-3 flex h-14 w-14 items-center justify-center rounded-xl border border-dashed border-divider-deep bg-components-card-bg shadow-lg">
-          <Group className="h-5 w-5 text-text-primary" />
+      <div className="absolute top-1/2 left-1/2 z-2 flex -translate-1/2 flex-col items-center">
+        <div className="relative mb-3 flex size-14 items-center justify-center rounded-xl border border-dashed border-divider-deep bg-components-card-bg shadow-lg">
+          <Group className="size-5 text-text-primary" />
           <Line className="absolute top-1/2 -right-px -translate-y-1/2" />
           <Line className="absolute top-1/2 -left-px -translate-y-1/2" />
-          <Line className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90" />
-          <Line className="absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90" />
+          <Line className="absolute top-0 left-1/2 -translate-1/2 rotate-90" />
+          <Line className="absolute top-full left-1/2 -translate-1/2 rotate-90" />
         </div>
         <div className="text-center system-md-regular text-text-tertiary">
           {text || t('marketplace.noPluginFound', { ns: 'plugin' })}
diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
index b2fabfcc0b..ea0a0e9f85 100644
--- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
@@ -55,7 +55,7 @@ const CardWrapperComponent = ({
             />
           )}
         />
-        <div className="absolute bottom-0 hidden w-full items-center space-x-2 rounded-b-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent px-4 pt-4 pb-4 group-hover:flex">
+        <div className="absolute bottom-0 hidden w-full items-center space-x-2 rounded-b-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent p-4 group-hover:flex">
           <Button
             variant="primary"
             className="w-[calc(50%-4px)]"
@@ -68,7 +68,7 @@ const CardWrapperComponent = ({
               className="w-full gap-0.5"
             >
               {t('detailPanel.operation.detail', { ns: 'plugin' })}
-              <RiArrowRightUpLine className="ml-1 h-4 w-4" />
+              <RiArrowRightUpLine className="ml-1 size-4" />
             </Button>
           </a>
         </div>
diff --git a/web/app/components/plugins/marketplace/list/list-with-collection.tsx b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
index ffe7d6128d..42e70c9f33 100644
--- a/web/app/components/plugins/marketplace/list/list-with-collection.tsx
+++ b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
@@ -49,7 +49,7 @@ const ListWithCollection = ({
                     onClick={() => onMoreClick(collection.search_params)}
                   >
                     {t('marketplace.viewMore', { ns: 'plugin' })}
-                    <RiArrowRightSLine className="h-4 w-4" />
+                    <RiArrowRightSLine className="size-4" />
                   </div>
                 )
               }
diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
index 864f2445f3..aa14ab0087 100644
--- a/web/app/components/plugins/marketplace/list/list-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
@@ -39,7 +39,7 @@ const ListWrapper = ({
       }
       {
         isLoading && page === 1 && (
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          <div className="absolute top-1/2 left-1/2 -translate-1/2">
             <Loading />
           </div>
         )
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
index d987027fc5..40898de490 100644
--- a/web/app/components/plugins/marketplace/plugin-type-switch.tsx
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -38,37 +38,37 @@ const PluginTypeSwitch = ({
     {
       value: PLUGIN_TYPE_SEARCH_MAP.model,
       text: t('category.models', { ns: 'plugin' }),
-      icon: <RiBrain2Line className="mr-1.5 h-4 w-4" />,
+      icon: <RiBrain2Line className="mr-1.5 size-4" />,
     },
     {
       value: PLUGIN_TYPE_SEARCH_MAP.tool,
       text: t('category.tools', { ns: 'plugin' }),
-      icon: <RiHammerLine className="mr-1.5 h-4 w-4" />,
+      icon: <RiHammerLine className="mr-1.5 size-4" />,
     },
     {
       value: PLUGIN_TYPE_SEARCH_MAP.datasource,
       text: t('category.datasources', { ns: 'plugin' }),
-      icon: <RiDatabase2Line className="mr-1.5 h-4 w-4" />,
+      icon: <RiDatabase2Line className="mr-1.5 size-4" />,
     },
     {
       value: PLUGIN_TYPE_SEARCH_MAP.trigger,
       text: t('category.triggers', { ns: 'plugin' }),
-      icon: <TriggerIcon className="mr-1.5 h-4 w-4" />,
+      icon: <TriggerIcon className="mr-1.5 size-4" />,
     },
     {
       value: PLUGIN_TYPE_SEARCH_MAP.agent,
       text: t('category.agents', { ns: 'plugin' }),
-      icon: <RiSpeakAiLine className="mr-1.5 h-4 w-4" />,
+      icon: <RiSpeakAiLine className="mr-1.5 size-4" />,
     },
     {
       value: PLUGIN_TYPE_SEARCH_MAP.extension,
       text: t('category.extensions', { ns: 'plugin' }),
-      icon: <RiPuzzle2Line className="mr-1.5 h-4 w-4" />,
+      icon: <RiPuzzle2Line className="mr-1.5 size-4" />,
     },
     {
       value: PLUGIN_TYPE_SEARCH_MAP.bundle,
       text: t('category.bundles', { ns: 'plugin' }),
-      icon: <RiArchive2Line className="mr-1.5 h-4 w-4" />,
+      icon: <RiArchive2Line className="mr-1.5 size-4" />,
     },
   ]
 
diff --git a/web/app/components/plugins/marketplace/search-box/index.tsx b/web/app/components/plugins/marketplace/search-box/index.tsx
index 64f03f1da3..745df2cf0f 100644
--- a/web/app/components/plugins/marketplace/search-box/index.tsx
+++ b/web/app/components/plugins/marketplace/search-box/index.tsx
@@ -117,7 +117,7 @@ const SearchBox = ({
             className="ml-2 rounded-full bg-components-button-primary-bg text-components-button-primary-text hover:bg-components-button-primary-bg hover:text-components-button-primary-text"
             onClick={onShowAddCustomCollectionModal}
           >
-            <RiAddLine className="h-4 w-4" />
+            <RiAddLine className="size-4" />
           </ActionButton>
         </div>
       )}
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
index a9dc6b4d72..26408ff754 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
@@ -49,7 +49,7 @@ const SortDropdown = () => {
         <span className="mr-1 system-sm-medium text-text-primary">
           {selectedOption.text}
         </span>
-        <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4 text-text-tertiary" />
+        <span aria-hidden className="i-ri-arrow-down-s-line size-4 text-text-tertiary" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-start"
@@ -67,7 +67,7 @@ const SortDropdown = () => {
           >
             {option.text}
             {sort.sortBy === option.value && sort.sortOrder === option.order && (
-              <span aria-hidden className="ml-2 i-ri-check-line h-4 w-4 text-text-accent" />
+              <span aria-hidden className="ml-2 i-ri-check-line size-4 text-text-accent" />
             )}
           </DropdownMenuItem>
         ))}
diff --git a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
index b2326d8ed0..f425cb851a 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
@@ -93,7 +93,7 @@ const AddOAuthButton = ({
       <div className="w-full">
         <div className="mb-4 flex rounded-xl bg-background-section-burn p-4">
           <div className="mr-3 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg">
-            <span className="i-ri-information-2-fill h-5 w-5 text-text-accent" />
+            <span className="i-ri-information-2-fill size-5 text-text-accent" />
           </div>
           <div className="w-0 grow">
             <div className="mb-1.5 system-sm-regular">
@@ -109,7 +109,7 @@ const AddOAuthButton = ({
                       navigator.clipboard.writeText(redirect_uri || '')
                     }}
                   >
-                    <span className="i-ri-clipboard-line h-4 w-4" />
+                    <span className="i-ri-clipboard-line size-4" />
                   </ActionButton>
                 </div>
               )
@@ -191,7 +191,7 @@ const AddOAuthButton = ({
             <Button
               variant={buttonVariant}
               className={cn(
-                'h-8 min-w-0 flex-1 rounded-r-none px-0 py-0 hover:bg-components-button-primary-bg-hover',
+                'h-8 min-w-0 flex-1 rounded-r-none p-0 hover:bg-components-button-primary-bg-hover',
                 buttonLeftClassName,
               )}
               disabled={disabled}
@@ -226,7 +226,7 @@ const AddOAuthButton = ({
               variant={buttonVariant}
               aria-label={t('auth.oauthClientSettings', { ns: 'plugin' })}
               className={cn(
-                'h-8 w-8 shrink-0 rounded-l-none px-0 py-0 hover:bg-components-button-primary-bg-hover',
+                'size-8 shrink-0 rounded-l-none p-0 hover:bg-components-button-primary-bg-hover',
                 buttonRightClassName,
               )}
               disabled={disabled}
@@ -234,7 +234,7 @@ const AddOAuthButton = ({
                 openOAuthSettings()
               }}
             >
-              <span className="i-ri-equalizer-2-line h-4 w-4" aria-hidden="true" />
+              <span className="i-ri-equalizer-2-line size-4" aria-hidden="true" />
             </Button>
           </div>
         )
@@ -247,7 +247,7 @@ const AddOAuthButton = ({
             disabled={disabled}
             className="w-full"
           >
-            <span className="mr-0.5 i-ri-equalizer-2-line h-4 w-4" />
+            <span className="mr-0.5 i-ri-equalizer-2-line size-4" />
             {t('auth.setupOAuth', { ns: 'plugin' })}
           </Button>
         )
diff --git a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
index 90e44cc5ec..fec6015e36 100644
--- a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
@@ -152,7 +152,7 @@ const ApiKeyModal = ({
               {t('auth.useApiAuthDesc', { ns: 'plugin' })}
             </div>
             <DialogCloseButton
-              className="top-5 right-5 h-8 w-8 rounded-lg"
+              className="top-5 right-5 size-8 rounded-lg"
             />
           </div>
           <div className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
diff --git a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
index 9f4c5cc046..af34f304dc 100644
--- a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
@@ -150,7 +150,7 @@ const OAuthClientSettings = ({
               {t('auth.oauthClientSettings', { ns: 'plugin' })}
             </DialogTitle>
             <DialogCloseButton
-              className="top-5 right-5 h-8 w-8 rounded-lg"
+              className="top-5 right-5 size-8 rounded-lg"
             />
           </div>
           <div className="min-h-0 flex-1 overflow-y-auto px-6 py-3 pt-0">
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
index 13044d7bbc..d8b1245c16 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
@@ -33,7 +33,7 @@ const AuthorizedInDataSourceNode = ({
       }
       <RiEqualizer2Line
         className={cn(
-          'h-3.5 w-3.5 text-components-button-ghost-text',
+          'size-3.5 text-components-button-ghost-text',
         )}
       />
     </Button>
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
index e4f55e82e3..12a84b56e3 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
@@ -88,7 +88,7 @@ const AuthorizedInNode = ({
         }
         <RiArrowDownSLine
           className={cn(
-            'h-3.5 w-3.5 text-components-button-ghost-text',
+            'size-3.5 text-components-button-ghost-text',
             removed && 'text-text-destructive',
           )}
         />
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index 774821b0c8..88650352a1 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -217,7 +217,7 @@ const Authorized = ({
                             ` (${unavailableCredentials.length} ${t('auth.unavailable', { ns: 'plugin' })})`
                           )
                         }
-                        <span className="ml-0.5 i-ri-arrow-down-s-line h-4 w-4" />
+                        <span className="ml-0.5 i-ri-arrow-down-s-line size-4" />
                       </Button>
                     )
               }
diff --git a/web/app/components/plugins/plugin-auth/authorized/item.tsx b/web/app/components/plugins/plugin-auth/authorized/item.tsx
index 0bdb9c1a21..0191c65899 100644
--- a/web/app/components/plugins/plugin-auth/authorized/item.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/item.tsx
@@ -117,10 +117,10 @@ const Item = ({
           <div className="flex w-0 grow items-center space-x-1.5">
             {
               showSelectedIcon && (
-                <div className="h-4 w-4">
+                <div className="size-4">
                   {
                     selectedCredentialId === credential.id && (
-                      <RiCheckLine className="h-4 w-4 text-text-accent" />
+                      <RiCheckLine className="size-4 text-text-accent" />
                     )
                   }
                 </div>
@@ -183,7 +183,7 @@ const Item = ({
                           setRenameValue(credential.name)
                         }}
                       >
-                        <RiEditLine className="h-4 w-4 text-text-tertiary" />
+                        <RiEditLine className="size-4 text-text-tertiary" />
                       </ActionButton>
                     )}
                   />
@@ -212,7 +212,7 @@ const Item = ({
                           )
                         }}
                       >
-                        <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+                        <RiEqualizer2Line className="size-4 text-text-tertiary" />
                       </ActionButton>
                     )}
                   />
@@ -235,7 +235,7 @@ const Item = ({
                           onDelete?.(credential.id)
                         }}
                       >
-                        <RiDeleteBinLine className="h-4 w-4 text-text-tertiary hover:text-text-destructive" />
+                        <RiDeleteBinLine className="size-4 text-text-tertiary hover:text-text-destructive" />
                       </ActionButton>
                     )}
                   />
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
index fd698f811c..6a27acd91b 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
@@ -90,7 +90,7 @@ const PluginAuthInAgent = ({
         {
           unavailable && t('auth.unavailable', { ns: 'plugin' })
         }
-        <RiArrowDownSLine className="ml-0.5 h-4 w-4" />
+        <RiArrowDownSLine className="ml-0.5 size-4" />
       </Button>
     )
   }, [credentialId, credentials, t])
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx b/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
index 5cdc893ddd..f012478e26 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
@@ -25,7 +25,7 @@ const PluginAuthInDataSourceNode = ({
               variant="primary"
               onClick={onJumpToDataSourcePage}
             >
-              <RiAddLine className="mr-1 h-4 w-4" />
+              <RiAddLine className="mr-1 size-4" />
               {t('integrations.connect', { ns: 'common' })}
             </Button>
           </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/components/plugin-source-badge.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/components/plugin-source-badge.tsx
index 9b6725da14..29142668df 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/components/plugin-source-badge.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/components/plugin-source-badge.tsx
@@ -18,19 +18,19 @@ type PluginSourceBadgeProps = {
 
 const SOURCE_CONFIG_MAP: Record<PluginSource, SourceConfig | null> = {
   [PluginSource.marketplace]: {
-    icon: <BoxSparkleFill className="h-3.5 w-3.5 text-text-tertiary hover:text-text-accent" />,
+    icon: <BoxSparkleFill className="size-3.5 text-text-tertiary hover:text-text-accent" />,
     tipKey: 'detailPanel.categoryTip.marketplace',
   },
   [PluginSource.github]: {
-    icon: <Github className="h-3.5 w-3.5 text-text-secondary hover:text-text-primary" />,
+    icon: <Github className="size-3.5 text-text-secondary hover:text-text-primary" />,
     tipKey: 'detailPanel.categoryTip.github',
   },
   [PluginSource.local]: {
-    icon: <span aria-hidden className="i-ri-hard-drive-3-line h-3.5 w-3.5 text-text-tertiary" />,
+    icon: <span aria-hidden className="i-ri-hard-drive-3-line size-3.5 text-text-tertiary" />,
     tipKey: 'detailPanel.categoryTip.local',
   },
   [PluginSource.debugging]: {
-    icon: <span aria-hidden className="i-ri-bug-line h-3.5 w-3.5 text-text-tertiary hover:text-text-warning" />,
+    icon: <span aria-hidden className="i-ri-bug-line size-3.5 text-text-tertiary hover:text-text-warning" />,
     tipKey: 'detailPanel.categoryTip.debugging',
   },
 }
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
index fb31df59a0..8de6e1b911 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
@@ -154,7 +154,7 @@ const DetailHeader = ({
           {/* Title Row */}
           <div className="flex h-5 items-center">
             <Title title={label[locale]} />
-            {verified && !isReadmeView && <Verified className="ml-0.5 h-4 w-4" text={t('marketplace.verifiedTip', { ns: 'plugin' })} />}
+            {verified && !isReadmeView && <Verified className="ml-0.5 size-4" text={t('marketplace.verifiedTip', { ns: 'plugin' })} />}
 
             {/* Version Picker */}
             {!!version && (
@@ -176,7 +176,7 @@ const DetailHeader = ({
                     text={(
                       <>
                         <div>{isFromGitHub ? (meta?.version ?? version ?? '') : version}</div>
-                        {isFromMarketplace && !isReadmeView && <span aria-hidden className="ml-1 i-ri-arrow-left-right-line h-3 w-3 text-text-tertiary" />}
+                        {isFromMarketplace && !isReadmeView && <span aria-hidden className="ml-1 i-ri-arrow-left-right-line size-3 text-text-tertiary" />}
                       </>
                     )}
                     hasRedCornerMark={hasNewVersion}
@@ -250,7 +250,7 @@ const DetailHeader = ({
               detailUrl={detailUrl}
             />
             <ActionButton onClick={onHide}>
-              <span aria-hidden className="i-ri-close-line h-4 w-4" />
+              <span aria-hidden className="i-ri-close-line size-4" />
             </ActionButton>
           </div>
         )}
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
index 9aa944c4b3..9cea1defbc 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
@@ -157,15 +157,15 @@ const EndpointCard = ({
       <div className="group rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-2.5 pl-3">
         <div className="flex items-center">
           <div className="mb-1 flex h-6 grow items-center gap-1 system-md-semibold text-text-secondary">
-            <span aria-hidden className="i-ri-login-circle-line h-4 w-4" />
+            <span aria-hidden className="i-ri-login-circle-line size-4" />
             <div>{data.name}</div>
           </div>
           <div className="hidden items-center group-hover:flex">
             <ActionButton onClick={showEndpointModalConfirm}>
-              <span aria-hidden className="i-ri-edit-line h-4 w-4" />
+              <span aria-hidden className="i-ri-edit-line size-4" />
             </ActionButton>
             <ActionButton onClick={showDeleteConfirm} className="text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive">
-              <span aria-hidden className="i-ri-delete-bin-line h-4 w-4" />
+              <span aria-hidden className="i-ri-delete-bin-line size-4" />
             </ActionButton>
           </div>
         </div>
@@ -183,8 +183,8 @@ const EndpointCard = ({
                       onClick={() => handleCopy(`${data.url}${endpoint.path}`)}
                     >
                       {isCopied
-                        ? <CopyCheck aria-hidden className="h-3.5 w-3.5 text-text-tertiary" />
-                        : <span aria-hidden className="i-ri-clipboard-line h-3.5 w-3.5 text-text-tertiary" />}
+                        ? <CopyCheck aria-hidden className="size-3.5 text-text-tertiary" />
+                        : <span aria-hidden className="i-ri-clipboard-line size-3.5 text-text-tertiary" />}
                     </ActionButton>
                   )}
                 />
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
index d50ab4c4ea..99e24a6317 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -74,9 +74,9 @@ const EndpointList = ({ detail }: Props) => {
               render={(
                 <button
                   type="button"
-                  className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm p-px outline-hidden hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
+                  className="flex size-4 shrink-0 items-center justify-center rounded-sm p-px outline-hidden hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
                 >
-                  <span aria-hidden className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary" />
+                  <span aria-hidden className="i-ri-question-line size-3.5 text-text-quaternary hover:text-text-tertiary" />
                 </button>
               )}
             />
@@ -86,7 +86,7 @@ const EndpointList = ({ detail }: Props) => {
             >
               <div className="flex flex-col gap-2">
                 <div className="flex h-8 w-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle">
-                  <RiApps2AddLine className="h-4 w-4 text-text-tertiary" />
+                  <RiApps2AddLine className="size-4 text-text-tertiary" />
                 </div>
                 <div className="system-xs-regular text-text-tertiary">{t('detailPanel.endpointsTip', { ns: 'plugin' })}</div>
                 <a
@@ -95,7 +95,7 @@ const EndpointList = ({ detail }: Props) => {
                   rel="noopener noreferrer"
                   className="inline-flex cursor-pointer items-center gap-1 system-xs-regular text-text-accent"
                 >
-                  <RiBookOpenLine className="h-3 w-3" />
+                  <RiBookOpenLine className="size-3" />
                   {t('detailPanel.endpointsDocLink', { ns: 'plugin' })}
                 </a>
               </div>
@@ -106,7 +106,7 @@ const EndpointList = ({ detail }: Props) => {
           aria-label={t('detailPanel.endpointModalTitle', { ns: 'plugin' })}
           onClick={showEndpointModal}
         >
-          <RiAddLine className="h-4 w-4" />
+          <RiAddLine className="size-4" />
         </ActionButton>
       </div>
       {data.endpoints.length === 0 && (
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index 5bac8c827b..9bb6da25cb 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -99,7 +99,7 @@ const EndpointModal: FC<Props> = ({
                 <div className="flex items-center justify-between">
                   <div className="system-xl-semibold text-text-primary">{t('detailPanel.endpointModalTitle', { ns: 'plugin' })}</div>
                   <ActionButton onClick={onCancel}>
-                    <RiCloseLine className="h-4 w-4" />
+                    <RiCloseLine className="size-4" />
                   </ActionButton>
                 </div>
                 <div className="mt-0.5 system-xs-regular text-text-tertiary">{t('detailPanel.endpointModalDesc', { ns: 'plugin' })}</div>
@@ -126,7 +126,7 @@ const EndpointModal: FC<Props> = ({
                             className="inline-flex items-center body-xs-regular text-text-accent-secondary"
                           >
                             {t('howToGet', { ns: 'tools' })}
-                            <RiArrowRightUpLine className="ml-1 h-3 w-3" />
+                            <RiArrowRightUpLine className="ml-1 size-3" />
                           </a>
                         )
                       : null}
diff --git a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
index f2779772b6..aaf614f4be 100644
--- a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
@@ -114,7 +114,7 @@ const MultipleToolSelector = ({
             ? (
                 <Infotip
                   aria-label={typeof tooltip === 'string' ? tooltip : label}
-                  className="h-3.5 w-3.5"
+                  className="size-3.5"
                 >
                   {tooltip}
                 </Infotip>
@@ -123,7 +123,7 @@ const MultipleToolSelector = ({
           {supportCollapse && (
             <ArrowDownRoundFill
               className={cn(
-                'h-4 w-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
+                'size-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
                 collapse && 'rotate-270',
               )}
             />
@@ -147,7 +147,7 @@ const MultipleToolSelector = ({
               setPanelShowState(true)
             }}
           >
-            <RiAddLine className="h-4 w-4" />
+            <RiAddLine className="size-4" />
           </ActionButton>
         )}
       </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
index 76ed8799d2..df6902a5a4 100644
--- a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
@@ -50,7 +50,7 @@ const OperationDropdown: FC<Props> = ({
       <DropdownMenuTrigger
         className={cn('action-btn action-btn-m', open && 'bg-state-base-hover')}
       >
-        <span className="i-ri-more-fill h-4 w-4" />
+        <span className="i-ri-more-fill size-4" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement={placement}
@@ -71,7 +71,7 @@ const OperationDropdown: FC<Props> = ({
         {(source === PluginSource.marketplace || source === PluginSource.github) && enable_marketplace && (
           <DropdownMenuItem render={<a href={detailUrl} target="_blank" rel="noopener noreferrer" />}>
             <span className="grow">{t('detailPanel.operation.viewDetail', { ns: 'plugin' })}</span>
-            <span className="i-ri-arrow-right-up-line h-3.5 w-3.5 shrink-0 text-text-tertiary" />
+            <span className="i-ri-arrow-right-up-line size-3.5 shrink-0 text-text-tertiary" />
           </DropdownMenuItem>
         )}
         {(source === PluginSource.marketplace || source === PluginSource.github) && enable_marketplace && (
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
index 824697566b..f8fd4c6fd4 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
@@ -99,18 +99,18 @@ const StrategyDetail: FC<Props> = ({
               <div className="relative border-b border-divider-subtle p-4 pb-3">
                 <div className="absolute top-3 right-3">
                   <ActionButton onClick={onHide}>
-                    <RiCloseLine className="h-4 w-4" />
+                    <RiCloseLine className="size-4" />
                   </ActionButton>
                 </div>
                 <div
                   className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
                   onClick={onHide}
                 >
-                  <RiArrowLeftLine className="h-4 w-4" />
+                  <RiArrowLeftLine className="size-4" />
                   BACK
                 </div>
                 <div className="flex items-center gap-1">
-                  <Icon size="tiny" className="h-6 w-6" src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${provider.tenant_id}&filename=${provider.icon}`} />
+                  <Icon size="tiny" className="size-6" src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${provider.tenant_id}&filename=${provider.icon}`} />
                   <div className="">{getValueFromI18nObject(provider.label)}</div>
                 </div>
                 <div className="mt-1 system-md-semibold text-text-primary">{getValueFromI18nObject(detail.identity.label)}</div>
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
index 201f521b48..82d42856ae 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
@@ -97,7 +97,7 @@ function CommonCreateModalContent({ onClose, createType, builder }: Omit<Props,
           {t(MODAL_TITLE_KEY_MAP[createType], { ns: 'pluginTrigger' })}
         </DialogTitle>
         <DialogCloseButton
-          className="top-5 right-5 h-8 w-8 rounded-lg [&>span]:h-5 [&>span]:w-5"
+          className="top-5 right-5 size-8 rounded-lg [&>span]:size-5"
           onClick={onClose}
         />
       </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/components/modal-steps.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/components/modal-steps.tsx
index 2cc5e58167..4b812f49b5 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/components/modal-steps.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/components/modal-steps.tsx
@@ -26,7 +26,7 @@ const StatusStep = ({ isActive, text }: StatusStepProps) => {
       : 'text-text-tertiary'}`}
     >
       {isActive && (
-        <div className="h-1 w-1 rounded-full bg-state-accent-solid"></div>
+        <div className="size-1 rounded-full bg-state-accent-solid"></div>
       )}
       {text}
     </div>
@@ -229,8 +229,8 @@ const ManualPropertiesSection = ({
         </div>
 
         <div className="mb-1 flex items-center justify-center gap-1 rounded-lg bg-background-section p-3">
-          <div className="h-3.5 w-3.5">
-            <RiLoader2Line className="h-full w-full animate-spin" />
+          <div className="size-3.5">
+            <RiLoader2Line className="size-full animate-spin" />
           </div>
           <div className="system-xs-regular text-text-tertiary">
             {t('modal.manual.logs.loading', { ns: 'pluginTrigger', pluginName })}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
index 7060b39dcf..8b4798e902 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
@@ -105,7 +105,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
                   aria-label={t('subscription.addType.options.oauth.clientSettings', { ns: 'pluginTrigger' })}
                   onClick={onClickClientSettings}
                 >
-                  <span aria-hidden className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+                  <span aria-hidden className="i-ri-equalizer-2-line size-4 text-text-tertiary" />
                 </ActionButton>
               )}
             />
@@ -127,7 +127,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
         extra: (
           <Infotip
             aria-label={t('subscription.addType.options.manual.tip', { ns: 'pluginTrigger' })}
-            className="h-3.5 w-3.5"
+            className="size-3.5"
             iconClassName="h-full w-full"
           >
             {t('subscription.addType.options.manual.tip', { ns: 'pluginTrigger' })}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
index 189e4af2a5..80e2137b7e 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
@@ -68,7 +68,7 @@ export const OAuthClientSettingsModal = ({ open, oauthConfig, onOpenChange, show
             <DialogTitle data-testid="modal-title" className="title-2xl-semi-bold text-text-primary">
               {title}
             </DialogTitle>
-            <DialogCloseButton className="top-5 right-5 h-8 w-8 rounded-lg" />
+            <DialogCloseButton className="top-5 right-5 size-8 rounded-lg" />
           </div>
           <div data-testid="modal-content" className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
             <div className="mb-2 system-sm-medium text-text-secondary">
@@ -92,7 +92,7 @@ export const OAuthClientSettingsModal = ({ open, oauthConfig, onOpenChange, show
             {showRedirectInfo && (
               <div className="mb-4 flex items-start gap-3 rounded-xl bg-background-section-burn p-4">
                 <div className="rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg p-2 shadow-xs shadow-shadow-shadow-3">
-                  <span aria-hidden="true" className="i-ri-information-2-fill h-5 w-5 shrink-0 text-text-accent" />
+                  <span aria-hidden="true" className="i-ri-information-2-fill size-5 shrink-0 text-text-accent" />
                 </div>
                 <div className="min-w-0 flex-1 text-text-secondary">
                   <div className="system-sm-regular leading-4 whitespace-pre-wrap">
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
index 14d7dc30ad..79d1760b39 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
@@ -72,7 +72,7 @@ const StatusStep = ({ isActive, text, onClick, clickable }: {
     <>
       {isActive
         ? (
-            <div className="h-1 w-1 rounded-full bg-state-accent-solid"></div>
+            <div className="size-1 rounded-full bg-state-accent-solid"></div>
           )
         : null}
       {text}
@@ -313,7 +313,7 @@ export const ApiKeyEditModal = ({ onClose, subscription, pluginDetail }: Props)
             <DialogTitle data-testid="modal-title" className="title-2xl-semi-bold text-text-primary">
               {title}
             </DialogTitle>
-            <DialogCloseButton className="top-5 right-5 h-8 w-8 rounded-lg" />
+            <DialogCloseButton className="top-5 right-5 size-8 rounded-lg" />
           </div>
           <div data-testid="modal-content" className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
             {pluginDetail && (
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
index d70fcbfdef..c278301463 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
@@ -154,7 +154,7 @@ export const ManualEditModal = ({ onClose, subscription, pluginDetail }: Props)
             <DialogTitle data-testid="modal-title" className="title-2xl-semi-bold text-text-primary">
               {title}
             </DialogTitle>
-            <DialogCloseButton className="top-5 right-5 h-8 w-8 rounded-lg" />
+            <DialogCloseButton className="top-5 right-5 size-8 rounded-lg" />
           </div>
           <div data-testid="modal-content" className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
             {pluginDetail && (
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
index afbdbe56b3..46e0dab091 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
@@ -168,7 +168,7 @@ export const OAuthEditModal = ({ onClose, subscription, pluginDetail }: Props) =
             <DialogTitle data-testid="modal-title" className="title-2xl-semi-bold text-text-primary">
               {title}
             </DialogTitle>
-            <DialogCloseButton className="top-5 right-5 h-8 w-8 rounded-lg" />
+            <DialogCloseButton className="top-5 right-5 size-8 rounded-lg" />
           </div>
           <div data-testid="modal-content" className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
             {pluginDetail && (
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
index 76c5a02065..2af0bde981 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
@@ -33,7 +33,7 @@ export const SubscriptionListView: React.FC<SubscriptionListViewProps> = ({
             </span>
             <Infotip
               aria-label={t('subscription.list.tip', { ns: 'pluginTrigger' })}
-              className="h-3.5 w-3.5"
+              className="size-3.5"
               iconClassName="h-full w-full"
             >
               {t('subscription.list.tip', { ns: 'pluginTrigger' })}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
index b0b3efe853..f71b31be46 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
@@ -93,7 +93,7 @@ const LogViewer = ({ logs, className }: Props) => {
             }}
             className="rounded-md p-0.5 hover:bg-components-panel-border"
           >
-            <RiFileCopyLine className="h-4 w-4 text-text-tertiary" />
+            <RiFileCopyLine className="size-4 text-text-tertiary" />
           </button>
         </div>
         <div className="px-2 pt-1 pb-2">
@@ -128,7 +128,7 @@ const LogViewer = ({ logs, className }: Props) => {
           >
             {isError && (
               <div className="pointer-events-none absolute top-0 left-0 h-7 w-[179px]">
-                <svg xmlns="http://www.w3.org/2000/svg" width="179" height="28" viewBox="0 0 179 28" fill="none" className="h-full w-full">
+                <svg xmlns="http://www.w3.org/2000/svg" width="179" height="28" viewBox="0 0 179 28" fill="none" className="size-full">
                   <g filter="url(#filter0_f_error_glow)">
                     <circle cx="27" cy="14" r="32" fill="#F04438" fillOpacity="0.25" />
                   </g>
@@ -153,10 +153,10 @@ const LogViewer = ({ logs, className }: Props) => {
               <div className="flex items-center gap-0">
                 {isExpanded
                   ? (
-                      <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
+                      <RiArrowDownSLine className="size-4 text-text-tertiary" />
                     )
                   : (
-                      <RiArrowRightSLine className="h-4 w-4 text-text-tertiary" />
+                      <RiArrowRightSLine className="size-4 text-text-tertiary" />
                     )}
                 <div className="system-xs-semibold-uppercase text-text-secondary">
                   {t(`modal.manual.logs.${LogTypeEnum.REQUEST}`, { ns: 'pluginTrigger' })}
@@ -170,13 +170,13 @@ const LogViewer = ({ logs, className }: Props) => {
                 <div className="system-xs-regular text-text-tertiary">
                   {dayjs(log.created_at).format('HH:mm:ss')}
                 </div>
-                <div className="h-3.5 w-3.5">
+                <div className="size-3.5">
                   {isSuccess
                     ? (
-                        <RiCheckboxCircleFill className="h-full w-full text-text-success" />
+                        <RiCheckboxCircleFill className="size-full text-text-success" />
                       )
                     : (
-                        <RiErrorWarningFill className="h-full w-full text-text-destructive" />
+                        <RiErrorWarningFill className="size-full text-text-destructive" />
                       )}
                 </div>
               </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
index c29ca0a54c..bc4af6a514 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
@@ -73,13 +73,13 @@ const SubscriptionTriggerButton: React.FC<SubscriptionTriggerButtonProps> = ({
         className,
       )}
     >
-      <RiWebhookLine className={cn('h-3.5 w-3.5 shrink-0 text-text-secondary', statusConfig.color === 'red' && 'text-components-button-destructive-secondary-text')} />
+      <RiWebhookLine className={cn('size-3.5 shrink-0 text-text-secondary', statusConfig.color === 'red' && 'text-components-button-destructive-secondary-text')} />
       <span className={cn('truncate system-xs-medium text-components-button-ghost-text', statusConfig.color === 'red' && 'text-components-button-destructive-secondary-text')}>
         {statusConfig.label}
       </span>
       <RiArrowDownSLine
         className={cn(
-          'ml-auto h-4 w-4 shrink-0 text-text-quaternary transition-transform',
+          'ml-auto size-4 shrink-0 text-text-quaternary transition-transform',
           isOpen && 'rotate-180',
           statusConfig.color === 'red' && 'text-components-button-destructive-secondary-text',
         )}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
index e5be965a12..1a254e99a0 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
@@ -36,7 +36,7 @@ export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
             </span>
             <Infotip
               aria-label={t('subscription.list.tip', { ns: 'pluginTrigger' })}
-              className="h-3.5 w-3.5"
+              className="size-3.5"
               iconClassName="h-full w-full"
             >
               {t('subscription.list.tip', { ns: 'pluginTrigger' })}
@@ -65,9 +65,9 @@ export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
             >
               <div className="flex items-center">
                 {selectedId === subscription.id && (
-                  <RiCheckLine className="mr-2 h-4 w-4 shrink-0 text-text-accent" />
+                  <RiCheckLine className="mr-2 size-4 shrink-0 text-text-accent" />
                 )}
-                <RiWebhookLine className={cn('mr-1.5 h-3.5 w-3.5 text-text-secondary', selectedId !== subscription.id && 'ml-6')} />
+                <RiWebhookLine className={cn('mr-1.5 size-3.5 text-text-secondary', selectedId !== subscription.id && 'ml-6')} />
                 <span className="system-md-regular leading-6 text-text-secondary">
                   {subscription.name}
                 </span>
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
index c5ee665063..2fe3aae034 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
@@ -42,7 +42,7 @@ const SubscriptionCard = ({ data, pluginDetail }: Props) => {
       >
         <div className="flex items-center justify-between">
           <div className="flex h-6 items-center gap-1">
-            <RiWebhookLine className="h-4 w-4 text-text-secondary" />
+            <RiWebhookLine className="size-4 text-text-secondary" />
             <span className="system-md-semibold text-text-secondary">
               {data.name}
             </span>
@@ -53,13 +53,13 @@ const SubscriptionCard = ({ data, pluginDetail }: Props) => {
               onClick={showEditModal}
               className="transition-colors hover:bg-state-base-hover"
             >
-              <RiEditLine className="h-4 w-4" />
+              <RiEditLine className="size-4" />
             </ActionButton>
             <ActionButton
               onClick={showDeleteModal}
               className="subscription-delete-btn transition-colors hover:bg-state-destructive-hover hover:text-text-destructive"
             >
-              <RiDeleteBinLine className="h-4 w-4" />
+              <RiDeleteBinLine className="size-4" />
             </ActionButton>
           </div>
         </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
index 1baae6d3ca..33081aa7df 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
@@ -131,7 +131,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
     const tooltipContent = tooltipText && (
       <Infotip
         aria-label={tooltipText}
-        className="ml-0.5 h-4 w-4"
+        className="ml-0.5 size-4"
         popupClassName="w-[200px]"
       >
         {tooltipText}
@@ -300,7 +300,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
             className="inline-flex items-center text-xs text-text-accent"
           >
             {t('howToGet', { ns: 'tools' })}
-            <RiArrowRightUpLine className="ml-1 h-3 w-3" />
+            <RiArrowRightUpLine className="ml-1 size-3" />
           </a>
         )}
       </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx
index 6ea17dc565..7522eefbf3 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx
@@ -40,7 +40,7 @@ const SchemaModal: FC<Props> = ({
             <button
               type="button"
               aria-label={t('operation.close', { ns: 'common' })}
-              className="absolute top-5 right-5 flex h-8 w-8 items-center justify-center p-1.5"
+              className="absolute top-5 right-5 flex size-8 items-center justify-center p-1.5"
               onClick={onClose}
             >
               <span className="i-ri-close-line h-[18px] w-[18px] text-text-tertiary" />
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
index 64068166d0..758ee98fb1 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
@@ -85,7 +85,7 @@ const ToolCredentialForm: FC<Props> = ({
                           className="inline-flex items-center text-xs text-text-accent"
                         >
                           {t('howToGet', { ns: 'tools' })}
-                          <RiArrowRightUpLine className="ml-1 h-3 w-3" />
+                          <RiArrowRightUpLine className="ml-1 size-3" />
                         </a>
                       )
                     : null}
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
index d92c59b457..2bb690777c 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
@@ -88,7 +88,7 @@ const ToolItem = ({
           isShowCanNotChooseMCPTip && 'opacity-30',
         )}
         >
-          <div className="flex h-5 w-5 items-center justify-center opacity-35">
+          <div className="flex size-5 items-center justify-center opacity-35">
             <Group className="text-text-tertiary" />
           </div>
         </div>
@@ -100,7 +100,7 @@ const ToolItem = ({
       <div className="hidden items-center gap-1 group-hover:flex">
         {!noAuth && !isError && !uninstalled && !versionMismatch && !isShowCanNotChooseMCPTip && (
           <ActionButton>
-            <RiEqualizer2Line className="h-4 w-4" />
+            <RiEqualizer2Line className="size-4" />
           </ActionButton>
         )}
         <div
@@ -112,7 +112,7 @@ const ToolItem = ({
           onMouseOver={() => setIsDeleting(true)}
           onMouseLeave={() => setIsDeleting(false)}
         >
-          <RiDeleteBinLine className="h-4 w-4" />
+          <RiDeleteBinLine className="size-4" />
         </div>
       </div>
       {!isError && !uninstalled && !noAuth && !versionMismatch && !isShowCanNotChooseMCPTip && showSwitch && (
@@ -175,7 +175,7 @@ const ToolItem = ({
             aria-label={typeof errorTip === 'string' ? errorTip : t('detailPanel.toolSelector.unsupportedTitle', { ns: 'plugin' })}
             className="inline-flex border-0 bg-transparent p-0"
           >
-            <RiErrorWarningFill className="h-4 w-4 text-text-destructive" />
+            <RiErrorWarningFill className="size-4 text-text-destructive" />
           </PopoverTrigger>
           <PopoverContent popupClassName="px-3 py-2 system-xs-regular text-text-tertiary">
             {errorTip}
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx
index 7b7fe38a36..69d9dfee0b 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx
@@ -37,7 +37,7 @@ const ToolTrigger = ({
       {value?.provider_name && provider && (
         <div className="mr-1 shrink-0 rounded-lg border border-components-panel-border bg-components-panel-bg p-px">
           <BlockIcon
-            className="h-4! w-4!"
+            className="size-4!"
             type={BlockEnum.Tool}
             toolIcon={provider.icon}
           />
@@ -52,10 +52,10 @@ const ToolTrigger = ({
         </div>
       )}
       {isConfigure && (
-        <RiEqualizer2Line className={cn('ml-0.5 h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+        <RiEqualizer2Line className={cn('ml-0.5 size-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
       )}
       {!isConfigure && (
-        <RiArrowDownSLine className={cn('ml-0.5 h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+        <RiArrowDownSLine className={cn('ml-0.5 size-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
       )}
     </div>
   )
diff --git a/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx b/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
index 3de2b30f1c..da8bb2387c 100644
--- a/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
@@ -105,18 +105,18 @@ export const EventDetailDrawer: FC<EventDetailDrawerProps> = (props) => {
               <div className="relative border-b border-divider-subtle p-4 pb-3">
                 <div className="absolute top-3 right-3">
                   <ActionButton onClick={onClose}>
-                    <RiCloseLine className="h-4 w-4" />
+                    <RiCloseLine className="size-4" />
                   </ActionButton>
                 </div>
                 <div
                   className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
                   onClick={onClose}
                 >
-                  <RiArrowLeftLine className="h-4 w-4" />
+                  <RiArrowLeftLine className="size-4" />
                   {t('detailPanel.operation.back', { ns: 'plugin' })}
                 </div>
                 <div className="flex items-center gap-1">
-                  <Icon size="tiny" className="h-6 w-6" src={providerInfo.icon!} />
+                  <Icon size="tiny" className="size-6" src={providerInfo.icon!} />
                   <OrgInfo
                     packageNameClassName="w-auto"
                     orgName={providerInfo.author}
diff --git a/web/app/components/plugins/plugin-item/action.tsx b/web/app/components/plugins/plugin-item/action.tsx
index b04bc85779..fd54047807 100644
--- a/web/app/components/plugins/plugin-item/action.tsx
+++ b/web/app/components/plugins/plugin-item/action.tsx
@@ -123,7 +123,7 @@ const Action: FC<Props> = ({
             <TooltipTrigger
               render={(
                 <ActionButton onClick={handleFetchNewVersion}>
-                  <span className="i-ri-loop-left-line h-4 w-4 text-text-tertiary" />
+                  <span className="i-ri-loop-left-line size-4 text-text-tertiary" />
                 </ActionButton>
               )}
             />
@@ -139,7 +139,7 @@ const Action: FC<Props> = ({
             <TooltipTrigger
               render={(
                 <ActionButton onClick={showPluginInfo}>
-                  <span className="i-ri-information-2-line h-4 w-4 text-text-tertiary" />
+                  <span className="i-ri-information-2-line size-4 text-text-tertiary" />
                 </ActionButton>
               )}
             />
@@ -159,7 +159,7 @@ const Action: FC<Props> = ({
                   className="text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
                   onClick={showDeleteConfirm}
                 >
-                  <span className="i-ri-delete-bin-line h-4 w-4" />
+                  <span className="i-ri-delete-bin-line size-4" />
                 </ActionButton>
               )}
             />
diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index 6e6aaf88c9..a4b084db46 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -112,9 +112,9 @@ const PluginItem: FC<Props> = ({
         <CornerMark text={categoriesMap[category]!.label} />
         {/* Header */}
         <div className="flex">
-          <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl border border-components-panel-border-subtle">
+          <div className="flex size-10 items-center justify-center overflow-hidden rounded-xl border border-components-panel-border-subtle">
             <img
-              className="h-full w-full"
+              className="size-full"
               src={iconSrc}
               alt={`plugin-${plugin_unique_identifier}-logo`}
             />
@@ -122,15 +122,15 @@ const PluginItem: FC<Props> = ({
           <div className="ml-3 w-0 grow">
             <div className="flex h-5 items-center">
               <Title title={title} />
-              {verified && <Verified className="ml-0.5 h-4 w-4" text={t('marketplace.verifiedTip', { ns: 'plugin' })} />}
+              {verified && <Verified className="ml-0.5 size-4" text={t('marketplace.verifiedTip', { ns: 'plugin' })} />}
               {!isDifyVersionCompatible && (
                 <Popover>
                   <PopoverTrigger
                     openOnHover
                     aria-label={t('difyVersionNotCompatible', { ns: 'plugin', minimalDifyVersion: declarationMeta.minimum_dify_version })}
-                    className="ml-0.5 inline-flex h-4 w-4 shrink-0 border-0 bg-transparent p-0"
+                    className="ml-0.5 inline-flex size-4 shrink-0 border-0 bg-transparent p-0"
                   >
-                    <RiErrorWarningLine color="red" className="h-4 w-4 text-text-accent" />
+                    <RiErrorWarningLine color="red" className="size-4 text-text-accent" />
                   </PopoverTrigger>
                   <PopoverContent popupClassName="px-3 py-2 system-xs-regular text-text-tertiary">
                     {t('difyVersionNotCompatible', { ns: 'plugin', minimalDifyVersion: declarationMeta.minimum_dify_version })}
@@ -195,9 +195,9 @@ const PluginItem: FC<Props> = ({
                 <a href={`https://github.com/${meta!.repo}`} target="_blank" className="flex items-center gap-1">
                   <div className="system-2xs-medium-uppercase text-text-tertiary">{t('from', { ns: 'plugin' })}</div>
                   <div className="flex items-center space-x-0.5 text-text-secondary">
-                    <Github className="h-3 w-3" />
+                    <Github className="size-3" />
                     <div className="system-2xs-semibold-uppercase">GitHub</div>
-                    <RiArrowRightUpLine className="h-3 w-3" />
+                    <RiArrowRightUpLine className="size-3" />
                   </div>
                 </a>
               </>
@@ -211,7 +211,7 @@ const PluginItem: FC<Props> = ({
                     {' '}
                     <span className="text-text-secondary">marketplace</span>
                   </div>
-                  <RiArrowRightUpLine className="h-3 w-3 text-text-secondary" />
+                  <RiArrowRightUpLine className="size-3 text-text-secondary" />
                 </a>
               </>
             )}
@@ -219,7 +219,7 @@ const PluginItem: FC<Props> = ({
             && (
               <>
                 <div className="flex items-center gap-1">
-                  <RiHardDrive3Line className="h-3 w-3 text-text-tertiary" />
+                  <RiHardDrive3Line className="size-3 text-text-tertiary" />
                   <div className="system-2xs-medium-uppercase text-text-tertiary">Local Plugin</div>
                 </div>
               </>
@@ -228,7 +228,7 @@ const PluginItem: FC<Props> = ({
             && (
               <>
                 <div className="flex items-center gap-1">
-                  <RiBugLine className="h-3 w-3 text-text-warning" />
+                  <RiBugLine className="size-3 text-text-warning" />
                   <div className="system-2xs-medium-uppercase text-text-warning">Debugging Plugin</div>
                 </div>
               </>
diff --git a/web/app/components/plugins/plugin-page/debug-info.tsx b/web/app/components/plugins/plugin-page/debug-info.tsx
index 9e4404c39c..904ea8e025 100644
--- a/web/app/components/plugins/plugin-page/debug-info.tsx
+++ b/web/app/components/plugins/plugin-page/debug-info.tsx
@@ -27,8 +27,8 @@ const DebugInfo: FC = () => {
 
   if (!info) {
     return (
-      <Button className="h-full w-full p-2 text-components-button-secondary-text" disabled>
-        <RiBugLine className="h-4 w-4" />
+      <Button className="size-full p-2 text-components-button-secondary-text" disabled>
+        <RiBugLine className="size-4" />
       </Button>
     )
   }
@@ -37,8 +37,8 @@ const DebugInfo: FC = () => {
     <Popover>
       <PopoverTrigger
         render={(
-          <Button className="h-full w-full p-2 text-components-button-secondary-text">
-            <RiBugLine className="h-4 w-4" />
+          <Button className="size-full p-2 text-components-button-secondary-text">
+            <RiBugLine className="size-4" />
           </Button>
         )}
       />
@@ -57,7 +57,7 @@ const DebugInfo: FC = () => {
             className="flex cursor-pointer items-center gap-0.5 text-text-accent-light-mode-only"
           >
             <span className="system-xs-medium">{t(`${i18nPrefix}.viewDocs`, { ns: 'plugin' })}</span>
-            <RiArrowRightUpLine className="h-3 w-3" />
+            <RiArrowRightUpLine className="size-3" />
           </a>
         </div>
         <div className="space-y-0.5">
diff --git a/web/app/components/plugins/plugin-page/empty/index.tsx b/web/app/components/plugins/plugin-page/empty/index.tsx
index 7b9fab6f3e..bebeedcb85 100644
--- a/web/app/components/plugins/plugin-page/empty/index.tsx
+++ b/web/app/components/plugins/plugin-page/empty/index.tsx
@@ -74,23 +74,23 @@ const Empty = () => {
   return (
     <div className="relative z-0 w-full grow">
       {/* skeleton */}
-      <div className="absolute top-0 z-10 grid h-full w-full grid-cols-2 gap-2 overflow-hidden px-12">
+      <div className="absolute top-0 z-10 grid size-full grid-cols-2 gap-2 overflow-hidden px-12">
         {Array.from({ length: 20 }).fill(0).map((_, i) => (
           <div key={i} className="h-24 rounded-xl bg-components-card-bg" />
         ))}
       </div>
       {/* mask */}
-      <div className="absolute z-20 h-full w-full bg-linear-to-b from-components-panel-bg-transparent to-components-panel-bg" />
+      <div className="absolute z-20 size-full bg-linear-to-b from-components-panel-bg-transparent to-components-panel-bg" />
       <div className="relative z-30 flex h-full items-center justify-center">
         <div className="flex flex-col items-center gap-y-3">
           <div className="relative -z-10 flex size-14 items-center justify-center rounded-xl
           border border-dashed border-divider-deep bg-components-card-bg shadow-xl shadow-shadow-shadow-5"
           >
-            <Group className="h-5 w-5 text-text-tertiary" />
+            <Group className="size-5 text-text-tertiary" />
             <Line className="absolute top-1/2 -right-px -translate-y-1/2" />
             <Line className="absolute top-1/2 -left-px -translate-y-1/2" />
-            <Line className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90" />
-            <Line className="absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90" />
+            <Line className="absolute top-0 left-1/2 -translate-1/2 rotate-90" />
+            <Line className="absolute top-full left-1/2 -translate-1/2 rotate-90" />
           </div>
           <div className="system-md-regular text-text-tertiary">
             {text}
diff --git a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
index aa9ecb99be..4876c1f98e 100644
--- a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
@@ -68,7 +68,7 @@ const CategoriesFilter = ({
             {
               !!selectedTagsLength && (
                 <RiCloseCircleFill
-                  className="h-4 w-4 cursor-pointer text-text-quaternary"
+                  className="size-4 cursor-pointer text-text-quaternary"
                   onClick={
                     (e) => {
                       e.stopPropagation()
@@ -80,7 +80,7 @@ const CategoriesFilter = ({
             }
             {
               !selectedTagsLength && (
-                <RiArrowDownSLine className="h-4 w-4" />
+                <RiArrowDownSLine className="size-4" />
               )
             }
           </div>
diff --git a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
index 9a9cd1a65f..f40f0f896d 100644
--- a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
@@ -68,7 +68,7 @@ const TagsFilter = ({
             {
               !!selectedTagsLength && (
                 <RiCloseCircleFill
-                  className="h-4 w-4 cursor-pointer text-text-quaternary"
+                  className="size-4 cursor-pointer text-text-quaternary"
                   onClick={(e) => {
                     e.stopPropagation()
                     onChange([])
@@ -78,7 +78,7 @@ const TagsFilter = ({
             }
             {
               !selectedTagsLength && (
-                <RiArrowDownSLine className="h-4 w-4" />
+                <RiArrowDownSLine className="size-4" />
               )
             }
           </div>
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index acd25836ab..4c5624bad5 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -197,7 +197,7 @@ const PluginPage = ({
                       className="px-3"
                       variant="secondary-accent"
                     >
-                      <RiBookOpenLine className="mr-1 h-4 w-4" />
+                      <RiBookOpenLine className="mr-1 size-4" />
                       {t('publishPlugins', { ns: 'plugin' })}
                     </Button>
                   </Link>
@@ -223,10 +223,10 @@ const PluginPage = ({
                     render={(
                       <Button
                         aria-label={t('privilege.title', { ns: 'plugin' })}
-                        className="group h-full w-full p-2 text-components-button-secondary-text"
+                        className="group size-full p-2 text-components-button-secondary-text"
                         onClick={setShowPluginSettingModal}
                       >
-                        <RiEqualizer2Line className="h-4 w-4" aria-hidden="true" />
+                        <RiEqualizer2Line className="size-4" aria-hidden="true" />
                       </Button>
                     )}
                   />
@@ -250,7 +250,7 @@ const PluginPage = ({
             </div>
           )}
           <div className={`flex items-center justify-center gap-2 py-4 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}>
-            <RiDragDropLine className="h-4 w-4" />
+            <RiDragDropLine className="size-4" />
             <span className="system-xs-regular">{t('installModal.dropPluginToInstall', { ns: 'plugin' })}</span>
           </div>
           {currentFile && (
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index 8e996345af..abcd1bd2b8 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -123,14 +123,14 @@ const InstallPluginDropdown = ({
         <DropdownMenuTrigger
           render={(
             <Button
-              className={cn('h-full w-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
+              className={cn('size-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
             />
           )}
         >
           <>
-            <RiAddLine className="h-4 w-4" />
+            <RiAddLine className="size-4" />
             <span className="pl-1">{t('installPlugin', { ns: 'plugin' })}</span>
-            <RiArrowDownSLine className="ml-1 h-4 w-4" />
+            <RiArrowDownSLine className="ml-1 size-4" />
           </>
         </DropdownMenuTrigger>
         <DropdownMenuContent
@@ -138,7 +138,7 @@ const InstallPluginDropdown = ({
           sideOffset={4}
           popupClassName="w-[200px] pb-2"
         >
-          <span className="flex items-start self-stretch pt-1 pr-3 pb-0.5 pl-3 system-xs-medium-uppercase text-text-tertiary">
+          <span className="flex items-start self-stretch px-3 pt-1 pb-0.5 system-xs-medium-uppercase text-text-tertiary">
             {t('installFrom', { ns: 'plugin' })}
           </span>
           {installMethods.map(({ icon: Icon, text, action }) => (
@@ -148,7 +148,7 @@ const InstallPluginDropdown = ({
               onClick={() => handleInstallMethodSelect(action)}
             >
               <div className="flex items-center gap-1">
-                <Icon className="h-4 w-4 text-text-tertiary" />
+                <Icon className="size-4 text-text-tertiary" />
                 <span className="px-1 system-md-regular text-text-secondary">{text}</span>
               </div>
             </DropdownMenuItem>
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
index ab17dd202b..5489db495a 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
@@ -103,12 +103,12 @@ const ErrorPluginItem: FC<ErrorPluginItemProps> = ({ plugin, getIconUrl, languag
         getIconUrl={getIconUrl}
         language={language}
         statusIcon={(
-          <span className="flex h-4 w-4 items-center justify-center rounded-full border border-components-panel-bg bg-components-panel-bg">
-            <span className="i-ri-error-warning-fill h-4 w-4 text-text-destructive" />
+          <span className="flex size-4 items-center justify-center rounded-full border border-components-panel-bg bg-components-panel-bg">
+            <span className="i-ri-error-warning-fill size-4 text-text-destructive" />
           </span>
         )}
         statusText={(
-          <span className="block max-w-full break-words whitespace-pre-line">
+          <span className="block max-w-full wrap-break-word whitespace-pre-line">
             {plugin.message || errorMsg}
           </span>
         )}
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx
index 2fdb5696ea..530544719a 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx
@@ -39,7 +39,7 @@ const PluginItem: FC<PluginItemProps> = ({
         <div className="truncate system-sm-medium text-text-secondary">
           {plugin.labels[language]}
         </div>
-        <div className={`min-w-0 system-xs-regular break-words ${statusClassName || 'text-text-tertiary'}`}>
+        <div className={`min-w-0 system-xs-regular wrap-break-word ${statusClassName || 'text-text-tertiary'}`}>
           {statusText}
         </div>
         {action}
@@ -47,10 +47,10 @@ const PluginItem: FC<PluginItemProps> = ({
       {onClear && (
         <button
           type="button"
-          className="invisible flex h-6 w-6 shrink-0 items-center justify-center self-start rounded-md group-hover/item:visible hover:bg-state-base-hover-alt"
+          className="invisible flex size-6 shrink-0 items-center justify-center self-start rounded-md group-hover/item:visible hover:bg-state-base-hover-alt"
           onClick={onClear}
         >
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+          <span className="i-ri-close-line size-4 text-text-tertiary" />
         </button>
       )}
     </div>
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
index cc2eed1dbb..7ba4968511 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
@@ -40,7 +40,7 @@ const PluginTaskList: FC<PluginTaskListProps> = ({
           getIconUrl={getIconUrl}
           language={language}
           statusIcon={
-            <span className="i-ri-loader-2-line h-3.5 w-3.5 animate-spin text-text-accent" />
+            <span className="i-ri-loader-2-line size-3.5 animate-spin text-text-accent" />
           }
           defaultStatusText={t('task.installingHint', { ns: 'plugin' })}
         />
@@ -55,7 +55,7 @@ const PluginTaskList: FC<PluginTaskListProps> = ({
           getIconUrl={getIconUrl}
           language={language}
           statusIcon={
-            <span className="i-ri-checkbox-circle-fill h-3.5 w-3.5 text-text-success" />
+            <span className="i-ri-checkbox-circle-fill size-3.5 text-text-success" />
           }
           defaultStatusText={t('task.installed', { ns: 'plugin' })}
           statusClassName="text-text-success"
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx
index 691ee40f4d..ae75566aae 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx
@@ -44,7 +44,7 @@ const TaskStatusIndicator: FC<TaskStatusIndicatorProps> = ({
             size="small"
             aria-label={tip}
             className={cn(
-              'relative h-8 w-8 rounded-lg px-0',
+              'relative size-8 rounded-lg px-0',
               'focus-visible:ring-2 focus-visible:ring-state-accent-solid',
               showErrorStyle && 'cursor-pointer border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt',
               (isInstalling || isInstallingWithSuccess || isSuccess) && 'cursor-pointer hover:bg-components-button-secondary-bg-hover',
@@ -58,7 +58,7 @@ const TaskStatusIndicator: FC<TaskStatusIndicatorProps> = ({
                   <span
                     aria-hidden
                     className={cn(
-                      'i-ri-install-line h-4 w-4 text-components-button-secondary-text',
+                      'i-ri-install-line size-4 text-components-button-secondary-text',
                       showErrorStyle && 'text-components-button-destructive-secondary-text',
                     )}
                   />
@@ -80,10 +80,10 @@ const TaskStatusIndicator: FC<TaskStatusIndicatorProps> = ({
                 />
               )}
               {showSuccessIcon && !isInstalling && !isInstallingWithSuccess && !isInstallingWithError && (
-                <span aria-hidden className="i-ri-checkbox-circle-fill h-3.5 w-3.5 text-text-success" />
+                <span aria-hidden className="i-ri-checkbox-circle-fill size-3.5 text-text-success" />
               )}
               {isFailed && (
-                <span aria-hidden className="i-ri-error-warning-fill h-3.5 w-3.5 text-text-destructive" />
+                <span aria-hidden className="i-ri-error-warning-fill size-3.5 text-text-destructive" />
               )}
             </div>
           </Button>
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index 06b611b355..4b1ffb2a7e 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -67,7 +67,7 @@ const ProviderCardComponent: FC<Props> = ({
         ))}
       </div>
       <div
-        className="absolute right-0 bottom-0 left-0 hidden items-center gap-2 rounded-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent p-4 pt-4 group-hover:flex"
+        className="absolute inset-x-0 bottom-0 hidden items-center gap-2 rounded-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent p-4 pt-4 group-hover:flex"
       >
         <Button
           className="grow"
@@ -82,7 +82,7 @@ const ProviderCardComponent: FC<Props> = ({
         >
           <a href={getPluginLinkInMarketplace(payload, marketplaceLinkParams)} target="_blank" className="flex items-center gap-0.5">
             {t('detailPanel.operation.detail', { ns: 'plugin' })}
-            <RiArrowRightUpLine className="h-4 w-4" />
+            <RiArrowRightUpLine className="size-4" />
           </a>
         </Button>
       </div>
diff --git a/web/app/components/plugins/readme-panel/content.tsx b/web/app/components/plugins/readme-panel/content.tsx
index 1fde49b701..b2b4a4be7a 100644
--- a/web/app/components/plugins/readme-panel/content.tsx
+++ b/web/app/components/plugins/readme-panel/content.tsx
@@ -61,11 +61,11 @@ export function ReadmePanelContent({
   }
 
   return (
-    <div className="flex h-full min-h-0 w-full flex-col overflow-hidden">
-      <div className="shrink-0 rounded-t-xl bg-background-body px-4 py-4">
+    <div className="flex size-full min-h-0 flex-col overflow-hidden">
+      <div className="shrink-0 rounded-t-xl bg-background-body p-4">
         <div className="mb-3 flex items-center justify-between gap-3">
           <div className="flex min-w-0 items-center gap-1">
-            <span aria-hidden="true" className="i-ri-book-read-line h-3 w-3 shrink-0 text-text-tertiary" />
+            <span aria-hidden="true" className="i-ri-book-read-line size-3 shrink-0 text-text-tertiary" />
             {title}
           </div>
           {closeButton}
diff --git a/web/app/components/plugins/readme-panel/dialog.tsx b/web/app/components/plugins/readme-panel/dialog.tsx
index 36695196b3..e100e5bed5 100644
--- a/web/app/components/plugins/readme-panel/dialog.tsx
+++ b/web/app/components/plugins/readme-panel/dialog.tsx
@@ -42,7 +42,7 @@ export function ReadmeDialog({
           closeButton={(
             <DialogCloseButton
               aria-label={t('operation.close', { ns: 'common' })}
-              className="static h-8 w-8 rounded-lg"
+              className="static size-8 rounded-lg"
             />
           )}
         />
diff --git a/web/app/components/plugins/readme-panel/entrance.tsx b/web/app/components/plugins/readme-panel/entrance.tsx
index 067420f5f7..b8c57fb923 100644
--- a/web/app/components/plugins/readme-panel/entrance.tsx
+++ b/web/app/components/plugins/readme-panel/entrance.tsx
@@ -47,10 +47,10 @@ export const ReadmeEntrance = ({
         onClick={handleReadmeClick}
         className="flex w-full items-center justify-start gap-1 rounded-sm text-text-tertiary transition-opacity hover:text-text-accent-light-mode-only focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden"
       >
-        <div className="relative flex h-3 w-3 items-center justify-center overflow-hidden">
-          <span aria-hidden="true" className="i-ri-book-read-line h-3 w-3" />
+        <div className="relative flex size-3 items-center justify-center overflow-hidden">
+          <span aria-hidden="true" className="i-ri-book-read-line size-3" />
         </div>
-        <span className="text-xs leading-4 font-normal">
+        <span className="text-xs/4 font-normal">
           {!showShortTip ? t('readmeInfo.needHelpCheckReadme', { ns: 'plugin' }) : t('readmeInfo.title', { ns: 'plugin' })}
         </span>
       </button>
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
index 33049f4b1b..30e646c0a1 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
@@ -117,7 +117,7 @@ const AutoUpdateSetting: FC<Props> = ({
       >
         <div className="flex w-0 grow items-center gap-x-1">
           <RiTimeLine className={cn(
-            'h-4 w-4 shrink-0 text-text-tertiary',
+            'size-4 shrink-0 text-text-tertiary',
             isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
           )}
           />
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
index 55ff7ffe91..11f4aab912 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
@@ -53,7 +53,7 @@ const StrategyPicker = ({
     >
       <DropdownMenuTrigger render={<Button size="small" />}>
         {selectedOption?.label}
-        <span aria-hidden className="i-ri-arrow-down-s-line h-3.5 w-3.5" />
+        <span aria-hidden className="i-ri-arrow-down-s-line size-3.5" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="top-end"
diff --git a/web/app/components/rag-pipeline/components/conversion.tsx b/web/app/components/rag-pipeline/components/conversion.tsx
index d90c0c65d6..5e500a88a6 100644
--- a/web/app/components/rag-pipeline/components/conversion.tsx
+++ b/web/app/components/rag-pipeline/components/conversion.tsx
@@ -50,7 +50,7 @@ const Conversion = () => {
   const confirmTitle = t('conversion.confirm.title', { ns: 'datasetPipeline' })
   const confirmContent = t('conversion.confirm.content', { ns: 'datasetPipeline' })
   return (
-    <div className="flex h-full w-full items-center justify-center bg-background-body p-6 pb-16">
+    <div className="flex size-full items-center justify-center bg-background-body p-6 pb-16">
       <div className="flex rounded-2xl border-[0.5px] border-components-card-border bg-components-card-bg shadow-sm shadow-shadow-shadow-4">
         <div className="flex max-w-[480px] flex-col justify-between p-10">
           <div className="flex flex-col gap-y-2.5">
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/show-all-settings.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/show-all-settings.tsx
index 4eb290450a..eefaa16318 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/show-all-settings.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/show-all-settings.tsx
@@ -37,7 +37,7 @@ const ShowAllSettings = ({
             {hiddenFieldNames}
           </span>
         </div>
-        <RiArrowRightSLine className="h-4 w-4 shrink-0 text-text-secondary" aria-hidden="true" />
+        <RiArrowRightSLine className="size-4 shrink-0 text-text-secondary" aria-hidden="true" />
       </button>
     )
   },
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx
index a4cc03b8ab..f4c99d040b 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx
@@ -105,7 +105,7 @@ const FieldItem = ({
               {payload.required && (
                 <Badge>{t('nodes.start.required', { ns: 'workflow' })}</Badge>
               )}
-              <InputVarTypeIcon type={payload.type as unknown as InputVarType} className="h-3 w-3 text-text-tertiary" />
+              <InputVarTypeIcon type={payload.type as unknown as InputVarType} className="size-3 text-text-tertiary" />
             </div>
           )}
     </div>
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
index 0e7400d302..f897b03bf1 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
@@ -60,7 +60,7 @@ const FieldList = ({
           disabled={readonly}
           className={cn(readonly && 'cursor-not-allowed')}
         >
-          <RiAddLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          <RiAddLine className="size-4 text-text-tertiary" aria-hidden="true" />
         </ActionButton>
       </div>
       <FieldListContainer
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/label-right-content/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/panel/input-field/label-right-content/__tests__/index.spec.tsx
index ab01bdba3b..17c3cfa068 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/label-right-content/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/label-right-content/__tests__/index.spec.tsx
@@ -167,7 +167,7 @@ describe('GlobalInputs', () => {
     it('should render the tooltip trigger as an icon-sized button', () => {
       render(<GlobalInputs />)
 
-      expect(screen.getByLabelText('datasetPipeline.inputFieldPanel.globalInputs.tooltip')).toHaveClass('h-4', 'w-4')
+      expect(screen.getByLabelText('datasetPipeline.inputFieldPanel.globalInputs.tooltip')).toHaveClass('size-4')
     })
 
     it('should have correct container layout', () => {
diff --git a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
index 1a6ed46ec0..025c84ef2f 100644
--- a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
+++ b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
@@ -84,10 +84,10 @@ const PublishAsKnowledgePipelineModal = ({
             <button
               type="button"
               aria-label={t('operation.close', { ns: 'common' })}
-              className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-0"
+              className="absolute top-5 right-5 flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-0"
               onClick={onCancel}
             >
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+              <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
             </button>
           </div>
           <div className="px-6 py-3">
diff --git a/web/app/components/rag-pipeline/components/publish-toast.tsx b/web/app/components/rag-pipeline/components/publish-toast.tsx
index 2ca92081c8..7a300bd058 100644
--- a/web/app/components/rag-pipeline/components/publish-toast.tsx
+++ b/web/app/components/rag-pipeline/components/publish-toast.tsx
@@ -24,7 +24,7 @@ const PublishToast = () => {
       >
         <div className="pointer-events-none absolute inset-0 bg-linear-to-r from-components-badge-status-light-normal-halo to-background-gradient-mask-transparent opacity-[0.4]">
         </div>
-        <div className="flex h-6 w-6 items-center justify-center">
+        <div className="flex size-6 items-center justify-center">
           <RiInformation2Fill className="text-text-accent" />
         </div>
         <div className="p-1">
@@ -34,10 +34,10 @@ const PublishToast = () => {
           </div>
         </div>
         <div
-          className="pointer-events-auto flex h-6 w-6 cursor-pointer items-center justify-center"
+          className="pointer-events-auto flex size-6 cursor-pointer items-center justify-center"
           onClick={() => setHideToast(true)}
         >
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+          <RiCloseLine className="size-4 text-text-tertiary" />
         </div>
       </div>
     </div>
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
index 57f4b55cfc..6131476a1c 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
@@ -19,7 +19,7 @@ const InputFieldButton = () => {
       className="flex gap-x-0.5"
       onClick={handleClick}
     >
-      <InputField className="h-4 w-4" />
+      <InputField className="size-4" />
       <span className="px-0.5">{t('inputField', { ns: 'datasetPipeline' })}</span>
     </Button>
   )
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
index 9e9f4b2b79..c452c3b9c0 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
@@ -93,7 +93,7 @@ const Publisher = () => {
               variant="primary"
             >
               <span className="pl-1">{t('common.publish', { ns: 'workflow' })}</span>
-              <RiArrowDownSLine className="h-4 w-4" />
+              <RiArrowDownSLine className="size-4" />
             </Button>
           )}
         />
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index ba18f2d963..7acce03c08 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -189,24 +189,24 @@ const Popup = ({
       <div className="border-t-[0.5px] border-t-divider-regular p-4 pt-3">
         <Button className="mb-1 w-full hover:bg-state-accent-hover hover:text-text-accent" variant="tertiary" onClick={goToAddDocuments} disabled={!publishedAt}>
           <div className="flex grow items-center">
-            <RiPlayCircleLine className="mr-2 h-4 w-4" />
+            <RiPlayCircleLine className="mr-2 size-4" />
             {t('common.goToAddDocuments', { ns: 'pipeline' })}
           </div>
-          <RiArrowRightUpLine className="ml-2 h-4 w-4 shrink-0" />
+          <RiArrowRightUpLine className="ml-2 size-4 shrink-0" />
         </Button>
         <Link href={apiReferenceUrl} target="_blank" rel="noopener noreferrer">
           <Button className="w-full hover:bg-state-accent-hover hover:text-text-accent" variant="tertiary" disabled={!publishedAt}>
             <div className="flex grow items-center">
-              <RiTerminalBoxLine className="mr-2 h-4 w-4" />
+              <RiTerminalBoxLine className="mr-2 size-4" />
               {t('common.accessAPIReference', { ns: 'workflow' })}
             </div>
-            <RiArrowRightUpLine className="ml-2 h-4 w-4 shrink-0" />
+            <RiArrowRightUpLine className="ml-2 size-4 shrink-0" />
           </Button>
         </Link>
         <Divider className="my-2" />
         <Button className="w-full hover:bg-state-accent-hover hover:text-text-accent" variant="tertiary" onClick={handleClickPublishAsKnowledgePipeline} disabled={!publishedAt || isPublishingAsCustomizedPipeline}>
           <div className="flex grow items-center gap-x-2 overflow-hidden">
-            <RiHammerLine className="h-4 w-4 shrink-0" />
+            <RiHammerLine className="size-4 shrink-0" />
             <span className="grow truncate text-left" title={t('common.publishAs', { ns: 'pipeline' })}>
               {t('common.publishAs', { ns: 'pipeline' })}
             </span>
diff --git a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
index 7a597c911b..c2e75c512c 100644
--- a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
+++ b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
@@ -60,9 +60,9 @@ const UpdateDSLModal = ({
             </button>
           </div>
           <div className="relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs">
-            <div className="absolute top-0 left-0 h-full w-full bg-toast-warning-bg opacity-40" />
+            <div className="absolute top-0 left-0 size-full bg-toast-warning-bg opacity-40" />
             <div className="flex items-start justify-center p-1">
-              <RiAlertFill className="h-4 w-4 shrink-0 text-text-warning-secondary" />
+              <RiAlertFill className="size-4 shrink-0 text-text-warning-secondary" />
             </div>
             <div className="flex grow flex-col items-start gap-0.5 py-1">
               <div className="system-xs-medium whitespace-pre-line text-text-primary">{t('common.importDSLTip', { ns: 'workflow' })}</div>
@@ -73,7 +73,7 @@ const UpdateDSLModal = ({
                   className="z-1000"
                   onClick={onBackup}
                 >
-                  <RiFileDownloadLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+                  <RiFileDownloadLine className="size-3.5 text-components-button-secondary-text" />
                   <div className="flex items-center justify-center gap-1 px-[3px]">
                     {t('common.backupCurrentDraft', { ns: 'workflow' })}
                   </div>
diff --git a/web/app/components/rag-pipeline/index.tsx b/web/app/components/rag-pipeline/index.tsx
index ddada91bf2..5e3d63a11d 100644
--- a/web/app/components/rag-pipeline/index.tsx
+++ b/web/app/components/rag-pipeline/index.tsx
@@ -36,7 +36,7 @@ const RagPipeline = () => {
 
   if (!data || isLoading) {
     return (
-      <div className="relative flex h-full w-full items-center justify-center">
+      <div className="relative flex size-full items-center justify-center">
         <Loading />
       </div>
     )
diff --git a/web/app/components/share/text-generation/no-data/index.tsx b/web/app/components/share/text-generation/no-data/index.tsx
index 2f25306015..d503361f91 100644
--- a/web/app/components/share/text-generation/no-data/index.tsx
+++ b/web/app/components/share/text-generation/no-data/index.tsx
@@ -9,8 +9,8 @@ type INoDataProps = {}
 const NoData: FC<INoDataProps> = () => {
   const { t } = useTranslation()
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center">
-      <RiSparklingFill className="h-12 w-12 text-text-empty-state-icon" />
+    <div className="flex size-full flex-col items-center justify-center">
+      <RiSparklingFill className="size-12 text-text-empty-state-icon" />
       <div
         className="mt-2 system-sm-regular text-text-quaternary"
       >
diff --git a/web/app/components/share/text-generation/result/index.tsx b/web/app/components/share/text-generation/result/index.tsx
index 8247fcd0f5..93dbaf26e6 100644
--- a/web/app/components/share/text-generation/result/index.tsx
+++ b/web/app/components/share/text-generation/result/index.tsx
@@ -118,7 +118,7 @@ const Result: FC<IResultProps> = ({ isWorkflow, isCallBatchAPI, isPC, isMobile,
     <>
       {!isCallBatchAPI && !isWorkflow && ((runState.isResponding && !runState.completionRes)
         ? (
-            <div className="flex h-full w-full items-center justify-center">
+            <div className="flex size-full items-center justify-center">
               <Loading type="area" />
             </div>
           )
@@ -131,7 +131,7 @@ const Result: FC<IResultProps> = ({ isWorkflow, isCallBatchAPI, isPC, isMobile,
           ))}
       {!isCallBatchAPI && isWorkflow && ((runState.isResponding && !runState.workflowProcessData)
         ? (
-            <div className="flex h-full w-full items-center justify-center">
+            <div className="flex size-full items-center justify-center">
               <Loading type="area" />
             </div>
           )
diff --git a/web/app/components/share/text-generation/run-batch/csv-download/index.tsx b/web/app/components/share/text-generation/run-batch/csv-download/index.tsx
index 301ba13492..291d2f5a52 100644
--- a/web/app/components/share/text-generation/run-batch/csv-download/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/csv-download/index.tsx
@@ -63,7 +63,7 @@ const CSVDownload: FC<ICSVDownloadProps> = ({
         ]}
       >
         <div className="flex h-[18px] items-center space-x-1 system-xs-medium text-text-accent">
-          <DownloadIcon className="h-3 w-3" />
+          <DownloadIcon className="size-3" />
           <span>{t('generation.downloadTemplate', { ns: 'share' })}</span>
         </div>
       </CSVDownloader>
diff --git a/web/app/components/share/text-generation/run-batch/index.tsx b/web/app/components/share/text-generation/run-batch/index.tsx
index 1264e2eb64..5464832299 100644
--- a/web/app/components/share/text-generation/run-batch/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/index.tsx
@@ -50,7 +50,7 @@ const RunBatch: FC<IRunBatchProps> = ({
           onClick={handleSend}
           disabled={!isParsed || !isAllFinished}
         >
-          <Icon className={cn(!isAllFinished && 'animate-spin', 'mr-1 h-4 w-4 shrink-0')} aria-hidden="true" />
+          <Icon className={cn(!isAllFinished && 'animate-spin', 'mr-1 size-4 shrink-0')} aria-hidden="true" />
           <span className="text-[13px] uppercase">{t('generation.run', { ns: 'share' })}</span>
         </Button>
       </div>
diff --git a/web/app/components/share/text-generation/run-batch/res-download/index.tsx b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
index a1cd4fe9d3..ebaa3bde50 100644
--- a/web/app/components/share/text-generation/run-batch/res-download/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
@@ -35,12 +35,12 @@ const ResDownload: FC<IResDownloadProps> = ({
     >
       {isMobile && (
         <ActionButton>
-          <RiDownloadLine className="h-4 w-4" />
+          <RiDownloadLine className="size-4" />
         </ActionButton>
       )}
       {!isMobile && (
         <Button className={cn('space-x-1')}>
-          <RiDownloadLine className="h-4 w-4" />
+          <RiDownloadLine className="size-4" />
           <span>{t('operation.download', { ns: 'common' })}</span>
         </Button>
       )}
diff --git a/web/app/components/share/text-generation/run-once/index.tsx b/web/app/components/share/text-generation/run-once/index.tsx
index 285ca803a8..823af6b1c3 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -256,14 +256,14 @@ const RunOnce: FC<IRunOnceProps> = ({
                   ? (
                       <>
                         {runControl?.isStopping
-                          ? <RiLoader2Line className="mr-1 h-4 w-4 shrink-0 animate-spin" aria-hidden="true" />
-                          : <StopCircle className="mr-1 h-4 w-4 shrink-0" aria-hidden="true" />}
+                          ? <RiLoader2Line className="mr-1 size-4 shrink-0 animate-spin" aria-hidden="true" />
+                          : <StopCircle className="mr-1 size-4 shrink-0" aria-hidden="true" />}
                         <span className="text-[13px]">{stopLabel}</span>
                       </>
                     )
                   : (
                       <>
-                        <RiPlayLargeLine className="mr-1 h-4 w-4 shrink-0" aria-hidden="true" />
+                        <RiPlayLargeLine className="mr-1 size-4 shrink-0" aria-hidden="true" />
                         <span className="text-[13px]">{t('generation.run', { ns: 'share' })}</span>
                       </>
                     )}
diff --git a/web/app/components/share/text-generation/text-generation-result-panel.tsx b/web/app/components/share/text-generation/text-generation-result-panel.tsx
index 67681a123a..df8212976e 100644
--- a/web/app/components/share/text-generation/text-generation-result-panel.tsx
+++ b/web/app/components/share/text-generation/text-generation-result-panel.tsx
@@ -181,7 +181,7 @@ const TextGenerationResultPanel: FC<TextGenerationResultPanelProps> = ({
         </div>
         {isCallBatchAPI && allFailedTaskList.length > 0 && (
           <div className="absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg backdrop-blur-xs">
-            <span aria-hidden className="i-ri-error-warning-fill h-4 w-4 text-text-destructive" />
+            <span aria-hidden className="i-ri-error-warning-fill size-4 text-text-destructive" />
             <div className="system-sm-medium text-text-secondary">{t('generation.batchFailed.info', { ns: 'share', num: allFailedTaskList.length })}</div>
             <div className="h-3.5 w-px bg-divider-regular"></div>
             <button
diff --git a/web/app/components/share/text-generation/text-generation-sidebar.tsx b/web/app/components/share/text-generation/text-generation-sidebar.tsx
index b711fafb67..8ce0e93738 100644
--- a/web/app/components/share/text-generation/text-generation-sidebar.tsx
+++ b/web/app/components/share/text-generation/text-generation-sidebar.tsx
@@ -102,7 +102,7 @@ const TextGenerationSidebar: FC<TextGenerationSidebarProps> = ({
                   id: 'saved',
                   name: t('generation.tabs.saved', { ns: 'share' }),
                   isRight: true,
-                  icon: <span aria-hidden className="i-ri-bookmark-3-line h-4 w-4" />,
+                  icon: <span aria-hidden className="i-ri-bookmark-3-line size-4" />,
                   extra: savedMessages.length > 0
                     ? (
                         <Badge className="ml-1">
diff --git a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
index dde11b56f3..1421d44c20 100644
--- a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@@ -76,7 +76,7 @@ export default function ConfigCredential({
             className={cn(
               'data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:bottom-auto data-[swipe-direction=right]:h-fit data-[swipe-direction=right]:max-h-[calc(100dvh-1rem)] data-[swipe-direction=right]:w-130 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-r-[0.5px] data-[swipe-direction=right]:border-divider-subtle',
               positionCenter
-                ? 'data-[swipe-direction=right]:right-[max(0.5rem,calc(50%_-_260px))]'
+                ? 'data-[swipe-direction=right]:right-[max(0.5rem,calc(50%-260px))]'
                 : 'data-[swipe-direction=right]:right-2',
             )}
           >
@@ -88,7 +88,7 @@ export default function ConfigCredential({
                   </DrawerTitle>
                   <DrawerCloseButton
                     aria-label={t('operation.close', { ns: 'common' })}
-                    className="h-6 w-6 rounded-md"
+                    className="size-6 rounded-md"
                   />
                 </div>
               </div>
@@ -158,7 +158,7 @@ export default function ConfigCredential({
                           {t('createTool.authMethod.key', { ns: 'tools' })}
                           <Infotip
                             aria-label={t('createTool.authMethod.keyTooltip', { ns: 'tools' })}
-                            className="ml-0.5 h-4 w-4"
+                            className="ml-0.5 size-4"
                             popupClassName="w-[261px] text-text-tertiary"
                           >
                             {t('createTool.authMethod.keyTooltip', { ns: 'tools' })}
@@ -187,7 +187,7 @@ export default function ConfigCredential({
                           {t('createTool.authMethod.queryParam', { ns: 'tools' })}
                           <Infotip
                             aria-label={t('createTool.authMethod.queryParamTooltip', { ns: 'tools' })}
-                            className="ml-0.5 h-4 w-4"
+                            className="ml-0.5 size-4"
                             popupClassName="w-[261px] text-text-tertiary"
                           >
                             {t('createTool.authMethod.queryParamTooltip', { ns: 'tools' })}
@@ -211,7 +211,7 @@ export default function ConfigCredential({
                   )}
                 </div>
               </div>
-              <div className="mt-4 flex shrink-0 justify-end space-x-2 py-4 pr-6 pl-6">
+              <div className="mt-4 flex shrink-0 justify-end space-x-2 px-6 py-4">
                 <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
                 <Button
                   variant="primary"
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
index 0a0f017a36..39ce47b193 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -216,7 +216,7 @@ const EditCustomCollectionModal: FC<Props> = ({
               className={cn(
                 'data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-160 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-r-[0.5px] data-[swipe-direction=right]:border-divider-subtle',
                 isAdd && !positionLeft
-                  ? 'data-[swipe-direction=right]:right-[max(0.5rem,calc(50%_-_320px))]'
+                  ? 'data-[swipe-direction=right]:right-[max(0.5rem,calc(50%-320px))]'
                   : 'data-[swipe-direction=right]:right-2',
               )}
             >
@@ -228,7 +228,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                     </DrawerTitle>
                     <DrawerCloseButton
                       aria-label={t('operation.close', { ns: 'common' })}
-                      className="h-6 w-6 rounded-md"
+                      className="size-6 rounded-md"
                     />
                   </div>
                 </div>
@@ -273,7 +273,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                               className="flex h-[18px] items-center space-x-1 text-text-accent"
                             >
                               <div className="text-xs font-normal">{t('createTool.viewSchemaSpec', { ns: 'tools' })}</div>
-                              <LinkExternal02 className="h-3 w-3" />
+                              <LinkExternal02 className="size-3" />
                             </a>
                           </div>
                           <GetSchema onChange={setSchema} />
@@ -331,7 +331,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                         <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
                         <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
                           <div className="system-xs-regular text-text-primary">{t(`createTool.authMethod.types.${credential.auth_type}`, { ns: 'tools' })}</div>
-                          <RiSettings2Line className="h-4 w-4 text-text-secondary" />
+                          <RiSettings2Line className="size-4 text-text-secondary" />
                         </div>
                       </div>
 
diff --git a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
index 19ef1bbf54..d53cab8c8a 100644
--- a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
@@ -89,7 +89,7 @@ const TestApi: FC<Props> = ({
               className={cn(
                 'data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-150 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-r-[0.5px] data-[swipe-direction=right]:border-divider-subtle',
                 positionCenter
-                  ? 'data-[swipe-direction=right]:right-[max(0.5rem,calc(50%_-_300px))]'
+                  ? 'data-[swipe-direction=right]:right-[max(0.5rem,calc(50%-300px))]'
                   : 'data-[swipe-direction=right]:right-2',
               )}
             >
@@ -101,7 +101,7 @@ const TestApi: FC<Props> = ({
                     </DrawerTitle>
                     <DrawerCloseButton
                       aria-label={t('operation.close', { ns: 'common' })}
-                      className="h-6 w-6 rounded-md"
+                      className="size-6 rounded-md"
                     />
                   </div>
                 </div>
@@ -111,14 +111,14 @@ const TestApi: FC<Props> = ({
                       <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
                       <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
                         <div className="system-xs-regular text-text-primary">{t(`createTool.authMethod.types.${tempCredential.auth_type}`, { ns: 'tools' })}</div>
-                        <RiSettings2Line className="h-4 w-4 text-text-secondary" />
+                        <RiSettings2Line className="size-4 text-text-secondary" />
                       </div>
                     </div>
 
                     <div>
                       <div className="py-2 system-sm-medium text-text-primary">{t('test.parametersValue', { ns: 'tools' })}</div>
                       <div className="rounded-lg border border-divider-regular">
-                        <table className="w-full system-xs-regular font-normal text-text-secondary">
+                        <table className="w-full body-xs-regular text-text-secondary">
                           <thead className="text-text-tertiary uppercase">
                             <tr className="border-b border-divider-regular">
                               <th className="p-2 pl-3 font-medium">{t('test.parameters', { ns: 'tools' })}</th>
diff --git a/web/app/components/tools/labels/__tests__/selector.spec.tsx b/web/app/components/tools/labels/__tests__/selector.spec.tsx
index 13bdb48316..3cefbfa072 100644
--- a/web/app/components/tools/labels/__tests__/selector.spec.tsx
+++ b/web/app/components/tools/labels/__tests__/selector.spec.tsx
@@ -224,10 +224,10 @@ describe('LabelSelector', () => {
       })
 
       // Find the label item in the dropdown list and click it
-      // Use getAllByTitle and select the one in the dropdown (with text-sm class)
+      // Use getAllByTitle and select the one in the dropdown.
       const agentElements = screen.getAllByTitle('Agent')
       const dropdownItem = agentElements.find(el =>
-        el.classList.contains('text-sm'),
+        el.classList.contains('text-sm/5'),
       )
 
       await act(async () => {
diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx
index 029d9889e5..5f129807d0 100644
--- a/web/app/components/tools/labels/filter.tsx
+++ b/web/app/components/tools/labels/filter.tsx
@@ -58,7 +58,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
           )}
         >
           <div className="p-px">
-            <Tag01 className="h-3.5 w-3.5 text-text-tertiary" />
+            <Tag01 className="size-3.5 text-text-tertiary" />
           </div>
           <div className="min-w-0 truncate text-[13px] leading-[18px] text-text-tertiary">
             {!value.length && t('tag.placeholder', { ns: 'common' })}
@@ -69,7 +69,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
           )}
           {!value.length && (
             <div className="shrink-0 p-px">
-              <RiArrowDownSLine className="h-3.5 w-3.5 text-text-tertiary" />
+              <RiArrowDownSLine className="size-3.5 text-text-tertiary" />
             </div>
           )}
         </PopoverTrigger>
@@ -80,7 +80,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
             className="group/clear absolute top-1/2 right-2 -translate-y-1/2 border-none bg-transparent p-px"
             onClick={() => onChange([])}
           >
-            <XCircle className="h-3.5 w-3.5 text-text-tertiary group-hover/clear:text-text-secondary" aria-hidden="true" />
+            <XCircle className="size-3.5 text-text-tertiary group-hover/clear:text-text-secondary" aria-hidden="true" />
           </button>
         )}
         <PopoverContent
@@ -106,13 +106,13 @@ const LabelFilter: FC<LabelFilterProps> = ({
                   className="flex w-full items-center gap-2 rounded-lg border-none bg-transparent py-[6px] pr-2 pl-3 text-left select-none hover:bg-state-base-hover"
                   onClick={() => selectLabel(label)}
                 >
-                  <div title={label.label} className="grow truncate text-sm leading-5 text-text-secondary">{label.label}</div>
-                  {value.includes(label.name) && <Check className="h-4 w-4 shrink-0 text-text-accent" aria-hidden="true" />}
+                  <div title={label.label} className="grow truncate text-sm/5 text-text-secondary">{label.label}</div>
+                  {value.includes(label.name) && <Check className="size-4 shrink-0 text-text-accent" aria-hidden="true" />}
                 </button>
               ))}
               {!filteredLabelList.length && (
                 <div className="flex flex-col items-center gap-1 p-3">
-                  <Tag03 className="h-6 w-6 text-text-quaternary" />
+                  <Tag03 className="size-6 text-text-quaternary" />
                   <div className="text-xs leading-[14px] text-text-tertiary">{t('tag.noTag', { ns: 'common' })}</div>
                 </div>
               )}
diff --git a/web/app/components/tools/labels/selector.tsx b/web/app/components/tools/labels/selector.tsx
index e8e068dc7f..dcbe614c71 100644
--- a/web/app/components/tools/labels/selector.tsx
+++ b/web/app/components/tools/labels/selector.tsx
@@ -55,7 +55,7 @@ function LabelSelector({
             {!!value.length && selectedLabels}
           </div>
           <div className="ml-1 shrink-0 text-text-secondary opacity-60">
-            <span className="i-ri-arrow-down-s-line h-4 w-4" />
+            <span className="i-ri-arrow-down-s-line size-4" />
           </div>
         </PopoverTrigger>
         <PopoverContent
@@ -88,12 +88,12 @@ function LabelSelector({
                     className="shrink-0"
                     value={label.name}
                   />
-                  <div title={label.label} className="grow truncate text-sm leading-5 text-text-secondary">{label.label}</div>
+                  <div title={label.label} className="grow truncate text-sm/5 text-text-secondary">{label.label}</div>
                 </label>
               ))}
               {!filteredLabelList.length && (
                 <div className="flex flex-col items-center gap-1 p-3">
-                  <Tag03 className="h-6 w-6 text-text-quaternary" />
+                  <Tag03 className="size-6 text-text-quaternary" />
                   <div className="text-xs leading-[14px] text-text-tertiary">{t('tag.noTag', { ns: 'common' })}</div>
                 </div>
               )}
diff --git a/web/app/components/tools/marketplace/index.tsx b/web/app/components/tools/marketplace/index.tsx
index 798e19686a..c0e6905031 100644
--- a/web/app/components/tools/marketplace/index.tsx
+++ b/web/app/components/tools/marketplace/index.tsx
@@ -40,7 +40,7 @@ const Marketplace = ({
       <div className="sticky bottom-0 flex shrink-0 flex-col bg-background-default-subtle px-12 pt-2 pb-[14px]">
         {isMarketplaceArrowVisible && (
           <RiArrowUpDoubleLine
-            className="absolute top-2 left-1/2 z-10 h-4 w-4 -translate-x-1/2 cursor-pointer text-text-quaternary"
+            className="absolute top-2 left-1/2 z-10 size-4 -translate-x-1/2 cursor-pointer text-text-quaternary"
             onClick={showMarketplacePanel}
           />
         )}
@@ -84,7 +84,7 @@ const Marketplace = ({
               target="_blank"
             >
               {t('marketplace.difyMarketplace', { ns: 'plugin' })}
-              <RiArrowRightUpLine className="h-4 w-4" />
+              <RiArrowRightUpLine className="size-4" />
             </a>
           </div>
         </div>
@@ -92,7 +92,7 @@ const Marketplace = ({
       <div className="mt-[-14px] shrink-0 grow bg-background-default-subtle px-12 pb-2">
         {
           isLoading && page === 1 && (
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+            <div className="absolute top-1/2 left-1/2 -translate-1/2">
               <Loading />
             </div>
           )
diff --git a/web/app/components/tools/mcp/create-card.tsx b/web/app/components/tools/mcp/create-card.tsx
index d96365b2db..314735d547 100644
--- a/web/app/components/tools/mcp/create-card.tsx
+++ b/web/app/components/tools/mcp/create-card.tsx
@@ -38,17 +38,17 @@ const NewMCPCard = ({ handleCreate }: Props) => {
         <div className="col-span-1 flex min-h-[108px] cursor-pointer flex-col rounded-xl bg-background-default-dimmed transition-all duration-200 ease-in-out">
           <div className="group grow rounded-t-xl" onClick={() => setShowModal(true)}>
             <div className="flex shrink-0 items-center p-4 pb-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-dashed border-divider-deep group-hover:border-solid group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover">
-                <RiAddCircleFill className="h-4 w-4 text-text-quaternary group-hover:text-text-accent" />
+              <div className="flex size-10 items-center justify-center rounded-lg border border-dashed border-divider-deep group-hover:border-solid group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover">
+                <RiAddCircleFill className="size-4 text-text-quaternary group-hover:text-text-accent" />
               </div>
               <div className="ml-3 system-md-semibold text-text-secondary group-hover:text-text-accent">{t('mcp.create.cardTitle', { ns: 'tools' })}</div>
             </div>
           </div>
           <div className="rounded-b-xl border-t-[0.5px] border-divider-subtle px-4 py-3 text-text-tertiary hover:text-text-accent">
             <a href={linkUrl} target="_blank" rel="noopener noreferrer" className="flex items-center space-x-1">
-              <RiBookOpenLine className="h-3 w-3 shrink-0" />
+              <RiBookOpenLine className="size-3 shrink-0" />
               <div className="grow truncate system-xs-regular" title={t('mcp.create.cardLink', { ns: 'tools' }) || ''}>{t('mcp.create.cardLink', { ns: 'tools' })}</div>
-              <RiArrowRightUpLine className="h-3 w-3 shrink-0" />
+              <RiArrowRightUpLine className="size-3 shrink-0" />
             </a>
           </div>
         </div>
diff --git a/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx b/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx
index 7205c6f427..bb41d4f25a 100644
--- a/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx
+++ b/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx
@@ -100,13 +100,13 @@ describe('OperationDropdown', () => {
 
     it('should render medium size by default', () => {
       render(<OperationDropdown {...defaultProps} />)
-      const icon = document.querySelector('.h-4.w-4')
+      const icon = document.querySelector('.size-4')
       expect(icon).toBeInTheDocument()
     })
 
     it('should render large size when inCard is true', () => {
       render(<OperationDropdown {...defaultProps} inCard={true} />)
-      const icon = document.querySelector('.h-5.w-5')
+      const icon = document.querySelector('.size-5')
       expect(icon).toBeInTheDocument()
     })
   })
diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index c785516eee..b83fb847b1 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -219,7 +219,7 @@ const MCPDetailContent: FC<Props> = ({
               onRemove={showDeleteConfirm}
             />
             <ActionButton aria-label={t('operation.close', { ns: 'common' })} onClick={onHide}>
-              <span aria-hidden className="i-ri-close-line h-4 w-4" />
+              <span aria-hidden className="i-ri-close-line size-4" />
             </ActionButton>
           </div>
         </div>
@@ -251,7 +251,7 @@ const MCPDetailContent: FC<Props> = ({
               className="w-full"
               disabled
             >
-              <span aria-hidden className="mr-1 i-ri-loader-2-line h-4 w-4 animate-spin" />
+              <span aria-hidden className="mr-1 i-ri-loader-2-line size-4 animate-spin" />
               {t('mcp.authorizing', { ns: 'tools' })}
             </Button>
           )}
@@ -267,13 +267,13 @@ const MCPDetailContent: FC<Props> = ({
               </div>
               <div></div>
             </div>
-            <div className="flex h-full w-full grow flex-col overflow-hidden px-4 pb-4">
+            <div className="flex size-full grow flex-col overflow-hidden px-4 pb-4">
               <ListLoading />
             </div>
           </>
         )}
         {!isUpdating && detail.is_team_authorization && !isGettingTools && !toolList.length && (
-          <div className="flex h-full w-full flex-col items-center justify-center">
+          <div className="flex size-full flex-col items-center justify-center">
             <div className="mb-3 system-sm-regular text-text-tertiary">{t('mcp.toolsEmpty', { ns: 'tools' })}</div>
             <Button
               variant="primary"
@@ -292,7 +292,7 @@ const MCPDetailContent: FC<Props> = ({
               </div>
               <div>
                 <Button size="small" onClick={showUpdateConfirm}>
-                  <span aria-hidden className="mr-1 i-ri-loop-left-line h-3.5 w-3.5" />
+                  <span aria-hidden className="mr-1 i-ri-loop-left-line size-3.5" />
                   {t('mcp.update', { ns: 'tools' })}
                 </Button>
               </div>
@@ -309,7 +309,7 @@ const MCPDetailContent: FC<Props> = ({
         )}
 
         {!isUpdating && !detail.is_team_authorization && (
-          <div className="flex h-full w-full flex-col items-center justify-center">
+          <div className="flex size-full flex-col items-center justify-center">
             {!isAuthorizing && <div className="mb-1 system-md-medium text-text-secondary">{t('mcp.authorizingRequired', { ns: 'tools' })}</div>}
             {isAuthorizing && <div className="mb-1 system-md-medium text-text-secondary">{t('mcp.authorizing', { ns: 'tools' })}</div>}
             <div className="system-sm-regular text-text-tertiary">{t('mcp.authorizeTip', { ns: 'tools' })}</div>
diff --git a/web/app/components/tools/mcp/detail/operation-dropdown.tsx b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
index c52e3f4190..f17391a2ab 100644
--- a/web/app/components/tools/mcp/detail/operation-dropdown.tsx
+++ b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
@@ -42,7 +42,7 @@ const OperationDropdown: FC<Props> = ({
       <DropdownMenuTrigger
         render={<ActionButton size={inCard ? 'l' : 'm'} className={cn(open && 'bg-state-base-hover')} />}
       >
-        <RiMoreFill className={cn('h-4 w-4', inCard && 'h-5 w-5')} />
+        <RiMoreFill className={cn('size-4', inCard && 'size-5')} />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-end"
@@ -50,14 +50,14 @@ const OperationDropdown: FC<Props> = ({
         popupClassName="w-[160px]"
       >
         <DropdownMenuItem onClick={onEdit}>
-          <RiEditLine className="h-4 w-4 shrink-0 text-text-tertiary" />
+          <RiEditLine className="size-4 shrink-0 text-text-tertiary" />
           <div className="ml-2 system-md-regular text-text-secondary">{t('mcp.operation.edit', { ns: 'tools' })}</div>
         </DropdownMenuItem>
         <DropdownMenuItem
           className="data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive"
           onClick={onRemove}
         >
-          <RiDeleteBinLine className="h-4 w-4 shrink-0 text-inherit" />
+          <RiDeleteBinLine className="size-4 shrink-0 text-inherit" />
           <div className="ml-2 system-md-regular text-inherit">{t('mcp.operation.remove', { ns: 'tools' })}</div>
         </DropdownMenuItem>
       </DropdownMenuContent>
diff --git a/web/app/components/tools/mcp/headers-input.tsx b/web/app/components/tools/mcp/headers-input.tsx
index 2726377ae9..58641d384b 100644
--- a/web/app/components/tools/mcp/headers-input.tsx
+++ b/web/app/components/tools/mcp/headers-input.tsx
@@ -61,7 +61,7 @@ const HeadersInput = ({
             onClick={handleAddItem}
             className="w-full"
           >
-            <RiAddLine className="mr-1 h-4 w-4" />
+            <RiAddLine className="mr-1 size-4" />
             {t('mcp.modal.addHeader', { ns: 'tools' })}
           </Button>
         )}
@@ -111,7 +111,7 @@ const HeadersInput = ({
                   onClick={() => handleRemoveItem(index)}
                   className="mr-2"
                 >
-                  <RiDeleteBinLine className="h-4 w-4 text-text-destructive" />
+                  <RiDeleteBinLine className="size-4 text-text-destructive" />
                 </ActionButton>
               )}
             </div>
@@ -125,7 +125,7 @@ const HeadersInput = ({
           onClick={handleAddItem}
           className="w-full"
         >
-          <RiAddLine className="mr-1 h-4 w-4" />
+          <RiAddLine className="mr-1 size-4" />
           {t('mcp.modal.addHeader', { ns: 'tools' })}
         </Button>
       )}
diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx
index f4653a33eb..4e2bfa3174 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -141,7 +141,7 @@ const MCPServerModal = ({
           className="absolute top-5 right-5 z-10 cursor-pointer border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
           onClick={onHide}
         >
-          <RiCloseLine className="h-5 w-5 text-text-tertiary" aria-hidden="true" />
+          <RiCloseLine className="size-5 text-text-tertiary" aria-hidden="true" />
         </button>
         <div className="relative shrink-0 p-6 pr-12 pb-3 title-2xl-semi-bold text-xl wrap-break-word text-text-primary">
           {!data ? t('mcp.server.modal.addTitle', { ns: 'tools' }) : t('mcp.server.modal.editTitle', { ns: 'tools' })}
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index 3810e5b4c2..38c757f841 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -73,7 +73,7 @@ const ServerURLSection: FC<ServerURLSectionProps> = ({
       </div>
       <div className="inline-flex h-9 w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2">
         <div className="flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1">
-          <div className="overflow-hidden text-xs font-medium text-ellipsis whitespace-nowrap text-text-secondary">
+          <div className="truncate text-xs font-medium text-text-secondary">
             {serverURL}
           </div>
         </div>
@@ -91,7 +91,7 @@ const ServerURLSection: FC<ServerURLSectionProps> = ({
                       aria-label={t('overview.appInfo.regenerate', { ns: 'appOverview' }) || ''}
                       onClick={onRegenerate}
                     >
-                      <RiLoopLeftLine className={cn('h-4 w-4 text-text-tertiary hover:text-text-secondary', genLoading && 'animate-spin')} />
+                      <RiLoopLeftLine className={cn('size-4 text-text-tertiary hover:text-text-secondary', genLoading && 'animate-spin')} />
                     </button>
                   )}
                 />
@@ -324,7 +324,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
             <div className="flex w-full items-center gap-3 self-stretch">
               <div className="flex grow items-center">
                 <div className="mr-2 shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 p-1 shadow-md">
-                  <Mcp className="h-4 w-4 text-text-primary-on-surface" />
+                  <Mcp className="size-4 text-text-primary-on-surface" />
                 </div>
                 <div className="group w-full">
                   <div className="min-w-0 overflow-hidden system-md-semibold break-normal text-ellipsis text-text-secondary group-hover:text-text-primary">
@@ -378,7 +378,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
                 onClick={openServerModal}
               >
                 <div className="flex items-center justify-center gap-px">
-                  <RiEditLine className="h-3.5 w-3.5" />
+                  <RiEditLine className="size-3.5" />
                   <div className="px-[3px] system-xs-medium text-text-tertiary">
                     {serverPublished ? t('mcp.server.edit', { ns: 'tools' }) : t('mcp.server.addDescription', { ns: 'tools' })}
                   </div>
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 0fe81589a8..7495338a70 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -135,7 +135,7 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
         className="absolute top-5 right-5 z-10 cursor-pointer border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
         onClick={onHide}
       >
-        <RiCloseLine className="h-5 w-5 text-text-tertiary" aria-hidden="true" />
+        <RiCloseLine className="size-5 text-text-tertiary" aria-hidden="true" />
       </button>
       <div className="relative pb-3 title-2xl-semi-bold text-xl text-text-primary">
         {!isCreate ? t('mcp.modal.editTitle', { ns: 'tools' }) : t('mcp.modal.title', { ns: 'tools' })}
@@ -178,7 +178,7 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
               icon={state.appIcon.type === 'emoji' ? state.appIcon.icon : state.appIcon.fileId}
               background={state.appIcon.type === 'emoji' ? state.appIcon.background : undefined}
               imageUrl={state.appIcon.type === 'image' ? state.appIcon.url : undefined}
-              innerIcon={shouldUseMcpIconForAppIcon(state.appIcon.type, state.appIcon.type === 'emoji' ? state.appIcon.icon : '') ? <Mcp className="h-8 w-8 text-text-primary-on-surface" /> : undefined}
+              innerIcon={shouldUseMcpIconForAppIcon(state.appIcon.type, state.appIcon.type === 'emoji' ? state.appIcon.icon : '') ? <Mcp className="size-8 text-text-primary-on-surface" /> : undefined}
               size="xxl"
               className="relative cursor-pointer rounded-2xl"
               coverElement={
diff --git a/web/app/components/tools/mcp/provider-card.tsx b/web/app/components/tools/mcp/provider-card.tsx
index 9d68e6f02b..45e5a24f68 100644
--- a/web/app/components/tools/mcp/provider-card.tsx
+++ b/web/app/components/tools/mcp/provider-card.tsx
@@ -101,7 +101,7 @@ const MCPCard = ({
       <div className="flex items-center gap-1 rounded-b-xl pt-1.5 pr-2.5 pb-2.5 pl-4">
         <div className="flex w-0 grow items-center gap-2">
           <div className="flex items-center gap-1">
-            <RiHammerFill className="h-3 w-3 shrink-0 text-text-quaternary" />
+            <RiHammerFill className="size-3 shrink-0 text-text-quaternary" />
             {data.tools.length > 0 && (
               <div className="shrink-0 system-xs-regular text-text-tertiary">{t('mcp.toolsCount', { ns: 'tools', count: data.tools.length })}</div>
             )}
diff --git a/web/app/components/tools/mcp/sections/authentication-section.tsx b/web/app/components/tools/mcp/sections/authentication-section.tsx
index 167ab44683..0ca2bae498 100644
--- a/web/app/components/tools/mcp/sections/authentication-section.tsx
+++ b/web/app/components/tools/mcp/sections/authentication-section.tsx
@@ -39,7 +39,7 @@ const AuthenticationSection: FC<AuthenticationSectionProps> = ({
         </div>
         {!isDynamicRegistration && (
           <div className="mt-2 flex gap-2 rounded-lg bg-state-warning-hover p-3">
-            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-text-warning" />
+            <AlertTriangle className="mt-0.5 size-4 shrink-0 text-text-warning" />
             <div className="system-xs-regular text-text-secondary">
               <div className="mb-1">{t('mcp.modal.redirectUrlWarning', { ns: 'tools' })}</div>
               <code className="block rounded-sm bg-state-warning-active px-2 py-1 system-xs-medium break-all text-text-secondary">
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index 74fc47a833..f2fa489c99 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -191,7 +191,7 @@ const ProviderList = () => {
                   />
                 </div>
               ))}
-              {!filteredCollectionList.length && activeTab === 'workflow' && <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"><WorkflowToolEmpty type={getToolType(activeTab)} /></div>}
+              {!filteredCollectionList.length && activeTab === 'workflow' && <div className="absolute top-1/2 left-1/2 -translate-1/2"><WorkflowToolEmpty type={getToolType(activeTab)} /></div>}
             </div>
           )}
           {!filteredCollectionList.length && activeTab === 'builtin' && (
diff --git a/web/app/components/tools/provider/__tests__/custom-create-card.spec.tsx b/web/app/components/tools/provider/__tests__/custom-create-card.spec.tsx
index 1c2573918f..83475bd79c 100644
--- a/web/app/components/tools/provider/__tests__/custom-create-card.spec.tsx
+++ b/web/app/components/tools/provider/__tests__/custom-create-card.spec.tsx
@@ -121,7 +121,7 @@ describe('CustomCreateCard', () => {
       render(<CustomCreateCard onRefreshData={mockOnRefreshData} />)
 
       // RiAddCircleFill icon should be present
-      const iconContainer = document.querySelector('.h-10.w-10')
+      const iconContainer = document.querySelector('.size-10')
       expect(iconContainer).toBeInTheDocument()
     })
 
diff --git a/web/app/components/tools/provider/__tests__/empty.spec.tsx b/web/app/components/tools/provider/__tests__/empty.spec.tsx
index 7484f99895..a88c16fec4 100644
--- a/web/app/components/tools/provider/__tests__/empty.spec.tsx
+++ b/web/app/components/tools/provider/__tests__/empty.spec.tsx
@@ -61,8 +61,8 @@ describe('Empty', () => {
     it('should render arrow icon for types with links', () => {
       render(<Empty type={ToolTypeEnum.Custom} />)
 
-      // Check for RiArrowRightUpLine icon (has class h-3 w-3)
-      const arrowIcon = document.querySelector('.h-3.w-3')
+      // Check for RiArrowRightUpLine icon (has class size-3)
+      const arrowIcon = document.querySelector('.size-3')
       expect(arrowIcon).toBeInTheDocument()
     })
 
@@ -95,7 +95,7 @@ describe('Empty', () => {
       render(<Empty type={ToolTypeEnum.Custom} isAgent />)
 
       // Arrow icon should not be present when isAgent is true
-      const arrowIcon = document.querySelector('.h-3.w-3')
+      const arrowIcon = document.querySelector('.size-3')
       expect(arrowIcon).not.toBeInTheDocument()
     })
   })
diff --git a/web/app/components/tools/provider/custom-create-card.tsx b/web/app/components/tools/provider/custom-create-card.tsx
index 2d9d58209a..90c597de15 100644
--- a/web/app/components/tools/provider/custom-create-card.tsx
+++ b/web/app/components/tools/provider/custom-create-card.tsx
@@ -32,8 +32,8 @@ const Contribute = ({ onRefreshData }: Props) => {
         <div className="col-span-1 flex min-h-[135px] cursor-pointer flex-col rounded-xl bg-background-default-dimmed transition-all duration-200 ease-in-out">
           <div className="group grow rounded-t-xl" onClick={() => setIsShowEditCustomCollectionModal(true)}>
             <div className="flex shrink-0 items-center p-4 pb-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-dashed border-divider-deep group-hover:border-solid group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover">
-                <RiAddCircleFill className="h-4 w-4 text-text-quaternary group-hover:text-text-accent" />
+              <div className="flex size-10 items-center justify-center rounded-lg border border-dashed border-divider-deep group-hover:border-solid group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover">
+                <RiAddCircleFill className="size-4 text-text-quaternary group-hover:text-text-accent" />
               </div>
               <div className="ml-3 system-md-semibold text-text-secondary group-hover:text-text-accent">{t('createCustomTool', { ns: 'tools' })}</div>
             </div>
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index 359f6af88c..bf878a6206 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -268,7 +268,7 @@ const ProviderDetail = ({
                     </div>
                     <div className="flex gap-1">
                       <ActionButton aria-label={t('operation.close', { ns: 'common' })} onClick={onHide}>
-                        <RiCloseLine className="h-4 w-4" />
+                        <RiCloseLine className="size-4" />
                       </ActionButton>
                     </div>
                   </div>
@@ -282,7 +282,7 @@ const ProviderDetail = ({
                       className={cn('my-3 w-full shrink-0')}
                       onClick={() => setIsShowEditCustomCollectionModal(true)}
                     >
-                      <Settings01 className="mr-1 h-4 w-4 text-text-tertiary" />
+                      <Settings01 className="mr-1 size-4 text-text-tertiary" />
                       <div className="system-sm-medium text-text-secondary">{t('createTool.editAction', { ns: 'tools' })}</div>
                     </Button>
                   )}
@@ -294,7 +294,7 @@ const ProviderDetail = ({
                       >
                         <a className="flex items-center" href={`${basePath}/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel="noreferrer" target="_blank">
                           <div className="system-sm-medium">{t('openInStudio', { ns: 'tools' })}</div>
-                          <LinkExternal02 className="ml-1 h-4 w-4" />
+                          <LinkExternal02 className="ml-1 size-4" />
                         </a>
                       </Button>
                       <Button
diff --git a/web/app/components/tools/provider/empty.tsx b/web/app/components/tools/provider/empty.tsx
index ca64cf0da0..5d86708f57 100644
--- a/web/app/components/tools/provider/empty.tsx
+++ b/web/app/components/tools/provider/empty.tsx
@@ -45,7 +45,7 @@ const Empty = ({
         <Comp className={cn('flex items-center text-[13px] leading-[18px] text-text-tertiary', hasLink && 'cursor-pointer hover:text-text-accent')} {...linkProps}>
           {t(`addToolModal.${renderType}.tip`, { ns: 'tools' })}
           {' '}
-          {hasLink && <RiArrowRightUpLine className="ml-0.5 h-3 w-3" />}
+          {hasLink && <RiArrowRightUpLine className="ml-0.5 size-3" />}
         </Comp>
       )}
     </div>
diff --git a/web/app/components/tools/setting/build-in/config-credentials.tsx b/web/app/components/tools/setting/build-in/config-credentials.tsx
index 2ee17d4298..ed54572070 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -99,7 +99,7 @@ const ConfigCredential: FC<Props> = ({
                   </DrawerTitle>
                   <DrawerCloseButton
                     aria-label={t('operation.close', { ns: 'common' })}
-                    className="h-6 w-6 rounded-md"
+                    className="size-6 rounded-md"
                   />
                 </div>
                 <DrawerDescription className="pr-10 pl-6 system-xs-regular text-text-tertiary">
@@ -130,7 +130,7 @@ const ConfigCredential: FC<Props> = ({
                                   className="inline-flex items-center text-xs text-text-accent"
                                 >
                                   {t('howToGet', { ns: 'tools' })}
-                                  <LinkExternal02 className="ml-1 h-3 w-3" />
+                                  <LinkExternal02 className="ml-1 size-3" />
                                 </a>
                               )
                             : null}
diff --git a/web/app/components/tools/workflow-tool/configure-button.tsx b/web/app/components/tools/workflow-tool/configure-button.tsx
index 370154aa57..5b83e37d3a 100644
--- a/web/app/components/tools/workflow-tool/configure-button.tsx
+++ b/web/app/components/tools/workflow-tool/configure-button.tsx
@@ -48,7 +48,7 @@ const WorkflowToolConfigureButton = ({
                       onConfigure()
                   }}
                 >
-                  <span className={cn('relative i-ri-hammer-line h-4 w-4 text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')} />
+                  <span className={cn('relative i-ri-hammer-line size-4 text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')} />
                   <div
                     title={t('common.workflowAsTool', { ns: 'workflow' }) || ''}
                     className={cn('shrink grow basis-0 truncate system-sm-medium text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')}
@@ -66,7 +66,7 @@ const WorkflowToolConfigureButton = ({
                 <div
                   className="flex items-center justify-start gap-2 p-2 pl-2.5"
                 >
-                  <span className="i-ri-hammer-line h-4 w-4 text-text-tertiary" />
+                  <span className="i-ri-hammer-line size-4 text-text-tertiary" />
                   <div
                     title={t('common.workflowAsTool', { ns: 'workflow' }) || ''}
                     className="shrink grow basis-0 truncate system-sm-medium text-text-tertiary"
@@ -99,7 +99,7 @@ const WorkflowToolConfigureButton = ({
                   disabled={disabled}
                 >
                   {t('common.manageInTools', { ns: 'workflow' })}
-                  <span className="ml-1 i-ri-arrow-right-up-line h-4 w-4" />
+                  <span className="ml-1 i-ri-arrow-right-up-line size-4" />
                 </Button>
               </div>
               {outdated && (
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
index 08d3253535..46564d2a3c 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -27,13 +27,13 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
           className="absolute top-4 right-4 cursor-pointer border-none bg-transparent p-2"
           onClick={onClose}
         >
-          <span aria-hidden className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+          <span aria-hidden className="i-ri-close-line size-4 text-text-tertiary" />
         </button>
         <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-section p-3 shadow-xl">
           <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />
         </div>
         <DialogTitle className="relative mt-3 text-xl leading-[30px] font-semibold text-text-primary">{t('createTool.confirmTitle', { ns: 'tools' })}</DialogTitle>
-        <div className="my-1 text-sm leading-5 text-text-tertiary">
+        <div className="my-1 text-sm/5 text-text-tertiary">
           {t('createTool.confirmTip', { ns: 'tools' })}
         </div>
         <div className="flex items-center justify-end pt-6">
diff --git a/web/app/components/tools/workflow-tool/index.tsx b/web/app/components/tools/workflow-tool/index.tsx
index 2fe23abd48..9da6793092 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -76,7 +76,7 @@ const InfoTooltip = ({ children }: { children: string }) => {
   return (
     <Infotip
       aria-label={children}
-      className="ml-1 h-3.5 w-3.5"
+      className="ml-1 size-3.5"
       iconClassName="h-3.5 w-3.5"
       popupClassName="w-[180px]"
     >
@@ -110,7 +110,7 @@ const WorkflowToolDrawerFrame = ({ title, closeLabel, onHide, children }: Workfl
                     {title}
                   </DrawerTitle>
                   <DrawerCloseButton
-                    className="h-6 w-6 rounded-md"
+                    className="size-6 rounded-md"
                     aria-label={closeLabel}
                   />
                 </div>
@@ -387,7 +387,7 @@ export function WorkflowToolDrawer({
                                       <Tooltip>
                                         <TooltipTrigger
                                           render={(
-                                            <span data-testid="reserved-output-warning" className="i-ri-error-warning-line h-3 w-3 text-text-warning-secondary" />
+                                            <span data-testid="reserved-output-warning" className="i-ri-error-warning-line size-3 text-text-warning-secondary" />
                                           )}
                                         />
                                         <TooltipContent>
diff --git a/web/app/components/tools/workflow-tool/method-selector.tsx b/web/app/components/tools/workflow-tool/method-selector.tsx
index 2122eb9fae..5a0384c03e 100644
--- a/web/app/components/tools/workflow-tool/method-selector.tsx
+++ b/web/app/components/tools/workflow-tool/method-selector.tsx
@@ -43,7 +43,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
                 {value === 'llm' ? t('createTool.toolInput.methodParameter', { ns: 'tools' }) : t('createTool.toolInput.methodSetting', { ns: 'tools' })}
               </div>
               <div className="ml-1 shrink-0 text-text-secondary opacity-60">
-                <RiArrowDownSLine className="h-4 w-4" />
+                <RiArrowDownSLine className="size-4" />
               </div>
             </div>
           )}
@@ -60,8 +60,8 @@ const MethodSelector: FC<MethodSelectorProps> = ({
                 onClick={() => handleSelect('llm')}
               >
                 <div className="flex items-center gap-1">
-                  <div className="h-4 w-4 shrink-0">
-                    {value === 'llm' && <Check className="h-4 w-4 shrink-0 text-text-accent" aria-hidden />}
+                  <div className="size-4 shrink-0">
+                    {value === 'llm' && <Check className="size-4 shrink-0 text-text-accent" aria-hidden />}
                   </div>
                   <div className="text-[13px] leading-[18px] font-medium text-text-secondary">{t('createTool.toolInput.methodParameter', { ns: 'tools' })}</div>
                 </div>
@@ -73,8 +73,8 @@ const MethodSelector: FC<MethodSelectorProps> = ({
                 onClick={() => handleSelect('form')}
               >
                 <div className="flex items-center gap-1">
-                  <div className="h-4 w-4 shrink-0">
-                    {value === 'form' && <Check className="h-4 w-4 shrink-0 text-text-accent" aria-hidden />}
+                  <div className="size-4 shrink-0">
+                    {value === 'form' && <Check className="size-4 shrink-0 text-text-accent" aria-hidden />}
                   </div>
                   <div className="text-[13px] leading-[18px] font-medium text-text-secondary">{t('createTool.toolInput.methodSetting', { ns: 'tools' })}</div>
                 </div>
diff --git a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
index d1aafa5c43..8b57b90775 100644
--- a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
@@ -197,7 +197,7 @@ const FeaturesTrigger = () => {
           )}
           onClick={handleShowFeatures}
         >
-          <RiApps2AddLine className="mr-1 h-4 w-4 text-components-button-secondary-text" />
+          <RiApps2AddLine className="mr-1 size-4 text-components-button-secondary-text" />
           {t('common.features', { ns: 'workflow' })}
         </Button>
       )}
diff --git a/web/app/components/workflow-app/components/workflow-main.tsx b/web/app/components/workflow-app/components/workflow-main.tsx
index 6114d7b657..1d28d78d22 100644
--- a/web/app/components/workflow-app/components/workflow-main.tsx
+++ b/web/app/components/workflow-app/components/workflow-main.tsx
@@ -319,7 +319,7 @@ const WorkflowMain = ({
   return (
     <div
       ref={containerRef}
-      className="relative h-full w-full"
+      className="relative size-full"
     >
       <WorkflowWithInnerContext
         nodes={nodes}
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
index b4a1cd135b..f5f925b041 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
@@ -31,7 +31,7 @@ const StartNodeSelectionPanel: FC<StartNodeSelectionPanelProps> = ({
       <StartNodeOption
         icon={(
           <div className="flex h-9 w-9 items-center justify-center rounded-[10px] border-[0.5px] border-transparent bg-util-colors-blue-brand-blue-brand-500 p-2">
-            <Home className="h-5 w-5 text-white" />
+            <Home className="size-5 text-white" />
           </div>
         )}
         title={t('onboarding.userInputFull', { ns: 'workflow' })}
@@ -58,7 +58,7 @@ const StartNodeSelectionPanel: FC<StartNodeSelectionPanelProps> = ({
           <StartNodeOption
             icon={(
               <div className="flex h-9 w-9 items-center justify-center rounded-[10px] border-[0.5px] border-transparent bg-util-colors-blue-brand-blue-brand-500 p-2">
-                <TriggerAll className="h-5 w-5 text-white" />
+                <TriggerAll className="size-5 text-white" />
               </div>
             )}
             title={t('onboarding.trigger', { ns: 'workflow' })}
diff --git a/web/app/components/workflow-app/index.tsx b/web/app/components/workflow-app/index.tsx
index e6fdf0ddc6..e45ebbac77 100644
--- a/web/app/components/workflow-app/index.tsx
+++ b/web/app/components/workflow-app/index.tsx
@@ -131,7 +131,7 @@ const WorkflowAppWithAdditionalContext = () => {
 
   if (!data || isLoading || isLoadingCurrentWorkspace || !currentWorkspace.id) {
     return (
-      <div className="relative flex h-full w-full items-center justify-center">
+      <div className="relative flex size-full items-center justify-center">
         <Loading />
       </div>
     )
diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx
index 86cc42a392..571ea475e2 100644
--- a/web/app/components/workflow/block-icon.tsx
+++ b/web/app/components/workflow/block-icon.tsx
@@ -160,7 +160,7 @@ const BlockIcon: FC<BlockIconProps> = ({
               typeof resolvedToolIcon === 'string'
                 ? (
                     <div
-                      className="h-full w-full shrink-0 rounded-md bg-cover bg-center"
+                      className="size-full shrink-0 rounded-md bg-cover bg-center"
                       style={{
                         backgroundImage: `url(${resolvedToolIcon})`,
                       }}
@@ -169,7 +169,7 @@ const BlockIcon: FC<BlockIconProps> = ({
                   )
                 : (
                     <AppIcon
-                      className="h-full! w-full! shrink-0"
+                      className="size-full! shrink-0"
                       size="tiny"
                       icon={resolvedToolIcon?.content}
                       background={resolvedToolIcon?.background}
diff --git a/web/app/components/workflow/block-selector/all-start-blocks.tsx b/web/app/components/workflow/block-selector/all-start-blocks.tsx
index b7f9ee7bbb..2f431ebb49 100644
--- a/web/app/components/workflow/block-selector/all-start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/all-start-blocks.tsx
@@ -191,7 +191,7 @@ const AllStartBlocks = ({
 
           {shouldShowEmptyState && (
             <div className="flex h-full flex-col items-center justify-center gap-3 py-12 text-center">
-              <SearchMenu className="h-8 w-8 text-text-quaternary" />
+              <SearchMenu className="size-8 text-text-quaternary" />
               <div className="text-sm font-medium text-text-secondary">
                 {t('tabs.noPluginsFound', { ns: 'workflow' })}
               </div>
@@ -219,7 +219,7 @@ const AllStartBlocks = ({
             target="_blank"
           >
             <span>{t('findMoreInMarketplace', { ns: 'plugin' })}</span>
-            <RiArrowRightUpLine className="ml-0.5 h-3 w-3" />
+            <RiArrowRightUpLine className="ml-0.5 size-3" />
           </Link>
         )}
       </div>
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index 72389ec376..98a68103c7 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -295,7 +295,7 @@ const AllTools = ({
 
           {shouldShowEmptyState && (
             <div className="flex h-full flex-col items-center justify-center gap-3 py-12 text-center">
-              <SearchMenu className="h-8 w-8 text-text-quaternary" />
+              <SearchMenu className="size-8 text-text-quaternary" />
               <div className="text-sm font-medium text-text-secondary">
                 {t('tabs.noPluginsFound', { ns: 'workflow' })}
               </div>
@@ -321,7 +321,7 @@ const AllTools = ({
             target="_blank"
           >
             <span>{t('findMoreInMarketplace', { ns: 'plugin' })}</span>
-            <RiArrowRightUpLine className="ml-0.5 h-3 w-3" />
+            <RiArrowRightUpLine className="ml-0.5 size-3" />
           </Link>
         )}
       </div>
diff --git a/web/app/components/workflow/block-selector/featured-tools.tsx b/web/app/components/workflow/block-selector/featured-tools.tsx
index 4b1dc8b138..652399edf9 100644
--- a/web/app/components/workflow/block-selector/featured-tools.tsx
+++ b/web/app/components/workflow/block-selector/featured-tools.tsx
@@ -134,7 +134,7 @@ const FeaturedTools = ({
         onClick={() => setIsCollapsed(prev => !prev)}
       >
         <span className="system-xs-medium text-text-primary">{t('tabs.featuredTools', { ns: 'workflow' })}</span>
-        <ArrowDownRoundFill className={`ml-0.5 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
+        <ArrowDownRoundFill className={`ml-0.5 size-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
       </button>
 
       {!isCollapsed && (
@@ -274,7 +274,7 @@ function FeaturedToolUninstalledItem({
       <div className="ml-auto flex h-full items-center gap-1 pl-1">
         <span className={`system-xs-regular text-text-tertiary ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
         <div
-          className={`flex h-full items-center gap-1 system-xs-medium text-components-button-secondary-accent-text [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? '' : 'hidden group-hover:flex'}`}
+          className={`flex h-full items-center gap-1 system-xs-medium text-components-button-secondary-accent-text [&_.action-btn]:size-6 [&_.action-btn]:min-h-0 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? '' : 'hidden group-hover:flex'}`}
         >
           <button
             type="button"
@@ -345,7 +345,7 @@ function FeaturedToolPreviewCard({
     <PreviewCardContent placement="right" popupClassName="w-[224px] px-3 py-2.5">
       <div>
         <BlockIcon size="md" className="mb-2" type={BlockEnum.Tool} toolIcon={payload.plugin.icon} />
-        <div className="mb-1 text-sm leading-5 text-text-primary">{payload.label}</div>
+        <div className="mb-1 text-sm/5 text-text-primary">{payload.label}</div>
         <div className="text-xs leading-[18px] wrap-break-word text-text-secondary">{payload.description}</div>
       </div>
     </PreviewCardContent>
diff --git a/web/app/components/workflow/block-selector/featured-triggers.tsx b/web/app/components/workflow/block-selector/featured-triggers.tsx
index 842541d88d..bf04efd076 100644
--- a/web/app/components/workflow/block-selector/featured-triggers.tsx
+++ b/web/app/components/workflow/block-selector/featured-triggers.tsx
@@ -132,7 +132,7 @@ const FeaturedTriggers = ({
         onClick={() => setIsCollapsed(prev => !prev)}
       >
         <span className="system-xs-medium text-text-primary">{t('tabs.featuredTools', { ns: 'workflow' })}</span>
-        <ArrowDownRoundFill className={`ml-0.5 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
+        <ArrowDownRoundFill className={`ml-0.5 size-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
       </button>
 
       {!isCollapsed && (
@@ -278,7 +278,7 @@ function FeaturedTriggerUninstalledItem({
       <div className="ml-auto flex h-full items-center gap-1 pl-1">
         <span className={`system-xs-regular text-text-tertiary ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
         <div
-          className={`flex h-full items-center gap-1 system-xs-medium text-components-button-secondary-accent-text [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? '' : 'hidden group-hover:flex'}`}
+          className={`flex h-full items-center gap-1 system-xs-medium text-components-button-secondary-accent-text [&_.action-btn]:size-6 [&_.action-btn]:min-h-0 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? '' : 'hidden group-hover:flex'}`}
         >
           <button
             type="button"
@@ -349,7 +349,7 @@ function FeaturedTriggerPreviewCard({
     <PreviewCardContent placement="right" popupClassName="w-[224px] px-3 py-2.5">
       <div>
         <BlockIcon size="md" className="mb-2" type={BlockEnum.TriggerPlugin} toolIcon={payload.plugin.icon} />
-        <div className="mb-1 text-sm leading-5 text-text-primary">{payload.label}</div>
+        <div className="mb-1 text-sm/5 text-text-primary">{payload.label}</div>
         <div className="text-xs leading-[18px] wrap-break-word text-text-secondary">{payload.description}</div>
       </div>
     </PreviewCardContent>
diff --git a/web/app/components/workflow/block-selector/main.tsx b/web/app/components/workflow/block-selector/main.tsx
index a588fb660e..34f1798583 100644
--- a/web/app/components/workflow/block-selector/main.tsx
+++ b/web/app/components/workflow/block-selector/main.tsx
@@ -181,13 +181,13 @@ const NodeSelector: FC<NodeSelectorProps> = ({
     <PopoverTrigger
       aria-label={t('common.addBlock', { ns: 'workflow' })}
       className={cn(
-        'z-10 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full border-0 bg-components-button-primary-bg p-0 text-text-primary-on-surface hover:bg-components-button-primary-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
+        'z-10 flex size-4 cursor-pointer items-center justify-center rounded-full border-0 bg-components-button-primary-bg p-0 text-text-primary-on-surface hover:bg-components-button-primary-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
         triggerClassName?.(open),
       )}
       style={triggerStyle}
       onClick={handleTrigger}
     >
-      <Plus02 aria-hidden className="h-2.5 w-2.5" />
+      <Plus02 aria-hidden className="size-2.5" />
     </PopoverTrigger>
   )
   const triggerElement = trigger?.(open)
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
index 567d3b2113..eacad3de4a 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -80,7 +80,7 @@ const OperationDropdown: FC<Props> = ({
             className={cn(open && 'bg-state-base-hover', 'focus-visible:ring-2 focus-visible:ring-state-accent-solid')}
             aria-label={t('operation.more', { ns: 'common' })}
           >
-            <span aria-hidden className="i-ri-more-fill h-4 w-4 text-components-button-secondary-accent-text" />
+            <span aria-hidden className="i-ri-more-fill size-4 text-components-button-secondary-accent-text" />
           </ActionButton>
         )}
       />
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index fbc9035341..4e851cac8b 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -85,7 +85,7 @@ const List = ({
         rel="noopener noreferrer"
       >
         <span>{t('findMoreInMarketplace', { ns: 'plugin' })}</span>
-        <RiArrowRightUpLine className="ml-0.5 h-3 w-3" />
+        <RiArrowRightUpLine className="ml-0.5 size-3" />
       </Link>
     )
   }
@@ -108,7 +108,7 @@ const List = ({
             onClick={e => e.stopPropagation()}
           >
             <span>{t('searchInMarketplace', { ns: 'plugin' })}</span>
-            <RiArrowRightUpLine className="ml-0.5 h-3 w-3" />
+            <RiArrowRightUpLine className="ml-0.5 size-3" />
           </Link>
         </div>
       )}
@@ -129,7 +129,7 @@ const List = ({
               rel="noopener noreferrer"
               className="flex h-4 shrink-0 items-center system-sm-medium text-text-accent-light-mode-only"
             >
-              <RiSearchLine className="mr-0.5 h-3 w-3" />
+              <RiSearchLine className="mr-0.5 size-3" />
               <span>{t('searchInMarketplace', { ns: 'plugin' })}</span>
             </Link>
             <div className="h-[2px] w-[90px] bg-linear-to-l from-[rgba(255,255,255,0.01)] to-[rgba(16,24,40,0.08)]"></div>
diff --git a/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx b/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
index 1176a0a388..6e6f75c214 100644
--- a/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
+++ b/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
@@ -84,7 +84,7 @@ const RAGToolRecommendations = ({
         onClick={() => setIsCollapsed(prev => !prev)}
       >
         <span className="system-xs-medium text-text-tertiary">{t('ragToolSuggestions.title', { ns: 'pipeline' })}</span>
-        <ArrowDownRoundFill className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
+        <ArrowDownRoundFill className={`ml-1 size-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
       </button>
       {!isCollapsed && (
         <>
diff --git a/web/app/components/workflow/block-selector/start-blocks.tsx b/web/app/components/workflow/block-selector/start-blocks.tsx
index 9ed4aa4008..71323feeff 100644
--- a/web/app/components/workflow/block-selector/start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/start-blocks.tsx
@@ -165,7 +165,7 @@ function StartBlockPreviewCard({
           {t(`blocksAbout.${block.type}`, { ns: 'workflow' })}
         </div>
         {(block.type === BlockEnumValues.TriggerWebhook || block.type === BlockEnumValues.TriggerSchedule) && (
-          <div className="mt-1 mb-1 system-xs-regular text-text-tertiary">
+          <div className="my-1 system-xs-regular text-text-tertiary">
             {t('author', { ns: 'tools' })}
             {' '}
             {t('difyTeam', { ns: 'workflow' })}
diff --git a/web/app/components/workflow/block-selector/tool/action-item.tsx b/web/app/components/workflow/block-selector/tool/action-item.tsx
index 05aa05c162..1d2ccf05be 100644
--- a/web/app/components/workflow/block-selector/tool/action-item.tsx
+++ b/web/app/components/workflow/block-selector/tool/action-item.tsx
@@ -152,7 +152,7 @@ export function ToolActionPreviewCard({
           type={BlockEnum.Tool}
           toolIcon={payload.providerIcon}
         />
-        <div className="mb-1 text-sm leading-5 text-text-primary">{payload.payload.label[payload.language]}</div>
+        <div className="mb-1 text-sm/5 text-text-primary">{payload.payload.label[payload.language]}</div>
         <div className="text-xs leading-[18px] wrap-break-word text-text-secondary">{payload.payload.description[payload.language]}</div>
       </div>
     </PreviewCardContent>
diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx
index ebcfc3b8d1..080eb129f9 100644
--- a/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -229,7 +229,7 @@ const Tool: FC<Props> = ({
             {!isShowCanNotChooseMCPTip && !canNotSelectMultiple && (notShowProvider ? notShowProviderSelectInfo : selectedInfo)}
             {isShowCanNotChooseMCPTip && <McpToolNotSupportTooltip />}
             {hasAction && (
-              <FoldIcon className={cn('h-4 w-4 shrink-0 text-text-tertiary group-hover/item:text-text-tertiary', isFold && 'text-text-quaternary')} />
+              <FoldIcon className={cn('size-4 shrink-0 text-text-tertiary group-hover/item:text-text-tertiary', isFold && 'text-text-quaternary')} />
             )}
           </div>
         </div>
diff --git a/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx b/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
index d2829363e7..339ca93ee4 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
@@ -114,7 +114,7 @@ export function TriggerPluginActionPreviewCard({
           type={BlockEnum.TriggerPlugin}
           toolIcon={payload.provider.icon}
         />
-        <div className="mb-1 text-sm leading-5 text-text-primary">{payload.payload.label[payload.language]}</div>
+        <div className="mb-1 text-sm/5 text-text-primary">{payload.payload.label[payload.language]}</div>
         <div className="text-xs leading-[18px] wrap-break-word text-text-secondary">{payload.payload.description[payload.language]}</div>
       </div>
     </PreviewCardContent>
diff --git a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
index 68946fb04c..f633e5e257 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
@@ -139,7 +139,7 @@ const TriggerPluginItem: FC<Props> = ({
 
           <div className="ml-2 flex items-center">
             {hasAction && (
-              <FoldIcon className={cn('h-4 w-4 shrink-0 text-text-tertiary group-hover/item:text-text-tertiary', isFold && 'text-text-quaternary')} />
+              <FoldIcon className={cn('size-4 shrink-0 text-text-tertiary group-hover/item:text-text-tertiary', isFold && 'text-text-quaternary')} />
             )}
           </div>
         </div>
diff --git a/web/app/components/workflow/block-selector/view-type-select.tsx b/web/app/components/workflow/block-selector/view-type-select.tsx
index 58dbb2cb32..558da02d09 100644
--- a/web/app/components/workflow/block-selector/view-type-select.tsx
+++ b/web/app/components/workflow/block-selector/view-type-select.tsx
@@ -37,7 +37,7 @@ const ViewTypeSelect: FC<Props> = ({
         }
         onClick={handleChange(ViewType.flat)}
       >
-        <RiSortAlphabetAsc className="h-4 w-4" />
+        <RiSortAlphabetAsc className="size-4" />
       </div>
       <div
         className={
@@ -47,7 +47,7 @@ const ViewTypeSelect: FC<Props> = ({
         }
         onClick={handleChange(ViewType.tree)}
       >
-        <RiNodeTree className="h-4 w-4" />
+        <RiNodeTree className="size-4" />
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/collaboration/components/user-cursors.tsx b/web/app/components/workflow/collaboration/components/user-cursors.tsx
index 4fbf491d0e..8170ca1c1f 100644
--- a/web/app/components/workflow/collaboration/components/user-cursors.tsx
+++ b/web/app/components/workflow/collaboration/components/user-cursors.tsx
@@ -37,7 +37,7 @@ const UserCursors: FC<UserCursorsProps> = ({
         return (
           <div
             key={userId}
-            className="pointer-events-none absolute z-[8] transition-all duration-150 ease-out"
+            className="pointer-events-none absolute z-8 transition-all duration-150 ease-out"
             style={{
               left: screenPos.x,
               top: screenPos.y,
diff --git a/web/app/components/workflow/comment/comment-icon.tsx b/web/app/components/workflow/comment/comment-icon.tsx
index 7270cd3ac9..aaf093aa6e 100644
--- a/web/app/components/workflow/comment/comment-icon.tsx
+++ b/web/app/components/workflow/comment/comment-icon.tsx
@@ -208,7 +208,7 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick, isAct
           onMouseLeave={handleMouseLeave}
         >
           <div
-            className="relative h-10 rounded-tl-full rounded-tr-full rounded-br-full"
+            className="relative h-10 rounded-t-full rounded-br-full"
             style={{ width: dynamicWidth }}
           >
             <div className={`absolute inset-[6px] overflow-hidden rounded-tl-full rounded-tr-full rounded-br-full border bg-components-panel-bg transition-shadow ${
@@ -217,12 +217,12 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick, isAct
                 : 'border-components-panel-border'
             }`}
             >
-              <div className="flex h-full w-full items-center justify-center px-1">
+              <div className="flex size-full items-center justify-center px-1">
                 <UserAvatarList
                   users={participants}
                   maxVisible={3}
                   size="sm"
-                  className="-translate-y-[1.5px]"
+                  className="translate-y-[-1.5px]"
                 />
               </div>
             </div>
diff --git a/web/app/components/workflow/comment/comment-input.tsx b/web/app/components/workflow/comment/comment-input.tsx
index e6cbc95a82..963111aaa2 100644
--- a/web/app/components/workflow/comment/comment-input.tsx
+++ b/web/app/components/workflow/comment/comment-input.tsx
@@ -134,7 +134,7 @@ export const CommentInput: FC<CommentInputProps> = memo(({
   return (
     <div
       className={cn(
-        'absolute z-[60] w-96',
+        'absolute z-60 w-96',
         disabled && 'pointer-events-none opacity-80',
       )}
       style={{
diff --git a/web/app/components/workflow/comment/comment-preview.tsx b/web/app/components/workflow/comment/comment-preview.tsx
index 6aadb522a9..98571810f8 100644
--- a/web/app/components/workflow/comment/comment-preview.tsx
+++ b/web/app/components/workflow/comment/comment-preview.tsx
@@ -52,7 +52,7 @@ const CommentPreview: FC<CommentPreviewProps> = ({ comment, onClick }) => {
         </div>
       </div>
 
-      <div className="system-sm-regular break-words text-text-secondary">{comment.content}</div>
+      <div className="system-sm-regular wrap-break-word text-text-secondary">{comment.content}</div>
     </div>
   )
 }
diff --git a/web/app/components/workflow/comment/cursor.tsx b/web/app/components/workflow/comment/cursor.tsx
index 02f09f7d92..45d42c3190 100644
--- a/web/app/components/workflow/comment/cursor.tsx
+++ b/web/app/components/workflow/comment/cursor.tsx
@@ -14,7 +14,7 @@ export const CommentCursor: FC = memo(() => {
 
   return (
     <div
-      className="pointer-events-none absolute z-50 flex h-6 w-6 items-center justify-center"
+      className="pointer-events-none absolute z-50 flex size-6 items-center justify-center"
       style={{
         left: mousePosition.elementX,
         top: mousePosition.elementY,
diff --git a/web/app/components/workflow/comment/mention-input.tsx b/web/app/components/workflow/comment/mention-input.tsx
index 511de1055c..6aa09eb358 100644
--- a/web/app/components/workflow/comment/mention-input.tsx
+++ b/web/app/components/workflow/comment/mention-input.tsx
@@ -518,7 +518,7 @@ const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
         <div
           aria-hidden
           className={cn(
-            'pointer-events-none absolute inset-0 z-0 overflow-hidden p-1 leading-6 break-words whitespace-pre-wrap',
+            'pointer-events-none absolute inset-0 z-0 overflow-hidden p-1 leading-6 wrap-break-word whitespace-pre-wrap',
             'body-lg-regular text-text-primary',
           )}
           style={{ paddingRight, paddingBottom }}
@@ -557,14 +557,14 @@ const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
           >
             <div
               className={cn(
-                'z-20 flex h-8 w-8 items-center justify-center rounded-lg transition-opacity',
+                'z-20 flex size-8 items-center justify-center rounded-lg transition-opacity',
                 shouldDisableMentionButton
                   ? 'cursor-not-allowed opacity-40'
                   : 'cursor-pointer hover:bg-state-base-hover',
               )}
               onClick={shouldDisableMentionButton ? undefined : handleMentionButtonClick}
             >
-              <RiAtLine className="h-4 w-4 text-text-tertiary" />
+              <RiAtLine className="size-4 text-text-tertiary" />
             </div>
             <Button
               className="z-20 ml-2 w-8 px-0"
@@ -573,8 +573,8 @@ const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
               onClick={handleSubmit}
             >
               {loading
-                ? <RiLoader2Line className="h-4 w-4 animate-spin text-components-button-primary-text" />
-                : <RiArrowUpLine className="h-4 w-4 text-components-button-primary-text" />}
+                ? <RiLoader2Line className="size-4 animate-spin text-components-button-primary-text" />
+                : <RiArrowUpLine className="size-4 text-components-button-primary-text" />}
             </Button>
           </div>
         )}
@@ -582,18 +582,18 @@ const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
         {isEditing && (
           <div
             ref={setActionContainerRef}
-            className="absolute right-1 bottom-0 left-1 z-20 flex items-end justify-between"
+            className="absolute inset-x-1 bottom-0 z-20 flex items-end justify-between"
           >
             <div
               className={cn(
-                'z-20 flex h-8 w-8 items-center justify-center rounded-lg transition-opacity',
+                'z-20 flex size-8 items-center justify-center rounded-lg transition-opacity',
                 shouldDisableMentionButton
                   ? 'cursor-not-allowed opacity-40'
                   : 'cursor-pointer hover:bg-state-base-hover',
               )}
               onClick={shouldDisableMentionButton ? undefined : handleMentionButtonClick}
             >
-              <RiAtLine className="h-4 w-4 text-text-tertiary" />
+              <RiAtLine className="size-4 text-text-tertiary" />
             </div>
             <div
               ref={setActionRightRef}
@@ -609,10 +609,10 @@ const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
                 onClick={() => handleSubmit()}
                 className="gap-1"
               >
-                {loading && <RiLoader2Line className="mr-1 h-3.5 w-3.5 animate-spin" />}
+                {loading && <RiLoader2Line className="mr-1 size-3.5 animate-spin" />}
                 <span>{t('operation.save', { ns: 'common' })}</span>
                 {!loading && (
-                  <EnterKey className="h-4 w-4" />
+                  <EnterKey className="size-4" />
                 )}
               </Button>
             </div>
@@ -622,7 +622,7 @@ const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
 
       {showMentionDropdown && filteredMentionUsers.length > 0 && typeof document !== 'undefined' && createPortal(
         <div
-          className="fixed z-[9999] max-h-[248px] w-[280px] overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg/95 shadow-lg backdrop-blur-[10px]"
+          className="fixed z-9999 max-h-[248px] w-[280px] overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg/95 shadow-lg backdrop-blur-[10px]"
           style={{
             left: dropdownPosition.x,
             [dropdownPosition.placement === 'top' ? 'bottom' : 'top']: dropdownPosition.placement === 'top'
diff --git a/web/app/components/workflow/comment/thread.tsx b/web/app/components/workflow/comment/thread.tsx
index 8eaf542604..788498ef4f 100644
--- a/web/app/components/workflow/comment/thread.tsx
+++ b/web/app/components/workflow/comment/thread.tsx
@@ -125,7 +125,7 @@ const ThreadMessage: FC<{
   return (
     <div className={cn('flex gap-3 pt-1', className)}>
       <div className="shrink-0">
-        <AvatarRoot size="sm" className={cn('h-8 w-8 rounded-full')}>
+        <AvatarRoot size="sm" className={cn('size-8 rounded-full')}>
           {avatarUrl && (
             <AvatarImage
               src={avatarUrl}
@@ -145,7 +145,7 @@ const ThreadMessage: FC<{
           <span className="system-sm-medium text-text-primary">{authorName}</span>
           <span className="system-2xs-regular text-text-tertiary">{formatTimeFromNow(createdAt * 1000)}</span>
         </div>
-        <div className="mt-1 system-sm-regular break-words whitespace-pre-wrap text-text-secondary">
+        <div className="mt-1 system-sm-regular wrap-break-word whitespace-pre-wrap text-text-secondary">
           {highlightedContent}
         </div>
       </div>
@@ -443,15 +443,15 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                   <button
                     type="button"
                     disabled={loading}
-                    className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                    className={cn('flex size-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
                     onClick={onDelete}
                     aria-label={t('comments.aria.deleteComment', { ns: 'workflow' })}
                   >
-                    <RiDeleteBinLine className="h-4 w-4" />
+                    <RiDeleteBinLine className="size-4" />
                   </button>
                 )}
               />
-              <TooltipContent placement="top" className="!px-2 !py-1.5">
+              <TooltipContent placement="top" className="px-2! py-1.5!">
                 {t('comments.aria.deleteComment', { ns: 'workflow' })}
               </TooltipContent>
             </Tooltip>
@@ -461,15 +461,15 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                   <button
                     type="button"
                     disabled={comment.resolved || loading}
-                    className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                    className={cn('flex size-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
                     onClick={onResolve}
                     aria-label={t('comments.aria.resolveComment', { ns: 'workflow' })}
                   >
-                    {comment.resolved ? <RiCheckboxCircleFill className="h-4 w-4" /> : <RiCheckboxCircleLine className="h-4 w-4" />}
+                    {comment.resolved ? <RiCheckboxCircleFill className="size-4" /> : <RiCheckboxCircleLine className="size-4" />}
                   </button>
                 )}
               />
-              <TooltipContent placement="top" className="!px-2 !py-1.5">
+              <TooltipContent placement="top" className="px-2! py-1.5!">
                 {t('comments.aria.resolveComment', { ns: 'workflow' })}
               </TooltipContent>
             </Tooltip>
@@ -480,15 +480,15 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                   <button
                     type="button"
                     disabled={!canGoPrev || loading}
-                    className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                    className={cn('flex size-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
                     onClick={onPrev}
                     aria-label={t('comments.aria.previousComment', { ns: 'workflow' })}
                   >
-                    <RiArrowUpSLine className="h-4 w-4" />
+                    <RiArrowUpSLine className="size-4" />
                   </button>
                 )}
               />
-              <TooltipContent placement="top" className="!px-2 !py-1.5">
+              <TooltipContent placement="top" className="px-2! py-1.5!">
                 {t('comments.aria.previousComment', { ns: 'workflow' })}
               </TooltipContent>
             </Tooltip>
@@ -498,25 +498,25 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                   <button
                     type="button"
                     disabled={!canGoNext || loading}
-                    className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                    className={cn('flex size-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
                     onClick={onNext}
                     aria-label={t('comments.aria.nextComment', { ns: 'workflow' })}
                   >
-                    <RiArrowDownSLine className="h-4 w-4" />
+                    <RiArrowDownSLine className="size-4" />
                   </button>
                 )}
               />
-              <TooltipContent placement="top" className="!px-2 !py-1.5">
+              <TooltipContent placement="top" className="px-2! py-1.5!">
                 {t('comments.aria.nextComment', { ns: 'workflow' })}
               </TooltipContent>
             </Tooltip>
             <button
               type="button"
-              className="flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+              className="flex size-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
               onClick={onClose}
               aria-label={t('comments.aria.closeComment', { ns: 'workflow' })}
             >
-              <RiCloseLine className="h-4 w-4" />
+              <RiCloseLine className="size-4" />
             </button>
           </div>
         </div>
@@ -537,10 +537,10 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                   onOpenChange={open => setActiveReplyMenuId(open ? comment.id : null)}
                 >
                   <DropdownMenuTrigger
-                    className="flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+                    className="flex size-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
                     aria-label={t('comments.aria.commentActions', { ns: 'workflow' })}
                   >
-                    <RiMoreFill className="h-4 w-4" />
+                    <RiMoreFill className="size-4" />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent
                     placement="bottom-end"
@@ -568,7 +568,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                         name={comment.created_by_account?.name || t('comments.fallback.user', { ns: 'workflow' })}
                         avatar={comment.created_by_account?.avatar_url || null}
                         size="sm"
-                        className="h-8 w-8 rounded-full"
+                        className="size-8 rounded-full"
                       />
                     </div>
                     <div className="min-w-0 flex-1">
@@ -627,10 +627,10 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                           }}
                         >
                           <DropdownMenuTrigger
-                            className="flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+                            className="flex size-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
                             aria-label={t('comments.aria.replyActions', { ns: 'workflow' })}
                           >
-                            <RiMoreFill className="h-4 w-4" />
+                            <RiMoreFill className="size-4" />
                           </DropdownMenuTrigger>
                           <DropdownMenuContent
                             placement="bottom-end"
@@ -692,7 +692,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                                 name={reply.created_by_account?.name || t('comments.fallback.user', { ns: 'workflow' })}
                                 avatar={reply.created_by_account?.avatar_url || null}
                                 size="sm"
-                                className="h-8 w-8 rounded-full"
+                                className="size-8 rounded-full"
                               />
                             </div>
                             <div className="min-w-0 flex-1">
@@ -741,7 +741,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                 avatar={userProfile?.avatar_url || null}
                 name={userProfile?.name || t('you', { ns: 'common' })}
                 size="sm"
-                className="h-8 w-8"
+                className="size-8"
               />
               <div className="flex-1 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-[2px] shadow-sm">
                 <MentionInput
diff --git a/web/app/components/workflow/dsl-export-confirm-modal.tsx b/web/app/components/workflow/dsl-export-confirm-modal.tsx
index 6b4c741e6c..88e3d253ae 100644
--- a/web/app/components/workflow/dsl-export-confirm-modal.tsx
+++ b/web/app/components/workflow/dsl-export-confirm-modal.tsx
@@ -70,10 +70,10 @@ export const DSLExportConfirmContent = ({
                 <tr key={env.name}>
                   <td className={cn('h-7 border-r border-divider-regular pl-3 system-xs-medium', index + 1 !== envList.length && 'border-b border-divider-regular')}>
                     <div className="flex w-50 items-center gap-1">
-                      <span aria-hidden="true" className="i-custom-vender-line-others-env h-4 w-4 shrink-0 text-util-colors-violet-violet-600" />
+                      <span aria-hidden="true" className="i-custom-vender-line-others-env size-4 shrink-0 text-util-colors-violet-violet-600" />
                       <div className="truncate text-text-primary">{env.name}</div>
                       <div className="shrink-0 text-text-tertiary">{t('env.export.secret', { ns: 'workflow' })}</div>
-                      <span aria-hidden="true" className="i-ri-lock-2-line h-3 w-3 shrink-0 text-text-tertiary" />
+                      <span aria-hidden="true" className="i-ri-lock-2-line size-3 shrink-0 text-text-tertiary" />
                     </div>
                   </td>
                   <td className={cn('h-7 pl-3', index + 1 !== envList.length && 'border-b border-divider-regular')}>
diff --git a/web/app/components/workflow/header/chat-variable-button.tsx b/web/app/components/workflow/header/chat-variable-button.tsx
index efac64bd1b..d53c88eac5 100644
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@@ -30,7 +30,7 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
       onClick={handleClick}
       variant="ghost"
     >
-      <BubbleX className="h-4 w-4 text-components-button-secondary-text" />
+      <BubbleX className="size-4 text-components-button-secondary-text" />
     </Button>
   )
 }
diff --git a/web/app/components/workflow/header/checklist/index.tsx b/web/app/components/workflow/header/checklist/index.tsx
index 1e4303d401..248389b484 100644
--- a/web/app/components/workflow/header/checklist/index.tsx
+++ b/web/app/components/workflow/header/checklist/index.tsx
@@ -74,17 +74,17 @@ const WorkflowChecklist = ({
           <button
             type="button"
             className={cn(
-              'relative ml-0.5 flex h-7 w-7 items-center justify-center rounded-md border-none bg-transparent p-0',
+              'relative ml-0.5 flex size-7 items-center justify-center rounded-md border-none bg-transparent p-0',
               disabled && 'cursor-not-allowed opacity-50',
             )}
             disabled={disabled || undefined}
             aria-label={checklistLabel}
           >
             <span
-              className={cn('group flex h-full w-full items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
+              className={cn('group flex size-full items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
             >
               <span
-                className={cn('i-ri-list-check-3 h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')}
+                className={cn('i-ri-list-check-3 size-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')}
                 aria-hidden="true"
               />
             </span>
@@ -109,7 +109,7 @@ const WorkflowChecklist = ({
           <div className="flex flex-col gap-0.5 px-3 pt-3.5 pb-1">
             <div className="flex items-start px-1">
               <div className="min-w-0 grow pr-8">
-                <PopoverTitle className="text-base leading-6 font-semibold text-text-primary">
+                <PopoverTitle className="text-base/6 font-semibold text-text-primary">
                   {checklistLabel}
                   {needWarningNodes.length > 0 && `(${needWarningNodes.length})`}
                 </PopoverTitle>
@@ -122,7 +122,7 @@ const WorkflowChecklist = ({
               </PopoverClose>
             </div>
             {needWarningNodes.length > 0 && (
-              <PopoverDescription className="px-1 text-xs leading-4 text-text-tertiary">
+              <PopoverDescription className="px-1 text-xs/4 text-text-tertiary">
                 {t('panel.checklistDescription', { ns: 'workflow' })}
               </PopoverDescription>
             )}
diff --git a/web/app/components/workflow/header/checklist/node-group.tsx b/web/app/components/workflow/header/checklist/node-group.tsx
index 05987b632e..128a539a82 100644
--- a/web/app/components/workflow/header/checklist/node-group.tsx
+++ b/web/app/components/workflow/header/checklist/node-group.tsx
@@ -40,7 +40,7 @@ export const ChecklistNodeGroup = memo(({
           size="sm"
           toolIcon={item.toolIcon}
         />
-        <span className="min-w-0 grow truncate text-sm leading-5 font-medium text-text-primary">
+        <span className="min-w-0 grow truncate text-sm/5 font-medium text-text-primary">
           {item.title}
         </span>
       </div>
@@ -49,12 +49,12 @@ export const ChecklistNodeGroup = memo(({
           const content = (
             <>
               <ItemIndicator />
-              <span className="min-w-0 grow truncate text-xs leading-4 text-text-warning">
+              <span className="min-w-0 grow truncate text-xs/4 text-text-warning">
                 {sub.message}
               </span>
               {goToEnabled && (
                 <div className="flex shrink-0 items-center gap-0.5 pr-0.5 opacity-0 transition-opacity duration-150 group-hover/item:opacity-100">
-                  <span className="text-xs leading-4 font-medium whitespace-nowrap text-text-accent">
+                  <span className="text-xs/4 font-medium whitespace-nowrap text-text-accent">
                     {t('panel.goToFix', { ns: 'workflow' })}
                   </span>
                   <span className="i-ri-arrow-right-line size-3.5 text-text-accent" aria-hidden="true" />
diff --git a/web/app/components/workflow/header/checklist/plugin-group.tsx b/web/app/components/workflow/header/checklist/plugin-group.tsx
index 91bc385595..4095389b40 100644
--- a/web/app/components/workflow/header/checklist/plugin-group.tsx
+++ b/web/app/components/workflow/header/checklist/plugin-group.tsx
@@ -59,7 +59,7 @@ export const ChecklistPluginGroup = memo(({
         <div className="flex size-5 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-icon-bg-midnight-solid shadow-xs">
           <span className="i-ri-download-line size-3.5 text-white" />
         </div>
-        <span className="min-w-0 grow truncate text-sm leading-5 font-medium text-text-primary">
+        <span className="min-w-0 grow truncate text-sm/5 font-medium text-text-primary">
           {t('nodes.common.pluginsNotInstalled', { ns: 'workflow', count: items.length })}
         </span>
         <PopoverClose
@@ -87,7 +87,7 @@ export const ChecklistPluginGroup = memo(({
               size="xs"
               toolIcon={item.toolIcon}
             />
-            <span className="min-w-0 grow truncate text-xs leading-4 text-text-warning">
+            <span className="min-w-0 grow truncate text-xs/4 text-text-warning">
               {item.title}
             </span>
           </div>
diff --git a/web/app/components/workflow/header/env-button.tsx b/web/app/components/workflow/header/env-button.tsx
index eec4af84c8..f7364a4788 100644
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@@ -33,7 +33,7 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
       disabled={disabled}
       onClick={handleClick}
     >
-      <Env className="h-4 w-4 text-components-button-secondary-text" />
+      <Env className="size-4 text-components-button-secondary-text" />
     </Button>
   )
 }
diff --git a/web/app/components/workflow/header/global-variable-button.tsx b/web/app/components/workflow/header/global-variable-button.tsx
index f42677a3df..14fa827147 100644
--- a/web/app/components/workflow/header/global-variable-button.tsx
+++ b/web/app/components/workflow/header/global-variable-button.tsx
@@ -33,7 +33,7 @@ const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
       onClick={handleClick}
       variant="ghost"
     >
-      <GlobalVariable className="h-4 w-4 text-components-button-secondary-text" />
+      <GlobalVariable className="size-4 text-components-button-secondary-text" />
     </Button>
   )
 }
diff --git a/web/app/components/workflow/header/header-in-restoring.tsx b/web/app/components/workflow/header/header-in-restoring.tsx
index 8ce061eb2a..a457c69652 100644
--- a/web/app/components/workflow/header/header-in-restoring.tsx
+++ b/web/app/components/workflow/header/header-in-restoring.tsx
@@ -163,7 +163,7 @@ const HeaderInRestoring = ({
           )}
         >
           <div className="flex items-center gap-x-0.5">
-            <RiHistoryLine className="h-4 w-4" />
+            <RiHistoryLine className="size-4" />
             <span className="px-0.5">{t('common.exitVersions', { ns: 'workflow' })}</span>
           </div>
         </Button>
diff --git a/web/app/components/workflow/header/header-in-view-history.tsx b/web/app/components/workflow/header/header-in-view-history.tsx
index 88077002c7..2448388ef5 100644
--- a/web/app/components/workflow/header/header-in-view-history.tsx
+++ b/web/app/components/workflow/header/header-in-view-history.tsx
@@ -45,7 +45,7 @@ const HeaderInHistory = ({
           variant="primary"
           onClick={handleGoBackToEdit}
         >
-          <ArrowNarrowLeft className="mr-1 h-4 w-4" />
+          <ArrowNarrowLeft className="mr-1 size-4" />
           {t('common.goBackToEdit', { ns: 'workflow' })}
         </Button>
       </div>
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
index 93e9d1fa85..efef386819 100644
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -181,7 +181,7 @@ const OnlineUsers = () => {
                       +
                       {remainingCount}
                     </div>
-                    <ChevronDownIcon className="h-3 w-3 cursor-pointer text-gray-500" />
+                    <ChevronDownIcon className="size-3 cursor-pointer text-gray-500" />
                   </div>
                 )}
               />
diff --git a/web/app/components/workflow/header/run-and-history.tsx b/web/app/components/workflow/header/run-and-history.tsx
index 89fcdadb4b..c2e9cfceb9 100644
--- a/web/app/components/workflow/header/run-and-history.tsx
+++ b/web/app/components/workflow/header/run-and-history.tsx
@@ -25,7 +25,7 @@ const PreviewMode = memo(() => {
       )}
       onClick={() => handleWorkflowStartRunInChatflow()}
     >
-      <RiPlayLargeLine className="mr-1 h-4 w-4" />
+      <RiPlayLargeLine className="mr-1 size-4" />
       {t('common.debugAndPreview', { ns: 'workflow' })}
     </div>
   )
diff --git a/web/app/components/workflow/header/running-title.tsx b/web/app/components/workflow/header/running-title.tsx
index e3e2ebab75..b46dea2e16 100644
--- a/web/app/components/workflow/header/running-title.tsx
+++ b/web/app/components/workflow/header/running-title.tsx
@@ -12,7 +12,7 @@ const RunningTitle = () => {
 
   return (
     <div className="flex h-[18px] items-center text-xs text-gray-500">
-      <ClockPlay className="mr-1 h-3 w-3 text-gray-500" />
+      <ClockPlay className="mr-1 size-3 text-gray-500" />
       <span>{isChatMode ? `Test Chat${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}` : `Test Run${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}`}</span>
       <span className="mx-1">·</span>
       <span className="ml-1 flex h-[18px] items-center rounded-[5px] border border-indigo-300 bg-white/48 px-1 text-[10px] font-semibold text-indigo-600 uppercase">
diff --git a/web/app/components/workflow/header/test-run-menu-helpers.tsx b/web/app/components/workflow/header/test-run-menu-helpers.tsx
index dc2b5acd03..cebe3cd392 100644
--- a/web/app/components/workflow/header/test-run-menu-helpers.tsx
+++ b/web/app/components/workflow/header/test-run-menu-helpers.tsx
@@ -33,7 +33,7 @@ export const OptionRow = ({
       onClick={() => onSelect(option)}
     >
       <div className="flex min-w-0 flex-1 items-center">
-        <div className="flex h-6 w-6 shrink-0 items-center justify-center">
+        <div className="flex size-6 shrink-0 items-center justify-center">
           {option.icon}
         </div>
         <span className="ml-2 truncate">{option.name}</span>
diff --git a/web/app/components/workflow/header/undo-redo.tsx b/web/app/components/workflow/header/undo-redo.tsx
index c8e4c41fe2..af1c649c9d 100644
--- a/web/app/components/workflow/header/undo-redo.tsx
+++ b/web/app/components/workflow/header/undo-redo.tsx
@@ -35,12 +35,12 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
           data-tooltip-id="workflow.undo"
           disabled={nodesReadOnly || buttonsDisabled.undo}
           className={
-            cn('flex h-8 w-8 cursor-pointer items-center rounded-md px-1.5 system-sm-medium text-text-tertiary select-none hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.undo)
+            cn('flex size-8 cursor-pointer items-center rounded-md px-1.5 system-sm-medium text-text-tertiary select-none hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.undo)
             && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
           }
           onClick={handleUndo}
         >
-          <span className="i-ri-arrow-go-back-line h-4 w-4" />
+          <span className="i-ri-arrow-go-back-line size-4" />
         </button>
       </TipPopup>
       <TipPopup title={t('common.redo', { ns: 'workflow' })!} shortcut="workflow.redo">
@@ -50,12 +50,12 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
           data-tooltip-id="workflow.redo"
           disabled={nodesReadOnly || buttonsDisabled.redo}
           className={
-            cn('flex h-8 w-8 cursor-pointer items-center rounded-md px-1.5 system-sm-medium text-text-tertiary select-none hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.redo)
+            cn('flex size-8 cursor-pointer items-center rounded-md px-1.5 system-sm-medium text-text-tertiary select-none hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.redo)
             && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
           }
           onClick={handleRedo}
         >
-          <span className="i-ri-arrow-go-forward-fill h-4 w-4" />
+          <span className="i-ri-arrow-go-forward-fill size-4" />
         </button>
       </TipPopup>
       <Divider type="vertical" className="mx-0.5 h-3.5" />
diff --git a/web/app/components/workflow/header/version-history-button.tsx b/web/app/components/workflow/header/version-history-button.tsx
index 2c420cab50..24f895b8b4 100644
--- a/web/app/components/workflow/header/version-history-button.tsx
+++ b/web/app/components/workflow/header/version-history-button.tsx
@@ -54,7 +54,7 @@ const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
             )}
             onClick={handleViewVersionHistory}
           >
-            <span className="i-ri-history-line h-4 w-4 text-components-button-secondary-text" />
+            <span className="i-ri-history-line size-4 text-components-button-secondary-text" />
           </Button>
         )}
       />
diff --git a/web/app/components/workflow/header/view-history.tsx b/web/app/components/workflow/header/view-history.tsx
index bde9f370c9..1e23b3b10a 100644
--- a/web/app/components/workflow/header/view-history.tsx
+++ b/web/app/components/workflow/header/view-history.tsx
@@ -82,7 +82,7 @@ const ViewHistory = ({
                       open && 'bg-components-button-secondary-bg-hover',
                     )}
                   >
-                    <span className="mr-1 i-custom-vender-line-time-clock-play h-4 w-4" />
+                    <span className="mr-1 i-custom-vender-line-time-clock-play size-4" />
                     {t('common.showRunHistory', { ns: 'workflow' })}
                   </button>
                 )}
@@ -98,12 +98,12 @@ const ViewHistory = ({
                       <button
                         type="button"
                         aria-label={t('common.viewRunHistory', { ns: 'workflow' })}
-                        className={cn('group flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
+                        className={cn('group flex size-7 cursor-pointer items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
                         onClick={() => {
                           onClearLogAndMessageModal?.()
                         }}
                       >
-                        <span className={cn('i-custom-vender-line-time-clock-play', 'h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} />
+                        <span className={cn('i-custom-vender-line-time-clock-play', 'size-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} />
                       </button>
                     )}
                   />
@@ -130,13 +130,13 @@ const ViewHistory = ({
               <button
                 type="button"
                 aria-label={t('operation.close', { ns: 'common' })}
-                className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center"
+                className="flex size-6 shrink-0 cursor-pointer items-center justify-center"
                 onClick={() => {
                   onClearLogAndMessageModal?.()
                   setOpen(false)
                 }}
               >
-                <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+                <span className="i-ri-close-line size-4 text-text-tertiary" />
               </button>
             </div>
             {
@@ -152,7 +152,7 @@ const ViewHistory = ({
                   {
                     !data?.data.length && (
                       <div className="py-12">
-                        <span className="mx-auto mb-2 i-custom-vender-line-time-clock-play-slim h-8 w-8 text-text-quaternary" />
+                        <span className="mx-auto mb-2 i-custom-vender-line-time-clock-play-slim size-8 text-text-quaternary" />
                         <div className="text-center text-[13px] text-text-quaternary">
                           {t('common.notRunning', { ns: 'workflow' })}
                         </div>
diff --git a/web/app/components/workflow/header/view-workflow-history.tsx b/web/app/components/workflow/header/view-workflow-history.tsx
index 849fff9266..8c8649e930 100644
--- a/web/app/components/workflow/header/view-workflow-history.tsx
+++ b/web/app/components/workflow/header/view-workflow-history.tsx
@@ -157,7 +157,7 @@ const ViewWorkflowHistory = () => {
               aria-label={t('changeHistory.title', { ns: 'workflow' })}
               disabled={nodesReadOnly}
               className={
-                cn('box-border inline-flex h-8 max-h-8 min-h-8 w-8 max-w-8 min-w-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md p-0 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', open && 'bg-state-accent-active text-text-accent', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
+                cn('box-border inline-flex size-8 max-h-8 min-h-8 max-w-8 min-w-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md p-0 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', open && 'bg-state-accent-active text-text-accent', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
               }
               onClick={() => {
                 if (nodesReadOnly)
@@ -169,8 +169,8 @@ const ViewWorkflowHistory = () => {
               <TipPopup
                 title={t('changeHistory.title', { ns: 'workflow' })}
               >
-                <span className="flex h-full w-full shrink-0 items-center justify-center">
-                  <span className="i-ri-history-line h-4 w-4 shrink-0" />
+                <span className="flex size-full shrink-0 items-center justify-center">
+                  <span className="i-ri-history-line size-4 shrink-0" />
                 </span>
               </TipPopup>
             </button>
@@ -190,9 +190,9 @@ const ViewWorkflowHistory = () => {
                   <button
                     type="button"
                     aria-label={t('operation.close', { ns: 'common' })}
-                    className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center"
+                    className="flex size-6 shrink-0 cursor-pointer items-center justify-center"
                   >
-                    <RiCloseLine className="h-4 w-4 text-text-secondary" />
+                    <RiCloseLine className="size-4 text-text-secondary" />
                   </button>
                 )}
                 onClick={() => {
@@ -210,7 +210,7 @@ const ViewWorkflowHistory = () => {
               {
                 !calculateChangeList.statesCount && (
                   <div className="py-12">
-                    <RiHistoryLine className="mx-auto mb-2 h-8 w-8 text-text-tertiary" />
+                    <RiHistoryLine className="mx-auto mb-2 size-8 text-text-tertiary" />
                     <div className="text-center text-[13px] text-text-tertiary">
                       {t('changeHistory.placeholder', { ns: 'workflow' })}
                     </div>
diff --git a/web/app/components/workflow/hooks/use-dynamic-test-run-options.tsx b/web/app/components/workflow/hooks/use-dynamic-test-run-options.tsx
index 4510cf3145..4620c8149d 100644
--- a/web/app/components/workflow/hooks/use-dynamic-test-run-options.tsx
+++ b/web/app/components/workflow/hooks/use-dynamic-test-run-options.tsx
@@ -132,7 +132,7 @@ export const useDynamicTestRunOptions = (): TestRunOptions => {
           name: t('common.runAllTriggers', { ns: 'workflow' }),
           icon: (
             <div className="flex h-6 w-6 items-center justify-center rounded-lg border-[0.5px] border-white/2 bg-util-colors-purple-purple-500 text-white shadow-md">
-              <TriggerAll className="h-4.5 w-4.5" />
+              <TriggerAll className="size-4.5" />
             </div>
           ),
           relatedNodeIds: triggerNodeIds,
diff --git a/web/app/components/workflow/node-actions-menu/index.tsx b/web/app/components/workflow/node-actions-menu/index.tsx
index 3f813b93ba..2fd3a7cc5c 100644
--- a/web/app/components/workflow/node-actions-menu/index.tsx
+++ b/web/app/components/workflow/node-actions-menu/index.tsx
@@ -50,12 +50,12 @@ export function NodeActionsDropdown({
             type="button"
             aria-label={t('operation.more', { ns: 'common' })}
             className={cn(
-              'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-text-tertiary hover:bg-state-base-hover',
+              'flex size-6 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-text-tertiary hover:bg-state-base-hover',
               'focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden data-popup-open:bg-state-base-hover',
               triggerClassName,
             )}
           >
-            <span aria-hidden className="i-ri-more-fill h-4 w-4" />
+            <span aria-hidden className="i-ri-more-fill size-4" />
           </button>
         )}
       />
diff --git a/web/app/components/workflow/nodes/_base/components/add-button.tsx b/web/app/components/workflow/nodes/_base/components/add-button.tsx
index d64ab5d098..3a1ae22e1d 100644
--- a/web/app/components/workflow/nodes/_base/components/add-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-button.tsx
@@ -25,7 +25,7 @@ const AddButton: FC<Props> = ({
       size="medium"
       onClick={onClick}
     >
-      <RiAddLine className="mr-1 h-3.5 w-3.5" />
+      <RiAddLine className="mr-1 size-3.5" />
       <div>{text}</div>
     </Button>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
index b8ddfef0b4..a01cc739f8 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@@ -167,7 +167,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
         render={(
           <div className="flex h-8 w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 select-none hover:bg-state-base-hover-alt">
             {icon && (
-              <div className="flex h-6 w-6 items-center justify-center">
+              <div className="flex size-6 items-center justify-center">
                 <img
                   src={icon}
                   width={20}
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
index 72fffd3c86..adaa9375b9 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@@ -255,7 +255,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
             )
           : (
               <ListEmpty
-                icon={<Agent className="h-5 w-5 shrink-0 text-text-accent" />}
+                icon={<Agent className="size-5 shrink-0 text-text-accent" />}
                 title={t('nodes.agent.strategy.configureTip', { ns: 'workflow' })}
                 description={(
                   <div className="text-xs text-text-tertiary">
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
index e38247f9ce..c88859f4ab 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
@@ -27,7 +27,7 @@ const BoolInput: FC<Props> = ({
   return (
     <label className="flex h-6 items-center gap-2">
       <Checkbox
-        className="h-4! w-4!"
+        className="size-4!"
         checked={!!value}
         onCheckedChange={handleChange}
         disabled={readonly}
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index e13b769176..6411fd5730 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -89,8 +89,8 @@ const FormItem: FC<Props> = ({
             </div>
           )}
           <div className="flex items-center text-primary-600">
-            {!isChatVar && <Variable02 className="h-3.5 w-3.5" />}
-            {isChatVar && <BubbleX className="h-3.5 w-3.5 text-util-colors-teal-teal-700" />}
+            {!isChatVar && <Variable02 className="size-3.5" />}
+            {isChatVar && <BubbleX className="size-3.5 text-util-colors-teal-teal-700" />}
             <div className={cn('ml-0.5 max-w-[150px] truncate text-xs font-medium', isChatVar && 'text-text-secondary')} title={variable}>
               {variable}
             </div>
@@ -319,7 +319,7 @@ const FormItem: FC<Props> = ({
                       ? (
                           <RiDeleteBinLine
                             onClick={handleArrayItemRemove(index)}
-                            className="mr-1 h-3.5 w-3.5 cursor-pointer text-text-tertiary"
+                            className="mr-1 size-3.5 cursor-pointer text-text-tertiary"
                           />
                         )
                       : undefined
@@ -354,7 +354,7 @@ const FormItem: FC<Props> = ({
                       ? (
                           <RiDeleteBinLine
                             onClick={handleArrayItemRemove(index)}
-                            className="mr-1 h-3.5 w-3.5 cursor-pointer text-text-tertiary"
+                            className="mr-1 size-3.5 cursor-pointer text-text-tertiary"
                           />
                         )
                       : undefined
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
index e073011321..1aaf0e9c24 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
@@ -88,7 +88,7 @@ const Form: FC<Props> = ({
               className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
               onClick={handleAddContext}
             >
-              <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+              <span className="i-ri-add-line size-4 text-text-tertiary" aria-hidden="true" />
             </button>
           )}
         </div>
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/panel-wrap.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/panel-wrap.tsx
index f4472c63f1..69d4e172dd 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/panel-wrap.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/panel-wrap.tsx
@@ -35,7 +35,7 @@ const PanelWrap: FC<Props> = ({
               onHide()
             }}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+            <RiCloseLine className="size-4 text-text-tertiary" />
           </div>
         </div>
         {children}
diff --git a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
index 24faccb110..8ab79d0b6d 100644
--- a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
@@ -40,7 +40,7 @@ const CodeGenerateBtn: FC<Props> = ({
         className="hover:bg-[#155EFF]/8"
         onClick={showAutomaticTrue}
       >
-        <Generator className="h-4 w-4 text-primary-600" />
+        <Generator className="size-4 text-primary-600" />
       </ActionButton>
       {showAutomatic && (
         <GetCodeGeneratorResModal
diff --git a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
index 7f29d92ebd..b745ac2859 100644
--- a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
@@ -32,7 +32,7 @@ const Collapse = ({
     return (
       <ArrowDownRoundFill
         className={cn(
-          'h-4 w-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
+          'size-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
           collapsedMerged && 'rotate-270',
         )}
       />
@@ -52,7 +52,7 @@ const Collapse = ({
         >
           {typeof trigger === 'function' ? trigger(collapseIcon) : trigger}
           {!hideCollapseIcon && (
-            <div className="h-4 w-4 shrink-0">
+            <div className="size-4 shrink-0">
               {collapseIcon}
             </div>
           )}
diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
index 9c4799a23d..8d7f1cb94b 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -108,10 +108,10 @@ const Base: FC<Props> = ({
             <ActionButton className="ml-1" onClick={handleCopy}>
               {!isCopied
                 ? (
-                    <Copy className="h-4 w-4 cursor-pointer" />
+                    <Copy className="size-4 cursor-pointer" />
                   )
                 : (
-                    <CopyCheck className="h-4 w-4" />
+                    <CopyCheck className="size-4" />
                   )}
             </ActionButton>
             <div className="ml-1">
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip.tsx
index dda8ddfdc1..b4b6da47e1 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip.tsx
@@ -33,7 +33,7 @@ const ErrorHandleTip = ({
         }}
       >
       </div>
-      <RiAlertFill className="mr-1 h-4 w-4 shrink-0 text-text-warning-secondary" />
+      <RiAlertFill className="mr-1 size-4 shrink-0 text-text-warning-secondary" />
       <div className="grow system-xs-medium text-text-primary">
         {text}
       </div>
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
index c83057a6c0..f868e388b2 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
@@ -54,7 +54,7 @@ const ErrorHandleTypeSelector = ({
         )}
       >
         {selectedOption?.label}
-        <RiArrowDownSLine className="h-3.5 w-3.5" />
+        <RiArrowDownSLine className="size-3.5" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-end"
@@ -79,7 +79,7 @@ const ErrorHandleTypeSelector = ({
                 <div className="mr-1 w-4 shrink-0">
                   {
                     value === option.value && (
-                      <RiCheckLine className="h-4 w-4 text-text-accent" />
+                      <RiCheckLine className="size-4 text-text-accent" />
                     )
                   }
                 </div>
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
index f89f6d30fa..61d8d8673f 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
@@ -10,7 +10,7 @@ const FailBranchCard = () => {
     <div className="px-4 pt-2">
       <div className="rounded-[10px] bg-workflow-process-bg p-4">
         <div className="mb-2 flex h-8 w-8 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg">
-          <RiMindMap className="h-5 w-5 text-text-tertiary" />
+          <RiMindMap className="size-5 text-text-tertiary" />
         </div>
         <div className="mb-1 system-sm-medium text-text-secondary">
           {t('nodes.common.errorHandle.failBranch.customize', { ns: 'workflow' })}
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index 11bb778ce5..d17e05c258 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -58,7 +58,7 @@ const Field: FC<Props> = ({
         <div className="flex h-6 items-center">
           <div className={cn('relative', isSubTitle ? 'system-xs-medium-uppercase text-text-tertiary' : 'system-sm-semibold-uppercase text-text-secondary')}>
             {warningDot && (
-              <span className="absolute top-1/2 -left-[9px] size-[5px] -translate-y-1/2 rounded-full bg-text-warning-secondary" />
+              <span className="absolute top-1/2 left-[-9px] size-[5px] -translate-y-1/2 rounded-full bg-text-warning-secondary" />
             )}
             {title}
             {' '}
@@ -73,7 +73,7 @@ const Field: FC<Props> = ({
         <div className="flex">
           {!!operations && <div>{operations}</div>}
           {supportFold && (
-            <RiArrowDownSLine className="h-4 w-4 cursor-pointer text-text-tertiary transition-transform" style={{ transform: fold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
+            <RiArrowDownSLine className="size-4 cursor-pointer text-text-tertiary transition-transform" style={{ transform: fold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
           )}
         </div>
       </div>
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-item.sections.tsx b/web/app/components/workflow/nodes/_base/components/form-input-item.sections.tsx
index 896250508c..3df4b43a8c 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-item.sections.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-item.sections.tsx
@@ -26,7 +26,7 @@ type MultiSelectFieldProps = {
 }
 
 const LoadingIndicator = () => (
-  <RiLoader4Line className="mr-1 h-3.5 w-3.5 shrink-0 animate-spin text-text-secondary motion-reduce:animate-none" aria-hidden="true" />
+  <RiLoader4Line className="mr-1 size-3.5 shrink-0 animate-spin text-text-secondary motion-reduce:animate-none" aria-hidden="true" />
 )
 
 export const MultiSelectField: FC<MultiSelectFieldProps> = ({
@@ -75,7 +75,7 @@ export const MultiSelectField: FC<MultiSelectFieldProps> = ({
             >
               <div className="flex min-w-0 items-center">
                 {item.icon && (
-                  <img src={item.icon} alt="" width={16} height={16} className="mr-2 h-4 w-4 shrink-0" />
+                  <img src={item.icon} alt="" width={16} height={16} className="mr-2 size-4 shrink-0" />
                 )}
                 <SelectItemText>
                   {item.name}
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
index 9c3c50bba2..ad4ff29ec0 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
@@ -333,7 +333,7 @@ const FormInputItem: FC<Props> = ({
             {staticSelectItems.map(item => (
               <SelectItem key={item.value} value={item.value}>
                 {item.icon && (
-                  <img src={item.icon} alt="" className="mr-2 h-4 w-4 shrink-0" />
+                  <img src={item.icon} alt="" className="mr-2 size-4 shrink-0" />
                 )}
                 <SelectItemText>{item.name}</SelectItemText>
                 <SelectItemIndicator />
@@ -365,7 +365,7 @@ const FormInputItem: FC<Props> = ({
             {dynamicSelectItems.map(item => (
               <SelectItem key={item.value} value={item.value}>
                 {item.icon && (
-                  <img src={item.icon} alt="" className="mr-2 h-4 w-4 shrink-0" />
+                  <img src={item.icon} alt="" className="mr-2 size-4 shrink-0" />
                 )}
                 <SelectItemText>{item.name}</SelectItemText>
                 <SelectItemIndicator />
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx b/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
index 01f83e2de9..6ef12a0eae 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
@@ -28,7 +28,7 @@ const FormInputTypeSwitch: FC<Props> = ({
               className="cursor-pointer rounded-lg bg-components-segmented-control-item-active-bg px-2.5 py-1.5 text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg"
               onClick={() => onChange(VarType.variable)}
             >
-              <Variable02 className="h-4 w-4" />
+              <Variable02 className="size-4" />
             </button>
           )
         : (
@@ -41,7 +41,7 @@ const FormInputTypeSwitch: FC<Props> = ({
                     className="cursor-pointer rounded-lg px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover"
                     onClick={() => onChange(VarType.variable)}
                   >
-                    <Variable02 className="h-4 w-4" />
+                    <Variable02 className="size-4" />
                   </button>
                 )}
               />
@@ -56,7 +56,7 @@ const FormInputTypeSwitch: FC<Props> = ({
               className="cursor-pointer rounded-lg bg-components-segmented-control-item-active-bg px-2.5 py-1.5 text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg"
               onClick={() => onChange(VarType.constant)}
             >
-              <span aria-hidden className="i-ri-edit-line h-4 w-4" />
+              <span aria-hidden className="i-ri-edit-line size-4" />
             </button>
           )
         : (
@@ -69,7 +69,7 @@ const FormInputTypeSwitch: FC<Props> = ({
                     className="cursor-pointer rounded-lg px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover"
                     onClick={() => onChange(VarType.constant)}
                   >
-                    <span aria-hidden className="i-ri-edit-line h-4 w-4" />
+                    <span aria-hidden className="i-ri-edit-line size-4" />
                   </button>
                 )}
               />
diff --git a/web/app/components/workflow/nodes/_base/components/help-link.tsx b/web/app/components/workflow/nodes/_base/components/help-link.tsx
index 2f6e5fa4b9..ffa54f1c5b 100644
--- a/web/app/components/workflow/nodes/_base/components/help-link.tsx
+++ b/web/app/components/workflow/nodes/_base/components/help-link.tsx
@@ -27,9 +27,9 @@ const HelpLink = ({
             href={link}
             target="_blank"
             rel="noopener noreferrer"
-            className="mr-1 flex h-6 w-6 items-center justify-center rounded-md hover:bg-state-base-hover"
+            className="mr-1 flex size-6 items-center justify-center rounded-md hover:bg-state-base-hover"
           >
-            <span aria-hidden className="i-ri-book-open-line h-4 w-4 text-gray-500" />
+            <span aria-hidden className="i-ri-book-open-line size-4 text-gray-500" />
           </a>
         )}
       />
diff --git a/web/app/components/workflow/nodes/_base/components/input-field/add.tsx b/web/app/components/workflow/nodes/_base/components/input-field/add.tsx
index fcefa8da57..aca1f4c0b4 100644
--- a/web/app/components/workflow/nodes/_base/components/input-field/add.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-field/add.tsx
@@ -4,7 +4,7 @@ import ActionButton from '@/app/components/base/action-button'
 const Add = () => {
   return (
     <ActionButton>
-      <RiAddLine className="h-4 w-4" />
+      <RiAddLine className="size-4" />
     </ActionButton>
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
index 930f40f76f..c0d79138f5 100644
--- a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
@@ -123,7 +123,7 @@ const Editor: FC<Props> = ({
               <TooltipTrigger
                 render={(
                   <div className="cursor-pointer rounded-[5px] border-[0.5px] border-divider-regular bg-components-badge-white-to-dark p-0.5 shadow-lg">
-                    <Variable02 className="h-3.5 w-3.5 text-components-button-secondary-accent-text" />
+                    <Variable02 className="size-3.5 text-components-button-secondary-accent-text" />
                   </div>
                 )}
               />
diff --git a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
index 070b932605..5c5874f62b 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
@@ -45,7 +45,7 @@ export const FieldTitle = memo(({
         <div className="flex items-center system-sm-semibold-uppercase text-text-secondary">
           <span className="relative">
             {warningDot && (
-              <span className="absolute top-1/2 -left-[9px] size-[5px] -translate-y-1/2 rounded-full bg-text-warning-secondary" />
+              <span className="absolute top-1/2 left-[-9px] size-[5px] -translate-y-1/2 rounded-full bg-text-warning-secondary" />
             )}
             {title}
           </span>
@@ -54,7 +54,7 @@ export const FieldTitle = memo(({
               <span
                 aria-hidden
                 className={cn(
-                  'i-custom-vender-solid-general-arrow-down-round-fill h-4 w-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
+                  'i-custom-vender-solid-general-arrow-down-round-fill size-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
                   collapsedMerged && 'rotate-270',
                 )}
               />
diff --git a/web/app/components/workflow/nodes/_base/components/memory-config.tsx b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
index ed193490a5..0903ac0111 100644
--- a/web/app/components/workflow/nodes/_base/components/memory-config.tsx
+++ b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
@@ -183,7 +183,7 @@ const MemoryConfig: FC<Props> = ({
             </div>
             {canSetRoleName && (
               <div className="mt-4">
-                <div className="text-xs leading-6 font-medium text-text-tertiary uppercase">{t(`${i18nPrefix}.conversationRoleName`, { ns: 'workflow' })}</div>
+                <div className="text-xs/6 font-medium text-text-tertiary uppercase">{t(`${i18nPrefix}.conversationRoleName`, { ns: 'workflow' })}</div>
                 <div className="mt-1 space-y-2">
                   <RoleItem
                     readonly={readonly}
diff --git a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx
index 4af622bb46..54b21e81dd 100644
--- a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx
+++ b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx
@@ -19,7 +19,7 @@ const Placeholder = () => {
 
   return (
     <div
-      className="pointer-events-auto flex h-full w-full cursor-text items-center px-2"
+      className="pointer-events-auto flex size-full cursor-text items-center px-2"
       onClick={(e) => {
         e.stopPropagation()
         handleInsert('')
@@ -27,7 +27,7 @@ const Placeholder = () => {
     >
       <div className="flex grow items-center">
         {t('nodes.tool.insertPlaceholder1', { ns: 'workflow' })}
-        <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="mx-0.5 flex size-4 items-center justify-center rounded-sm bg-components-kbd-bg-gray system-kbd text-text-placeholder">/</div>
         <div
           className="cursor-pointer system-sm-regular text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
           onMouseDown={((e) => {
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
index cb0d2410d5..87e092402f 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
@@ -76,7 +76,7 @@ const Add = ({
         `}
       >
         <div className="mr-1.5 flex h-5 w-5 items-center justify-center rounded-[5px] bg-background-default-dimmed">
-          <RiAddLine className="h-3 w-3" />
+          <RiAddLine className="size-3" />
         </div>
         <div className="flex items-center uppercase">
           {tip}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
index b6681695fd..c24d7aa8f4 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
@@ -91,8 +91,8 @@ const Operator = ({
     >
       <DropdownMenuTrigger
         render={(
-          <Button className="h-6 w-6 p-0" aria-label={t('common.moreActions', { ns: 'workflow' })}>
-            <span aria-hidden className="i-ri-more-fill h-4 w-4" />
+          <Button className="size-6 p-0" aria-label={t('common.moreActions', { ns: 'workflow' })}>
+            <span aria-hidden className="i-ri-more-fill size-4" />
           </Button>
         )}
       />
diff --git a/web/app/components/workflow/nodes/_base/components/node-control.tsx b/web/app/components/workflow/nodes/_base/components/node-control.tsx
index 5731ab27a7..2932e8d599 100644
--- a/web/app/components/workflow/nodes/_base/components/node-control.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-control.tsx
@@ -39,7 +39,7 @@ const NodeControl: FC<NodeControlProps> = ({
         'invisible absolute -top-7 right-0 flex h-7 pb-1',
         !pluginInstallLocked && 'group-hover:visible',
         data.selected && 'visible',
-        'has-[[data-popup-open]]:visible',
+        'has-data-popup-open:visible',
       )}
     >
       <div
@@ -52,7 +52,7 @@ const NodeControl: FC<NodeControlProps> = ({
             <button
               type="button"
               aria-label={isSingleRunning ? t('debug.variableInspect.trigger.stop', { ns: 'workflow' }) : t('panel.runThisStep', { ns: 'workflow' })}
-              className={`flex h-5 w-5 items-center justify-center rounded-md ${isSingleRunning && 'cursor-pointer hover:bg-state-base-hover'}`}
+              className={`flex size-5 items-center justify-center rounded-md ${isSingleRunning && 'cursor-pointer hover:bg-state-base-hover'}`}
               onClick={() => {
                 const action = isSingleRunning ? 'stop' : 'run'
 
@@ -67,11 +67,11 @@ const NodeControl: FC<NodeControlProps> = ({
             >
               {
                 isSingleRunning
-                  ? <Stop className="h-3 w-3" />
+                  ? <Stop className="size-3" />
                   : (
                       <Tooltip>
                         <TooltipTrigger
-                          render={<span className="i-ri-play-large-line h-3 w-3" />}
+                          render={<span className="i-ri-play-large-line size-3" />}
                         />
                         <TooltipContent>
                           {t('panel.runThisStep', { ns: 'workflow' })}
diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
index 58597a1670..02e5294029 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -88,7 +88,7 @@ export const NodeTargetHandle = memo(({
         type="target"
         position={Position.Left}
         className={cn(
-          'z-1 h-4! w-4! rounded-none! border-none! bg-transparent! outline-hidden!',
+          'z-1 size-4! rounded-none! border-none! bg-transparent! outline-hidden!',
           'after:absolute after:top-1 after:left-1.5 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
           'transition-all hover:scale-125',
           data._runningStatus === NodeRunningStatus.Succeeded && 'after:bg-workflow-link-line-success-handle',
@@ -199,7 +199,7 @@ export const NodeSourceHandle = memo(({
       type="source"
       position={Position.Right}
       className={cn(
-        'group/handle z-1 h-4! w-4! rounded-none! border-none! bg-transparent! outline-hidden!',
+        'group/handle z-1 size-4! rounded-none! border-none! bg-transparent! outline-hidden!',
         'after:absolute after:top-1 after:right-1.5 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
         'transition-all hover:scale-125',
         data._runningStatus === NodeRunningStatus.Succeeded && 'after:bg-workflow-link-line-success-handle',
diff --git a/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx b/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
index 4ee20b5d11..d79897519f 100644
--- a/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
@@ -18,22 +18,22 @@ const NodeStatusIcon = ({
     <>
       {
         status === 'succeeded' && (
-          <RiCheckboxCircleFill className={cn('h-4 w-4 shrink-0 text-text-success', className)} />
+          <RiCheckboxCircleFill className={cn('size-4 shrink-0 text-text-success', className)} />
         )
       }
       {
         status === 'failed' && (
-          <RiErrorWarningLine className={cn('h-4 w-4 shrink-0 text-text-warning', className)} />
+          <RiErrorWarningLine className={cn('size-4 shrink-0 text-text-warning', className)} />
         )
       }
       {
         (status === 'stopped' || status === 'exception') && (
-          <RiAlertFill className={cn('h-4 w-4 shrink-0 text-text-warning-secondary', className)} />
+          <RiAlertFill className={cn('size-4 shrink-0 text-text-warning-secondary', className)} />
         )
       }
       {
         status === 'running' && (
-          <RiLoader2Line className={cn('h-4 w-4 shrink-0 animate-spin text-text-accent', className)} />
+          <RiLoader2Line className={cn('size-4 shrink-0 animate-spin text-text-accent', className)} />
         )
       }
     </>
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index 2d9bd5669f..880765a9ac 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -161,7 +161,7 @@ const Editor: FC<Props> = ({
         <div className={cn(isFocus ? 'bg-background-default' : 'bg-components-input-bg-normal', isExpand && 'flex h-full flex-col', 'rounded-lg', containerClassName)}>
           <div className={cn('flex items-center justify-between pt-1 pr-2 pl-3', headerClassName)}>
             <div className="flex gap-2">
-              <div className={cn('text-xs leading-4 font-semibold text-text-secondary uppercase', titleClassName)}>
+              <div className={cn('text-xs/4 font-semibold text-text-secondary uppercase', titleClassName)}>
                 {title}
                 {' '}
                 {required && <span className="text-text-destructive">*</span>}
@@ -174,9 +174,9 @@ const Editor: FC<Props> = ({
                     render={(
                       <button
                         type="button"
-                        className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm p-px outline-hidden hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
+                        className="flex size-4 shrink-0 items-center justify-center rounded-sm p-px outline-hidden hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
                       >
-                        <span aria-hidden className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary" />
+                        <span aria-hidden className="i-ri-question-line size-3.5 text-text-quaternary hover:text-text-tertiary" />
                       </button>
                     )}
                   />
@@ -199,7 +199,7 @@ const Editor: FC<Props> = ({
                 />
               )}
 
-              <div className="mr-2 ml-2 h-3 w-px bg-divider-regular"></div>
+              <div className="mx-2 h-3 w-px bg-divider-regular"></div>
               {/* Operations */}
               <div className="flex items-center space-x-[2px]">
                 {isSupportJinja && (
@@ -238,7 +238,7 @@ const Editor: FC<Props> = ({
                     <TooltipTrigger
                       render={(
                         <ActionButton onClick={handleInsertVariable}>
-                          <Variable02 className="h-4 w-4" />
+                          <Variable02 className="size-4" />
                         </ActionButton>
                       )}
                     />
@@ -249,18 +249,18 @@ const Editor: FC<Props> = ({
                 )}
                 {showRemove && (
                   <ActionButton onClick={onRemove}>
-                    <RiDeleteBinLine className="h-4 w-4" />
+                    <RiDeleteBinLine className="size-4" />
                   </ActionButton>
                 )}
                 {!isCopied
                   ? (
                       <ActionButton onClick={handleCopy}>
-                        <Copy className="h-4 w-4" />
+                        <Copy className="size-4" />
                       </ActionButton>
                     )
                   : (
                       <ActionButton>
-                        <CopyCheck className="h-4 w-4" />
+                        <CopyCheck className="size-4" />
                       </ActionButton>
                     )}
                 <ToggleExpandBtn isExpand={isExpand} onExpandChange={setIsExpand} />
diff --git a/web/app/components/workflow/nodes/_base/components/remove-button.tsx b/web/app/components/workflow/nodes/_base/components/remove-button.tsx
index f83187cfb7..03ca00fad4 100644
--- a/web/app/components/workflow/nodes/_base/components/remove-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/remove-button.tsx
@@ -14,7 +14,7 @@ const Remove: FC<Props> = ({
 }) => {
   return (
     <ActionButton size="l" className="group shrink-0 hover:bg-state-destructive-hover!" onClick={onClick}>
-      <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover:text-text-destructive" />
+      <RiDeleteBinLine className="size-4 text-text-tertiary group-hover:text-text-destructive" />
     </ActionButton>
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx b/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
index 4ff699fb88..c2ddf0f87f 100644
--- a/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
@@ -55,7 +55,7 @@ const RetryOnNode = ({
           {
             isRunning && (
               <>
-                <RiLoader2Line className="mr-1 h-3.5 w-3.5 animate-spin" />
+                <RiLoader2Line className="mr-1 size-3.5 animate-spin" />
                 {t('nodes.common.retry.retrying', { ns: 'workflow' })}
               </>
             )
@@ -63,7 +63,7 @@ const RetryOnNode = ({
           {
             isSuccessful && (
               <>
-                <RiCheckboxCircleFill className="mr-1 h-3.5 w-3.5" />
+                <RiCheckboxCircleFill className="mr-1 size-3.5" />
                 {t('nodes.common.retry.retrySuccessful', { ns: 'workflow' })}
               </>
             )
@@ -71,7 +71,7 @@ const RetryOnNode = ({
           {
             (isFailed || isException) && (
               <>
-                <RiAlertFill className="mr-1 h-3.5 w-3.5" />
+                <RiAlertFill className="mr-1 size-3.5" />
                 {t('nodes.common.retry.retryFailed', { ns: 'workflow' })}
               </>
             )
diff --git a/web/app/components/workflow/nodes/_base/components/selector.tsx b/web/app/components/workflow/nodes/_base/components/selector.tsx
index 52508acf85..db4883c051 100644
--- a/web/app/components/workflow/nodes/_base/components/selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/selector.tsx
@@ -69,7 +69,7 @@ const TypeSelector: FC<Props> = ({
               className={cn(showOption && 'bg-state-base-hover', 'flex h-5 cursor-pointer items-center rounded-md pr-0.5 pl-1 text-xs font-semibold text-text-secondary hover:bg-state-base-hover')}
             >
               <div className={cn('text-sm font-semibold', uppercase && 'uppercase', noValue && 'text-text-tertiary', triggerClassName)}>{!noValue ? item?.label : placeholder}</div>
-              {!readonly && <DropDownIcon className="h-3 w-3" />}
+              {!readonly && <DropDownIcon className="size-3" />}
             </div>
           )}
 
@@ -85,7 +85,7 @@ const TypeSelector: FC<Props> = ({
               className={cn(itemClassName, uppercase && 'uppercase', 'flex h-[30px] min-w-[44px] cursor-pointer items-center justify-between rounded-lg px-3 text-[13px] font-medium text-text-secondary hover:bg-state-base-hover')}
             >
               <div>{item.label}</div>
-              {showChecked && item.value === value && <Check className="h-4 w-4 text-text-primary" />}
+              {showChecked && item.value === value && <Check className="size-4 text-text-primary" />}
             </div>
           ))}
         </div>
diff --git a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
index 6a7d3ff246..1e80b3a366 100644
--- a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
@@ -46,7 +46,7 @@ const SupportVarInput: FC<Props> = ({
   return (
     <div
       className={
-        cn(wrapClassName, 'flex h-full w-full')
+        cn(wrapClassName, 'flex size-full')
       }
       onClick={onFocus}
     >
diff --git a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
index fc2b328950..4220d65be5 100644
--- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@@ -127,7 +127,7 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
               text={(
                 <>
                   <div>{pluginDetail.version}</div>
-                  <RiArrowLeftRightLine className="ml-1 h-3 w-3 text-text-tertiary" />
+                  <RiArrowLeftRightLine className="ml-1 size-3 text-text-tertiary" />
                 </>
               )}
               hasRedCornerMark={true}
diff --git a/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx b/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
index 73b221a912..8429d2a411 100644
--- a/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
+++ b/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
@@ -24,7 +24,7 @@ const ExpandBtn: FC<Props> = ({
   const Icon = isExpand ? RiCollapseDiagonalLine : RiExpandDiagonalLine
   return (
     <ActionButton onClick={handleToggle}>
-      <Icon className="h-4 w-4" />
+      <Icon className="size-4" />
     </ActionButton>
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/variable/manage-input-field.tsx b/web/app/components/workflow/nodes/_base/components/variable/manage-input-field.tsx
index 349bb7bd57..e573d09178 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/manage-input-field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/manage-input-field.tsx
@@ -16,7 +16,7 @@ const ManageInputField = ({
         className="flex h-8 grow cursor-pointer items-center px-3"
         onClick={onManage}
       >
-        <RiAddLine className="mr-1 h-4 w-4 text-text-tertiary" />
+        <RiAddLine className="mr-1 size-4 text-text-tertiary" />
         <div
           className="truncate system-xs-medium text-text-tertiary"
           title="Create user input field"
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
index 58f55c959d..dc0d6f7595 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
@@ -50,7 +50,7 @@ const Field: FC<Props> = ({
                 <TreeIndentLine depth={depth} />
                 {depth === MAX_DEPTH + 1
                   ? (
-                      <RiMoreFill className="h-3 w-3 text-text-tertiary" />
+                      <RiMoreFill className="size-3 text-text-tertiary" />
                     )
                   : (<div className={cn('h-6 w-0 grow truncate system-sm-medium leading-6 text-text-secondary', isHighlight && 'text-text-accent')}>{name}</div>)}
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
index c7e30adc59..0396a2e871 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
@@ -16,7 +16,7 @@ const TreeIndentLine: FC<Props> = ({
   return (
     <div className={cn('flex', className)}>
       {depthArray.map(d => (
-        <div key={d} className={cn('mr-2.5 ml-2.5 w-px bg-divider-regular')}></div>
+        <div key={d} className={cn('mx-2.5 w-px bg-divider-regular')}></div>
       ))}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
index 3b1aafcdf4..dc5b48946f 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
@@ -160,7 +160,7 @@ const VarList: FC<Props> = ({
             )}
             {canDrag && (
               <RiDraggable className={cn(
-                'handle absolute top-2.5 -left-4 hidden h-3 w-3 cursor-pointer text-text-quaternary',
+                'handle absolute top-2.5 -left-4 hidden size-3 cursor-pointer text-text-quaternary',
                 'group-hover:block',
               )}
               />
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
index 7d87d69ac5..d10874761e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
@@ -156,12 +156,12 @@ const VarReferencePickerTrigger: FC<Props> = ({
               )}
               {isShowAPart && (
                 <div className="flex items-center">
-                  <RiMoreLine className="h-3 w-3 text-text-secondary" />
+                  <RiMoreLine className="size-3 text-text-secondary" />
                   <Line3 className="mr-0.5 text-divider-deep"></Line3>
                 </div>
               )}
               <div className="flex items-center text-text-accent">
-                {isLoading && <RiLoader4Line className="h-3.5 w-3.5 animate-spin text-text-secondary" />}
+                {isLoading && <RiLoader4Line className="size-3.5 animate-spin text-text-secondary" />}
                 <VariableIconWithColor
                   variables={value as ValueSelector}
                   variableCategory={variableCategory}
@@ -182,7 +182,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
               >
                 {type}
               </div>
-              {showErrorIcon && <RiErrorWarningFill data-testid="var-reference-picker-error-icon" className="ml-0.5 h-3 w-3 text-text-destructive" />}
+              {showErrorIcon && <RiErrorWarningFill data-testid="var-reference-picker-error-icon" className="ml-0.5 size-3 text-text-destructive" />}
             </>
           )
         : (
@@ -190,7 +190,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
               {isLoading
                 ? (
                     <div className="flex items-center">
-                      <RiLoader4Line className="mr-1 h-3.5 w-3.5 animate-spin text-text-secondary" />
+                      <RiLoader4Line className="mr-1 size-3.5 animate-spin text-text-secondary" />
                       <span>{placeholder}</span>
                     </div>
                   )
@@ -260,7 +260,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                   className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                   onClick={() => {}}
                 >
-                  <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                  <span className="i-ri-add-line size-4 text-text-tertiary" aria-hidden="true" />
                 </button>
               </div>
             )
@@ -281,7 +281,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                           trigger={(
                             <div className="flex h-8 items-center rounded-lg bg-components-input-bg-normal px-2">
                               <div className="mr-1 system-sm-regular text-components-input-text-filled">{varKindTypes.find(item => item.value === varKindType)?.label}</div>
-                              <RiArrowDownSLine className="h-4 w-4 text-text-quaternary" />
+                              <RiArrowDownSLine className="size-4 text-text-quaternary" />
                             </div>
                           )}
                           popupClassName="top-8"
@@ -295,7 +295,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                     )
                   : (!hasValue && (
                       <div className="mr-1 ml-1.5">
-                        <Variable02 className={`h-4 w-4 ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'}`} />
+                        <Variable02 className={`size-4 ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'}`} />
                       </div>
                     ))}
                 {isConstant
@@ -316,7 +316,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                     className="group invisible absolute top-[50%] right-1 h-5 translate-y-[-50%] cursor-pointer rounded-md border-none bg-transparent p-1 group-hover/wrap:visible hover:bg-state-base-hover"
                     onClick={handleClearVar}
                   >
-                    <RiCloseLine className="h-3.5 w-3.5 text-text-tertiary group-hover:text-text-secondary" aria-hidden="true" />
+                    <RiCloseLine className="size-3.5 text-text-tertiary group-hover:text-text-secondary" aria-hidden="true" />
                   </button>
                 )}
                 {!hasValue && valueTypePlaceHolder && (
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index ffd50e1ef1..77c1f6ae71 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -116,15 +116,15 @@ const Item: FC<ItemProps> = ({
           <span
             aria-hidden
             className={cn(
-              'h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600',
+              'size-3.5 shrink-0 text-util-colors-violet-violet-600',
               isInCodeGeneratorInstructionEditor ? 'i-custom-vender-line-general-code-assistant' : 'i-custom-vender-line-general-magic-edit',
             )}
           />
         )
       case 'error_message':
-        return <span aria-hidden className="i-custom-vender-solid-development-variable-02 h-3.5 w-3.5 shrink-0 text-util-colors-orange-dark-orange-dark-600" />
+        return <span aria-hidden className="i-custom-vender-solid-development-variable-02 size-3.5 shrink-0 text-util-colors-orange-dark-orange-dark-600" />
       default:
-        return <span aria-hidden className="i-custom-vender-solid-development-variable-02 h-3.5 w-3.5 shrink-0 text-text-accent" />
+        return <span aria-hidden className="i-custom-vender-solid-development-variable-02 size-3.5 shrink-0 text-text-accent" />
     }
   }, [isFlat, isInCodeGeneratorInstructionEditor, itemData.variable])
 
@@ -247,7 +247,7 @@ const Item: FC<ItemProps> = ({
       <div className="ml-1 shrink-0 text-xs font-normal text-text-tertiary capitalize">{(preferSchemaType && itemData.schemaType) ? itemData.schemaType : itemData.type}</div>
       {
         (isObj || isStructureOutput) && (
-          <span aria-hidden className={cn('ml-0.5 i-custom-vender-line-arrows-chevron-right h-3 w-3 text-text-quaternary', isHovering && 'text-text-tertiary')} />
+          <span aria-hidden className={cn('ml-0.5 i-custom-vender-line-arrows-chevron-right size-3 text-text-quaternary', isHovering && 'text-text-tertiary')} />
         )
       }
     </div>
@@ -428,7 +428,7 @@ const VarReferenceVars: FC<Props> = ({
       {
         !hideSearch && (
           <>
-            <div className={cn('mx-2 mt-2 mb-2', searchBoxClassName)} onClick={e => e.stopPropagation()}>
+            <div className={cn('m-2', searchBoxClassName)} onClick={e => e.stopPropagation()}>
               <Input
                 className={VAR_SEARCH_INPUT_CLASS_NAME}
                 showLeftIcon
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
index 3690cbf508..758f0b4c18 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
@@ -45,7 +45,7 @@ const VariableLabel = ({
       {
         notShowFullPath && (
           <>
-            <span className="i-ri-more-line h-3 w-3 shrink-0 text-text-secondary" />
+            <span className="i-ri-more-line size-3 shrink-0 text-text-secondary" />
             <div className="shrink-0 system-xs-regular text-divider-deep">/</div>
           </>
         )
@@ -68,7 +68,7 @@ const VariableLabel = ({
       }
       {
         !!errorMsg && (
-          <Warning className="h-3 w-3 shrink-0 text-text-warning" />
+          <Warning className="size-3 shrink-0 text-text-warning" />
         )
       }
       {
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index 928e1e5ee7..80f8c9466d 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -531,7 +531,7 @@ const BasePanel: FC<BasePanelProps> = ({
                         <button
                           type="button"
                           aria-label={singleRunActionLabel}
-                          className="mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden"
+                          className="mr-1 flex size-6 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden"
                           onClick={() => {
                             if (isSingleRunning)
                               handleStop()
@@ -541,8 +541,8 @@ const BasePanel: FC<BasePanelProps> = ({
                         >
                           {
                             isSingleRunning
-                              ? <Stop aria-hidden className="h-4 w-4 text-text-tertiary" />
-                              : <RiPlayLargeLine aria-hidden className="h-4 w-4 text-text-tertiary" />
+                              ? <Stop aria-hidden className="size-4 text-text-tertiary" />
+                              : <RiPlayLargeLine aria-hidden className="size-4 text-text-tertiary" />
                           }
                         </button>
                       )}
@@ -557,10 +557,10 @@ const BasePanel: FC<BasePanelProps> = ({
               <NodeActionsDropdown id={id} data={data} showHelpLink={false} />
               <div className="mx-3 h-3.5 w-px bg-divider-regular" />
               <div
-                className="flex h-6 w-6 cursor-pointer items-center justify-center"
+                className="flex size-6 cursor-pointer items-center justify-center"
                 onClick={() => handleNodeSelect(id, true)}
               >
-                <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+                <RiCloseLine className="size-4 text-text-tertiary" />
               </div>
             </div>
           </div>
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
index fd67856369..2a2de60d2d 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
@@ -18,7 +18,7 @@ const NoData: FC<Props> = ({
   const { t } = useTranslation()
   return (
     <div className="flex h-0 grow flex-col items-center justify-center">
-      <ClockPlay className="h-8 w-8 text-text-quaternary" />
+      <ClockPlay className="size-8 text-text-quaternary" />
       <div className="my-2 system-xs-regular text-text-tertiary">{t('debug.noData.description', { ns: 'workflow' })}</div>
       {canSingleRun && (
         <Button
@@ -26,7 +26,7 @@ const NoData: FC<Props> = ({
           size="small"
           onClick={onSingleRun}
         >
-          <RiPlayLine className="mr-1 h-3.5 w-3.5" />
+          <RiPlayLine className="mr-1 size-3.5" />
           <div>{t('debug.noData.runThisNode', { ns: 'workflow' })}</div>
         </Button>
       )}
diff --git a/web/app/components/workflow/nodes/_base/node-sections.tsx b/web/app/components/workflow/nodes/_base/node-sections.tsx
index a365362123..8b60c103c7 100644
--- a/web/app/components/workflow/nodes/_base/node-sections.tsx
+++ b/web/app/components/workflow/nodes/_base/node-sections.tsx
@@ -45,18 +45,18 @@ export const NodeHeaderMeta = ({
         </div>
       )}
       {!!(data.type === BlockEnum.Loop && data._loopIndex) && loopIndex}
-      {isLoading && <span className="i-ri-loader-2-line h-3.5 w-3.5 animate-spin text-text-accent" />}
+      {isLoading && <span className="i-ri-loader-2-line size-3.5 animate-spin text-text-accent" />}
       {!isLoading && data._runningStatus === NodeRunningStatus.Failed && (
-        <span className="i-ri-error-warning-fill h-3.5 w-3.5 text-text-destructive" />
+        <span className="i-ri-error-warning-fill size-3.5 text-text-destructive" />
       )}
       {!isLoading && data._runningStatus === NodeRunningStatus.Exception && (
-        <span className="i-ri-alert-fill h-3.5 w-3.5 text-text-warning-secondary" />
+        <span className="i-ri-alert-fill size-3.5 text-text-warning-secondary" />
       )}
       {!isLoading && (data._runningStatus === NodeRunningStatus.Succeeded || (!data._runningStatus && hasVarValue)) && (
-        <span className="i-ri-checkbox-circle-fill h-3.5 w-3.5 text-text-success" />
+        <span className="i-ri-checkbox-circle-fill size-3.5 text-text-success" />
       )}
       {!isLoading && data._runningStatus === NodeRunningStatus.Paused && (
-        <span className="i-ri-pause-circle-fill h-3.5 w-3.5 text-text-warning-secondary" />
+        <span className="i-ri-pause-circle-fill size-3.5 text-text-warning-secondary" />
       )}
     </>
   )
@@ -73,7 +73,7 @@ export const NodeBody = ({
 }: NodeBodyProps) => {
   if (data.type === BlockEnum.Iteration || data.type === BlockEnum.Loop) {
     return (
-      <div className="grow pr-1 pb-1 pl-1">
+      <div className="grow px-1 pb-1">
         {child}
       </div>
     )
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index 7779e7f534..7786dfb2cc 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -195,7 +195,7 @@ const BaseNode: FC<BaseNodeProps> = ({
           'rounded-[15px] border border-transparent',
           (controlMode === ControlMode.Comment) && 'hover:cursor-none',
           !isContainerNode(data.type) && 'w-[240px] bg-workflow-block-bg',
-          isContainerNode(data.type) && 'flex h-full w-full flex-col border-workflow-block-border bg-workflow-block-bg-transparent',
+          isContainerNode(data.type) && 'flex size-full flex-col border-workflow-block-border bg-workflow-block-bg-transparent',
           !data._runningStatus && 'hover:shadow-lg',
           showRunningBorder && 'border-state-accent-solid!',
           showSuccessBorder && 'border-state-success-solid!',
diff --git a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
index 3986dcf6a4..f672730523 100644
--- a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
+++ b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
@@ -63,7 +63,7 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
     throw new Error('Unknown status')
   }, [name, notSuccess, status, t])
   const [iconFetchError, setIconFetchError] = useState(false)
-  let iconContent: ReactNode = <Group className="h-3 w-3 opacity-35" />
+  let iconContent: ReactNode = <Group className="size-3 opacity-35" />
 
   if (!iconFetchError && icon) {
     if (typeof icon === 'string') {
@@ -71,7 +71,7 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
         <img
           src={icon}
           alt="tool icon"
-          className={cn('size-3.5 h-full w-full object-cover', notSuccess && 'opacity-50')}
+          className={cn('size-3.5 size-full object-cover', notSuccess && 'opacity-50')}
           onError={() => setIconFetchError(true)}
         />
       )
@@ -79,7 +79,7 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
     else if (typeof icon === 'object') {
       iconContent = (
         <AppIcon
-          className={cn('size-3.5 h-full w-full object-cover', notSuccess && 'opacity-50')}
+          className={cn('size-3.5 size-full object-cover', notSuccess && 'opacity-50')}
           icon={icon?.content}
           background={icon?.background}
         />
diff --git a/web/app/components/workflow/nodes/answer/panel.tsx b/web/app/components/workflow/nodes/answer/panel.tsx
index 8fb9e1815d..1129bc0239 100644
--- a/web/app/components/workflow/nodes/answer/panel.tsx
+++ b/web/app/components/workflow/nodes/answer/panel.tsx
@@ -30,7 +30,7 @@ const Panel: FC<NodePanelProps<AnswerNodeType>> = ({
   })
 
   return (
-    <div className="mt-2 mb-2 space-y-4 px-4">
+    <div className="my-2 space-y-4 px-4">
       <Editor
         readOnly={readOnly}
         justVar
diff --git a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
index 69fb618d16..780e01d949 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -64,7 +64,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
             {selectedItem && isOperationItem(selectedItem) ? t(`nodes.assigner.operations.${selectedItem.name}`, { ns: 'workflow' }) : t('nodes.assigner.operations.title', { ns: 'workflow' })}
           </span>
         </div>
-        <span aria-hidden className={cn('i-ri-arrow-down-s-line h-4 w-4 text-text-quaternary', disabled && 'text-components-input-text-placeholder', open && 'text-text-secondary')} />
+        <span aria-hidden className={cn('i-ri-arrow-down-s-line size-4 text-text-quaternary', disabled && 'text-components-input-text-placeholder', open && 'text-text-secondary')} />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
@@ -90,7 +90,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
                     </div>
                     {item.value === value && (
                       <div className="flex items-center justify-center">
-                        <span aria-hidden className="i-ri-check-line h-4 w-4 text-text-accent" />
+                        <span aria-hidden className="i-ri-check-line size-4 text-text-accent" />
                       </div>
                     )}
                   </DropdownMenuItem>
diff --git a/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx b/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
index 24fa999b49..46173e9610 100644
--- a/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
@@ -228,7 +228,7 @@ const VarList: FC<Props> = ({
               className="group shrink-0 hover:bg-state-destructive-hover!"
               onClick={handleVarRemove(index)}
             >
-              <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover:text-text-destructive" />
+              <RiDeleteBinLine className="size-4 text-text-tertiary group-hover:text-text-destructive" />
             </ActionButton>
           </div>
         )
diff --git a/web/app/components/workflow/nodes/assigner/panel.tsx b/web/app/components/workflow/nodes/assigner/panel.tsx
index ef32f6a6ac..34f1a27cce 100644
--- a/web/app/components/workflow/nodes/assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/assigner/panel.tsx
@@ -42,7 +42,7 @@ const Panel: FC<NodePanelProps<AssignerNodeType>> = ({
         <div className="flex items-start gap-2 self-stretch">
           <div className="flex grow flex-col items-start justify-center system-sm-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}.variables`, { ns: 'workflow' })}</div>
           <ActionButton onClick={handleAddOperation}>
-            <RiAddLine className="h-4 w-4 shrink-0 text-text-tertiary" />
+            <RiAddLine className="size-4 shrink-0 text-text-tertiary" />
           </ActionButton>
         </div>
         <VarList
diff --git a/web/app/components/workflow/nodes/code/dependency-picker.tsx b/web/app/components/workflow/nodes/code/dependency-picker.tsx
index 2303ba32a6..da6f324bae 100644
--- a/web/app/components/workflow/nodes/code/dependency-picker.tsx
+++ b/web/app/components/workflow/nodes/code/dependency-picker.tsx
@@ -42,7 +42,7 @@ const DependencyPicker: FC<Props> = ({
           <div className="grow cursor-pointer">
             <div className="flex h-8 items-center justify-between rounded-lg border-0 bg-gray-100 px-2.5 text-[13px] text-gray-900">
               <div className="w-0 grow truncate" title={value.name}>{value.name}</div>
-              <RiArrowDownSLine className="h-3.5 w-3.5 shrink-0 text-gray-700" />
+              <RiArrowDownSLine className="size-3.5 shrink-0 text-gray-700" />
             </div>
           </div>
         )}
@@ -81,7 +81,7 @@ const DependencyPicker: FC<Props> = ({
                 onClick={handleChange(dependency)}
               >
                 <div className="w-0 grow truncate">{dependency.name}</div>
-                {dependency.name === value.name && <Check className="h-4 w-4 shrink-0 text-primary-600" />}
+                {dependency.name === value.name && <Check className="size-4 shrink-0 text-primary-600" />}
               </div>
             ))}
           </div>
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index 225585eb26..1218cace9a 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -79,7 +79,7 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
                         onClick={handleSyncFunctionSignature}
                         aria-label={t(`${i18nPrefix}.syncFunctionSignature`, { ns: 'workflow' })}
                       >
-                        <span className="i-ri-refresh-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                        <span className="i-ri-refresh-line size-4 text-text-tertiary" aria-hidden="true" />
                       </TooltipTrigger>
                       <TooltipContent>{t(`${i18nPrefix}.syncFunctionSignature`, { ns: 'workflow' })}</TooltipContent>
                     </Tooltip>
@@ -89,7 +89,7 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
                       className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                       onClick={handleAddVariable}
                     >
-                      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                      <span className="i-ri-add-line size-4 text-text-tertiary" aria-hidden="true" />
                     </button>
                   </div>
                 )
@@ -135,7 +135,7 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
               className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
               onClick={handleAddOutputVariable}
             >
-              <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+              <span className="i-ri-add-line size-4 text-text-tertiary" aria-hidden="true" />
             </button>
           )}
           required
diff --git a/web/app/components/workflow/nodes/data-source-empty/index.tsx b/web/app/components/workflow/nodes/data-source-empty/index.tsx
index d3f9d21225..5895ee6dd5 100644
--- a/web/app/components/workflow/nodes/data-source-empty/index.tsx
+++ b/web/app/components/workflow/nodes/data-source-empty/index.tsx
@@ -20,7 +20,7 @@ const DataSourceEmptyNode = ({ id, data }: NodeProps) => {
         variant="primary"
         className="w-full"
       >
-        <RiAddLine className="mr-1 h-4 w-4" />
+        <RiAddLine className="mr-1 size-4" />
         {t('nodes.dataSource.add', { ns: 'workflow' })}
       </Button>
     )
diff --git a/web/app/components/workflow/nodes/end/panel.tsx b/web/app/components/workflow/nodes/end/panel.tsx
index a428a926eb..496a38130c 100644
--- a/web/app/components/workflow/nodes/end/panel.tsx
+++ b/web/app/components/workflow/nodes/end/panel.tsx
@@ -39,7 +39,7 @@ const Panel: FC<NodePanelProps<EndNodeType>> = ({
                     className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                     onClick={handleAddVariable}
                   >
-                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                    <span className="i-ri-add-line size-4 text-text-tertiary" aria-hidden="true" />
                   </button>
                 )
               : undefined
diff --git a/web/app/components/workflow/nodes/http/components/api-input.tsx b/web/app/components/workflow/nodes/http/components/api-input.tsx
index b78ef3026a..340b892b09 100644
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -56,7 +56,7 @@ const ApiInput: FC<Props> = ({
         trigger={(
           <div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-2.5')}>
             <div className="w-12 pl-0.5 text-xs leading-[18px] font-medium text-text-primary uppercase">{method}</div>
-            {!readonly && <RiArrowDownSLine className="ml-1 h-3.5 w-3.5 text-text-secondary" />}
+            {!readonly && <RiArrowDownSLine className="ml-1 size-3.5 text-text-secondary" />}
           </div>
         )}
         popupClassName="top-[34px] w-[108px]"
diff --git a/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx
index 70edac3ba9..1a9a37fa7b 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx
@@ -49,7 +49,7 @@ const BulkEdit: FC<Props> = ({
               className="flex cursor-pointer items-center space-x-1"
               onClick={handleSwitchToKeyValueEdit}
             >
-              <LayoutGrid02 className="h-3 w-3 text-gray-500" />
+              <LayoutGrid02 className="size-3 text-gray-500" />
               <div className="text-xs leading-[18px] font-normal text-gray-500">{t(`${i18nPrefix}.keyValueEdit`, { ns: 'workflow' })}</div>
             </div>
             <div className="mr-1.5 ml-3 h-3 w-px bg-gray-200"></div>
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index e1d7b57bf3..4f78da9b27 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -66,7 +66,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
                 onClick={showAuthorization}
                 className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2')}
               >
-                {!readOnly && <Settings01 className="h-3 w-3 text-text-tertiary" />}
+                {!readOnly && <Settings01 className="size-3 text-text-tertiary" />}
                 <div className="text-xs font-medium text-text-tertiary">
                   {t(`${i18nPrefix}.authorization.authorization`, { ns: 'workflow' })}
                   <span className="ml-1 text-text-secondary">{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`, { ns: 'workflow' })}</span>
@@ -76,7 +76,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
                 onClick={showCurlPanel}
                 className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2')}
               >
-                {!readOnly && <FileArrow01 className="h-3 w-3 text-text-tertiary" />}
+                {!readOnly && <FileArrow01 className="size-3 text-text-tertiary" />}
                 <div className="text-xs font-medium text-text-tertiary">
                   {t(`${i18nPrefix}.curl.title`, { ns: 'workflow' })}
                 </div>
diff --git a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
index 688f7a62f6..47c7eb04e4 100644
--- a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
@@ -57,7 +57,7 @@ const ButtonStyleDropdown: FC<Props> = ({
         render={(
           <div className={cn('flex items-center justify-center rounded-lg bg-components-button-tertiary-bg p-1', !readonly && 'cursor-pointer hover:bg-components-button-tertiary-bg-hover', open && 'bg-components-button-tertiary-bg-hover')}>
             <Button size="small" className="pointer-events-none px-1" variant={currentStyle}>
-              <RiFontSize className="h-4 w-4" />
+              <RiFontSize className="size-4" />
             </Button>
           </div>
         )}
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
index 046320ab37..13fee46cb7 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
@@ -120,7 +120,7 @@ const EmailConfigureModal = ({
           </div>
           <div className="flex items-start justify-between gap-2 rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-3 pl-2.5 shadow-xs">
             <div className="rounded-sm border border-divider-regular bg-components-icon-bg-orange-dark-solid p-0.5">
-              <RiBugLine className="h-3.5 w-3.5 text-text-primary-on-surface" />
+              <RiBugLine className="size-3.5 text-text-primary-on-surface" />
             </div>
             <div className="grow space-y-1">
               <div className="system-sm-medium text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.debugMode`, { ns: 'workflow' })}</div>
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
index 8abace95f8..5a997d0d15 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
@@ -98,12 +98,12 @@ const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
         <div className="flex items-center gap-1.5">
           {method.type === DeliveryMethodType.WebApp && (
             <div className="rounded-sm border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5">
-              <RiRobot2Fill className="h-3.5 w-3.5 text-text-primary-on-surface" />
+              <RiRobot2Fill className="size-3.5 text-text-primary-on-surface" />
             </div>
           )}
           {method.type === DeliveryMethodType.Email && (
             <div className="rounded-sm border border-divider-regular bg-components-icon-bg-blue-solid p-0.5">
-              <RiMailSendFill className="h-3.5 w-3.5 text-text-primary-on-surface" />
+              <RiMailSendFill className="size-3.5 text-text-primary-on-surface" />
             </div>
           )}
           <div className="system-xs-medium text-text-secondary capitalize">{method.type}</div>
@@ -123,7 +123,7 @@ const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
                           aria-label={emailSenderTooltipContent}
                           onClick={() => setShowTestEmailModal(true)}
                         >
-                          <RiSendPlane2Line className="h-4 w-4" />
+                          <RiSendPlane2Line className="size-4" />
                         </ActionButton>
                       )}
                     />
@@ -136,7 +136,7 @@ const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
                           aria-label={configureLabel}
                           onClick={() => setShowEmailModal(true)}
                         >
-                          <RiEqualizer2Line className="h-4 w-4" />
+                          <RiEqualizer2Line className="size-4" />
                         </ActionButton>
                       )}
                     />
@@ -154,7 +154,7 @@ const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
                       onMouseLeave={() => setIsHovering(false)}
                       onClick={() => onDelete(method.type)}
                     >
-                      <RiDeleteBinLine className="h-4 w-4" />
+                      <RiDeleteBinLine className="size-4" />
                     </ActionButton>
                   )}
                 />
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx
index 9ef75fd639..68355e36ef 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx
@@ -71,7 +71,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
             aria-label={t(`${i18nPrefix}.deliveryMethod.title`, { ns: 'workflow' })}
             className={cn(open && 'bg-state-base-hover')}
           >
-            <RiAddLine className="h-4 w-4" />
+            <RiAddLine className="size-4" />
           </ActionButton>
         )}
       />
@@ -95,7 +95,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
               }}
             >
               <div className={cn('rounded-sm border border-divider-regular bg-components-icon-bg-indigo-solid p-1', webAppDeliveryInfo.disabled && 'opacity-50')}>
-                <RiRobot2Fill className="h-4 w-4 text-text-primary-on-surface" />
+                <RiRobot2Fill className="size-4 text-text-primary-on-surface" />
               </div>
               <div className={cn('p-1', webAppDeliveryInfo.disabled && 'opacity-50')}>
                 <div className="mb-0.5 truncate system-sm-medium text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.webapp.title`, { ns: 'workflow' })}</div>
@@ -133,7 +133,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
                   emailDeliveryInfo.added && 'opacity-50',
                 )}
               >
-                <RiMailSendFill className="h-4 w-4 text-text-primary-on-surface" />
+                <RiMailSendFill className="size-4 text-text-primary-on-surface" />
               </div>
               <div className={cn('p-1', emailDeliveryInfo.added && 'opacity-50')}>
                 <div className="mb-0.5 truncate system-sm-medium text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.email.title`, { ns: 'workflow' })}</div>
@@ -148,7 +148,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
               className={cn('relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover', 'cursor-not-allowed bg-transparent hover:bg-transparent')}
             >
               <div className={cn('rounded-sm border border-divider-regular bg-background-default-dodge p-1', 'opacity-50')}>
-                <Slack className="h-4 w-4 text-text-primary-on-surface" />
+                <Slack className="size-4 text-text-primary-on-surface" />
               </div>
               <div className={cn('p-1', 'opacity-50')}>
                 <div className="mb-0.5 truncate system-sm-medium text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.slack.title`, { ns: 'workflow' })}</div>
@@ -163,7 +163,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
               className={cn('relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover', 'cursor-not-allowed bg-transparent hover:bg-transparent')}
             >
               <div className={cn('rounded-sm border border-divider-regular bg-background-default-dodge p-1', 'opacity-50')}>
-                <Teams className="h-4 w-4 text-text-primary-on-surface" />
+                <Teams className="size-4 text-text-primary-on-surface" />
               </div>
               <div className={cn('p-1', 'opacity-50')}>
                 <div className="mb-0.5 truncate system-sm-medium text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.teams.title`, { ns: 'workflow' })}</div>
@@ -178,7 +178,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
               className={cn('relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover', 'cursor-not-allowed bg-transparent hover:bg-transparent')}
             >
               <div className={cn('rounded-sm border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5', 'opacity-50')}>
-                <RiDiscordFill className="h-5 w-5 text-text-primary-on-surface" />
+                <RiDiscordFill className="size-5 text-text-primary-on-surface" />
               </div>
               <div className={cn('p-1', 'opacity-50')}>
                 <div className="mb-0.5 truncate system-sm-medium text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.discord.title`, { ns: 'workflow' })}</div>
@@ -194,7 +194,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
           <div className="mt-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
             <div className="flex items-center gap-2 px-4 py-3">
               <div className={cn('rounded-sm border border-divider-regular bg-components-icon-bg-midnight-solid p-1')}>
-                <RiLightbulbFlashFill className="h-4 w-4 text-text-primary-on-surface" />
+                <RiLightbulbFlashFill className="size-4 text-text-primary-on-surface" />
               </div>
               <div className="system-sm-regular text-text-secondary">
                 <div>{t(`${i18nPrefix}.deliveryMethod.contactTip1`, { ns: 'workflow' })}</div>
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
index 604736b2a9..91f381b55b 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
@@ -32,7 +32,7 @@ const EmailItem = ({
       onClick={e => e.stopPropagation()}
     >
       {isError && (
-        <RiErrorWarningFill className="h-4 w-4 text-text-destructive" />
+        <RiErrorWarningFill className="size-4 text-text-destructive" />
       )}
       {!isError && <Avatar avatar={data.avatar_url} size="xxs" name={data.name || data.email} />}
       <div title={data.email} className="max-w-[500px] truncate system-xs-regular text-text-primary">
@@ -41,7 +41,7 @@ const EmailItem = ({
       </div>
       {!disabled && (
         <RiCloseCircleFill
-          className="h-4 w-4 cursor-pointer text-text-quaternary hover:text-text-tertiary"
+          className="size-4 cursor-pointer text-text-quaternary hover:text-text-tertiary"
           onClick={() => onDelete(data as unknown as RecipientItem)}
         />
       )}
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
index 42bd6df171..d2ccd2ed60 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
@@ -64,7 +64,7 @@ const Recipient = ({
       <div className="rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs">
         <div className="flex h-10 items-center justify-between pr-1 pl-3">
           <div className="flex grow items-center gap-2">
-            <RiGroupLine className="h-4 w-4 text-text-secondary" />
+            <RiGroupLine className="size-4 text-text-secondary" />
             <div className="system-sm-medium text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.title`, { ns: 'workflow' })}</div>
           </div>
           <div className="w-[86px]">
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
index fa2f3121dd..ad831bc0ed 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
@@ -48,7 +48,7 @@ const MemberSelector: FC<Props> = ({
             className={cn('w-full justify-between', open && 'bg-state-accent-hover')}
             variant="ghost-accent"
           >
-            <RiContactsBookLine className="mr-1 h-4 w-4" />
+            <RiContactsBookLine className="mr-1 size-4" />
             <div>{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.trigger`, { ns: 'workflow' })}</div>
           </Button>
         )}
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
index 158d199cbc..8b54d64bd8 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
@@ -341,7 +341,7 @@ const EmailSenderModal = ({
                 onClick={() => setCollapsed(!collapsed)}
               >
                 <div className="mr-1 system-sm-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailSender.vars`, { ns: 'workflow' })}</div>
-                <RiArrowRightSFill className={cn('h-4 w-4 text-text-quaternary group-hover:text-text-primary', !collapsed && 'rotate-90')} aria-hidden />
+                <RiArrowRightSFill className={cn('size-4 text-text-quaternary group-hover:text-text-primary', !collapsed && 'rotate-90')} aria-hidden />
               </button>
               <div className="system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.emailSender.varsTip`, { ns: 'workflow' })}</div>
               {!collapsed && (
diff --git a/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx b/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
index 507b9b1a39..7dda848617 100644
--- a/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
@@ -54,7 +54,7 @@ const FormContent = ({
             className="flex cursor-pointer items-center border-none bg-transparent p-0 text-left system-sm-semibold-uppercase text-text-accent"
             onClick={handleBack}
           >
-            <RiArrowLeftLine className="mr-1 h-4 w-4" aria-hidden />
+            <RiArrowLeftLine className="mr-1 size-4" aria-hidden />
             {t('nodes.humanInput.singleRun.back', { ns: 'workflow' })}
           </button>
           <div className="mx-1 system-xs-regular text-divider-deep">/</div>
diff --git a/web/app/components/workflow/nodes/human-input/components/user-action.tsx b/web/app/components/workflow/nodes/human-input/components/user-action.tsx
index 94581281e8..48c13e49fc 100644
--- a/web/app/components/workflow/nodes/human-input/components/user-action.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/user-action.tsx
@@ -101,7 +101,7 @@ const UserActionItem: FC<UserActionItemProps> = ({
           variant="tertiary"
           onClick={() => onDelete(data.id)}
         >
-          <RiDeleteBinLine className="h-4 w-4" />
+          <RiDeleteBinLine className="size-4" />
         </Button>
       )}
     </div>
diff --git a/web/app/components/workflow/nodes/human-input/node.tsx b/web/app/components/workflow/nodes/human-input/node.tsx
index 9777811579..1eb2e9e363 100644
--- a/web/app/components/workflow/nodes/human-input/node.tsx
+++ b/web/app/components/workflow/nodes/human-input/node.tsx
@@ -29,12 +29,12 @@ const Node: FC<NodeProps<HumanInputNodeType>> = (props) => {
               <div key={method.type} className="flex items-center gap-1 rounded-md bg-workflow-block-parma-bg p-1">
                 {method.type === DeliveryMethodType.WebApp && (
                   <div className="rounded-sm border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5">
-                    <RiRobot2Fill className="h-3.5 w-3.5 text-text-primary-on-surface" />
+                    <RiRobot2Fill className="size-3.5 text-text-primary-on-surface" />
                   </div>
                 )}
                 {method.type === DeliveryMethodType.Email && (
                   <div className="rounded-sm border border-divider-regular bg-components-icon-bg-blue-solid p-0.5">
-                    <RiMailSendFill className="h-3.5 w-3.5 text-text-primary-on-surface" />
+                    <RiMailSendFill className="size-3.5 text-text-primary-on-surface" />
                   </div>
                 )}
                 <span className="system-xs-regular text-text-secondary capitalize">{method.type}</span>
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 2f51af95b6..3c5c8e261a 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -137,7 +137,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
                     toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
                   }}
                 >
-                  <RiClipboardLine className="h-4 w-4 text-text-secondary" aria-hidden />
+                  <RiClipboardLine className="size-4 text-text-secondary" aria-hidden />
                 </button>
                 <button
                   type="button"
@@ -145,7 +145,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
                   className={cn('flex size-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-text-secondary hover:bg-components-button-ghost-bg-hover', isExpandFormContent && 'bg-state-accent-active text-text-accent')}
                   onClick={toggleExpandFormContent}
                 >
-                  {isExpandFormContent ? <RiCollapseDiagonalLine className="h-4 w-4" aria-hidden /> : <RiExpandDiagonalLine className="h-4 w-4" aria-hidden />}
+                  {isExpandFormContent ? <RiCollapseDiagonalLine className="size-4" aria-hidden /> : <RiExpandDiagonalLine className="size-4" aria-hidden />}
                 </button>
               </div>
             </div>
@@ -180,7 +180,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
               <ActionButton
                 onClick={onAddUseAction}
               >
-                <RiAddLine className="h-4 w-4" />
+                <RiAddLine className="size-4" />
               </ActionButton>
             </div>
           )}
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-add.tsx b/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
index 01cf6c6f7e..439638df54 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
@@ -50,7 +50,7 @@ const ConditionAdd = ({
             className={className}
             disabled={disabled}
           >
-            <RiAddLine className="mr-1 h-3.5 w-3.5" />
+            <RiAddLine className="mr-1 size-3.5" />
             {t('nodes.ifElse.addCondition', { ns: 'workflow' })}
           </Button>
         )}
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index 23e7443234..27c4f9ff5a 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -285,7 +285,7 @@ const ConditionItem = ({
                         ? (
                             <div className="flex cursor-pointer justify-start">
                               <div className="inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark px-1.5 text-text-accent shadow-xs">
-                                <Variable02 className="h-3.5 w-3.5 shrink-0 text-text-accent" />
+                                <Variable02 className="size-3.5 shrink-0 text-text-accent" />
                                 <div className="ml-0.5 truncate system-xs-medium">{selectedSubVarOption.name}</div>
                               </div>
                             </div>
@@ -407,12 +407,12 @@ const ConditionItem = ({
         }
       </div>
       <div
-        className="mt-1 ml-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
+        className="mt-1 ml-1 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={doRemoveCondition}
       >
-        <RiDeleteBinLine className="h-4 w-4" />
+        <RiDeleteBinLine className="size-4" />
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
index d343b0c8e5..e0419ecca6 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
@@ -62,7 +62,7 @@ const ConditionOperator = ({
             ? selectedOption.label
             : t(`${i18nPrefix}.select`, { ns: 'workflow' })
         }
-        <RiArrowDownSLine className="ml-1 h-3.5 w-3.5" />
+        <RiArrowDownSLine className="ml-1 size-3.5" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-end"
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
index 5e42502bc0..b17e292cee 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
@@ -94,7 +94,7 @@ const ConditionList = ({
               onClick={doToggleConditionLogicalOperator}
             >
               {logical_operator.toUpperCase()}
-              <RiLoopLeftLine className="ml-0.5 h-3 w-3" />
+              <RiLoopLeftLine className="ml-0.5 size-3" />
             </div>
           </div>
         )
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
index a17d7589f1..0830e89188 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
@@ -84,7 +84,7 @@ const ConditionNumberInput = ({
           )}
         >
           {capitalize(numberVarType)}
-          <RiArrowDownSLine className="ml-px h-3.5 w-3.5" />
+          <RiArrowDownSLine className="ml-px size-3.5" />
         </DropdownMenuTrigger>
         <DropdownMenuContent
           placement="bottom-start"
@@ -138,7 +138,7 @@ const ConditionNumberInput = ({
                 {
                   !value && (
                     <div className="flex h-6 items-center p-1 text-[13px] text-components-input-text-placeholder">
-                      <Variable02 className="mr-1 h-4 w-4 shrink-0" />
+                      <Variable02 className="mr-1 size-4 shrink-0" />
                       <div className="w-0 grow truncate">{t('nodes.ifElse.selectVariable', { ns: 'workflow' })}</div>
                     </div>
                   )
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-value.tsx b/web/app/components/workflow/nodes/if-else/components/condition-value.tsx
index 5b04a0edd7..107ff0db38 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-value.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-value.tsx
@@ -93,7 +93,7 @@ const ConditionValue = ({
       </div>
       {
         !notHasValue && (
-          <div className="grow truncate px-1.5 text-xs leading-6 text-text-secondary" title={formatValue}>{isSelect ? selectName : formatValue}</div>
+          <div className="grow truncate px-1.5 text-xs/6 text-text-secondary" title={formatValue}>{isSelect ? selectName : formatValue}</div>
         )
       }
     </div>
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
index c8a90fcc2f..889025191f 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -106,7 +106,7 @@ const ConditionWrap: FC<Props> = ({
                 {!isSubVariable && (
                   <>
                     <RiDraggable className={cn(
-                      'handle absolute top-2 left-1 hidden h-3 w-3 cursor-pointer text-text-quaternary',
+                      'handle absolute top-2 left-1 hidden size-3 cursor-pointer text-text-quaternary',
                       casesLength > 1 && 'group-hover:block',
                     )}
                     />
@@ -180,7 +180,7 @@ const ConditionWrap: FC<Props> = ({
                               size="small"
                               disabled={readOnly}
                             >
-                              <RiAddLine className="mr-1 h-3.5 w-3.5" />
+                              <RiAddLine className="mr-1 size-3.5" />
                               {t('nodes.ifElse.addSubVariable', { ns: 'workflow' })}
                             </Button>
                           </SelectTrigger>
@@ -213,7 +213,7 @@ const ConditionWrap: FC<Props> = ({
                         onMouseEnter={() => setWillDeleteCaseId(item.case_id)}
                         onMouseLeave={() => setWillDeleteCaseId('')}
                       >
-                        <RiDeleteBinLine className="mr-1 h-3.5 w-3.5" />
+                        <RiDeleteBinLine className="mr-1 size-3.5" />
                         {t('operation.remove', { ns: 'common' })}
                       </Button>
                     )
@@ -233,7 +233,7 @@ const ConditionWrap: FC<Props> = ({
           disabled={readOnly}
           onClick={() => handleAddSubVariableCondition?.(caseId!, conditionId!)}
         >
-          <RiAddLine className="mr-1 h-3.5 w-3.5" />
+          <RiAddLine className="mr-1 size-3.5" />
           {t('nodes.ifElse.addSubVariable', { ns: 'workflow' })}
         </Button>
       )}
diff --git a/web/app/components/workflow/nodes/if-else/panel.tsx b/web/app/components/workflow/nodes/if-else/panel.tsx
index 221b00d1f7..349631bfae 100644
--- a/web/app/components/workflow/nodes/if-else/panel.tsx
+++ b/web/app/components/workflow/nodes/if-else/panel.tsx
@@ -69,7 +69,7 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
           onClick={() => handleAddCase()}
           disabled={readOnly}
         >
-          <RiAddLine className="mr-1 h-4 w-4" />
+          <RiAddLine className="mr-1 size-4" />
           ELIF
         </Button>
       </div>
diff --git a/web/app/components/workflow/nodes/iteration-start/index.tsx b/web/app/components/workflow/nodes/iteration-start/index.tsx
index ec4f1bfa7f..2093b22475 100644
--- a/web/app/components/workflow/nodes/iteration-start/index.tsx
+++ b/web/app/components/workflow/nodes/iteration-start/index.tsx
@@ -9,13 +9,13 @@ const IterationStartNode = ({ id, data }: NodeProps) => {
   const { t } = useTranslation()
 
   return (
-    <div className="nodrag group mt-1 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg shadow-xs">
+    <div className="nodrag group mt-1 flex size-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg shadow-xs">
       <Tooltip>
         <TooltipTrigger
           aria-label={t('blocks.iteration-start', { ns: 'workflow' })}
           className="flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500 p-0"
         >
-          <RiHome5Fill className="h-3 w-3 text-text-primary-on-surface" />
+          <RiHome5Fill className="size-3 text-text-primary-on-surface" />
         </TooltipTrigger>
         <TooltipContent>{t('blocks.iteration-start', { ns: 'workflow' })}</TooltipContent>
       </Tooltip>
@@ -39,7 +39,7 @@ export const IterationStartNodeDumb = () => {
           aria-label={t('blocks.iteration-start', { ns: 'workflow' })}
           className="flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500 p-0"
         >
-          <RiHome5Fill className="h-3 w-3 text-text-primary-on-surface" />
+          <RiHome5Fill className="size-3 text-text-primary-on-surface" />
         </TooltipTrigger>
         <TooltipContent>{t('blocks.iteration-start', { ns: 'workflow' })}</TooltipContent>
       </Tooltip>
diff --git a/web/app/components/workflow/nodes/iteration/add-block.tsx b/web/app/components/workflow/nodes/iteration/add-block.tsx
index c33b1269eb..31787ebdad 100644
--- a/web/app/components/workflow/nodes/iteration/add-block.tsx
+++ b/web/app/components/workflow/nodes/iteration/add-block.tsx
@@ -54,7 +54,7 @@ const AddBlock = ({
         open && 'bg-components-button-secondary-bg-hover',
       )}
       >
-        <RiAddLine className="mr-1 h-4 w-4" />
+        <RiAddLine className="mr-1 size-4" />
         {t('common.addBlock', { ns: 'workflow' })}
       </div>
     )
diff --git a/web/app/components/workflow/nodes/iteration/panel.tsx b/web/app/components/workflow/nodes/iteration/panel.tsx
index c252c3b67d..71d4f7ee08 100644
--- a/web/app/components/workflow/nodes/iteration/panel.tsx
+++ b/web/app/components/workflow/nodes/iteration/panel.tsx
@@ -52,7 +52,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
   const selectedResponseMethod = responseMethod.find(item => item.value === inputs.error_handle_mode)
 
   return (
-    <div className="pt-2 pb-2">
+    <div className="py-2">
       <div className="space-y-4 px-4 pb-4">
         <Field
           title={t(`${i18nPrefix}.input`, { ns: 'workflow' })}
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx
index 0920e8a8a7..d867b2234e 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx
@@ -64,7 +64,7 @@ const ChunkStructure = ({
                   className="w-full"
                   variant="secondary-accent"
                 >
-                  <span className="mr-1 i-ri-add-line h-4 w-4" />
+                  <span className="mr-1 i-ri-add-line size-4" />
                   {t('nodes.knowledgeBase.chooseChunkStructure', { ns: 'workflow' })}
                 </Button>
               )}
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
index 0597d621f6..90a9db5443 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
@@ -98,7 +98,7 @@ const IndexMethod = ({
                   </div>
                   <Infotip
                     aria-label={t('form.numberOfKeywords', { ns: 'datasetSettings' })}
-                    className="ml-0.5 h-3.5 w-3.5"
+                    className="ml-0.5 size-3.5"
                   >
                     {t('form.numberOfKeywords', { ns: 'datasetSettings' })}
                   </Infotip>
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx b/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx
index 56ce356295..ef3a948dad 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx
@@ -121,7 +121,7 @@ const OptionCard = memo(({
             {
               enableRadio && (
                 <div className={cn(
-                  'ml-2 h-4 w-4 shrink-0 rounded-full border border-components-radio-border bg-components-radio-bg',
+                  'ml-2 size-4 shrink-0 rounded-full border border-components-radio-border bg-components-radio-bg',
                   isActive && 'border-[5px] border-components-radio-border-checked',
                 )}
                 >
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
index 54b37f9b52..be31b49f95 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
@@ -176,7 +176,7 @@ const SearchMethodOption = ({
                     {t('modelProvider.rerankModel.key', { ns: 'common' })}
                     <Infotip
                       aria-label={t('modelProvider.rerankModel.tip', { ns: 'common' })}
-                      className="ml-0.5 h-3.5 w-3.5 shrink-0"
+                      className="ml-0.5 size-3.5 shrink-0"
                       iconClassName="h-3.5 w-3.5"
                     >
                       {t('modelProvider.rerankModel.tip', { ns: 'common' })}
@@ -191,7 +191,7 @@ const SearchMethodOption = ({
               />
               {showMultiModalTip && (
                 <div className="mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]">
-                  <div className="absolute top-0 right-0 bottom-0 left-0 bg-dataset-warning-message-bg opacity-40" />
+                  <div className="absolute inset-0 bg-dataset-warning-message-bg opacity-40" />
                   <div className="p-1">
                     <AlertTriangle className="size-4 text-text-warning-secondary" />
                   </div>
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx
index b81032242f..1dfb572269 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx
@@ -61,7 +61,7 @@ const TopKAndScoreThreshold = ({
           {t('datasetConfig.top_k', { ns: 'appDebug' })}
           <Infotip
             aria-label={t('datasetConfig.top_kTip', { ns: 'appDebug' })}
-            className="ml-0.5 h-3.5 w-3.5"
+            className="ml-0.5 size-3.5"
             iconClassName="h-3.5 w-3.5"
           >
             {t('datasetConfig.top_kTip', { ns: 'appDebug' })}
@@ -99,7 +99,7 @@ const TopKAndScoreThreshold = ({
               </div>
               <Infotip
                 aria-label={t('datasetConfig.score_thresholdTip', { ns: 'appDebug' })}
-                className="ml-0.5 h-3.5 w-3.5"
+                className="ml-0.5 size-3.5"
                 iconClassName="h-3.5 w-3.5"
               >
                 {t('datasetConfig.score_thresholdTip', { ns: 'appDebug' })}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
index df30932137..096ddbf4f1 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
@@ -34,7 +34,7 @@ const AddDataset: FC<Props> = ({
         className="cursor-pointer rounded-md border-none bg-transparent p-1 outline-hidden select-none hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
         onClick={showModal}
       >
-        <span aria-hidden="true" className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+        <span aria-hidden="true" className="i-ri-add-line size-4 text-text-tertiary" />
       </button>
       <SelectDataset
         isShow={isShowModal}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
index c8a0824565..778e006904 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
@@ -99,7 +99,7 @@ const DatasetItem: FC<Props> = ({
                   showSettingsModal()
                 }}
               >
-                <RiEditLine className="h-4 w-4 shrink-0 text-text-tertiary" />
+                <RiEditLine className="size-4 shrink-0 text-text-tertiary" />
               </ActionButton>
             )
           }
@@ -110,7 +110,7 @@ const DatasetItem: FC<Props> = ({
             onMouseEnter={() => setIsDeleteHovered(true)}
             onMouseLeave={() => setIsDeleteHovered(false)}
           >
-            <RiDeleteBinLine className={`h-4 w-4 shrink-0 ${isDeleteHovered ? 'text-text-destructive' : 'text-text-tertiary'}`} />
+            <RiDeleteBinLine className={`size-4 shrink-0 ${isDeleteHovered ? 'text-text-destructive' : 'text-text-tertiary'}`} />
           </ActionButton>
         </div>
       )}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx
index 2de3348ca3..b95291226f 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx
@@ -41,7 +41,7 @@ const AddCondition = ({
             size="small"
             variant="secondary"
           >
-            <RiAddLine className="h-3.5 w-3.5" />
+            <RiAddLine className="size-3.5" />
             {t('nodes.knowledgeRetrieval.metadata.panel.add', { ns: 'workflow' })}
           </Button>
         )}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx
index 07e5481f6c..066a56c506 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx
@@ -37,14 +37,14 @@ const ConditionCommonVariableSelector = ({
           <div className="flex h-6 grow cursor-pointer items-center">
             {selected && (
               <div className="inline-flex h-6 items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pr-1.5 pl-[5px] system-xs-medium text-text-secondary shadow-xs">
-                <Variable02 className="mr-1 h-3.5 w-3.5 text-text-accent" />
+                <Variable02 className="mr-1 size-3.5 text-text-accent" />
                 {selected.value}
               </div>
             )}
             {!selected && (
               <>
                 <div className="flex grow items-center system-sm-regular text-components-input-text-placeholder">
-                  <Variable02 className="mr-1 h-4 w-4" />
+                  <Variable02 className="mr-1 size-4" />
                   {t('nodes.knowledgeRetrieval.metadata.panel.select', { ns: 'workflow' })}
                 </div>
                 <div className="flex h-5 shrink-0 items-center rounded-[5px] border border-divider-deep px-[5px] system-2xs-medium text-text-tertiary">
@@ -71,7 +71,7 @@ const ConditionCommonVariableSelector = ({
               className="flex h-6 cursor-pointer items-center rounded-md px-2 system-xs-medium text-text-secondary hover:bg-state-base-hover"
               onClick={() => handleChange(v.value)}
             >
-              <Variable02 className="mr-1 h-4 w-4 text-text-accent" />
+              <Variable02 className="mr-1 size-4 text-text-accent" />
               {v.value}
             </div>
           ))}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
index 639ef164e4..5b27963d98 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
@@ -49,7 +49,7 @@ const ConditionDate = ({
           <span className="grow">{triggerText}</span>
           <RiCalendarLine
             className={cn(
-              'block h-4 w-4 shrink-0',
+              'block size-4 shrink-0',
               hasValue ? 'text-text-quaternary' : 'text-text-tertiary',
               hasValue && 'group-hover:hidden',
             )}
@@ -61,13 +61,13 @@ const ConditionDate = ({
               <button
                 type="button"
                 aria-label={t('operation.clear', { ns: 'common' })}
-                className="hidden h-4 w-4 shrink-0 cursor-pointer border-none bg-transparent p-0 text-text-quaternary group-hover:block hover:text-components-input-text-filled focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                className="hidden size-4 shrink-0 cursor-pointer border-none bg-transparent p-0 text-text-quaternary group-hover:block hover:text-components-input-text-filled focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                 onClick={(e) => {
                   e.stopPropagation()
                   handleDateChange()
                 }}
               >
-                <RiCloseCircleFill className="h-4 w-4" aria-hidden="true" />
+                <RiCloseCircleFill className="size-4" aria-hidden="true" />
               </button>
             )
           : null}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
index 56936d9251..4cc2b548f5 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
@@ -138,7 +138,7 @@ const ConditionItem = ({
           <div className="w-0 grow">
             <div className="flex h-6 min-w-0 items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pr-1.5 pl-1 shadow-xs">
               <div className="mr-0.5 p-px">
-                <MetadataIcon type={currentMetadata?.type} className="h-3 w-3" />
+                <MetadataIcon type={currentMetadata?.type} className="size-3" />
               </div>
               <div className="mr-0.5 min-w-0 flex-1 truncate system-xs-medium text-text-secondary">{currentMetadata?.name}</div>
               <div className="system-xs-regular text-text-tertiary">{currentMetadata?.type}</div>
@@ -194,12 +194,12 @@ const ConditionItem = ({
         </div>
       </div>
       <div
-        className="mt-1 ml-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
+        className="mt-1 ml-1 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={doRemoveCondition}
       >
-        <RiDeleteBinLine className="h-4 w-4" />
+        <RiDeleteBinLine className="size-4" />
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
index 0784b99cfb..d29cb950e2 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
@@ -66,7 +66,7 @@ const ConditionOperator = ({
                 ? selectedOption.label
                 : t(`${i18nPrefix}.select`, { ns: 'workflow' })
             }
-            <RiArrowDownSLine className="ml-1 h-3.5 w-3.5" />
+            <RiArrowDownSLine className="ml-1 size-3.5" />
           </Button>
         )}
       />
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
index d93af76fd7..acab16a00a 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
@@ -36,7 +36,7 @@ const ConditionValueMethod = ({
             size="small"
           >
             {capitalize(valueMethod)}
-            <RiArrowDownSLine className="ml-px h-3.5 w-3.5" />
+            <RiArrowDownSLine className="ml-px size-3.5" />
           </Button>
         )}
       />
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-variable-selector.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-variable-selector.tsx
index a81e2465e0..4c9c6880b9 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-variable-selector.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-variable-selector.tsx
@@ -55,7 +55,7 @@ const ConditionVariableSelector = ({
             {!valueSelector.length && (
               <>
                 <div className="flex grow items-center system-sm-regular text-components-input-text-placeholder">
-                  <Variable02 className="mr-1 h-4 w-4" />
+                  <Variable02 className="mr-1 size-4" />
                   {t('nodes.knowledgeRetrieval.metadata.panel.select', { ns: 'workflow' })}
                 </div>
                 <div className="flex h-5 shrink-0 items-center rounded-[5px] border border-divider-deep px-[5px] system-2xs-medium text-text-tertiary">
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx
index e554ba6c8c..b1beb5f45f 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx
@@ -43,7 +43,7 @@ const ConditionList = ({
               onClick={() => handleToggleConditionLogicalOperator()}
             >
               {logical_operator.toUpperCase()}
-              <RiLoopLeftLine className="ml-0.5 h-3 w-3" />
+              <RiLoopLeftLine className="ml-0.5 size-3" />
             </div>
           </div>
         )
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx
index 0d2ee187e8..b808f38a85 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx
@@ -54,7 +54,7 @@ const MetadataFilterSelector = ({
         )}
       >
         {selectedOption.value}
-        <RiArrowDownSLine className="h-3.5 w-3.5" />
+        <RiArrowDownSLine className="size-3.5" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-end"
@@ -76,7 +76,7 @@ const MetadataFilterSelector = ({
                 <div className="w-4 shrink-0">
                   {
                     option.key === value && (
-                      <RiCheckLine className="h-4 w-4 text-text-accent" />
+                      <RiCheckLine className="size-4 text-text-accent" />
                     )
                   }
                 </div>
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx
index 4bf403d0d3..5d96a96977 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx
@@ -19,17 +19,17 @@ const MetadataIcon = ({
     <>
       {
         (type === MetadataFilteringVariableType.string || type === MetadataFilteringVariableType.select) && (
-          <RiTextSnippet className={cn('h-3.5 w-3.5', className)} />
+          <RiTextSnippet className={cn('size-3.5', className)} />
         )
       }
       {
         type === MetadataFilteringVariableType.number && (
-          <RiHashtag className={cn('h-3.5 w-3.5', className)} />
+          <RiHashtag className={cn('size-3.5', className)} />
         )
       }
       {
         type === MetadataFilteringVariableType.time && (
-          <RiTimeLine className={cn('h-3.5 w-3.5', className)} />
+          <RiTimeLine className={cn('size-3.5', className)} />
         )
       }
     </>
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-panel.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-panel.tsx
index 3c92333bd4..fad0db1616 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-panel.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-panel.tsx
@@ -23,10 +23,10 @@ const MetadataPanel = ({
           {t('nodes.knowledgeRetrieval.metadata.panel.title', { ns: 'workflow' })}
         </div>
         <div
-          className="absolute right-2.5 bottom-0 flex h-8 w-8 cursor-pointer items-center justify-center"
+          className="absolute right-2.5 bottom-0 flex size-8 cursor-pointer items-center justify-center"
           onClick={onCancel}
         >
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+          <RiCloseLine className="size-4 text-text-tertiary" />
         </div>
       </div>
       <div className="px-1 py-2">
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
index da17b4b2b3..46b8d7af61 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
@@ -50,7 +50,7 @@ const MetadataTrigger = ({
             variant="secondary-accent"
             size="small"
           >
-            <RiFilter3Line className="mr-1 h-3.5 w-3.5" />
+            <RiFilter3Line className="mr-1 size-3.5" />
             {t('nodes.knowledgeRetrieval.metadata.panel.conditions', { ns: 'workflow' })}
             <div className="ml-1 flex items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary">
               {metadataFilteringConditions?.conditions.length || 0}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
index 953e8474e4..8aa49c1137 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
@@ -130,7 +130,7 @@ const RetrievalConfig: FC<Props> = ({
             disabled={readonly}
             className={cn(rerankModalOpen && 'bg-components-button-ghost-bg-hover')}
           >
-            <RiEqualizer2Line className="mr-1 h-3.5 w-3.5" />
+            <RiEqualizer2Line className="mr-1 size-3.5" />
             {t('retrievalSettings', { ns: 'dataset' })}
           </Button>
         )}
diff --git a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
index ee538bda95..53eb583bd4 100644
--- a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
@@ -42,14 +42,14 @@ const SubVariablePicker: FC<Props> = ({
               ? (
                   <div className="flex cursor-pointer justify-start">
                     <div className="inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark px-1.5 text-text-accent shadow-xs">
-                      <Variable02 className="h-3.5 w-3.5 shrink-0 text-text-accent" />
+                      <Variable02 className="size-3.5 shrink-0 text-text-accent" />
                       <div className="ml-0.5 truncate system-xs-medium">{selectedOption.name}</div>
                     </div>
                   </div>
                 )
               : (
                   <div className="flex pl-1 system-sm-regular text-components-input-text-placeholder group-hover/sub-variable-picker:text-text-tertiary">
-                    <Variable02 className="mr-1 h-4 w-4 shrink-0" />
+                    <Variable02 className="mr-1 size-4 shrink-0" />
                     <span>{t('placeholder.select', { ns: 'common' })}</span>
                   </div>
                 )}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
index 07e5f93ed2..744f3c9a29 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
@@ -131,10 +131,10 @@ const CodeEditor: FC<CodeEditorProps> = ({
                     <button
                       type="button"
                       aria-label={t('operation.format', { ns: 'common' })}
-                      className="flex h-6 w-6 items-center justify-center"
+                      className="flex size-6 items-center justify-center"
                       onClick={formatJsonContent}
                     >
-                      <span aria-hidden className="i-ri-indent-increase h-4 w-4 text-text-tertiary" />
+                      <span aria-hidden className="i-ri-indent-increase size-4 text-text-tertiary" />
                     </button>
                   )}
                 />
@@ -147,10 +147,10 @@ const CodeEditor: FC<CodeEditorProps> = ({
                   <button
                     type="button"
                     aria-label={t('operation.copy', { ns: 'common' })}
-                    className="flex h-6 w-6 items-center justify-center"
+                    className="flex size-6 items-center justify-center"
                     onClick={() => copy(value)}
                   >
-                    <span aria-hidden className="i-ri-clipboard-line h-4 w-4 text-text-tertiary" />
+                    <span aria-hidden className="i-ri-clipboard-line size-4 text-text-tertiary" />
                   </button>
                 )}
               />
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
index 7a4e1c1169..e2b97f77fa 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
@@ -13,7 +13,7 @@ const ErrorMessage: FC<ErrorMessageProps> = ({
 }) => {
   return (
     <div className={cn('mt-1 flex gap-x-1 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg p-2', className)}>
-      <RiErrorWarningFill className="h-4 w-4 shrink-0 text-text-destructive" />
+      <RiErrorWarningFill className="size-4 shrink-0 text-text-destructive" />
       <div className="max-h-12 grow overflow-y-auto system-xs-medium wrap-break-word whitespace-pre-line text-text-primary">
         {message}
       </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
index d521a0b861..282649de17 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
@@ -102,10 +102,10 @@ const JsonImporter: FC<JsonImporterProps> = ({
             <button
               type="button"
               aria-label={t('operation.close', { ns: 'common' })}
-              className="absolute right-2.5 bottom-0 flex h-8 w-8 items-center justify-center border-none bg-transparent p-0"
+              className="absolute right-2.5 bottom-0 flex size-8 items-center justify-center border-none bg-transparent p-0"
               onClick={onClose}
             >
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+              <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
             </button>
             <div className="flex pr-8 pl-1 system-xl-semibold text-text-primary">
               {t('nodes.llm.jsonSchema.import', { ns: 'workflow' })}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
index c8dbf3ab90..44c32645b7 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
@@ -217,7 +217,7 @@ function JsonSchemaConfigContent({
         </div>
         <button
           type="button"
-          className="absolute top-5 right-5 flex h-8 w-8 items-center justify-center p-1.5"
+          className="absolute top-5 right-5 flex size-8 items-center justify-center p-1.5"
           aria-label={t('operation.close', { ns: 'common' })}
           onClick={onClose}
         >
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
index ddb1ac2eb3..8dfd8af621 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
@@ -71,10 +71,10 @@ const GeneratedResult: FC<GeneratedResultProps> = ({
             <button
               type="button"
               aria-label={t('operation.close', { ns: 'common' })}
-              className="absolute top-2.5 right-2.5 flex h-8 w-8 items-center justify-center border-none bg-transparent p-0"
+              className="absolute top-2.5 right-2.5 flex size-8 items-center justify-center border-none bg-transparent p-0"
               onClick={onClose}
             >
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+              <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
             </button>
             {/* Title */}
             <div className="flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1">
@@ -100,7 +100,7 @@ const GeneratedResult: FC<GeneratedResultProps> = ({
             {/* Footer */}
             <div className="flex items-center justify-between p-4 pt-2">
               <Button variant="secondary" className="flex items-center gap-x-0.5" onClick={onBack}>
-                <RiArrowLeftLine className="h-4 w-4" />
+                <RiArrowLeftLine className="size-4" />
                 <span>{t('nodes.llm.jsonSchema.back', { ns: 'workflow' })}</span>
               </Button>
               <div className="flex items-center gap-x-2">
@@ -109,7 +109,7 @@ const GeneratedResult: FC<GeneratedResultProps> = ({
                   className="flex items-center gap-x-0.5"
                   onClick={onRegenerate}
                 >
-                  <RiSparklingLine className="h-4 w-4" />
+                  <RiSparklingLine className="size-4" />
                   <span>{t('nodes.llm.jsonSchema.regenerate', { ns: 'workflow' })}</span>
                 </Button>
                 <Button variant="primary" onClick={handleApply}>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
index bf15761d9d..2f2c346979 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
@@ -162,7 +162,7 @@ const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
             type="button"
             onClick={handleTrigger}
             className={cn(
-              'flex h-6 w-6 items-center justify-center rounded-md p-0.5 hover:bg-state-accent-hover',
+              'flex size-6 items-center justify-center rounded-md p-0.5 hover:bg-state-accent-hover',
               open && 'bg-state-accent-active',
             )}
           >
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
index 60311129db..f71fd12111 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
@@ -47,10 +47,10 @@ const PromptEditor: FC<PromptEditorProps> = ({
       <button
         type="button"
         aria-label={t('operation.close', { ns: 'common' })}
-        className="absolute top-2.5 right-2.5 flex h-8 w-8 items-center justify-center border-none bg-transparent p-0"
+        className="absolute top-2.5 right-2.5 flex size-8 items-center justify-center border-none bg-transparent p-0"
         onClick={onClose}
       >
-        <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+        <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
       </button>
       {/* Title */}
       <div className="flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1">
@@ -82,7 +82,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           <span>{t('nodes.llm.jsonSchema.instruction', { ns: 'workflow' })}</span>
           <Infotip
             aria-label={t('nodes.llm.jsonSchema.promptTooltip', { ns: 'workflow' })}
-            className="h-3.5 w-3.5"
+            className="size-3.5"
             iconClassName="h-full w-full"
           >
             {t('nodes.llm.jsonSchema.promptTooltip', { ns: 'workflow' })}
@@ -107,7 +107,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           className="flex items-center gap-x-0.5"
           onClick={onGenerate}
         >
-          <RiSparklingFill className="h-4 w-4" />
+          <RiSparklingFill className="size-4" />
           <span>{t('nodes.llm.jsonSchema.generate', { ns: 'workflow' })}</span>
         </Button>
       </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
index 8c57509f84..39899d33ec 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
@@ -27,7 +27,7 @@ const AddField = () => {
         className="flex items-center gap-x-px"
         onClick={handleAddField}
       >
-        <RiAddCircleFill className="h-3.5 w-3.5" />
+        <RiAddCircleFill className="size-3.5" />
         <span className="px-[3px]">{t('nodes.llm.jsonSchema.addField', { ns: 'workflow' })}</span>
       </Button>
     </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx
index 2f3b70aefc..d9ab25ef62 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx
@@ -30,11 +30,11 @@ const Actions: FC<ActionsProps> = ({
               <button
                 type="button"
                 aria-label={addChildFieldLabel}
-                className="flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled"
+                className="flex size-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled"
                 onClick={onAddChildField}
                 disabled={disableAddBtn}
               >
-                <span aria-hidden className="i-ri-add-circle-line h-4 w-4" />
+                <span aria-hidden className="i-ri-add-circle-line size-4" />
               </button>
             </span>
           )}
@@ -47,10 +47,10 @@ const Actions: FC<ActionsProps> = ({
             <button
               type="button"
               aria-label={editLabel}
-              className="flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+              className="flex size-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
               onClick={onEdit}
             >
-              <span aria-hidden className="i-ri-edit-line h-4 w-4" />
+              <span aria-hidden className="i-ri-edit-line size-4" />
             </button>
           )}
         />
@@ -62,10 +62,10 @@ const Actions: FC<ActionsProps> = ({
             <button
               type="button"
               aria-label={removeLabel}
-              className="flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
+              className="flex size-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
               onClick={onDelete}
             >
-              <span aria-hidden className="i-ri-delete-bin-line h-4 w-4" />
+              <span aria-hidden className="i-ri-delete-bin-line size-4" />
             </button>
           )}
         />
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
index e3f637954d..2e2f34f785 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
@@ -66,7 +66,7 @@ const TypeSelector: FC<TypeSelectorProps> = ({
               className="gap-x-1 rounded-lg px-2 py-1"
             >
               <SelectItemText className="px-1 system-sm-medium text-text-secondary">{item.text}</SelectItemText>
-              {isSelected && <RiCheckLine className="h-4 w-4 text-text-accent" />}
+              {isSelected && <RiCheckLine className="size-4 text-text-accent" />}
               <SelectItemIndicator className="hidden" />
             </SelectItem>
           )
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
index 73744db4c9..2195e18bbb 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
@@ -108,8 +108,8 @@ const SchemaNode: FC<SchemaNodeProps> = ({
             >
               {
                 isExpanded
-                  ? <RiArrowDropDownLine className="h-4 w-4" />
-                  : <RiArrowDropRightLine className="h-4 w-4" />
+                  ? <RiArrowDropDownLine className="size-4" />
+                  : <RiArrowDropRightLine className="size-4" />
               }
             </button>
           </div>
diff --git a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
index 05f84da78d..0bd2cd798e 100644
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@@ -40,7 +40,7 @@ const PromptGeneratorBtn: FC<Props> = ({
         className="hover:bg-[#155EFF]/8"
         onClick={showAutomaticTrue}
       >
-        <Generator className="h-4 w-4 text-primary-600" />
+        <Generator className="size-4 text-primary-600" />
       </ActionButton>
       {showAutomatic && (
         <GetAutomaticResModal
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index ba103736d4..17a5a0f2c0 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -180,7 +180,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
                       className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                       onClick={handleAddEmptyVariable}
                     >
-                      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                      <span className="i-ri-add-line size-4 text-text-tertiary" aria-hidden="true" />
                     </button>
                   )
                 : undefined
diff --git a/web/app/components/workflow/nodes/loop-start/index.tsx b/web/app/components/workflow/nodes/loop-start/index.tsx
index 9900b84856..05c2674b0a 100644
--- a/web/app/components/workflow/nodes/loop-start/index.tsx
+++ b/web/app/components/workflow/nodes/loop-start/index.tsx
@@ -9,13 +9,13 @@ const LoopStartNode = ({ id, data }: NodeProps) => {
   const { t } = useTranslation()
 
   return (
-    <div className="nodrag group mt-1 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg">
+    <div className="nodrag group mt-1 flex size-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg">
       <Tooltip>
         <TooltipTrigger
           aria-label={t('blocks.loop-start', { ns: 'workflow' })}
           className="flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500 p-0"
         >
-          <RiHome5Fill className="h-3 w-3 text-text-primary-on-surface" />
+          <RiHome5Fill className="size-3 text-text-primary-on-surface" />
         </TooltipTrigger>
         <TooltipContent>{t('blocks.loop-start', { ns: 'workflow' })}</TooltipContent>
       </Tooltip>
@@ -39,7 +39,7 @@ export const LoopStartNodeDumb = () => {
           aria-label={t('blocks.loop-start', { ns: 'workflow' })}
           className="flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500 p-0"
         >
-          <RiHome5Fill className="h-3 w-3 text-text-primary-on-surface" />
+          <RiHome5Fill className="size-3 text-text-primary-on-surface" />
         </TooltipTrigger>
         <TooltipContent>{t('blocks.loop-start', { ns: 'workflow' })}</TooltipContent>
       </Tooltip>
diff --git a/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx
index 99c0f9c81d..d01b4b46cf 100644
--- a/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx
@@ -656,7 +656,7 @@ describe('loop path', () => {
         />,
       )
 
-      fireEvent.click(container.querySelector('.mr-4.flex.h-5.w-5.cursor-pointer.items-center.justify-center') as HTMLElement)
+      fireEvent.click(container.querySelector('.mr-4.flex.size-5.cursor-pointer.items-center.justify-center') as HTMLElement)
       fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '8' } })
 
       expect(handleAddLoopVariable).toHaveBeenCalled()
diff --git a/web/app/components/workflow/nodes/loop/add-block.tsx b/web/app/components/workflow/nodes/loop/add-block.tsx
index bed2bf20ae..0861a9d228 100644
--- a/web/app/components/workflow/nodes/loop/add-block.tsx
+++ b/web/app/components/workflow/nodes/loop/add-block.tsx
@@ -55,7 +55,7 @@ const AddBlock = ({
         open && 'bg-components-button-secondary-bg-hover',
       )}
       >
-        <RiAddLine className="mr-1 h-4 w-4" />
+        <RiAddLine className="mr-1 size-4" />
         {t('common.addBlock', { ns: 'workflow' })}
       </div>
     )
diff --git a/web/app/components/workflow/nodes/loop/components/condition-add.tsx b/web/app/components/workflow/nodes/loop/components/condition-add.tsx
index 5187c3bbf8..5f7fc170b1 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-add.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-add.tsx
@@ -48,7 +48,7 @@ const ConditionAdd = ({
             className={className}
             disabled={disabled}
           >
-            <RiAddLine className="mr-1 h-3.5 w-3.5" />
+            <RiAddLine className="mr-1 size-3.5" />
             {t('nodes.ifElse.addCondition', { ns: 'workflow' })}
           </Button>
         )}
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
index 0c55ed4e1c..a21963f1d0 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
@@ -231,7 +231,7 @@ const ConditionItem = ({
                         ? (
                             <div className="flex cursor-pointer justify-start">
                               <div className="inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark px-1.5 text-text-accent shadow-xs">
-                                <Variable02 className="h-3.5 w-3.5 shrink-0 text-text-accent" />
+                                <Variable02 className="size-3.5 shrink-0 text-text-accent" />
                                 <div className="ml-0.5 truncate system-xs-medium">{selectedSubVarOption.name}</div>
                               </div>
                             </div>
@@ -350,12 +350,12 @@ const ConditionItem = ({
         }
       </div>
       <div
-        className="mt-1 ml-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
+        className="mt-1 ml-1 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={doRemoveCondition}
       >
-        <RiDeleteBinLine className="h-4 w-4" />
+        <RiDeleteBinLine className="size-4" />
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
index d343b0c8e5..e0419ecca6 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
@@ -62,7 +62,7 @@ const ConditionOperator = ({
             ? selectedOption.label
             : t(`${i18nPrefix}.select`, { ns: 'workflow' })
         }
-        <RiArrowDownSLine className="ml-1 h-3.5 w-3.5" />
+        <RiArrowDownSLine className="ml-1 size-3.5" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-end"
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx
index db1e57f4e7..6b2ad4d62f 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx
@@ -87,7 +87,7 @@ const ConditionList = ({
               onClick={() => doToggleConditionLogicalOperator(conditionId)}
             >
               {!!logicalOperator && logicalOperator.toUpperCase()}
-              <RiLoopLeftLine className="ml-0.5 h-3 w-3" />
+              <RiLoopLeftLine className="ml-0.5 size-3" />
             </div>
           </div>
         )
diff --git a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
index a17d7589f1..0830e89188 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
@@ -84,7 +84,7 @@ const ConditionNumberInput = ({
           )}
         >
           {capitalize(numberVarType)}
-          <RiArrowDownSLine className="ml-px h-3.5 w-3.5" />
+          <RiArrowDownSLine className="ml-px size-3.5" />
         </DropdownMenuTrigger>
         <DropdownMenuContent
           placement="bottom-start"
@@ -138,7 +138,7 @@ const ConditionNumberInput = ({
                 {
                   !value && (
                     <div className="flex h-6 items-center p-1 text-[13px] text-components-input-text-placeholder">
-                      <Variable02 className="mr-1 h-4 w-4 shrink-0" />
+                      <Variable02 className="mr-1 size-4 shrink-0" />
                       <div className="w-0 grow truncate">{t('nodes.ifElse.selectVariable', { ns: 'workflow' })}</div>
                     </div>
                   )
diff --git a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
index 610b389244..3e1c70e319 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
@@ -128,7 +128,7 @@ const ConditionWrap: FC<Props> = ({
                         size="small"
                         disabled={readOnly}
                       >
-                        <RiAddLine className="mr-1 h-3.5 w-3.5" />
+                        <RiAddLine className="mr-1 size-3.5" />
                         {t('nodes.ifElse.addSubVariable', { ns: 'workflow' })}
                       </Button>
                     </SelectTrigger>
diff --git a/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx b/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx
index b0668cca60..85136a0f32 100644
--- a/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx
@@ -98,7 +98,7 @@ const Item = ({
         size="l"
         onClick={() => handleRemoveLoopVariable(item.id)}
       >
-        <RiDeleteBinLine className="h-4 w-4 text-text-tertiary" />
+        <RiDeleteBinLine className="size-4 text-text-tertiary" />
       </ActionButton>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/loop/insert-block.tsx b/web/app/components/workflow/nodes/loop/insert-block.tsx
index a993f54b41..cfbf50ef66 100644
--- a/web/app/components/workflow/nodes/loop/insert-block.tsx
+++ b/web/app/components/workflow/nodes/loop/insert-block.tsx
@@ -42,7 +42,7 @@ const InsertBlock = ({
     <div
       className={cn(
         'nopan nodrag',
-        'absolute top-1/2 left-1/2 hidden -translate-x-1/2 -translate-y-1/2 group-hover/insert:block',
+        'absolute top-1/2 left-1/2 hidden -translate-1/2 group-hover/insert:block',
         open && 'block!',
       )}
     >
diff --git a/web/app/components/workflow/nodes/loop/panel.tsx b/web/app/components/workflow/nodes/loop/panel.tsx
index b1341bf73e..d6d3c05210 100644
--- a/web/app/components/workflow/nodes/loop/panel.tsx
+++ b/web/app/components/workflow/nodes/loop/panel.tsx
@@ -47,10 +47,10 @@ const Panel: FC<NodePanelProps<LoopNodeType>> = ({
           title={<div className="pl-3">{t('nodes.loop.loopVariables', { ns: 'workflow' })}</div>}
           operations={(
             <div
-              className="mr-4 flex h-5 w-5 cursor-pointer items-center justify-center"
+              className="mr-4 flex size-5 cursor-pointer items-center justify-center"
               onClick={handleAddLoopVariable}
             >
-              <RiAddLine className="h-4 w-4 text-text-tertiary" />
+              <RiAddLine className="size-4 text-text-tertiary" />
             </div>
           )}
         >
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
index cc254d324e..b8a38bca8e 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
@@ -28,12 +28,12 @@ const Item: FC<Props> = ({
     <div className="group relative rounded-lg bg-components-input-bg-normal px-2.5 py-2 hover:shadow-xs">
       <div className="flex justify-between">
         <div className="flex items-center">
-          <Variable02 className="h-3.5 w-3.5 text-text-accent-secondary" />
+          <Variable02 className="size-3.5 text-text-accent-secondary" />
           <div className="ml-1 text-[13px] font-medium text-text-primary">{payload.name}</div>
           <div className="ml-2 text-xs font-normal text-text-tertiary capitalize">{payload.type}</div>
         </div>
         {payload.required && (
-          <div className="text-xs leading-4 font-normal text-text-tertiary uppercase">{t(`${i18nPrefix}.addExtractParameterContent.required`, { ns: 'workflow' })}</div>
+          <div className="text-xs/4 font-normal text-text-tertiary uppercase">{t(`${i18nPrefix}.addExtractParameterContent.required`, { ns: 'workflow' })}</div>
         )}
       </div>
       <div className="mt-0.5 text-xs leading-[18px] font-normal text-text-tertiary">{payload.description}</div>
@@ -44,14 +44,14 @@ const Item: FC<Props> = ({
           className="cursor-pointer rounded-md p-1 hover:bg-state-base-hover"
           onClick={onEdit}
         >
-          <RiEditLine className="h-4 w-4 text-text-tertiary" />
+          <RiEditLine className="size-4 text-text-tertiary" />
         </div>
 
         <div
           className="group shrink-0 cursor-pointer rounded-md p-1 hover:bg-state-destructive-hover!"
           onClick={onDelete}
         >
-          <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover:text-text-destructive" />
+          <RiDeleteBinLine className="size-4 text-text-tertiary group-hover:text-text-destructive" />
         </div>
       </div>
     </div>
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index 895f240176..d739fa7277 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -125,7 +125,7 @@ const AddExtractParameter: FC<Props> = ({
           className="mx-1 cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
           onClick={showAddModal}
         >
-          <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          <span className="i-ri-add-line size-4 text-text-tertiary" aria-hidden="true" />
         </button>
       )}
       {isShowModal && (
diff --git a/web/app/components/workflow/nodes/parameter-extractor/panel.tsx b/web/app/components/workflow/nodes/parameter-extractor/panel.tsx
index 9165d53394..698222af75 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/panel.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/panel.tsx
@@ -133,7 +133,7 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
               <span className="uppercase">{t(`${i18nPrefix}.instruction`, { ns: 'workflow' })}</span>
               <Infotip
                 aria-label={t(`${i18nPrefix}.instructionTip`, { ns: 'workflow' })}
-                className="ml-0.5 h-3.5 w-3.5"
+                className="ml-0.5 size-3.5"
                 iconClassName="h-3.5 w-3.5"
                 popupClassName="w-[120px]"
               >
diff --git a/web/app/components/workflow/nodes/question-classifier/components/advanced-setting.tsx b/web/app/components/workflow/nodes/question-classifier/components/advanced-setting.tsx
index d788d2518f..21a925f7bc 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/advanced-setting.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/advanced-setting.tsx
@@ -50,7 +50,7 @@ const AdvancedSetting: FC<Props> = ({
             <span className="uppercase">{t(`${i18nPrefix}.instruction`, { ns: 'workflow' })}</span>
             <Infotip
               aria-label={t(`${i18nPrefix}.instructionTip`, { ns: 'workflow' })}
-              className="ml-0.5 h-3.5 w-3.5"
+              className="ml-0.5 size-3.5"
               iconClassName="h-3.5 w-3.5"
               popupClassName="w-[120px]"
             >
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
index 139c314def..9894e29cc1 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
@@ -115,7 +115,7 @@ const ClassItem: FC<Props> = ({
       )
     : readonly
       ? (
-          <div className="-ml-1 px-1 py-0.5 text-left text-xs leading-4 font-semibold text-text-secondary">
+          <div className="-ml-1 px-1 py-0.5 text-left text-xs/4 font-semibold text-text-secondary">
             {displayLabel}
           </div>
         )
@@ -124,7 +124,7 @@ const ClassItem: FC<Props> = ({
             type="button"
             aria-label={displayLabel}
             className={cn(
-              '-ml-1 rounded px-1 py-0.5 text-left text-xs leading-4 font-semibold text-text-secondary transition-colors',
+              '-ml-1 rounded px-1 py-0.5 text-left text-xs/4 font-semibold text-text-secondary transition-colors',
               'cursor-text hover:bg-state-base-hover',
             )}
             onDoubleClick={handleLabelEditStart}
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
index cf92439cd5..bb6341ae5f 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
@@ -129,7 +129,7 @@ const ClassList: FC<Props> = ({
           {list.length > 0 && (
             <ArrowDownRoundFill
               className={cn(
-                'h-4 w-4 text-text-quaternary transition-transform duration-200',
+                'size-4 text-text-quaternary transition-transform duration-200',
                 collapsed && '-rotate-90',
               )}
               aria-hidden="true"
@@ -174,7 +174,7 @@ const ClassList: FC<Props> = ({
                     <div>
                       {canDrag && (
                         <RiDraggable className={cn(
-                          'handle absolute top-3 left-2 hidden h-3 w-3 cursor-pointer text-text-tertiary',
+                          'handle absolute top-3 left-2 hidden size-3 cursor-pointer text-text-tertiary',
                           'group-hover:block',
                         )}
                         />
diff --git a/web/app/components/workflow/nodes/question-classifier/node.tsx b/web/app/components/workflow/nodes/question-classifier/node.tsx
index ac932f4767..181416e014 100644
--- a/web/app/components/workflow/nodes/question-classifier/node.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/node.tsx
@@ -42,7 +42,7 @@ const TruncatedClassItem: FC<TruncatedClassItemProps> = ({ topic, index, nodeId,
 
   return (
     <div className="flex flex-col gap-y-0.5 rounded-md bg-workflow-block-parma-bg px-[5px] py-[3px]">
-      <div className="text-xs leading-4 font-semibold text-text-secondary">
+      <div className="text-xs/4 font-semibold text-text-secondary">
         {displayLabel}
       </div>
       {shouldShowTooltip
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index ce03fb55f6..2820f209d6 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -57,7 +57,7 @@ const VarItem: FC<Props> = ({
   return (
     <div ref={ref} className={cn('flex h-8 cursor-pointer items-center justify-between rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 shadow-xs hover:shadow-md', className)}>
       <div className="flex w-0 grow items-center space-x-1">
-        <Variable02 className={cn('h-3.5 w-3.5 text-text-accent', canDrag && 'group-hover:opacity-0')} />
+        <Variable02 className={cn('size-3.5 text-text-accent', canDrag && 'group-hover:opacity-0')} />
         <div title={payload.variable} className="max-w-[130px] shrink-0 truncate text-[13px] font-medium text-text-secondary">{payload.variable}</div>
         {payload.label && (
           <>
@@ -81,7 +81,7 @@ const VarItem: FC<Props> = ({
                     {payload.required && (
                       <div className="mr-2 text-xs font-normal text-text-tertiary">{t('nodes.start.required', { ns: 'workflow' })}</div>
                     )}
-                    <InputVarTypeIcon type={payload.type} className="h-3.5 w-3.5 text-text-tertiary" />
+                    <InputVarTypeIcon type={payload.type} className="size-3.5 text-text-tertiary" />
                   </>
                 )
               : (!readonly && (
@@ -92,7 +92,7 @@ const VarItem: FC<Props> = ({
                       className="mr-1 cursor-pointer rounded-md border-none bg-transparent p-1 hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                       onClick={showEditVarModal}
                     >
-                      <Edit03 className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                      <Edit03 className="size-4 text-text-tertiary" aria-hidden="true" />
                     </button>
                     <button
                       type="button"
@@ -100,7 +100,7 @@ const VarItem: FC<Props> = ({
                       className="group cursor-pointer rounded-md border-none bg-transparent p-1 hover:bg-state-destructive-hover focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
                       onClick={onRemove}
                     >
-                      <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover:text-text-destructive" aria-hidden="true" />
+                      <RiDeleteBinLine className="size-4 text-text-tertiary group-hover:text-text-destructive" aria-hidden="true" />
                     </button>
                   </>
                 ))}
diff --git a/web/app/components/workflow/nodes/start/components/var-list.tsx b/web/app/components/workflow/nodes/start/components/var-list.tsx
index 3cb1b82edf..6e5caf6a83 100644
--- a/web/app/components/workflow/nodes/start/components/var-list.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-list.tsx
@@ -109,7 +109,7 @@ const VarList: FC<Props> = ({
           />
           {canDrag && (
             <RiDraggable className={cn(
-              'handle absolute top-2.5 left-3 hidden h-3 w-3 cursor-pointer text-text-tertiary',
+              'handle absolute top-2.5 left-3 hidden size-3 cursor-pointer text-text-tertiary',
               'group-hover:block',
             )}
             />
diff --git a/web/app/components/workflow/nodes/start/node.tsx b/web/app/components/workflow/nodes/start/node.tsx
index 7d1cb31766..f425b08fe4 100644
--- a/web/app/components/workflow/nodes/start/node.tsx
+++ b/web/app/components/workflow/nodes/start/node.tsx
@@ -23,13 +23,13 @@ const Node: FC<NodeProps<StartNodeType>> = ({
         {variables.map(variable => (
           <div key={variable.variable} className="flex h-6 items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1">
             <div className="flex w-0 grow items-center space-x-1">
-              <Variable02 className="h-3.5 w-3.5 shrink-0 text-text-accent" />
+              <Variable02 className="size-3.5 shrink-0 text-text-accent" />
               <span className="w-0 grow truncate system-xs-regular text-text-secondary">{variable.variable}</span>
             </div>
 
             <div className="ml-1 flex items-center space-x-1">
               {variable.required && <span className="system-2xs-regular-uppercase text-text-tertiary">{t(`${i18nPrefix}.required`, { ns: 'workflow' })}</span>}
-              <InputVarTypeIcon type={variable.type} className="h-3 w-3 text-text-tertiary" />
+              <InputVarTypeIcon type={variable.type} className="size-3 text-text-tertiary" />
             </div>
           </div>
         ))}
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx
index c723ee8931..bf250c2ed2 100644
--- a/web/app/components/workflow/nodes/start/panel.tsx
+++ b/web/app/components/workflow/nodes/start/panel.tsx
@@ -53,7 +53,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
                     className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                     onClick={showAddVarModal}
                   >
-                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                    <span className="i-ri-add-line size-4 text-text-tertiary" aria-hidden="true" />
                   </button>
                 )
               : undefined
diff --git a/web/app/components/workflow/nodes/template-transform/panel.tsx b/web/app/components/workflow/nodes/template-transform/panel.tsx
index 4993d232d1..63d31b1043 100644
--- a/web/app/components/workflow/nodes/template-transform/panel.tsx
+++ b/web/app/components/workflow/nodes/template-transform/panel.tsx
@@ -49,7 +49,7 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
                     className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                     onClick={handleAddEmptyVariable}
                   >
-                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                    <span className="i-ri-add-line size-4 text-text-tertiary" aria-hidden="true" />
                   </button>
                 )
               : undefined
@@ -85,7 +85,7 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
                 rel="noopener noreferrer"
               >
                 <span>{t(`${i18nPrefix}.codeSupportTip`, { ns: 'workflow' })}</span>
-                <RiQuestionLine className="h-3 w-3" />
+                <RiQuestionLine className="size-3" />
               </a>
               <div className="mx-1.5 h-3 w-px bg-divider-regular"></div>
             </div>
diff --git a/web/app/components/workflow/nodes/tool/components/copy-id.tsx b/web/app/components/workflow/nodes/tool/components/copy-id.tsx
index 18a510caaf..2c55b009a4 100644
--- a/web/app/components/workflow/nodes/tool/components/copy-id.tsx
+++ b/web/app/components/workflow/nodes/tool/components/copy-id.tsx
@@ -44,7 +44,7 @@ const CopyFeedbackNew = ({ content }: Props) => {
               >
                 {content}
               </span>
-              <span aria-hidden className="i-ri-file-copy-line h-3 w-3 shrink-0 text-text-tertiary opacity-0 group-hover/copy:opacity-100" />
+              <span aria-hidden className="i-ri-file-copy-line size-3 shrink-0 text-text-tertiary opacity-0 group-hover/copy:opacity-100" />
             </button>
           )}
         />
diff --git a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx
index 1287fd7a21..83e273329f 100644
--- a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx
+++ b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx
@@ -26,7 +26,7 @@ const Placeholder = ({ disableVariableInsertion = false, hideBadge = false }: Pl
   return (
     <div
       className={cn(
-        'pointer-events-auto flex h-full w-full cursor-text px-2',
+        'pointer-events-auto flex size-full cursor-text px-2',
         !hideBadge ? 'items-center' : 'items-start py-1',
       )}
       onClick={(e) => {
@@ -38,7 +38,7 @@ const Placeholder = ({ disableVariableInsertion = false, hideBadge = false }: Pl
         {t('nodes.tool.insertPlaceholder1', { ns: 'workflow' })}
         {(!disableVariableInsertion) && (
           <>
-            <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="mx-0.5 flex size-4 items-center justify-center rounded-sm bg-components-kbd-bg-gray system-kbd text-text-placeholder">/</div>
             <div
               className="cursor-pointer system-sm-regular text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
               onMouseDown={((e) => {
diff --git a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
index 1cb3179135..fa7c1b867d 100644
--- a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
@@ -124,7 +124,7 @@ const ToolFormItem: FC<Props> = ({
           )}
         </div>
         {showDescription && tooltip && (
-          <div className="pb-0.5 body-xs-regular break-words text-text-tertiary">
+          <div className="pb-0.5 body-xs-regular wrap-break-word text-text-tertiary">
             {renderDescriptionWithLinks(tooltip[language] || tooltip.en_US)}
           </div>
         )}
diff --git a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
index 3cae373d48..40119674d4 100644
--- a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
+++ b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
@@ -59,7 +59,7 @@ const TriggerFormItem: FC<Props> = ({
           {!showDescription && tooltip && (
             <Infotip
               aria-label={tooltip[language] || tooltip.en_US}
-              className="ml-1 h-4 w-4"
+              className="ml-1 size-4"
               popupClassName="w-[200px]"
             >
               {tooltip[language] || tooltip.en_US}
diff --git a/web/app/components/workflow/nodes/trigger-schedule/components/monthly-days-selector.tsx b/web/app/components/workflow/nodes/trigger-schedule/components/monthly-days-selector.tsx
index 23e87554e3..5c47b9a9e7 100644
--- a/web/app/components/workflow/nodes/trigger-schedule/components/monthly-days-selector.tsx
+++ b/web/app/components/workflow/nodes/trigger-schedule/components/monthly-days-selector.tsx
@@ -59,7 +59,7 @@ const MonthlyDaysSelector = ({ selectedDays, onChange }: MonthlyDaysSelectorProp
                       </button>
                       <Infotip
                         aria-label={t('nodes.triggerSchedule.lastDayTooltip', { ns: 'workflow' })}
-                        className="mr-1 h-3 w-3"
+                        className="mr-1 size-3"
                         iconClassName="h-3 w-3"
                       >
                         {t('nodes.triggerSchedule.lastDayTooltip', { ns: 'workflow' })}
diff --git a/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx b/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
index e2e82cddde..55cc0ea2e5 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
@@ -115,7 +115,7 @@ const renderInputCell = (
       disabled={readonly}
       wrapperClassName="w-full min-w-0"
       className={cn(
-        'h-6 rounded-none border-0 bg-transparent px-0 py-0 shadow-none',
+        'h-6 rounded-none border-0 bg-transparent p-0 shadow-none',
         'hover:border-transparent hover:bg-transparent focus:border-transparent focus:bg-transparent',
         'system-sm-regular text-text-secondary placeholder:text-text-quaternary',
       )}
@@ -315,7 +315,7 @@ const GenericTable: FC<GenericTableProps> = ({
                       aria-label="Delete row"
                     >
                       {/* eslint-disable-next-line hyoban/prefer-tailwind-icons */}
-                      <RiDeleteBinLine className="h-3.5 w-3.5 text-text-destructive" />
+                      <RiDeleteBinLine className="size-3.5 text-text-destructive" />
                     </button>
                   </div>
                 )}
diff --git a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
index 9acfa7e702..8ca51eb4aa 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
@@ -167,10 +167,10 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({
                       >
                         <span className="mt-0.5 w-0.5 bg-divider-regular" style={{ height: '28px' }} />
                         <span className="flex-1" style={{ width: '352px', height: '32px' }}>
-                          <span className="block text-xs leading-4 text-text-tertiary">
+                          <span className="block text-xs/4 text-text-tertiary">
                             {t(`${i18nPrefix}.debugUrlTitle`, { ns: 'workflow' })}
                           </span>
-                          <span className="block truncate text-xs leading-4 text-text-primary">
+                          <span className="block truncate text-xs/4 text-text-primary">
                             {inputs.webhook_debug_url}
                           </span>
                         </span>
diff --git a/web/app/components/workflow/nodes/variable-assigner/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/variable-assigner/__tests__/integration.spec.tsx
index 11ec8bdbcd..cf89dfc11d 100644
--- a/web/app/components/workflow/nodes/variable-assigner/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/__tests__/integration.spec.tsx
@@ -192,7 +192,7 @@ describe('variable-assigner path', () => {
         />,
       )
 
-      await user.click(container.querySelector('.h-4.w-4.cursor-pointer') as HTMLElement)
+      await user.click(container.querySelector('.size-4.cursor-pointer') as HTMLElement)
       await user.click(screen.getByRole('button', { name: 'confirm-add-variable' }))
 
       expect(mockHandleAssignVariableValueChange).toHaveBeenCalledWith(
@@ -434,7 +434,7 @@ describe('variable-assigner path', () => {
       expect(container).toHaveTextContent('Source Node:source-node.initialVar:false')
       expect(container.querySelector('.relative.rounded-lg')).toHaveClass('border-dashed!')
 
-      await user.click(container.querySelector('.h-4.w-4.cursor-pointer') as HTMLElement)
+      await user.click(container.querySelector('.size-4.cursor-pointer') as HTMLElement)
       await user.click(screen.getByRole('button', { name: 'confirm-add-variable' }))
       expect(mockHandleAssignVariableValueChange).toHaveBeenCalled()
     })
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
index 078f0c12b5..7388fa64d6 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
@@ -56,14 +56,14 @@ const AddVariable = ({
               <div
                 className={cn(
                   'group/addvariable flex items-center justify-center',
-                  'h-4 w-4 cursor-pointer',
+                  'size-4 cursor-pointer',
                   'hover:rounded-full hover:bg-primary-600',
                   open && 'rounded-full! bg-primary-600!',
                 )}
               >
                 <Plus02
                   className={cn(
-                    'h-2.5 w-2.5 text-text-tertiary',
+                    'size-2.5 text-text-tertiary',
                     'group-hover/addvariable:text-text-primary',
                     open && 'text-text-primary!',
                   )}
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
index 24621701d1..caa2bb8cfe 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
@@ -116,7 +116,7 @@ const NodeGroupItem = ({
           <div
             className={cn(
               'relative flex h-[22px] items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-[10px] font-normal text-text-tertiary uppercase',
-              (showSelectedBorder || showSelectionBorder) && 'bg-black/[0.02]!',
+              (showSelectedBorder || showSelectionBorder) && 'bg-black/2!',
             )}
           >
             {t(`${i18nPrefix}.varNotSet`, { ns: 'workflow' })}
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
index 70f3885055..e4c2de1789 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
@@ -50,26 +50,26 @@ const NodeVariableItem = ({
   const VariableIcon = useMemo(() => {
     if (isEnv) {
       return (
-        <Env className="h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600" />
+        <Env className="size-3.5 shrink-0 text-util-colors-violet-violet-600" />
       )
     }
 
     if (isChatVar) {
       return (
-        <BubbleX className="h-3.5 w-3.5 shrink-0 text-util-colors-teal-teal-700" />
+        <BubbleX className="size-3.5 shrink-0 text-util-colors-teal-teal-700" />
       )
     }
 
     if (isRagVar) {
       return (
-        <InputField className="h-3.5 w-3.5 shrink-0 text-text-accent" />
+        <InputField className="size-3.5 shrink-0 text-text-accent" />
       )
     }
 
     return (
       <Variable02
         className={cn(
-          'h-3.5 w-3.5 shrink-0 text-text-accent',
+          'size-3.5 shrink-0 text-text-accent',
           isException && 'text-text-warning',
         )}
       />
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
index bc1e428b6a..0f23c0c891 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
@@ -107,7 +107,7 @@ const VarGroupItem: FC<Props> = ({
         ? (
             <div className="flex items-center">
               <div className="flex items-center normal-case!">
-                <Folder className="mr-0.5 h-3.5 w-3.5" />
+                <Folder className="mr-0.5 size-3.5" />
                 {(!isEditGroupName)
                   ? (
                       <div className="flex h-6 cursor-text items-center rounded-lg px-1 system-sm-semibold text-text-secondary hover:bg-gray-100" onClick={setEditGroupName}>
@@ -137,7 +137,7 @@ const VarGroupItem: FC<Props> = ({
                   onClick={onRemove}
                 >
                   <RiDeleteBinLine
-                    className="h-4 w-4"
+                    className="size-4"
                   />
                 </div>
               )}
diff --git a/web/app/components/workflow/note-node/note-editor/editor.tsx b/web/app/components/workflow/note-node/note-editor/editor.tsx
index 7af1b0ddeb..7c3f84ed60 100644
--- a/web/app/components/workflow/note-node/note-editor/editor.tsx
+++ b/web/app/components/workflow/note-node/note-editor/editor.tsx
@@ -43,7 +43,7 @@ const Editor = ({
               onFocus={() => setHistoryShortcutsEnabled?.(false)}
               onBlur={() => setHistoryShortcutsEnabled?.(true)}
               spellCheck={false}
-              className="h-full w-full text-text-secondary caret-primary-600 outline-hidden"
+              className="size-full text-text-secondary caret-primary-600 outline-hidden"
             />
           </div>
         )}
diff --git a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
index 804f7c6e8d..503b1ff3bf 100644
--- a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
+++ b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
@@ -137,7 +137,7 @@ const LinkEditorComponent = ({
                       target="_blank"
                       rel="noopener noreferrer"
                     >
-                      <RiExternalLinkLine className="mr-1 h-3 w-3" />
+                      <RiExternalLinkLine className="mr-1 size-3" />
                       <div className="mr-1">
                         {t('nodes.note.editor.openLink', { ns: 'workflow' })}
                       </div>
@@ -156,14 +156,14 @@ const LinkEditorComponent = ({
                         setLinkOperatorShow(false)
                       }}
                     >
-                      <RiEditLine className="mr-1 h-3 w-3" />
+                      <RiEditLine className="mr-1 size-3" />
                       {t('operation.edit', { ns: 'common' })}
                     </div>
                     <div
                       className="flex h-6 cursor-pointer items-center rounded-md px-2 hover:bg-state-base-hover"
                       onClick={handleUnlink}
                     >
-                      <RiLinkUnlinkM className="mr-1 h-3 w-3" />
+                      <RiLinkUnlinkM className="mr-1 size-3" />
                       {t('nodes.note.editor.unlink', { ns: 'workflow' })}
                     </div>
                   </>
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
index 2b12a947ea..81d9978c16 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
@@ -65,13 +65,13 @@ const ColorPicker = ({
           <button
             type="button"
             className={cn(
-              'flex h-8 w-8 cursor-pointer items-center justify-center rounded-md hover:bg-black/5',
+              'flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-black/5',
               open && 'bg-black/5',
             )}
           >
             <div
               className={cn(
-                'h-4 w-4 rounded-full border border-black/5',
+                'size-4 rounded-full border border-black/5',
                 THEME_MAP[theme]!.title,
               )}
             >
@@ -89,7 +89,7 @@ const ColorPicker = ({
             COLOR_LIST.map(color => (
               <div
                 key={color.key}
-                className="group relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-md"
+                className="group relative flex size-8 cursor-pointer items-center justify-center rounded-md"
                 onClick={(e) => {
                   e.stopPropagation()
                   onThemeChange(color.key)
@@ -105,7 +105,7 @@ const ColorPicker = ({
                 </div>
                 <div
                   className={cn(
-                    'absolute top-1/2 left-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-black/5',
+                    'absolute top-1/2 left-1/2 size-4 -translate-1/2 rounded-full border border-black/5',
                     color.inner,
                   )}
                 >
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
index 9f9c02de33..946fd69ba1 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
@@ -25,15 +25,15 @@ const Command = ({
   const icon = useMemo(() => {
     switch (type) {
       case 'bold':
-        return <span aria-hidden className={cn('i-ri-bold h-4 w-4', selectedIsBold && 'text-primary-600')} />
+        return <span aria-hidden className={cn('i-ri-bold size-4', selectedIsBold && 'text-primary-600')} />
       case 'italic':
-        return <span aria-hidden className={cn('i-ri-italic h-4 w-4', selectedIsItalic && 'text-primary-600')} />
+        return <span aria-hidden className={cn('i-ri-italic size-4', selectedIsItalic && 'text-primary-600')} />
       case 'strikethrough':
-        return <span aria-hidden className={cn('i-ri-strikethrough h-4 w-4', selectedIsStrikeThrough && 'text-primary-600')} />
+        return <span aria-hidden className={cn('i-ri-strikethrough size-4', selectedIsStrikeThrough && 'text-primary-600')} />
       case 'link':
-        return <span aria-hidden className={cn('i-ri-link h-4 w-4', selectedIsLink && 'text-primary-600')} />
+        return <span aria-hidden className={cn('i-ri-link size-4', selectedIsLink && 'text-primary-600')} />
       case 'bullet':
-        return <span aria-hidden className={cn('i-ri-list-unordered h-4 w-4', selectedIsBullet && 'text-primary-600')} />
+        return <span aria-hidden className={cn('i-ri-list-unordered size-4', selectedIsBullet && 'text-primary-600')} />
     }
   }, [type, selectedIsBold, selectedIsItalic, selectedIsStrikeThrough, selectedIsLink, selectedIsBullet])
 
@@ -60,7 +60,7 @@ const Command = ({
             type="button"
             aria-label={tip}
             className={cn(
-              'flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-accent-active hover:text-text-accent',
+              'flex size-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-accent-active hover:text-text-accent',
               type === 'bold' && selectedIsBold && 'bg-state-accent-active',
               type === 'italic' && selectedIsItalic && 'bg-state-accent-active',
               type === 'strikethrough' && selectedIsStrikeThrough && 'bg-state-accent-active',
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
index 13da51deb7..70ca906e8e 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
@@ -48,7 +48,7 @@ const FontSizeSelector = () => {
               fontSizeSelectorShow && 'bg-state-base-hover text-text-secondary',
             )}
           >
-            <RiFontSize className="mr-1 h-4 w-4" />
+            <RiFontSize className="mr-1 size-4" />
             {FONT_SIZE_LIST.find(font => font.key === fontSize)?.value || t('nodes.note.editor.small', { ns: 'workflow' })}
           </button>
         )}
@@ -77,7 +77,7 @@ const FontSizeSelector = () => {
                 </div>
                 {
                   fontSize === font.key && (
-                    <Check className="h-4 w-4 text-text-accent" />
+                    <Check className="size-4 text-text-accent" />
                   )
                 }
               </div>
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
index fdc53a7d54..e5768af574 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
@@ -41,7 +41,7 @@ const Operator = ({
         render={<div />}
         aria-label={t('operation.more', { ns: 'common' })}
         className={cn(
-          'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+          'flex size-8 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
           open && 'bg-state-base-hover text-text-secondary',
         )}
         onMouseDown={(event) => {
@@ -52,7 +52,7 @@ const Operator = ({
         }}
         onClick={event => event.stopPropagation()}
       >
-        <span aria-hidden className="i-ri-more-fill h-4 w-4" />
+        <span aria-hidden className="i-ri-more-fill size-4" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-end"
diff --git a/web/app/components/workflow/operator/add-block.tsx b/web/app/components/workflow/operator/add-block.tsx
index 8cb358151a..0d1093469c 100644
--- a/web/app/components/workflow/operator/add-block.tsx
+++ b/web/app/components/workflow/operator/add-block.tsx
@@ -90,12 +90,12 @@ const AddBlock = ({
         title={t('common.addBlock', { ns: 'workflow' })}
       >
         <div className={cn(
-          'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+          'flex size-8 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
           `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
           open && 'bg-state-accent-active text-text-accent',
         )}
         >
-          <RiAddCircleFill className="h-4 w-4" />
+          <RiAddCircleFill className="size-4" />
         </div>
       </TipPopup>
     )
diff --git a/web/app/components/workflow/operator/control.tsx b/web/app/components/workflow/operator/control.tsx
index 0ef4745e3e..79d1fa45d7 100644
--- a/web/app/components/workflow/operator/control.tsx
+++ b/web/app/components/workflow/operator/control.tsx
@@ -64,12 +64,12 @@ const Control = () => {
           aria-label={t('nodes.note.addNote', { ns: 'workflow' })}
           disabled={nodesReadOnly}
           className={cn(
-            'ml-px flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
+            'ml-px flex size-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
             `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
           )}
           onClick={addNote}
         >
-          <RiStickyNoteAddLine aria-hidden className="h-4 w-4" />
+          <RiStickyNoteAddLine aria-hidden className="size-4" />
         </button>
       </TipPopup>
       <Divider className="my-1 w-3.5" />
@@ -79,13 +79,13 @@ const Control = () => {
           aria-label={t('common.pointerMode', { ns: 'workflow' })}
           disabled={nodesReadOnly}
           className={cn(
-            'mr-px flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
+            'mr-px flex size-8 cursor-pointer items-center justify-center rounded-lg',
             controlMode === ControlMode.Pointer ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
             `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
           )}
           onClick={handleModePointer}
         >
-          <RiCursorLine aria-hidden className="h-4 w-4" />
+          <RiCursorLine aria-hidden className="size-4" />
         </button>
       </TipPopup>
       <TipPopup title={t('common.handMode', { ns: 'workflow' })} shortcut="workflow.hand-mode">
@@ -94,13 +94,13 @@ const Control = () => {
           aria-label={t('common.handMode', { ns: 'workflow' })}
           disabled={nodesReadOnly}
           className={cn(
-            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
+            'flex size-8 cursor-pointer items-center justify-center rounded-lg',
             controlMode === ControlMode.Hand ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
             `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
           )}
           onClick={handleModeHand}
         >
-          <RiHand aria-hidden className="h-4 w-4" />
+          <RiHand aria-hidden className="size-4" />
         </button>
       </TipPopup>
       {isCommentModeAvailable && (
@@ -110,13 +110,13 @@ const Control = () => {
             aria-label={t('common.commentMode', { ns: 'workflow' })}
             disabled={nodesReadOnly}
             className={cn(
-              'ml-[1px] flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
+              'ml-px flex size-8 cursor-pointer items-center justify-center rounded-lg',
               controlMode === ControlMode.Comment ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
               `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
             )}
             onClick={handleModeComment}
           >
-            <Comment aria-hidden className="h-4 w-4" />
+            <Comment aria-hidden className="size-4" />
           </button>
         </TipPopup>
       )}
@@ -127,12 +127,12 @@ const Control = () => {
           aria-label={t('panel.organizeBlocks', { ns: 'workflow' })}
           disabled={nodesReadOnly}
           className={cn(
-            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
+            'flex size-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
             `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
           )}
           onClick={handleLayout}
         >
-          <RiFunctionAddLine aria-hidden className="h-4 w-4" />
+          <RiFunctionAddLine aria-hidden className="size-4" />
         </button>
       </TipPopup>
       <TipPopup title={maximizeCanvas ? t('panel.minimize', { ns: 'workflow' }) : t('panel.maximize', { ns: 'workflow' })} shortcut="workflow.toggle-maximize">
@@ -141,14 +141,14 @@ const Control = () => {
           aria-label={maximizeCanvas ? t('panel.minimize', { ns: 'workflow' }) : t('panel.maximize', { ns: 'workflow' })}
           disabled={nodesReadOnly}
           className={cn(
-            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
+            'flex size-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
             maximizeCanvas ? 'bg-state-accent-active text-text-accent hover:text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
             `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
           )}
           onClick={handleToggleMaximizeCanvas}
         >
-          {maximizeCanvas && <RiAspectRatioFill aria-hidden className="h-4 w-4" />}
-          {!maximizeCanvas && <RiAspectRatioLine aria-hidden className="h-4 w-4" />}
+          {maximizeCanvas && <RiAspectRatioFill aria-hidden className="size-4" />}
+          {!maximizeCanvas && <RiAspectRatioLine aria-hidden className="size-4" />}
         </button>
       </TipPopup>
       <MoreActions />
diff --git a/web/app/components/workflow/operator/index.tsx b/web/app/components/workflow/operator/index.tsx
index 97fc4378b9..8f731c2f40 100644
--- a/web/app/components/workflow/operator/index.tsx
+++ b/web/app/components/workflow/operator/index.tsx
@@ -92,7 +92,7 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
   return (
     <div
       ref={bottomPanelRef}
-      className="absolute right-0 bottom-0 left-0 z-10 px-1"
+      className="absolute inset-x-0 bottom-0 z-10 px-1"
       style={
         {
           width: bottomPanelWidth,
@@ -116,7 +116,7 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
               maskColor="var(--color-workflow-minimap-bg)"
               nodeClassName={getMiniMapNodeClassName}
               nodeStrokeWidth={3}
-              className="!absolute bottom-10! z-9 m-0! h-[73px]! w-[103px]! rounded-lg! border-[0.5px]!
+              className="absolute! bottom-10! z-9 m-0! h-[73px]! w-[103px]! rounded-lg! border-[0.5px]!
             border-divider-subtle! bg-background-default-subtle! shadow-md! shadow-shadow-shadow-5!"
             />
           )}
diff --git a/web/app/components/workflow/operator/more-actions.tsx b/web/app/components/workflow/operator/more-actions.tsx
index c7ea22e1ca..9bba929271 100644
--- a/web/app/components/workflow/operator/more-actions.tsx
+++ b/web/app/components/workflow/operator/more-actions.tsx
@@ -178,12 +178,12 @@ const MoreActions: FC = () => {
       >
         <DropdownMenuTrigger
           className={cn(
-            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
+            'flex size-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
             isReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
           )}
         >
           <TipPopup title={t('common.moreActions', { ns: 'workflow' })}>
-            <RiMoreFill className="h-4 w-4" />
+            <RiMoreFill className="size-4" />
           </TipPopup>
         </DropdownMenuTrigger>
         <DropdownMenuContent
@@ -193,7 +193,7 @@ const MoreActions: FC = () => {
           popupClassName="min-w-[180px]"
         >
           <div className="flex items-center gap-2 px-2 py-1 text-xs font-medium text-text-tertiary">
-            <RiExportLine className="h-3 w-3" />
+            <RiExportLine className="size-3" />
             {t('common.exportImage', { ns: 'workflow' })}
           </div>
           <div className="px-2 py-1 text-xs font-medium text-text-tertiary">
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index ea2ff76977..b1467508f8 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -187,7 +187,7 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
             type="button"
             aria-label={t('operator.zoomOut', { ns: 'workflow' })}
             disabled={zoom <= 0.25}
-            className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+            className={`flex size-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
             onClick={(e) => {
               if (zoom <= 0.25)
                 return
@@ -196,7 +196,7 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
               zoomOut()
             }}
           >
-            <span aria-hidden className="i-ri-zoom-out-line h-4 w-4 text-text-tertiary hover:text-text-secondary" />
+            <span aria-hidden className="i-ri-zoom-out-line size-4 text-text-tertiary hover:text-text-secondary" />
           </button>
         </TipPopup>
         <DropdownMenu
@@ -235,31 +235,31 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
                       >
                         <div className="flex items-center gap-2">
                           {option.key === ZoomType.toggleUserComments && showUserComments && (
-                            <span aria-hidden className="i-ri-check-line h-4 w-4 text-text-accent" />
+                            <span aria-hidden className="i-ri-check-line size-4 text-text-accent" />
                           )}
                           {option.key === ZoomType.toggleUserComments && !showUserComments && (
-                            <span aria-hidden className="h-4 w-4" />
+                            <span aria-hidden className="size-4" />
                           )}
                           {option.key === ZoomType.toggleUserCursors && showUserCursors && (
-                            <span aria-hidden className="i-ri-check-line h-4 w-4 text-text-accent" />
+                            <span aria-hidden className="i-ri-check-line size-4 text-text-accent" />
                           )}
                           {option.key === ZoomType.toggleUserCursors && !showUserCursors && (
-                            <span aria-hidden className="h-4 w-4" />
+                            <span aria-hidden className="size-4" />
                           )}
                           {option.key === ZoomType.toggleMiniMap && showMiniMap && (
-                            <span aria-hidden className="i-ri-check-line h-4 w-4 text-text-accent" />
+                            <span aria-hidden className="i-ri-check-line size-4 text-text-accent" />
                           )}
                           {option.key === ZoomType.toggleMiniMap && !showMiniMap && (
-                            <span aria-hidden className="h-4 w-4" />
+                            <span aria-hidden className="size-4" />
                           )}
                           {option.key === ZoomType.zoomToFit && (
-                            <span aria-hidden className="i-ri-fullscreen-line h-4 w-4 text-text-tertiary" />
+                            <span aria-hidden className="i-ri-fullscreen-line size-4 text-text-tertiary" />
                           )}
                           {option.key !== ZoomType.toggleUserComments
                             && option.key !== ZoomType.toggleUserCursors
                             && option.key !== ZoomType.toggleMiniMap
                             && option.key !== ZoomType.zoomToFit && (
-                            <span aria-hidden className="h-4 w-4" />
+                            <span aria-hidden className="size-4" />
                           )}
                           <span>{option.text}</span>
                         </div>
@@ -290,7 +290,7 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
             type="button"
             aria-label={t('operator.zoomIn', { ns: 'workflow' })}
             disabled={zoom >= 2}
-            className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+            className={`flex size-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
             onClick={(e) => {
               if (zoom >= 2)
                 return
@@ -299,7 +299,7 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
               zoomIn()
             }}
           >
-            <span aria-hidden className="i-ri-zoom-in-line h-4 w-4 text-text-tertiary hover:text-text-secondary" />
+            <span aria-hidden className="i-ri-zoom-in-line size-4 text-text-tertiary hover:text-text-secondary" />
           </button>
         </TipPopup>
       </div>
diff --git a/web/app/components/workflow/panel/chat-record/__tests__/index.spec.tsx b/web/app/components/workflow/panel/chat-record/__tests__/index.spec.tsx
index a0a283f666..7631f7c42d 100644
--- a/web/app/components/workflow/panel/chat-record/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/panel/chat-record/__tests__/index.spec.tsx
@@ -88,7 +88,7 @@ describe('ChatRecord', () => {
 
     await screen.findByText('Question 1')
 
-    await user.click(container.querySelector('.h-6.w-6.cursor-pointer') as HTMLElement)
+    await user.click(container.querySelector('.size-6.cursor-pointer') as HTMLElement)
 
     expect(handleLoadBackupDraft).toHaveBeenCalledTimes(1)
     expect(store.getState().historyWorkflowData).toBeUndefined()
diff --git a/web/app/components/workflow/panel/chat-record/index.tsx b/web/app/components/workflow/panel/chat-record/index.tsx
index 6c645d6501..3cf05ee954 100644
--- a/web/app/components/workflow/panel/chat-record/index.tsx
+++ b/web/app/components/workflow/panel/chat-record/index.tsx
@@ -102,13 +102,13 @@ const ChatRecord = () => {
           <div className="flex shrink-0 items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
             {`TEST CHAT${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}`}
             <div
-              className="flex h-6 w-6 cursor-pointer items-center justify-center"
+              className="flex size-6 cursor-pointer items-center justify-center"
               onClick={() => {
                 handleLoadBackupDraft()
                 workflowStore.setState({ historyWorkflowData: undefined })
               }}
             >
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+              <RiCloseLine className="size-4 text-text-tertiary" />
             </div>
           </div>
           <div className="h-0 grow">
diff --git a/web/app/components/workflow/panel/chat-record/user-input.tsx b/web/app/components/workflow/panel/chat-record/user-input.tsx
index 111a90c854..91f52b3bd2 100644
--- a/web/app/components/workflow/panel/chat-record/user-input.tsx
+++ b/web/app/components/workflow/panel/chat-record/user-input.tsx
@@ -39,7 +39,7 @@ const UserInput = ({
         onClick={() => setExpanded(!expanded)}
       >
         <RiArrowDownSLine
-          className={`mr-1 h-3 w-3 ${!expanded ? '-rotate-90 text-text-accent' : 'text-text-tertiary'}`}
+          className={`mr-1 size-3 ${!expanded ? '-rotate-90 text-text-accent' : 'text-text-tertiary'}`}
         />
         {t('panel.userInputField', { ns: 'workflow' }).toLocaleUpperCase()}
       </div>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/__tests__/index.spec.tsx b/web/app/components/workflow/panel/chat-variable-panel/__tests__/index.spec.tsx
index a12ede5aa5..4cf4898062 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/__tests__/index.spec.tsx
@@ -191,7 +191,7 @@ describe('ChatVariablePanel', () => {
     await user.click(toggleTipButton)
     expect(screen.queryByText('workflow.chatVariable.panelDescription')).not.toBeInTheDocument()
 
-    const closeButton = container.querySelector('.flex.h-6.w-6.cursor-pointer.items-center.justify-center') as HTMLElement
+    const closeButton = container.querySelector('.flex.size-6.cursor-pointer.items-center.justify-center') as HTMLElement
     await user.click(closeButton)
 
     expect(mockSetShowChatVariablePanel).toHaveBeenCalledWith(false)
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
index 7a1f41028b..759c5cf8a2 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
@@ -64,7 +64,7 @@ const ArrayValueList: FC<Props> = ({
         </div>
       ))}
       <Button variant="tertiary" className="w-full" onClick={handleItemAdd}>
-        <RiAddLine className="mr-1 h-4 w-4" />
+        <RiAddLine className="mr-1 size-4" />
         <span>{t('chatVariable.modal.addArrayValue', { ns: 'workflow' })}</span>
       </Button>
     </div>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
index f37cc4715d..03e476d981 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
@@ -64,7 +64,7 @@ const ArrayValueList: FC<Props> = ({
         </div>
       ))}
       <Button variant="tertiary" className="w-full" onClick={handleItemAdd}>
-        <RiAddLine className="mr-1 h-4 w-4" />
+        <RiAddLine className="mr-1 size-4" />
         <span>{t('chatVariable.modal.addArrayValue', { ns: 'workflow' })}</span>
       </Button>
     </div>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
index 16ebd78db8..a7d801ddce 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
@@ -131,7 +131,7 @@ const ObjectValueItem: FC<Props> = ({
               className="group hover:bg-state-destructive-hover!"
               onClick={handleItemRemove(index)}
             >
-              <span className="i-ri-delete-bin-line h-4 w-4 text-text-tertiary group-hover:text-text-destructive" />
+              <span className="i-ri-delete-bin-line size-4 text-text-tertiary group-hover:text-text-destructive" />
             </ActionButton>
           </div>
         )}
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx
index 486fa9370a..1db0a559c3 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx
@@ -17,7 +17,7 @@ const ObjectValueList: FC<Props> = ({
 
   return (
     <div className="w-full overflow-hidden rounded-lg border border-gray-200">
-      <div className="flex h-7 items-center system-xs-medium text-text-tertiary uppercase">
+      <div className="flex h-7 items-center system-xs-medium-uppercase text-text-tertiary">
         <div className="flex h-full w-[120px] items-center border-r border-gray-200 pl-2">{t('chatVariable.modal.objectKey', { ns: 'workflow' })}</div>
         <div className="flex h-full w-[96px] items-center border-r border-gray-200 pl-2">{t('chatVariable.modal.objectType', { ns: 'workflow' })}</div>
         <div className="flex h-full w-[230px] items-center pr-1 pl-2">{t('chatVariable.modal.objectValue', { ns: 'workflow' })}</div>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
index 5b59738d4d..29443c881e 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
@@ -25,20 +25,20 @@ const VariableItem = ({
     >
       <div className="flex items-center justify-between">
         <div className="flex grow items-center gap-1">
-          <BubbleX className="h-4 w-4 text-util-colors-teal-teal-700" />
+          <BubbleX className="size-4 text-util-colors-teal-teal-700" />
           <div className="system-sm-medium text-text-primary">{item.name}</div>
           <div className="system-xs-medium text-text-tertiary">{capitalize(item.value_type)}</div>
         </div>
         <div className="flex shrink-0 items-center gap-1 text-text-tertiary">
           <div className="cursor-pointer rounded-lg p-1 hover:bg-state-base-hover hover:text-text-secondary">
-            <RiEditLine className="h-4 w-4" onClick={() => onEdit(item)} />
+            <RiEditLine className="size-4" onClick={() => onEdit(item)} />
           </div>
           <div
             className="cursor-pointer rounded-lg p-1 hover:bg-state-destructive-hover hover:text-text-destructive"
             onMouseOver={() => setDestructive(true)}
             onMouseOut={() => setDestructive(false)}
           >
-            <RiDeleteBinLine className="h-4 w-4" onClick={() => onDelete(item)} />
+            <RiDeleteBinLine className="size-4" onClick={() => onDelete(item)} />
           </div>
         </div>
       </div>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
index 9c97583423..4a0f79d276 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
@@ -39,7 +39,7 @@ const VariableModalTrigger = ({
       <PopoverTrigger
         render={(
           <Button variant="primary">
-            <RiAddLine className="mr-1 h-4 w-4" />
+            <RiAddLine className="mr-1 size-4" />
             <span className="system-sm-medium">{t('chatVariable.button', { ns: 'workflow' })}</span>
           </Button>
         )}
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
index 894ca2f05d..f208b6a283 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
@@ -120,7 +120,7 @@ export const ValueSection = ({
           className="text-text-tertiary"
           onClick={() => onEditorChange(!editInJSON)}
         >
-          {editInJSON ? <RiInputField className="mr-1 h-3.5 w-3.5" /> : <RiDraftLine className="mr-1 h-3.5 w-3.5" />}
+          {editInJSON ? <RiInputField className="mr-1 size-3.5" /> : <RiDraftLine className="mr-1 size-3.5" />}
           {t(toggleLabelKey, { ns: 'workflow' })}
         </Button>
       )}
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
index dac7d16efd..6c2e5fe449 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
@@ -80,10 +80,10 @@ const ChatVariableModal = ({
         {!chatVar ? t('chatVariable.modal.title', { ns: 'workflow' }) : t('chatVariable.modal.editTitle', { ns: 'workflow' })}
         <div className="flex items-center">
           <div
-            className="flex h-6 w-6 cursor-pointer items-center justify-center"
+            className="flex size-6 cursor-pointer items-center justify-center"
             onClick={onClose}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+            <RiCloseLine className="size-4 text-text-tertiary" />
           </div>
         </div>
       </div>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
index e1f776f3d5..787683daca 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
@@ -57,7 +57,7 @@ const VariableTypeSelector = <T extends string, >({
           >
             {value}
           </div>
-          <span className="ml-0.5 i-ri-arrow-down-s-line h-4 w-4 text-text-quaternary" aria-hidden="true" />
+          <span className="ml-0.5 i-ri-arrow-down-s-line size-4 text-text-quaternary" aria-hidden="true" />
         </div>
       </SelectTrigger>
       <SelectContent placement="bottom-start" popupClassName={cn('bg-components-panel-bg-blur', popupClassName)}>
diff --git a/web/app/components/workflow/panel/chat-variable-panel/index.tsx b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
index dcaeb1829a..0b2009bfae 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
@@ -193,13 +193,13 @@ const ChatVariablePanel = () => {
         {t('chatVariable.panelTitle', { ns: 'workflow' })}
         <div className="flex items-center gap-1">
           <ActionButton state={showTip ? ActionButtonState.Active : undefined} onClick={() => setShowTip(!showTip)}>
-            <RiBookOpenLine className="h-4 w-4" />
+            <RiBookOpenLine className="size-4" />
           </ActionButton>
           <div
-            className="flex h-6 w-6 cursor-pointer items-center justify-center"
+            className="flex size-6 cursor-pointer items-center justify-center"
             onClick={() => setShowChatVariablePanel(false)}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+            <RiCloseLine className="size-4 text-text-tertiary" />
           </div>
         </div>
       </div>
@@ -212,7 +212,7 @@ const ChatVariablePanel = () => {
             </div>
             <div className="flex items-center gap-2">
               <div className="flex flex-col rounded-[10px] border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md">
-                <BubbleX className="mb-1 h-4 w-4 shrink-0 text-util-colors-teal-teal-700" />
+                <BubbleX className="mb-1 size-4 shrink-0 text-util-colors-teal-teal-700" />
                 <div className="system-xs-semibold text-text-secondary">conversation_var</div>
                 <div className="system-2xs-regular text-text-tertiary">String</div>
               </div>
diff --git a/web/app/components/workflow/panel/comments-panel/__tests__/index.spec.tsx b/web/app/components/workflow/panel/comments-panel/__tests__/index.spec.tsx
index fd3f570f02..adcef1868f 100644
--- a/web/app/components/workflow/panel/comments-panel/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/panel/comments-panel/__tests__/index.spec.tsx
@@ -130,7 +130,7 @@ describe('CommentsPanel', () => {
 
   it('resolves a comment and syncs list refresh', async () => {
     const { container } = render(<CommentsPanel />)
-    const resolveIcons = container.querySelectorAll('.h-4.w-4.cursor-pointer.text-text-tertiary')
+    const resolveIcons = container.querySelectorAll('.size-4.cursor-pointer.text-text-tertiary')
     expect(resolveIcons.length).toBeGreaterThan(0)
 
     fireEvent.click(resolveIcons[0]!)
diff --git a/web/app/components/workflow/panel/comments-panel/index.tsx b/web/app/components/workflow/panel/comments-panel/index.tsx
index 47f7c015ba..d842dd0c50 100644
--- a/web/app/components/workflow/panel/comments-panel/index.tsx
+++ b/web/app/components/workflow/panel/comments-panel/index.tsx
@@ -61,14 +61,14 @@ const CommentsPanel = () => {
         <div className="relative flex items-center gap-2">
           <button
             className={cn(
-              'group flex h-6 w-6 items-center justify-center rounded-md hover:bg-state-accent-active',
+              'group flex size-6 items-center justify-center rounded-md hover:bg-state-accent-active',
               hasActiveFilter && 'bg-state-accent-active',
             )}
             aria-label={t('comments.aria.filterComments', { ns: 'workflow' })}
             onClick={() => setShowFilter(v => !v)}
           >
             <RiFilter3Line className={cn(
-              'h-4 w-4 text-text-secondary group-hover:text-text-accent',
+              'size-4 text-text-secondary group-hover:text-text-accent',
               hasActiveFilter && 'text-text-accent',
             )}
             />
@@ -76,28 +76,28 @@ const CommentsPanel = () => {
           {showFilter && (
             <div className="absolute top-9 right-10 z-50 min-w-[184px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[10px]">
               <button
-                className={cn('flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', !showOnlyMine && 'bg-components-panel-on-panel-item-bg')}
+                className={cn('flex w-full items-center justify-between rounded-md p-2 text-left text-sm hover:bg-state-base-hover', !showOnlyMine && 'bg-components-panel-on-panel-item-bg')}
                 onClick={() => {
                   setShowOnlyMine(false)
                   setShowFilter(false)
                 }}
               >
                 <span className="text-text-secondary">{t('comments.filter.all', { ns: 'workflow' })}</span>
-                {!showOnlyMine && <RiCheckLine className="h-4 w-4 text-primary-600" />}
+                {!showOnlyMine && <RiCheckLine className="size-4 text-primary-600" />}
               </button>
               <button
-                className={cn('mt-1 flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', showOnlyMine && 'bg-components-panel-on-panel-item-bg')}
+                className={cn('mt-1 flex w-full items-center justify-between rounded-md p-2 text-left text-sm hover:bg-state-base-hover', showOnlyMine && 'bg-components-panel-on-panel-item-bg')}
                 onClick={() => {
                   setShowOnlyMine(true)
                   setShowFilter(false)
                 }}
               >
                 <span className="text-text-secondary">{t('comments.filter.onlyYourThreads', { ns: 'workflow' })}</span>
-                {showOnlyMine && <RiCheckLine className="h-4 w-4 text-primary-600" />}
+                {showOnlyMine && <RiCheckLine className="size-4 text-primary-600" />}
               </button>
               <Divider type="horizontal" className="my-1" />
               <div
-                className="flex w-full items-center justify-between rounded-md px-2 py-2"
+                className="flex w-full items-center justify-between rounded-md p-2"
                 onClick={(e) => {
                   e.stopPropagation()
                 }}
@@ -115,13 +115,13 @@ const CommentsPanel = () => {
           )}
           <Divider type="vertical" className="h-3.5" />
           <div
-            className="flex h-6 w-6 cursor-pointer items-center justify-center"
+            className="flex size-6 cursor-pointer items-center justify-center"
             onClick={() => {
               setControlMode(ControlMode.Pointer)
               setActiveCommentId(null)
             }}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+            <RiCloseLine className="size-4 text-text-tertiary" />
           </div>
         </div>
       </div>
@@ -144,11 +144,11 @@ const CommentsPanel = () => {
                   <div className="ml-2 flex items-center">
                     {c.resolved
                       ? (
-                          <RiCheckboxCircleFill className="h-4 w-4 text-text-secondary" />
+                          <RiCheckboxCircleFill className="size-4 text-text-secondary" />
                         )
                       : (
                           <RiCheckboxCircleLine
-                            className="h-4 w-4 cursor-pointer text-text-tertiary hover:text-text-secondary"
+                            className="size-4 cursor-pointer text-text-tertiary hover:text-text-secondary"
                             onClick={(e) => {
                               e.preventDefault()
                               e.stopPropagation()
@@ -168,7 +168,7 @@ const CommentsPanel = () => {
                   </div>
                 </div>
                 {/* Content */}
-                <div className="mt-1 line-clamp-3 system-sm-regular break-words text-text-secondary">{c.content}</div>
+                <div className="mt-1 line-clamp-3 system-sm-regular wrap-break-word text-text-secondary">{c.content}</div>
                 {/* Footer */}
                 {c.reply_count > 0 && (
                   <div className="mt-2 flex items-center justify-between">
diff --git a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
index cb188f69cf..7000f1d64d 100644
--- a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
@@ -84,9 +84,9 @@ const ConversationVariableModal = ({
           className="absolute top-4 right-4 cursor-pointer border-none bg-transparent p-2 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
           onClick={onHide}
         >
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
         </button>
-        <div className="flex h-full w-full">
+        <div className="flex size-full">
           {/* LEFT */}
           <div className="flex h-full w-[224px] shrink-0 flex-col border-r border-divider-burn bg-background-sidenav-bg">
             <div className="shrink-0 pt-5 pr-4 pb-3 pl-5 system-xl-semibold text-text-primary">{t('chatVariable.panelTitle', { ns: 'workflow' })}</div>
@@ -98,7 +98,7 @@ const ConversationVariableModal = ({
                   className={cn('group mb-0.5 flex w-full cursor-pointer items-center rounded-lg border-none bg-transparent p-2 text-left hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', currentVar.id === chatVar.id && 'bg-state-base-hover')}
                   onClick={() => setCurrentVar(chatVar)}
                 >
-                  <BubbleX className={cn('mr-1 h-4 w-4 shrink-0 text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} aria-hidden="true" />
+                  <BubbleX className={cn('mr-1 size-4 shrink-0 text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} aria-hidden="true" />
                   <div title={chatVar.name} className={cn('truncate system-sm-medium text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')}>{chatVar.name}</div>
                 </button>
               ))}
@@ -137,10 +137,10 @@ const ConversationVariableModal = ({
                       <div className="flex items-center p-1">
                         {!isCopied
                           ? (
-                              <Copy className="h-4 w-4 cursor-pointer text-text-tertiary" onClick={handleCopy} />
+                              <Copy className="size-4 cursor-pointer text-text-tertiary" onClick={handleCopy} />
                             )
                           : (
-                              <CopyCheck className="h-4 w-4 text-text-tertiary" />
+                              <CopyCheck className="size-4 text-text-tertiary" />
                             )}
                       </div>
                     </div>
diff --git a/web/app/components/workflow/panel/debug-and-preview/empty.tsx b/web/app/components/workflow/panel/debug-and-preview/empty.tsx
index d71853d8e1..10e8fbaf4c 100644
--- a/web/app/components/workflow/panel/debug-and-preview/empty.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/empty.tsx
@@ -5,9 +5,9 @@ const Empty = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+    <div className="absolute top-1/2 left-1/2 -translate-1/2">
       <div className="mb-2 flex justify-center">
-        <ChatBotSlim className="h-12 w-12 text-gray-300" />
+        <ChatBotSlim className="size-12 text-gray-300" />
       </div>
       <div className="w-[256px] text-center text-[13px] text-gray-400">
         {t('common.previewPlaceholder', { ns: 'workflow' })}
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index 88e2115fb1..4aefec71d5 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -103,7 +103,7 @@ const DebugAndPreview = () => {
               <TooltipTrigger
                 render={(
                   <ActionButton onClick={() => handleRestartChat()}>
-                    <RefreshCcw01 className="h-4 w-4" />
+                    <RefreshCcw01 className="size-4" />
                   </ActionButton>
                 )}
               />
@@ -117,7 +117,7 @@ const DebugAndPreview = () => {
                   <TooltipTrigger
                     render={(
                       <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
-                        <RiEqualizer2Line className="h-4 w-4" />
+                        <RiEqualizer2Line className="size-4" />
                       </ActionButton>
                     )}
                   />
@@ -130,10 +130,10 @@ const DebugAndPreview = () => {
             )}
             <div className="mx-3 h-3.5 w-px bg-divider-regular"></div>
             <div
-              className="flex h-6 w-6 cursor-pointer items-center justify-center"
+              className="flex size-6 cursor-pointer items-center justify-center"
               onClick={handleCancelDebugAndPreviewPanel}
             >
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+              <RiCloseLine className="size-4 text-text-tertiary" />
             </div>
           </div>
         </div>
diff --git a/web/app/components/workflow/panel/env-panel/env-item.tsx b/web/app/components/workflow/panel/env-panel/env-item.tsx
index 441364896f..4a86b9d32b 100644
--- a/web/app/components/workflow/panel/env-panel/env-item.tsx
+++ b/web/app/components/workflow/panel/env-panel/env-item.tsx
@@ -29,21 +29,21 @@ const EnvItem = ({
       <div className="px-2.5 py-2">
         <div className="flex items-center justify-between">
           <div className="flex grow items-center gap-1">
-            <Env className="h-4 w-4 text-util-colors-violet-violet-600" />
+            <Env className="size-4 text-util-colors-violet-violet-600" />
             <div className="system-sm-medium text-text-primary">{env.name}</div>
             <div className="system-xs-medium text-text-tertiary">{capitalize(env.value_type)}</div>
-            {env.value_type === 'secret' && <RiLock2Line className="h-3 w-3 text-text-tertiary" />}
+            {env.value_type === 'secret' && <RiLock2Line className="size-3 text-text-tertiary" />}
           </div>
           <div className="flex shrink-0 items-center gap-1 text-text-tertiary">
             <div className="cursor-pointer rounded-lg p-1 hover:bg-state-base-hover hover:text-text-secondary">
-              <RiEditLine className="h-4 w-4" onClick={() => onEdit(env)} />
+              <RiEditLine className="size-4" onClick={() => onEdit(env)} />
             </div>
             <div
               className="cursor-pointer rounded-lg p-1 hover:bg-state-destructive-hover hover:text-text-destructive"
               onMouseOver={() => setDestructive(true)}
               onMouseOut={() => setDestructive(false)}
             >
-              <RiDeleteBinLine className="h-4 w-4" onClick={() => onDelete(env)} />
+              <RiDeleteBinLine className="size-4" onClick={() => onDelete(env)} />
             </div>
           </div>
         </div>
diff --git a/web/app/components/workflow/panel/env-panel/index.tsx b/web/app/components/workflow/panel/env-panel/index.tsx
index 58427576ad..a8be441d6b 100644
--- a/web/app/components/workflow/panel/env-panel/index.tsx
+++ b/web/app/components/workflow/panel/env-panel/index.tsx
@@ -257,11 +257,11 @@ const EnvPanel = () => {
         {t('env.envPanelTitle', { ns: 'workflow' })}
         <div className="flex items-center">
           <div
-            className="flex h-6 w-6 cursor-pointer items-center justify-center"
+            className="flex size-6 cursor-pointer items-center justify-center"
             onClick={() => setShowEnvPanel(false)}
           >
             {/* eslint-disable-next-line hyoban/prefer-tailwind-icons */}
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+            <RiCloseLine className="size-4 text-text-tertiary" />
           </div>
         </div>
       </div>
diff --git a/web/app/components/workflow/panel/env-panel/variable-modal.tsx b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
index 2560ab968e..14b5d94404 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -87,10 +87,10 @@ const VariableModal = ({
         {!env ? t('env.modal.title', { ns: 'workflow' }) : t('env.modal.editTitle', { ns: 'workflow' })}
         <div className="flex items-center">
           <div
-            className="flex h-6 w-6 cursor-pointer items-center justify-center"
+            className="flex size-6 cursor-pointer items-center justify-center"
             onClick={onClose}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+            <RiCloseLine className="size-4 text-text-tertiary" />
           </div>
         </div>
       </div>
@@ -131,7 +131,7 @@ const VariableModal = ({
               <span>Secret</span>
               <Infotip
                 aria-label={t('env.modal.secretTip', { ns: 'workflow' })}
-                className="ml-0.5 h-3.5 w-3.5"
+                className="ml-0.5 size-3.5"
                 iconClassName="h-3.5 w-3.5"
                 popupClassName="w-[240px]"
               >
diff --git a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
index 378fc1c1b5..600a86e09c 100644
--- a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
@@ -37,7 +37,7 @@ const VariableTrigger = ({
       <PopoverTrigger
         render={(
           <Button variant="primary">
-            <RiAddLine className="mr-1 h-4 w-4" />
+            <RiAddLine className="mr-1 size-4" />
             <span className="system-sm-medium">{t('env.envPanelButton', { ns: 'workflow' })}</span>
           </Button>
         )}
diff --git a/web/app/components/workflow/panel/global-variable-panel/index.tsx b/web/app/components/workflow/panel/global-variable-panel/index.tsx
index 4b498419da..c6cf3528eb 100644
--- a/web/app/components/workflow/panel/global-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/index.tsx
@@ -70,10 +70,10 @@ const Panel = () => {
         {t('globalVar.title', { ns: 'workflow' })}
         <div className="flex items-center">
           <div
-            className="flex h-6 w-6 cursor-pointer items-center justify-center"
+            className="flex size-6 cursor-pointer items-center justify-center"
             onClick={() => setShowPanel(false)}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+            <RiCloseLine className="size-4 text-text-tertiary" />
           </div>
         </div>
       </div>
diff --git a/web/app/components/workflow/panel/global-variable-panel/item.tsx b/web/app/components/workflow/panel/global-variable-panel/item.tsx
index 543adc5d6f..46cd160620 100644
--- a/web/app/components/workflow/panel/global-variable-panel/item.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/item.tsx
@@ -19,7 +19,7 @@ const Item = ({
     >
       <div className="flex items-center justify-between">
         <div className="flex grow items-center gap-1">
-          <GlobalVariableIcon className="h-4 w-4 text-util-colors-orange-orange-600" />
+          <GlobalVariableIcon className="size-4 text-util-colors-orange-orange-600" />
           <div className="system-sm-medium text-text-primary">
             <span className="text-text-tertiary">sys.</span>
             {payload.name}
diff --git a/web/app/components/workflow/panel/version-history-panel/action-menu/index.tsx b/web/app/components/workflow/panel/version-history-panel/action-menu/index.tsx
index bd0c9934c3..4af7f9bc52 100644
--- a/web/app/components/workflow/panel/version-history-panel/action-menu/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/action-menu/index.tsx
@@ -36,7 +36,7 @@ const ActionMenu: FC<ActionMenuProps> = (props: ActionMenuProps) => {
         nativeButton={false}
         render={<Button nativeButton={false} size="small" className="px-1" onClick={e => e.stopPropagation()} />}
       >
-        <RiMoreFill className="h-4 w-4" />
+        <RiMoreFill className="size-4" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-end"
diff --git a/web/app/components/workflow/panel/version-history-panel/empty.tsx b/web/app/components/workflow/panel/version-history-panel/empty.tsx
index 844b53412e..64200cb165 100644
--- a/web/app/components/workflow/panel/version-history-panel/empty.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/empty.tsx
@@ -16,7 +16,7 @@ const Empty: FC<EmptyProps> = ({
   return (
     <div className="flex h-5/6 w-full flex-col justify-center gap-y-2">
       <div className="flex justify-center">
-        <RiHistoryLine className="h-10 w-10 text-text-empty-state-icon" />
+        <RiHistoryLine className="size-10 text-text-empty-state-icon" />
       </div>
       <div className="flex justify-center system-xs-regular text-text-tertiary">
         {t('versionHistory.filter.empty', { ns: 'workflow' })}
diff --git a/web/app/components/workflow/panel/version-history-panel/filter/__tests__/index.spec.tsx b/web/app/components/workflow/panel/version-history-panel/filter/__tests__/index.spec.tsx
index a35aeb163c..6b9403e232 100644
--- a/web/app/components/workflow/panel/version-history-panel/filter/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/__tests__/index.spec.tsx
@@ -69,7 +69,7 @@ describe('VersionHistory Filter Components', () => {
         />,
       )
 
-      const trigger = container.querySelector('.h-6.w-6')
+      const trigger = container.querySelector('.size-6')
       if (!trigger)
         throw new Error('Expected filter trigger to exist')
 
diff --git a/web/app/components/workflow/panel/version-history-panel/filter/filter-item.tsx b/web/app/components/workflow/panel/version-history-panel/filter/filter-item.tsx
index 6c659fea5b..2a56d08400 100644
--- a/web/app/components/workflow/panel/version-history-panel/filter/filter-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/filter-item.tsx
@@ -25,7 +25,7 @@ const FilterItem: FC<FilterItemProps> = ({
       }}
     >
       <div className="flex-1 system-md-regular text-text-primary">{item.name}</div>
-      {isSelected && <RiCheckLine className="h-4 w-4 shrink-0 text-text-accent" />}
+      {isSelected && <RiCheckLine className="size-4 shrink-0 text-text-accent" />}
     </div>
   )
 }
diff --git a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
index e2277b3fb1..0f3b276200 100644
--- a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
@@ -46,11 +46,11 @@ const Filter: FC<FilterProps> = ({
         render={(
           <div
             className={cn(
-              'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md p-0.5',
+              'flex size-6 cursor-pointer items-center justify-center rounded-md p-0.5',
               isFiltering ? 'bg-state-accent-active-alt' : 'hover:bg-state-base-hover',
             )}
           >
-            <RiFilter3Line className={cn('h-4 w-4', isFiltering ? 'text-text-accent' : 'text-text-tertiary')} />
+            <RiFilter3Line className={cn('size-4', isFiltering ? 'text-text-accent' : 'text-text-tertiary')} />
           </div>
         )}
       />
diff --git a/web/app/components/workflow/panel/version-history-panel/index.tsx b/web/app/components/workflow/panel/version-history-panel/index.tsx
index 851490fc5a..568d12fd95 100644
--- a/web/app/components/workflow/panel/version-history-panel/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/index.tsx
@@ -268,10 +268,10 @@ export const VersionHistoryPanel = ({
         />
         <Divider type="vertical" className="mx-1 h-3.5" />
         <div
-          className="flex h-6 w-6 cursor-pointer items-center justify-center p-0.5"
+          className="flex size-6 cursor-pointer items-center justify-center p-0.5"
           onClick={handleClose}
         >
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+          <RiCloseLine className="size-4 text-text-tertiary" />
         </div>
       </div>
       <div className="flex h-0 flex-1 flex-col">
@@ -312,8 +312,8 @@ export const VersionHistoryPanel = ({
             >
               <div className="item-center flex justify-center p-0.5">
                 {isFetching
-                  ? <RiLoader2Line className="h-3.5 w-3.5 animate-spin text-text-accent" />
-                  : <RiArrowDownDoubleLine className="h-3.5 w-3.5 text-text-accent" />}
+                  ? <RiLoader2Line className="size-3.5 animate-spin text-text-accent" />
+                  : <RiArrowDownDoubleLine className="size-3.5 text-text-accent" />}
               </div>
               <div className="py-px system-xs-medium-uppercase text-text-accent">
                 {t('common.loadMore', { ns: 'workflow' })}
diff --git a/web/app/components/workflow/panel/version-history-panel/loading/index.tsx b/web/app/components/workflow/panel/version-history-panel/loading/index.tsx
index ad5f7d6391..087a771c01 100644
--- a/web/app/components/workflow/panel/version-history-panel/loading/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/loading/index.tsx
@@ -12,7 +12,7 @@ const itemConfig = Array.from({ length: 8 }).map((_, index) => {
 const Loading = () => {
   return (
     <div className="relative w-full overflow-y-hidden">
-      <div className="absolute top-0 left-0 z-10 h-full w-full bg-dataset-chunk-list-mask-bg" />
+      <div className="absolute top-0 left-0 z-10 size-full bg-dataset-chunk-list-mask-bg" />
       {itemConfig.map((config, index) => <Item key={index} {...config} />)}
     </div>
   )
diff --git a/web/app/components/workflow/panel/version-history-panel/loading/item.tsx b/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
index bdf6dd47b8..b55219787f 100644
--- a/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
@@ -19,7 +19,7 @@ const Item: FC<ItemProps> = ({
     <div className="relative flex gap-x-1 p-2">
       {!isLast && <div className="absolute top-6 left-4 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle" />}
       <div className="flex h-5 w-[18px] shrink-0 items-center justify-center">
-        <div className="h-2 w-2 rounded-lg border-2 border-text-quaternary" />
+        <div className="size-2 rounded-lg border-2 border-text-quaternary" />
       </div>
       <div className="flex grow flex-col gap-y-0.5">
         <div className="flex h-3.5 items-center">
diff --git a/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx b/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
index 0984b2654f..efc1dfe1ec 100644
--- a/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
@@ -85,7 +85,7 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
       {!isLast && <div className="absolute top-6 left-4 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle" />}
       <div className="flex h-5 w-[18px] shrink-0 items-center justify-center">
         <div className={cn(
-          'h-2 w-2 rounded-lg border-2',
+          'size-2 rounded-lg border-2',
           isSelected ? 'border-text-accent' : 'border-text-quaternary',
         )}
         />
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index 7bf858fdd3..298c534563 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -122,7 +122,7 @@ const WorkflowPreview = () => {
           className="cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
           onClick={() => handleCancelDebugAndPreviewPanel()}
         >
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          <span className="i-ri-close-line size-4 text-text-tertiary" aria-hidden="true" />
         </button>
       </div>
       <div className="relative flex grow flex-col">
@@ -222,7 +222,7 @@ const WorkflowPreview = () => {
                     toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
                   }}
                 >
-                  <span className="i-ri-clipboard-line h-3.5 w-3.5" />
+                  <span className="i-ri-clipboard-line size-3.5" />
                   <div>{t('operation.copy', { ns: 'common' })}</div>
                 </Button>
               )}
diff --git a/web/app/components/workflow/run/agent-log/agent-log-item.tsx b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
index 67da9c7aa9..ebaa2bb9f7 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-item.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
@@ -57,15 +57,15 @@ const AgentLogItem = ({
     <div className="rounded-[10px] border-[0.5px] border-components-panel-border bg-background-default">
       <div
         className={cn(
-          'flex cursor-pointer items-center pt-2 pr-3 pb-2 pl-1.5',
+          'flex cursor-pointer items-center py-2 pr-3 pl-1.5',
           expanded && 'pb-1',
         )}
         onClick={() => setExpanded(!expanded)}
       >
         {
           expanded
-            ? <RiArrowRightSLine className="h-4 w-4 shrink-0 rotate-90 text-text-quaternary" />
-            : <RiArrowRightSLine className="h-4 w-4 shrink-0 text-text-quaternary" />
+            ? <RiArrowRightSLine className="size-4 shrink-0 rotate-90 text-text-quaternary" />
+            : <RiArrowRightSLine className="size-4 shrink-0 text-text-quaternary" />
         }
         <BlockIcon
           className="mr-1.5 shrink-0"
@@ -99,11 +99,11 @@ const AgentLogItem = ({
                   onClick={() => onShowAgentOrToolLog(item)}
                 >
                   <div className="flex items-center">
-                    <RiListView className="mr-1 h-4 w-4 shrink-0 text-components-button-tertiary-text" />
+                    <RiListView className="mr-1 size-4 shrink-0 text-components-button-tertiary-text" />
                     {`${children.length} Action Logs`}
                   </div>
                   <div className="flex">
-                    <RiArrowRightSLine className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
+                    <RiArrowRightSLine className="size-4 shrink-0 text-components-button-tertiary-text" />
                   </div>
                 </Button>
               )
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
index 5c8d100012..52fda32f6e 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
@@ -27,12 +27,12 @@ const AgentLogNavMore = ({
       <DropdownMenuTrigger
         render={(
           <Button
-            className="h-6 w-6"
+            className="size-6"
             variant="ghost-accent"
           />
         )}
       >
-        <RiMoreLine className="h-4 w-4" />
+        <RiMoreLine className="size-4" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-start"
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
index 7996595186..2db450aee0 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
@@ -28,7 +28,7 @@ const AgentLogNav = ({
           onShowAgentOrToolLog()
         }}
       >
-        <RiArrowLeftLine className="mr-1 h-3.5 w-3.5" />
+        <RiArrowLeftLine className="mr-1 size-3.5" />
         AGENT
       </Button>
       <div className="mx-0.5 shrink-0 system-xs-regular text-divider-deep">/</div>
diff --git a/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx b/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
index a9d432d1c9..e1b1983050 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
@@ -39,7 +39,7 @@ const AgentLogTrigger = ({
           className="flex shrink-0 cursor-pointer items-center px-px system-xs-regular-uppercase text-text-tertiary"
         >
           {t('detail', { ns: 'runLog' })}
-          <RiArrowRightLine className="ml-0.5 h-3.5 w-3.5" />
+          <RiArrowRightLine className="ml-0.5 size-3.5" />
         </div>
       </div>
     </div>
diff --git a/web/app/components/workflow/run/agent-log/agent-result-panel.tsx b/web/app/components/workflow/run/agent-log/agent-result-panel.tsx
index 50d30d7708..1ea8082276 100644
--- a/web/app/components/workflow/run/agent-log/agent-result-panel.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-result-panel.tsx
@@ -45,7 +45,7 @@ const AgentResultPanel = ({
               }}
             >
             </div>
-            <RiAlertFill className="mr-1.5 h-4 w-4 text-text-warning-secondary" />
+            <RiAlertFill className="mr-1.5 size-4 text-text-warning-secondary" />
             <div className="system-xs-medium text-text-primary">
               {t('circularInvocationTip', { ns: 'runLog' })}
             </div>
diff --git a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
index 8fb857f344..54f12922c5 100644
--- a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
@@ -144,7 +144,7 @@ const IterationLogTrigger = ({
       onClick={handleOnShowIterationDetail}
     >
       {/* eslint-disable-next-line hyoban/prefer-tailwind-icons */}
-      <Iteration className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
+      <Iteration className="size-4 shrink-0 text-components-button-tertiary-text" />
       <div className="flex-1 text-left system-sm-medium text-components-button-tertiary-text">
         {t('nodes.iteration.iteration', { ns: 'workflow', count: displayIterationCount })}
         {errorCount > 0 && (
@@ -155,7 +155,7 @@ const IterationLogTrigger = ({
         )}
       </div>
       {/* eslint-disable-next-line hyoban/prefer-tailwind-icons */}
-      <RiArrowRightSLine className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
+      <RiArrowRightSLine className="size-4 shrink-0 text-components-button-tertiary-text" />
     </Button>
   )
 }
diff --git a/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
index b37bc2735b..765cb6b693 100644
--- a/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
@@ -50,10 +50,10 @@ const IterationResultPanel: FC<Props> = ({
     const hasDurationMap = iterDurationMap && Object.keys(iterDurationMap).length !== 0
 
     if (hasFailed)
-      return <RiErrorWarningLine className="h-4 w-4 text-text-destructive" />
+      return <RiErrorWarningLine className="size-4 text-text-destructive" />
 
     if (isRunning)
-      return <RiLoader2Line className="h-3.5 w-3.5 animate-spin text-primary-600" />
+      return <RiLoader2Line className="size-3.5 animate-spin text-primary-600" />
 
     return (
       <>
@@ -64,7 +64,7 @@ const IterationResultPanel: FC<Props> = ({
         )}
         <RiArrowRightSLine
           className={cn(
-            'h-4 w-4 shrink-0 text-text-tertiary transition-transform duration-200',
+            'size-4 shrink-0 text-text-tertiary transition-transform duration-200',
             expandedIterations[index] && 'rotate-90',
           )}
         />
@@ -82,7 +82,7 @@ const IterationResultPanel: FC<Props> = ({
           onBack()
         }}
       >
-        <RiArrowLeftLine className="mr-1 h-4 w-4" />
+        <RiArrowLeftLine className="mr-1 size-4" />
         <div className="system-sm-medium">{t(`${i18nPrefix}.back`, { ns: 'workflow' })}</div>
       </div>
       {/* List */}
@@ -99,7 +99,7 @@ const IterationResultPanel: FC<Props> = ({
             >
               <div className={cn('flex grow items-center gap-2')}>
                 <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500">
-                  <Iteration className="h-3 w-3 text-text-primary-on-surface" />
+                  <Iteration className="size-3 text-text-primary-on-surface" />
                 </div>
                 <span className="grow system-sm-semibold-uppercase text-text-primary">
                   {t(`${i18nPrefix}.iteration`, { ns: 'workflow' })}
diff --git a/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx b/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
index 277db8cef4..7c5f51bc2c 100644
--- a/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
+++ b/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
@@ -94,7 +94,7 @@ const LoopLogTrigger = ({
       className="flex w-full cursor-pointer items-center gap-2 self-stretch rounded-lg border-none bg-components-button-tertiary-bg-hover px-3 py-2 hover:bg-components-button-tertiary-bg-hover"
       onClick={handleOnShowLoopDetail}
     >
-      <Loop className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
+      <Loop className="size-4 shrink-0 text-components-button-tertiary-text" />
       <div className="flex-1 text-left system-sm-medium text-components-button-tertiary-text">
         {t('nodes.loop.loop', { ns: 'workflow', count: displayLoopCount })}
         {errorCount > 0 && (
@@ -104,7 +104,7 @@ const LoopLogTrigger = ({
           </>
         )}
       </div>
-      <RiArrowRightSLine className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
+      <RiArrowRightSLine className="size-4 shrink-0 text-components-button-tertiary-text" />
     </Button>
   )
 }
diff --git a/web/app/components/workflow/run/loop-log/loop-result-panel.tsx b/web/app/components/workflow/run/loop-log/loop-result-panel.tsx
index 574658838e..79579dc6d3 100644
--- a/web/app/components/workflow/run/loop-log/loop-result-panel.tsx
+++ b/web/app/components/workflow/run/loop-log/loop-result-panel.tsx
@@ -66,10 +66,10 @@ const LoopResultPanel: FC<Props> = ({
     const hasDurationMap = loopDurationMap && Object.keys(loopDurationMap).length !== 0
 
     if (hasFailed)
-      return <RiErrorWarningLine className="h-4 w-4 text-text-destructive" />
+      return <RiErrorWarningLine className="size-4 text-text-destructive" />
 
     if (isRunning)
-      return <RiLoader2Line className="h-3.5 w-3.5 animate-spin text-primary-600" />
+      return <RiLoader2Line className="size-3.5 animate-spin text-primary-600" />
 
     return (
       <>
@@ -80,7 +80,7 @@ const LoopResultPanel: FC<Props> = ({
         )}
         <RiArrowRightSLine
           className={cn(
-            'h-4 w-4 shrink-0 text-text-tertiary transition-transform duration-200',
+            'size-4 shrink-0 text-text-tertiary transition-transform duration-200',
             expandedLoops[index] && 'rotate-90',
           )}
         />
@@ -98,7 +98,7 @@ const LoopResultPanel: FC<Props> = ({
           onBack()
         }}
       >
-        <RiArrowLeftLine className="mr-1 h-4 w-4" />
+        <RiArrowLeftLine className="mr-1 size-4" />
         <div className="system-sm-medium">{t(`${i18nPrefix}.back`, { ns: 'workflow' })}</div>
       </div>
       {/* List */}
@@ -115,7 +115,7 @@ const LoopResultPanel: FC<Props> = ({
             >
               <div className={cn('flex grow items-center gap-2')}>
                 <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500">
-                  <Loop className="h-3 w-3 text-text-primary-on-surface" />
+                  <Loop className="size-3 text-text-primary-on-surface" />
                 </div>
                 <span className="grow system-sm-semibold-uppercase text-text-primary">
                   {t(`${i18nPrefix}.loop`, { ns: 'workflow' })}
diff --git a/web/app/components/workflow/run/loop-result-panel.tsx b/web/app/components/workflow/run/loop-result-panel.tsx
index a2867fb310..a9b9c8aa80 100644
--- a/web/app/components/workflow/run/loop-result-panel.tsx
+++ b/web/app/components/workflow/run/loop-result-panel.tsx
@@ -51,7 +51,7 @@ const LoopResultPanel: FC<Props> = ({
             aria-label={t('operation.close', { ns: 'common' })}
             onClick={onHide}
           >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
         </div>
         <button
@@ -59,7 +59,7 @@ const LoopResultPanel: FC<Props> = ({
           className="flex cursor-pointer items-center space-x-1 border-none bg-transparent px-0 py-2 text-left text-text-accent-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
           onClick={onBack}
         >
-          <ArrowNarrowLeft className="h-4 w-4" aria-hidden="true" />
+          <ArrowNarrowLeft className="size-4" aria-hidden="true" />
           <div className="system-sm-medium">{t(`${i18nPrefix}.back`, { ns: 'workflow' })}</div>
         </button>
       </div>
@@ -78,7 +78,7 @@ const LoopResultPanel: FC<Props> = ({
             >
               <div className={cn('flex grow items-center gap-2')}>
                 <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500">
-                  <Loop className="h-3 w-3 text-text-primary-on-surface" />
+                  <Loop className="size-3 text-text-primary-on-surface" />
                 </div>
                 <span className="grow system-sm-semibold-uppercase text-text-primary">
                   {t(`${i18nPrefix}.loop`, { ns: 'workflow' })}
@@ -87,7 +87,7 @@ const LoopResultPanel: FC<Props> = ({
                 </span>
                 <RiArrowRightSLine
                   className={cn(
-                    'h-4 w-4 shrink-0 text-text-tertiary transition-transform duration-200',
+                    'size-4 shrink-0 text-text-tertiary transition-transform duration-200',
                     expandedLoops[index] && 'rotate-90',
                   )}
                   aria-hidden="true"
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 85607a1342..60c2a5a0a6 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -126,7 +126,7 @@ const NodePanel: FC<Props> = ({
           {!hideProcessDetail && (
             <RiArrowRightSLine
               className={cn(
-                'mr-1 h-4 w-4 shrink-0 text-text-quaternary transition-all group-hover:text-text-tertiary',
+                'mr-1 size-4 shrink-0 text-text-quaternary transition-all group-hover:text-text-tertiary',
                 !collapseState && 'rotate-90',
               )}
             />
@@ -156,24 +156,24 @@ const NodePanel: FC<Props> = ({
             </div>
           )}
           {nodeInfo.status === 'succeeded' && (
-            <RiCheckboxCircleFill className="ml-2 h-3.5 w-3.5 shrink-0 text-text-success" />
+            <RiCheckboxCircleFill className="ml-2 size-3.5 shrink-0 text-text-success" />
           )}
           {nodeInfo.status === 'failed' && (
-            <RiErrorWarningFill className="ml-2 h-3.5 w-3.5 shrink-0 text-text-destructive" />
+            <RiErrorWarningFill className="ml-2 size-3.5 shrink-0 text-text-destructive" />
           )}
           {nodeInfo.status === 'stopped' && (
-            <RiAlertFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
+            <RiAlertFill className={cn('ml-2 size-4 shrink-0 text-text-warning-secondary', inMessage && 'size-3.5')} />
           )}
           {nodeInfo.status === 'paused' && (
-            <RiPauseCircleFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
+            <RiPauseCircleFill className={cn('ml-2 size-4 shrink-0 text-text-warning-secondary', inMessage && 'size-3.5')} />
           )}
           {nodeInfo.status === 'exception' && (
-            <RiAlertFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
+            <RiAlertFill className={cn('ml-2 size-4 shrink-0 text-text-warning-secondary', inMessage && 'size-3.5')} />
           )}
           {nodeInfo.status === 'running' && (
             <div className="flex shrink-0 items-center text-[13px] leading-[16px] font-medium text-text-accent">
               <span className="mr-2 text-xs font-normal">Running</span>
-              <RiLoader2Line className="h-3.5 w-3.5 animate-spin" />
+              <RiLoader2Line className="size-3.5 animate-spin" />
             </div>
           )}
         </div>
diff --git a/web/app/components/workflow/run/result-text.tsx b/web/app/components/workflow/run/result-text.tsx
index f76c99fe9c..63b400eeb0 100644
--- a/web/app/components/workflow/run/result-text.tsx
+++ b/web/app/components/workflow/run/result-text.tsx
@@ -41,7 +41,7 @@ const ResultText: FC<ResultTextProps> = ({
       )}
       {!isPaused && !isRunning && !outputs && !error && !allFiles?.length && (
         <div className="mt-[120px] flex flex-col items-center px-4 py-2 text-[13px] leading-[18px] text-gray-500">
-          <ImageIndentLeft className="h-6 w-6 text-gray-400" />
+          <ImageIndentLeft className="size-6 text-gray-400" />
           <div className="mr-2">{t('resultEmpty.title', { ns: 'runLog' })}</div>
           <div>
             {t('resultEmpty.tipLeft', { ns: 'runLog' })}
diff --git a/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx b/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
index 84c7808df1..16c3bb0163 100644
--- a/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
+++ b/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
@@ -30,10 +30,10 @@ const RetryLogTrigger = ({
       onClick={handleShowRetryResultList}
     >
       <div className="flex items-center">
-        <RiRestartFill className="mr-0.5 h-4 w-4 shrink-0 text-components-button-tertiary-text" />
+        <RiRestartFill className="mr-0.5 size-4 shrink-0 text-components-button-tertiary-text" />
         {t('nodes.common.retry.retries', { ns: 'workflow', num: retryDetail?.length })}
       </div>
-      <RiArrowRightSLine className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
+      <RiArrowRightSLine className="size-4 shrink-0 text-components-button-tertiary-text" />
     </Button>
   )
 }
diff --git a/web/app/components/workflow/run/retry-log/retry-result-panel.tsx b/web/app/components/workflow/run/retry-log/retry-result-panel.tsx
index 5ed6574737..37e08679e1 100644
--- a/web/app/components/workflow/run/retry-log/retry-result-panel.tsx
+++ b/web/app/components/workflow/run/retry-log/retry-result-panel.tsx
@@ -30,7 +30,7 @@ const RetryResultPanel: FC<Props> = ({
           onBack()
         }}
       >
-        <RiArrowLeftLine className="mr-1 h-4 w-4" />
+        <RiArrowLeftLine className="mr-1 size-4" />
         {t('singleRun.back', { ns: 'workflow' })}
       </div>
       <TracingPanel
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index 9b4295d1fe..8b17062d8c 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -103,8 +103,8 @@ const TracingPanel: FC<TracingPanelProps> = ({
               )}
             >
               {isHovered
-                ? <span aria-hidden className="i-ri-arrow-down-s-line h-3 w-3" />
-                : <span aria-hidden className="i-ri-menu-4-line h-3 w-3 text-text-tertiary" />}
+                ? <span aria-hidden className="i-ri-arrow-down-s-line size-3" />
+                : <span aria-hidden className="i-ri-menu-4-line size-3 text-text-tertiary" />}
             </button>
             <div className="flex items-center system-xs-semibold-uppercase text-text-secondary">
               <span>{parallelDetail.parallelTitle}</span>
diff --git a/web/app/components/workflow/simple-node/index.tsx b/web/app/components/workflow/simple-node/index.tsx
index c039d9f7e0..43345ba141 100644
--- a/web/app/components/workflow/simple-node/index.tsx
+++ b/web/app/components/workflow/simple-node/index.tsx
@@ -112,22 +112,22 @@ const SimpleNode: FC<SimpleNodeProps> = ({
           </div>
           {
             (data._runningStatus === NodeRunningStatus.Running || data._singleRunningStatus === NodeRunningStatus.Running) && (
-              <RiLoader2Line className="h-3.5 w-3.5 animate-spin text-text-accent" />
+              <RiLoader2Line className="size-3.5 animate-spin text-text-accent" />
             )
           }
           {
             data._runningStatus === NodeRunningStatus.Succeeded && (
-              <RiCheckboxCircleFill className="h-3.5 w-3.5 text-text-success" />
+              <RiCheckboxCircleFill className="size-3.5 text-text-success" />
             )
           }
           {
             data._runningStatus === NodeRunningStatus.Failed && (
-              <RiErrorWarningFill className="h-3.5 w-3.5 text-text-destructive" />
+              <RiErrorWarningFill className="size-3.5 text-text-destructive" />
             )
           }
           {
             data._runningStatus === NodeRunningStatus.Exception && (
-              <RiAlertFill className="h-3.5 w-3.5 text-text-warning-secondary" />
+              <RiAlertFill className="size-3.5 text-text-warning-secondary" />
             )
           }
         </div>
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index de5e92a006..2d73a5b25a 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -220,9 +220,9 @@ const UpdateDSLModal = ({
             </button>
           </div>
           <div className="relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs">
-            <div className="absolute top-0 left-0 h-full w-full bg-toast-warning-bg opacity-40" />
+            <div className="absolute top-0 left-0 size-full bg-toast-warning-bg opacity-40" />
             <div className="flex items-start justify-center p-1">
-              <RiAlertFill className="h-4 w-4 shrink-0 text-text-warning-secondary" />
+              <RiAlertFill className="size-4 shrink-0 text-text-warning-secondary" />
             </div>
             <div className="flex grow flex-col items-start gap-0.5 py-1">
               <div className="system-xs-medium whitespace-pre-line text-text-primary">{t('common.importDSLTip', { ns: 'workflow' })}</div>
@@ -233,7 +233,7 @@ const UpdateDSLModal = ({
                   className="z-1000"
                   onClick={onBackup}
                 >
-                  <RiFileDownloadLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+                  <RiFileDownloadLine className="size-3.5 text-components-button-secondary-text" />
                   <div className="flex items-center justify-center gap-1 px-[3px]">
                     {t('common.backupCurrentDraft', { ns: 'workflow' })}
                   </div>
diff --git a/web/app/components/workflow/variable-inspect/empty.tsx b/web/app/components/workflow/variable-inspect/empty.tsx
index b456acc222..51b8d51e73 100644
--- a/web/app/components/workflow/variable-inspect/empty.tsx
+++ b/web/app/components/workflow/variable-inspect/empty.tsx
@@ -10,7 +10,7 @@ const Empty: FC = () => {
   return (
     <div className="flex h-full flex-col gap-3 rounded-xl bg-background-section p-8">
       <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-xs">
-        <Variable02 className="h-5 w-5 text-text-accent" />
+        <Variable02 className="size-5 text-text-accent" />
       </div>
       <div className="flex flex-col gap-1">
         <div className="system-sm-semibold text-text-secondary">{t('debug.variableInspect.title', { ns: 'workflow' })}</div>
diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx
index bef4fecb63..9362f6a365 100644
--- a/web/app/components/workflow/variable-inspect/group.tsx
+++ b/web/app/components/workflow/variable-inspect/group.tsx
@@ -111,12 +111,12 @@ const Group = ({
           className="flex min-w-0 grow cursor-pointer items-center gap-0.5 rounded-sm border-none bg-transparent p-0 text-left outline-hidden focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
           onClick={() => setIsCollapsed(!isCollapsed)}
         >
-          <div className="h-3 w-3 shrink-0">
+          <div className="size-3 shrink-0">
             {nodeData?.isSingRunRunning && (
-              <RiLoader2Line className="h-3 w-3 animate-spin text-text-accent" aria-hidden />
+              <RiLoader2Line className="size-3 animate-spin text-text-accent" aria-hidden />
             )}
             {(!nodeData || !nodeData.isSingRunRunning) && visibleVarList.length > 0 && (
-              <RiArrowRightSLine className={cn('h-3 w-3 text-text-tertiary', !isCollapsed && 'rotate-90')} aria-hidden />
+              <RiArrowRightSLine className={cn('size-3 text-text-tertiary', !isCollapsed && 'rotate-90')} aria-hidden />
             )}
           </div>
           {nodeData && (
@@ -142,7 +142,7 @@ const Group = ({
               <TooltipTrigger
                 render={(
                   <ActionButton aria-label={t('debug.variableInspect.view', { ns: 'workflow' })} onClick={handleView}>
-                    <RiFileList3Line className="h-4 w-4" aria-hidden />
+                    <RiFileList3Line className="size-4" aria-hidden />
                   </ActionButton>
                 )}
               />
@@ -154,7 +154,7 @@ const Group = ({
               <TooltipTrigger
                 render={(
                   <ActionButton aria-label={t('debug.variableInspect.clearNode', { ns: 'workflow' })} onClick={handleClear}>
-                    <RiDeleteBinLine className="h-4 w-4" aria-hidden />
+                    <RiDeleteBinLine className="size-4" aria-hidden />
                   </ActionButton>
                 )}
               />
diff --git a/web/app/components/workflow/variable-inspect/listening.tsx b/web/app/components/workflow/variable-inspect/listening.tsx
index cf702a623a..5fa1d7c001 100644
--- a/web/app/components/workflow/variable-inspect/listening.tsx
+++ b/web/app/components/workflow/variable-inspect/listening.tsx
@@ -166,7 +166,7 @@ const Listening: FC<ListeningProps> = ({
             type={icon.type}
             toolIcon={icon.toolIcon}
             size="md"
-            className="h-10! w-10! rounded-xl! [&_svg]:h-7! [&_svg]:w-7!"
+            className="size-10! rounded-xl! [&_svg]:size-7!"
           />
         ))}
       </div>
diff --git a/web/app/components/workflow/variable-inspect/panel.tsx b/web/app/components/workflow/variable-inspect/panel.tsx
index 462f9ba4e1..b38bd006f5 100644
--- a/web/app/components/workflow/variable-inspect/panel.tsx
+++ b/web/app/components/workflow/variable-inspect/panel.tsx
@@ -163,7 +163,7 @@ const Panel: FC = () => {
         <div className="flex shrink-0 items-center justify-between pt-2 pr-2 pl-4">
           <div className="system-sm-semibold-uppercase text-text-primary">{t('debug.variableInspect.title', { ns: 'workflow' })}</div>
           <ActionButton onClick={() => setShowVariableInspectPanel(false)}>
-            <RiCloseLine className="h-4 w-4" />
+            <RiCloseLine className="size-4" />
           </ActionButton>
         </div>
         <div className="grow p-2">
@@ -181,7 +181,7 @@ const Panel: FC = () => {
         <div className="flex shrink-0 items-center justify-between pt-2 pr-2 pl-4">
           <div className="system-sm-semibold-uppercase text-text-primary">{t('debug.variableInspect.title', { ns: 'workflow' })}</div>
           <ActionButton onClick={() => setShowVariableInspectPanel(false)}>
-            <RiCloseLine className="h-4 w-4" />
+            <RiCloseLine className="size-4" />
           </ActionButton>
         </div>
         <div className="grow p-2">
@@ -194,7 +194,7 @@ const Panel: FC = () => {
   return (
     <div className={cn('relative flex h-full')}>
       {/* left */}
-      {bottomPanelWidth < 488 && showLeftPanel && <div className="absolute top-0 left-0 h-full w-full" onClick={() => setShowLeftPanel(false)}></div>}
+      {bottomPanelWidth < 488 && showLeftPanel && <div className="absolute top-0 left-0 size-full" onClick={() => setShowLeftPanel(false)}></div>}
       <div
         className={cn(
           'w-60 shrink-0 border-r border-divider-burn',
diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index db58b5e557..22f062bf91 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -167,7 +167,7 @@ const Right = ({
       <div className="flex shrink-0 items-center justify-between gap-1 px-2 pt-2">
         {bottomPanelWidth < 488 && (
           <ActionButton className="shrink-0" onClick={handleOpenMenu}>
-            <RiMenuLine className="h-4 w-4" />
+            <RiMenuLine className="size-4" />
           </ActionButton>
         )}
         <div className="flex w-0 grow items-center gap-1">
@@ -264,7 +264,7 @@ const Right = ({
                   <TooltipTrigger
                     render={(
                       <ActionButton onClick={resetValue}>
-                        <RiArrowGoBackLine className="h-4 w-4" />
+                        <RiArrowGoBackLine className="size-4" />
                       </ActionButton>
                     )}
                   />
@@ -278,7 +278,7 @@ const Right = ({
                   <TooltipTrigger
                     render={(
                       <ActionButton onClick={handleClear}>
-                        <RiArrowGoBackLine className="h-4 w-4" />
+                        <RiArrowGoBackLine className="size-4" />
                       </ActionButton>
                     )}
                   />
@@ -293,7 +293,7 @@ const Right = ({
             </>
           )}
           <ActionButton onClick={handleClose}>
-            <RiCloseLine className="h-4 w-4" />
+            <RiCloseLine className="size-4" />
           </ActionButton>
         </div>
       </div>
diff --git a/web/app/components/workflow/variable-inspect/trigger.tsx b/web/app/components/workflow/variable-inspect/trigger.tsx
index aee9d0e972..4aaf4823e5 100644
--- a/web/app/components/workflow/variable-inspect/trigger.tsx
+++ b/web/app/components/workflow/variable-inspect/trigger.tsx
@@ -104,7 +104,7 @@ const VariableInspectTrigger: FC = () => {
             className="flex h-6 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 system-xs-medium text-text-accent shadow-lg backdrop-blur-xs hover:bg-components-actionbar-bg-accent"
             onClick={() => setShowVariableInspectPanel(true)}
           >
-            <RiLoader2Line className="h-4 w-4 animate-spin" />
+            <RiLoader2Line className="size-4 animate-spin" />
             <span className="text-text-accent">{t('debug.variableInspect.trigger.running', { ns: 'workflow' })}</span>
           </div>
           {isPreviewRunning && (
@@ -115,7 +115,7 @@ const VariableInspectTrigger: FC = () => {
                     className="flex h-6 cursor-pointer items-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-1 shadow-lg backdrop-blur-xs hover:bg-components-actionbar-bg-accent"
                     onClick={handleStop}
                   >
-                    <RiStopCircleFill className="h-4 w-4 text-text-accent" />
+                    <RiStopCircleFill className="size-4 text-text-accent" />
                   </div>
                 )}
               />
diff --git a/web/app/components/workflow/variable-inspect/value-content-sections.tsx b/web/app/components/workflow/variable-inspect/value-content-sections.tsx
index 8fb6c14d2f..356cd78d86 100644
--- a/web/app/components/workflow/variable-inspect/value-content-sections.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content-sections.tsx
@@ -32,7 +32,7 @@ export const TextEditorSection = ({
 }: TextEditorSectionProps) => {
   return (
     <>
-      {isTruncated && <LargeDataAlert className="absolute top-1 right-3 left-3" />}
+      {isTruncated && <LargeDataAlert className="absolute inset-x-3 top-1" />}
       {currentVar.value_type === 'string'
         ? (
             <DisplayContent
diff --git a/web/app/components/workflow/workflow-preview/components/node-handle.tsx b/web/app/components/workflow/workflow-preview/components/node-handle.tsx
index 7c9c8f39f0..41b932ab93 100644
--- a/web/app/components/workflow/workflow-preview/components/node-handle.tsx
+++ b/web/app/components/workflow/workflow-preview/components/node-handle.tsx
@@ -30,7 +30,7 @@ export const NodeTargetHandle = memo(({
         type="target"
         position={Position.Left}
         className={cn(
-          'z-1 h-4! w-4! rounded-none! border-none! bg-transparent! outline-hidden!',
+          'z-1 size-4! rounded-none! border-none! bg-transparent! outline-hidden!',
           'after:absolute after:top-1 after:left-1.5 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
           'transition-all hover:scale-125',
           !connected && 'after:opacity-0',
@@ -60,7 +60,7 @@ export const NodeSourceHandle = memo(({
       type="source"
       position={Position.Right}
       className={cn(
-        'group/handle z-1 h-4! w-4! rounded-none! border-none! bg-transparent! outline-hidden!',
+        'group/handle z-1 size-4! rounded-none! border-none! bg-transparent! outline-hidden!',
         'after:absolute after:top-1 after:right-1.5 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
         'transition-all hover:scale-125',
         !connected && 'after:opacity-0',
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/iteration-start/index.tsx b/web/app/components/workflow/workflow-preview/components/nodes/iteration-start/index.tsx
index 391150649f..b8d92afa2f 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/iteration-start/index.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/iteration-start/index.tsx
@@ -9,13 +9,13 @@ const IterationStartNode = ({ id, data }: NodeProps) => {
   const { t } = useTranslation()
 
   return (
-    <div className="nodrag group mt-1 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg shadow-xs">
+    <div className="nodrag group mt-1 flex size-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg shadow-xs">
       <Tooltip>
         <TooltipTrigger
           aria-label={t('blocks.iteration-start', { ns: 'workflow' })}
           className="flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500 p-0"
         >
-          <RiHome5Fill className="h-3 w-3 text-text-primary-on-surface" />
+          <RiHome5Fill className="size-3 text-text-primary-on-surface" />
         </TooltipTrigger>
         <TooltipContent>{t('blocks.iteration-start', { ns: 'workflow' })}</TooltipContent>
       </Tooltip>
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/loop-start/index.tsx b/web/app/components/workflow/workflow-preview/components/nodes/loop-start/index.tsx
index 67865be470..db3d71ce30 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/loop-start/index.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/loop-start/index.tsx
@@ -9,13 +9,13 @@ const LoopStartNode = ({ id, data }: NodeProps) => {
   const { t } = useTranslation()
 
   return (
-    <div className="nodrag group mt-1 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg">
+    <div className="nodrag group mt-1 flex size-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg">
       <Tooltip>
         <TooltipTrigger
           aria-label={t('blocks.loop-start', { ns: 'workflow' })}
           className="flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500 p-0"
         >
-          <RiHome5Fill className="h-3 w-3 text-text-primary-on-surface" />
+          <RiHome5Fill className="size-3 text-text-primary-on-surface" />
         </TooltipTrigger>
         <TooltipContent>{t('blocks.loop-start', { ns: 'workflow' })}</TooltipContent>
       </Tooltip>
diff --git a/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx b/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
index 92a96a030f..6c3938b377 100644
--- a/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
+++ b/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
@@ -110,7 +110,7 @@ const ZoomInOut: FC = () => {
             type="button"
             aria-label={t('operator.zoomOut', { ns: 'workflow' })}
             disabled={zoom <= 0.25}
-            className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+            className={`flex size-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
             onClick={(e) => {
               if (zoom <= 0.25)
                 return
@@ -119,7 +119,7 @@ const ZoomInOut: FC = () => {
               zoomOut()
             }}
           >
-            <span aria-hidden className="i-ri-zoom-out-line h-4 w-4 text-text-tertiary hover:text-text-secondary" />
+            <span aria-hidden className="i-ri-zoom-out-line size-4 text-text-tertiary hover:text-text-secondary" />
           </button>
         </TipPopup>
         <DropdownMenu
@@ -177,7 +177,7 @@ const ZoomInOut: FC = () => {
             type="button"
             aria-label={t('operator.zoomIn', { ns: 'workflow' })}
             disabled={zoom >= 2}
-            className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+            className={`flex size-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
             onClick={(e) => {
               if (zoom >= 2)
                 return
@@ -186,7 +186,7 @@ const ZoomInOut: FC = () => {
               zoomIn()
             }}
           >
-            <span aria-hidden className="i-ri-zoom-in-line h-4 w-4 text-text-tertiary hover:text-text-secondary" />
+            <span aria-hidden className="i-ri-zoom-in-line size-4 text-text-tertiary hover:text-text-secondary" />
           </button>
         </TipPopup>
       </div>
diff --git a/web/app/components/workflow/workflow-preview/index.tsx b/web/app/components/workflow/workflow-preview/index.tsx
index 1a2b0419dd..73f21f61df 100644
--- a/web/app/components/workflow/workflow-preview/index.tsx
+++ b/web/app/components/workflow/workflow-preview/index.tsx
@@ -86,7 +86,7 @@ const WorkflowPreview = ({
     <div
       id="workflow-container"
       className={cn(
-        'relative h-full w-full',
+        'relative size-full',
         className,
       )}
     >
diff --git a/web/app/education-apply/applied-education-content.tsx b/web/app/education-apply/applied-education-content.tsx
index cbe2e11fda..a7426bdd4e 100644
--- a/web/app/education-apply/applied-education-content.tsx
+++ b/web/app/education-apply/applied-education-content.tsx
@@ -42,7 +42,7 @@ const AppliedEducationContent = ({
       <div className="rounded-lg border border-effects-highlight bg-background-default-subtle px-3">
         <div className="flex items-center gap-2">
           <div className="flex size-5 shrink-0 items-center justify-center rounded-full bg-state-success-solid text-text-primary-on-surface">
-            <span className="i-ri-check-line h-3.5 w-3.5" />
+            <span className="i-ri-check-line size-3.5" />
           </div>
           <div>
             <div className="text-text-secondary">
@@ -73,7 +73,7 @@ const AppliedEducationContent = ({
             <SelectTrigger className="h-12! w-fit max-w-full min-w-[280px] cursor-pointer justify-between rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-3! py-1.5! hover:bg-state-base-hover">
               <span className="flex min-w-0 items-center gap-3">
                 <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-components-icon-bg-blue-solid text-[14px]">
-                  <span className="bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text font-semibold text-shadow-shadow-1 uppercase opacity-90">
+                  <span className="bg-linear-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text font-semibold text-shadow-shadow-1 uppercase opacity-90">
                     {workspaceName?.[0]?.toLocaleUpperCase()}
                   </span>
                 </span>
diff --git a/web/app/education-apply/education-apply-page.tsx b/web/app/education-apply/education-apply-page.tsx
index 3a8455e407..8db68c73ba 100644
--- a/web/app/education-apply/education-apply-page.tsx
+++ b/web/app/education-apply/education-apply-page.tsx
@@ -118,7 +118,7 @@ const EducationApplyAgeContent = () => {
   }
   const renderBackToDifyButton = () => (
     <Button variant="ghost-accent" onClick={handleReturnHome}>
-      <span className="mr-1 i-ri-arrow-left-line h-4 w-4" />
+      <span className="mr-1 i-ri-arrow-left-line size-4" />
       {t('applied.noPaymentPermission.returnHome', { ns: 'education' })}
     </Button>
   )
@@ -153,7 +153,7 @@ const EducationApplyAgeContent = () => {
       return (
         <div className="flex w-full flex-col items-start gap-3">
           <div className="flex w-full items-start rounded-lg border-[0.5px] border-components-badge-status-light-warning-halo bg-state-warning-hover px-3 py-2.5">
-            <span className="mt-0.5 mr-2 i-ri-alert-fill h-4 w-4 shrink-0 text-text-warning-secondary" />
+            <span className="mt-0.5 mr-2 i-ri-alert-fill size-4 shrink-0 text-text-warning-secondary" />
             <div className="system-md-regular text-text-warning">
               <Trans
                 i18nKey="applied.activeSubscription.description"
@@ -179,7 +179,7 @@ const EducationApplyAgeContent = () => {
     return (
       <div className="flex w-full flex-col items-start gap-3">
         <div className="flex w-full items-start rounded-lg border-[0.5px] border-components-badge-status-light-warning-halo bg-state-warning-hover px-3 py-2.5">
-          <span className="mt-0.5 mr-2 i-ri-alert-fill h-4 w-4 shrink-0 text-text-warning-secondary" />
+          <span className="mt-0.5 mr-2 i-ri-alert-fill size-4 shrink-0 text-text-warning-secondary" />
           <div className="system-md-regular text-text-warning">
             {t('applied.noPaymentPermission.description', { ns: 'education' })}
           </div>
@@ -296,7 +296,7 @@ const EducationApplyAgeContent = () => {
                     target="_blank"
                   >
                     {t('learn', { ns: 'education' })}
-                    <span className="ml-1 i-ri-external-link-line h-3 w-3" />
+                    <span className="ml-1 i-ri-external-link-line size-3" />
                   </a>
                 </>
               )}
diff --git a/web/app/education-apply/role-selector.tsx b/web/app/education-apply/role-selector.tsx
index 35e7c0644c..69b3d2d415 100644
--- a/web/app/education-apply/role-selector.tsx
+++ b/web/app/education-apply/role-selector.tsx
@@ -37,7 +37,7 @@ const RoleSelector = ({
           >
             <div
               className={cn(
-                'mr-2 h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
+                'mr-2 size-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
                 option.key === value && 'border-[5px] border-components-radio-border-checked',
               )}
             >
diff --git a/web/app/education-apply/verify-state-modal.tsx b/web/app/education-apply/verify-state-modal.tsx
index ac10f2319e..0828be197f 100644
--- a/web/app/education-apply/verify-state-modal.tsx
+++ b/web/app/education-apply/verify-state-modal.tsx
@@ -50,7 +50,7 @@ function Confirm({
     >
       <DialogContent className="w-full max-w-[481px]! overflow-hidden! border-none bg-transparent p-0! shadow-none">
         <div className="shadows-shadow-lg flex max-w-full flex-col items-start rounded-2xl border-[0.5px] border-solid border-components-panel-border bg-components-panel-bg">
-          <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-6 pb-4 pl-6">
+          <div className="flex flex-col items-start gap-2 self-stretch px-6 pt-6 pb-4">
             <DialogTitle className="title-2xl-semi-bold text-text-primary">{title}</DialogTitle>
             <div className="w-full system-md-regular text-text-tertiary">{content}</div>
           </div>
@@ -65,7 +65,7 @@ function Confirm({
               {showLink && (
                 <>
                   <a onClick={handleClick} href={eduDocLink} target="_blank" rel="noopener noreferrer" className="cursor-pointer system-xs-regular text-text-accent">{t('learn', { ns: 'education' })}</a>
-                  <RiExternalLinkLine className="h-3 w-3 text-text-accent" />
+                  <RiExternalLinkLine className="size-3 text-text-accent" />
                 </>
               )}
             </div>
diff --git a/web/app/reset-password/check-code/page.tsx b/web/app/reset-password/check-code/page.tsx
index b11935481e..476be2b4dd 100644
--- a/web/app/reset-password/check-code/page.tsx
+++ b/web/app/reset-password/check-code/page.tsx
@@ -58,8 +58,8 @@ export default function CheckCode() {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
-        <RiMailSendFill className="h-6 w-6 text-2xl" />
+      <div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
+        <RiMailSendFill className="size-6 text-2xl" />
       </div>
       <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
diff --git a/web/app/reset-password/page.tsx b/web/app/reset-password/page.tsx
index 63b950bd11..e15d87034c 100644
--- a/web/app/reset-password/page.tsx
+++ b/web/app/reset-password/page.tsx
@@ -57,8 +57,8 @@ export default function CheckCode() {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
-        <RiLockPasswordLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
+      <div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
+        <RiLockPasswordLine className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('resetPassword', { ns: 'login' })}</h2>
diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index 4a8cb2af9b..92b081b1ec 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -169,8 +169,8 @@ const ChangePasswordForm = () => {
       {showSuccess && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
-              <RiCheckboxCircleFill className="h-6 w-6 text-text-success" />
+            <div className="mb-3 flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
+              <RiCheckboxCircleFill className="size-6 text-text-success" />
             </div>
             <h2 className="title-4xl-semi-bold text-text-primary">
               {t('passwordChangedTip', { ns: 'login' })}
diff --git a/web/app/signin/_locale-menu.tsx b/web/app/signin/_locale-menu.tsx
index 5f72a51eb9..02c8035b30 100644
--- a/web/app/signin/_locale-menu.tsx
+++ b/web/app/signin/_locale-menu.tsx
@@ -43,7 +43,7 @@ export default function LocaleMenu<T extends string>({
                 />
               )}
             >
-              <span className="mr-1 i-heroicons-globe-alt h-5 w-5" aria-hidden="true" />
+              <span className="mr-1 i-heroicons-globe-alt size-5" aria-hidden="true" />
               {selectedItem?.name}
             </DropdownMenuTrigger>
           </div>
diff --git a/web/app/signin/check-code/page.tsx b/web/app/signin/check-code/page.tsx
index c90f426fe2..80e6d01f5d 100644
--- a/web/app/signin/check-code/page.tsx
+++ b/web/app/signin/check-code/page.tsx
@@ -92,8 +92,8 @@ export default function CheckCode() {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
-        <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
+      <div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
+        <RiMailSendFill className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
diff --git a/web/app/signin/components/social-auth.tsx b/web/app/signin/components/social-auth.tsx
index 17455cebf4..414f46a05e 100644
--- a/web/app/signin/components/social-auth.tsx
+++ b/web/app/signin/components/social-auth.tsx
@@ -41,7 +41,7 @@ export default function SocialAuth(props: SocialAuthProps) {
           >
             <>
               <span className={
-                cn(style.githubIcon, 'mr-2 h-5 w-5')
+                cn(style.githubIcon, 'mr-2 size-5')
               }
               />
               <span className="truncate leading-normal">{t('withGitHub', { ns: 'login' })}</span>
@@ -57,7 +57,7 @@ export default function SocialAuth(props: SocialAuthProps) {
           >
             <>
               <span className={
-                cn(style.googleIcon, 'mr-2 h-5 w-5')
+                cn(style.googleIcon, 'mr-2 size-5')
               }
               />
               <span className="truncate leading-normal">{t('withGoogle', { ns: 'login' })}</span>
diff --git a/web/app/signin/components/sso-auth.tsx b/web/app/signin/components/sso-auth.tsx
index 32612e4edd..5cacd6a01d 100644
--- a/web/app/signin/components/sso-auth.tsx
+++ b/web/app/signin/components/sso-auth.tsx
@@ -61,7 +61,7 @@ const SSOAuth: FC<SSOAuthProps> = ({
       disabled={isLoading}
       className="w-full"
     >
-      <Lock01 className="mr-2 h-5 w-5 text-text-accent-light-mode-only" />
+      <Lock01 className="mr-2 size-5 text-text-accent-light-mode-only" />
       <span className="truncate">{t('withSSO', { ns: 'login' })}</span>
     </Button>
   )
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index ddde11b940..8b5a51782c 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -117,7 +117,7 @@ export default function InviteSettingsPage() {
     return (
       <div className="flex flex-col md:w-[400px]">
         <div className="mx-auto w-full">
-          <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle text-2xl font-bold shadow-lg">🤷‍♂️</div>
+          <div className="mb-3 flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle text-2xl font-bold shadow-lg">🤷‍♂️</div>
           <h2 className="title-4xl-semi-bold text-text-primary">{t('invalid', { ns: 'login' })}</h2>
         </div>
         <div className="mx-auto mt-6 w-full">
@@ -131,8 +131,8 @@ export default function InviteSettingsPage() {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
-        <RiAccountCircleLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
+      <div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
+        <RiAccountCircleLine className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('setYourAccount', { ns: 'login' })}</h2>
diff --git a/web/app/signin/normal-form.tsx b/web/app/signin/normal-form.tsx
index a32c7e9b3d..76ac6b2ab4 100644
--- a/web/app/signin/normal-form.tsx
+++ b/web/app/signin/normal-form.tsx
@@ -98,9 +98,9 @@ const NormalForm = () => {
       <div className="mx-auto mt-8 w-full">
         <div className="relative">
           <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
-            <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-              <RiContractLine className="h-5 w-5" />
-              <RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
+            <div className="shadows-shadow-lg relative mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
+              <RiContractLine className="size-5" />
+              <RiErrorWarningFill className="absolute -top-1 -right-1 size-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseLost', { ns: 'login' })}</p>
             <p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseLostTip', { ns: 'login' })}</p>
@@ -114,9 +114,9 @@ const NormalForm = () => {
       <div className="mx-auto mt-8 w-full">
         <div className="relative">
           <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
-            <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-              <RiContractLine className="h-5 w-5" />
-              <RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
+            <div className="shadows-shadow-lg relative mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
+              <RiContractLine className="size-5" />
+              <RiErrorWarningFill className="absolute -top-1 -right-1 size-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseExpired', { ns: 'login' })}</p>
             <p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseExpiredTip', { ns: 'login' })}</p>
@@ -130,9 +130,9 @@ const NormalForm = () => {
       <div className="mx-auto mt-8 w-full">
         <div className="relative">
           <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
-            <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-              <RiContractLine className="h-5 w-5" />
-              <RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
+            <div className="shadows-shadow-lg relative mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
+              <RiContractLine className="size-5" />
+              <RiErrorWarningFill className="absolute -top-1 -right-1 size-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseInactive', { ns: 'login' })}</p>
             <p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseInactiveTip', { ns: 'login' })}</p>
@@ -228,8 +228,8 @@ const NormalForm = () => {
           {allMethodsAreDisabled && (
             <>
               <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
-                <div className="shadows-shadow-lg mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-                  <RiDoorLockLine className="h-5 w-5" />
+                <div className="shadows-shadow-lg mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
+                  <RiDoorLockLine className="size-5" />
                 </div>
                 <p className="system-sm-medium text-text-primary">{t('noLoginMethod', { ns: 'login' })}</p>
                 <p className="mt-1 system-xs-regular text-text-tertiary">{t('noLoginMethodTip', { ns: 'login' })}</p>
diff --git a/web/app/signup/check-code/page.tsx b/web/app/signup/check-code/page.tsx
index a6a8cadc13..a5d3663cb6 100644
--- a/web/app/signup/check-code/page.tsx
+++ b/web/app/signup/check-code/page.tsx
@@ -66,8 +66,8 @@ export default function CheckCode() {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
-        <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
+      <div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
+        <RiMailSendFill className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
diff --git a/web/context/web-app-context.tsx b/web/context/web-app-context.tsx
index be10a85f99..f562c07832 100644
--- a/web/context/web-app-context.tsx
+++ b/web/context/web-app-context.tsx
@@ -114,7 +114,7 @@ const WebAppStoreProvider: FC<PropsWithChildren> = ({ children }) => {
 
   if (isGlobalPending || isLoading) {
     return (
-      <div className="flex h-full w-full items-center justify-center">
+      <div className="flex size-full items-center justify-center">
         <Loading />
       </div>
     )
diff --git a/web/features/tag-management/components/tag-filter.tsx b/web/features/tag-management/components/tag-filter.tsx
index 2c6938dc4d..9a734965c4 100644
--- a/web/features/tag-management/components/tag-filter.tsx
+++ b/web/features/tag-management/components/tag-filter.tsx
@@ -80,18 +80,18 @@ export const TagFilter = ({
         >
           <span className="flex w-full min-w-0 items-center gap-1">
             <span className="p-px">
-              <Tag01Icon className="h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" />
+              <Tag01Icon className="size-3.5 text-text-tertiary" aria-hidden="true" />
             </span>
             <span className="min-w-0 grow truncate text-[13px] leading-4.5 text-text-secondary">
               {!value.length && t('tag.placeholder', { ns: 'common' })}
               {!!value.length && currentTagName}
             </span>
             {value.length > 1 && (
-              <span className="shrink-0 text-xs leading-4.5 font-medium text-text-tertiary">{`+${value.length - 1}`}</span>
+              <span className="shrink-0 text-xs/4.5 font-medium text-text-tertiary">{`+${value.length - 1}`}</span>
             )}
             {!value.length && (
               <span className="shrink-0 p-px">
-                <span aria-hidden className="i-ri-arrow-down-s-line h-3.5 w-3.5 text-text-tertiary" />
+                <span aria-hidden className="i-ri-arrow-down-s-line size-3.5 text-text-tertiary" />
               </span>
             )}
           </span>
@@ -106,7 +106,7 @@ export const TagFilter = ({
               onChange([])
             }}
           >
-            <XCircleIcon className="h-3.5 w-3.5 text-text-tertiary group-hover/clear:text-text-secondary" aria-hidden="true" />
+            <XCircleIcon className="size-3.5 text-text-tertiary group-hover/clear:text-text-secondary" aria-hidden="true" />
           </button>
         )}
         <ComboboxContent
diff --git a/web/features/tag-management/components/tag-item-editor.tsx b/web/features/tag-management/components/tag-item-editor.tsx
index 09f8dbf45e..9a05462175 100644
--- a/web/features/tag-management/components/tag-item-editor.tsx
+++ b/web/features/tag-management/components/tag-item-editor.tsx
@@ -84,15 +84,15 @@ export const TagItemEditor = ({ tag, onTagsChange }: TagItemEditorProps) => {
   }, { wait: 200 })
   return (
     <>
-      <div className={cn('flex shrink-0 items-center gap-0.5 rounded-lg border border-components-panel-border py-1 pr-1 pl-2 text-sm leading-5 text-text-secondary')}>
+      <div className={cn('flex shrink-0 items-center gap-0.5 rounded-lg border border-components-panel-border py-1 pr-1 pl-2 text-sm/5 text-text-secondary')}>
         {!isEditing && (
           <>
-            <div className="text-sm leading-5 text-text-secondary">
+            <div className="text-sm/5 text-text-secondary">
               {tag.name}
             </div>
             <Tooltip>
               <TooltipTrigger>
-                <div className="shrink-0 px-1 text-sm leading-4.5 font-medium text-text-tertiary">{tag.binding_count}</div>
+                <div className="shrink-0 px-1 text-sm/4.5 font-medium text-text-tertiary">{tag.binding_count}</div>
               </TooltipTrigger>
               <TooltipContent>{t('common.tagBound', { ns: 'workflow' })}</TooltipContent>
             </Tooltip>
@@ -102,7 +102,7 @@ export const TagItemEditor = ({ tag, onTagsChange }: TagItemEditorProps) => {
               className="group/edit shrink-0 cursor-pointer rounded-md border-none bg-transparent p-1 hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
               onClick={() => setIsEditing(true)}
             >
-              <span aria-hidden="true" className="i-ri-edit-line h-3 w-3 text-text-tertiary group-hover/edit:text-text-secondary" />
+              <span aria-hidden="true" className="i-ri-edit-line size-3 text-text-tertiary group-hover/edit:text-text-secondary" />
             </button>
             <button
               type="button"
@@ -115,7 +115,7 @@ export const TagItemEditor = ({ tag, onTagsChange }: TagItemEditorProps) => {
                   handleRemove()
               }}
             >
-              <span aria-hidden="true" className="i-ri-delete-bin-line h-3 w-3 text-text-tertiary group-hover/remove:text-text-secondary" />
+              <span aria-hidden="true" className="i-ri-delete-bin-line size-3 text-text-tertiary group-hover/remove:text-text-secondary" />
             </button>
           </>
         )}
diff --git a/web/features/tag-management/components/tag-management-modal.tsx b/web/features/tag-management/components/tag-management-modal.tsx
index 129ac2ce2e..2188fb5ec6 100644
--- a/web/features/tag-management/components/tag-management-modal.tsx
+++ b/web/features/tag-management/components/tag-management-modal.tsx
@@ -55,10 +55,10 @@ export const TagManagementModal = ({ show, type, onClose, onTagsChange }: TagMan
   return (
     <Dialog open={show} onOpenChange={open => !open && handleClose()}>
       <DialogContent className="w-150 max-w-150 rounded-xl p-8">
-        <div className="relative pb-2 text-xl leading-7.5 font-semibold text-text-primary">{t('tag.manageTags', { ns: 'common' })}</div>
+        <div className="relative pb-2 text-xl/7.5 font-semibold text-text-primary">{t('tag.manageTags', { ns: 'common' })}</div>
         <DialogCloseButton className="top-4 right-4" />
         <div className="mt-3 flex flex-wrap gap-2">
-          <input aria-label={t('tag.addNew', { ns: 'common' }) || ''} className="w-25 shrink-0 appearance-none rounded-lg border border-dashed border-divider-regular bg-transparent px-2 py-1 text-sm leading-5 text-text-secondary caret-primary-600 outline-hidden placeholder:text-text-quaternary focus:border-solid" placeholder={t('tag.addNew', { ns: 'common' }) || ''} autoFocus value={name} onChange={e => setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && !e.nativeEvent.isComposing && createNewTag()} onBlur={createNewTag} />
+          <input aria-label={t('tag.addNew', { ns: 'common' }) || ''} className="w-25 shrink-0 appearance-none rounded-lg border border-dashed border-divider-regular bg-transparent px-2 py-1 text-sm/5 text-text-secondary caret-primary-600 outline-hidden placeholder:text-text-quaternary focus:border-solid" placeholder={t('tag.addNew', { ns: 'common' }) || ''} autoFocus value={name} onChange={e => setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && !e.nativeEvent.isComposing && createNewTag()} onBlur={createNewTag} />
           {tagList.map(tag => (<TagItemEditor key={tag.id} tag={tag} onTagsChange={onTagsChange} />))}
         </div>
       </DialogContent>
diff --git a/web/features/tag-management/components/tag-panel.tsx b/web/features/tag-management/components/tag-panel.tsx
index e778ecdb03..0d0977466c 100644
--- a/web/features/tag-management/components/tag-panel.tsx
+++ b/web/features/tag-management/components/tag-panel.tsx
@@ -30,7 +30,7 @@ export const TagPanel = ({
     <div className="relative w-full">
       <div className="p-2 pb-1">
         <ComboboxInputGroup className="border-divider-subtle bg-components-input-bg-normal">
-          <span aria-hidden="true" className="ml-2 i-ri-search-line h-4 w-4 shrink-0 text-text-tertiary" />
+          <span aria-hidden="true" className="ml-2 i-ri-search-line size-4 shrink-0 text-text-tertiary" />
           <ComboboxInput
             aria-label={placeholder}
             name={`tag-search-${type}`}
@@ -60,7 +60,7 @@ export const TagPanel = ({
                     value={tag}
                   >
                     <ComboboxItemText className="flex items-center gap-x-1 px-0">
-                      <span aria-hidden="true" className="i-ri-add-line h-4 w-4 shrink-0 text-text-tertiary" />
+                      <span aria-hidden="true" className="i-ri-add-line size-4 shrink-0 text-text-tertiary" />
                       <span className="min-w-0 grow truncate px-1 system-md-regular text-text-secondary">
                         {`${t('tag.create', { ns: 'common' })} `}
                         <span className="system-md-medium">{`'${tag.name}'`}</span>
@@ -84,7 +84,7 @@ export const TagPanel = ({
       {!hasCreateOption && realItemCount === 0 && (
         <div className="p-1">
           <div className="flex flex-col items-center gap-y-1 p-3">
-            <span aria-hidden="true" className="i-ri-price-tag-3-line h-6 w-6 text-text-quaternary" />
+            <span aria-hidden="true" className="i-ri-price-tag-3-line size-6 text-text-quaternary" />
             <div className="system-xs-regular text-text-tertiary">{t('tag.noTag', { ns: 'common' })}</div>
           </div>
         </div>
@@ -99,7 +99,7 @@ export const TagPanel = ({
             onClose?.()
           }}
         >
-          <span aria-hidden="true" className="i-ri-price-tag-3-line h-4 w-4 text-text-tertiary" />
+          <span aria-hidden="true" className="i-ri-price-tag-3-line size-4 text-text-tertiary" />
           <span className="min-w-0 grow truncate px-1 system-md-regular text-text-secondary">
             {t('tag.manageTags', { ns: 'common' })}
           </span>
diff --git a/web/features/tag-management/components/tag-trigger.tsx b/web/features/tag-management/components/tag-trigger.tsx
index f76cba4333..3e4d245dcb 100644
--- a/web/features/tag-management/components/tag-trigger.tsx
+++ b/web/features/tag-management/components/tag-trigger.tsx
@@ -17,7 +17,7 @@ export const TagTrigger = ({
       {!tags.length
         ? (
             <div className="flex max-w-full min-w-0 items-center gap-x-0.5 rounded-[5px] border border-dashed border-divider-deep bg-components-badge-bg-dimm px-1.25 py-0.75">
-              <span aria-hidden="true" className="i-ri-price-tag-3-line h-3 w-3 shrink-0 text-text-quaternary" />
+              <span aria-hidden="true" className="i-ri-price-tag-3-line size-3 shrink-0 text-text-quaternary" />
               <div className="truncate system-2xs-medium-uppercase text-text-tertiary">
                 {t('tag.addTag', { ns: 'common' })}
               </div>
@@ -33,7 +33,7 @@ export const TagTrigger = ({
                       role="listitem"
                       className="flex max-w-30 min-w-0 shrink-0 items-center gap-x-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1.25 py-0.75"
                     >
-                      <span aria-hidden="true" className="i-ri-price-tag-3-line h-3 w-3 shrink-0 text-text-quaternary" />
+                      <span aria-hidden="true" className="i-ri-price-tag-3-line size-3 shrink-0 text-text-quaternary" />
                       <div className="truncate system-2xs-medium-uppercase text-text-tertiary">
                         {content}
                       </div>