diff --git a/lint.config.ts b/lint.config.ts
index 6ee726761a9..367f6c55165 100644
--- a/lint.config.ts
+++ b/lint.config.ts
@@ -3,6 +3,22 @@ import path from 'node:path'
 
 const rootDir = import.meta.dirname
 const difyUiPackageJson = path.resolve(rootDir, 'packages/dify-ui/package.json')
+const enableTailwindCanonicalClasses = process.env.TAILWIND_CANONICAL_CLASSES === 'true'
+const tailwindCanonicalClassesOverride = {
+  files: [
+    'web/**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}',
+    'packages/dify-ui/**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}',
+  ],
+  rules: {
+    'better-tailwindcss/enforce-canonical-classes': [
+      'warn',
+      {
+        collapse: false,
+        logical: false,
+      },
+    ],
+  },
+} satisfies NonNullable<OxlintConfig['overrides']>[number]
 
 /**
  * Oxlint equivalent of the ESLint configurations that were active before the migration.
@@ -55,6 +71,7 @@ export const lintConfig = {
   jsPlugins: [
     '@tanstack/eslint-plugin-query',
     'eslint-plugin-antfu',
+    ...(enableTailwindCanonicalClasses ? ['eslint-plugin-better-tailwindcss'] : []),
     'eslint-plugin-command',
     'eslint-plugin-erasable-syntax-only',
     {
@@ -86,6 +103,15 @@ export const lintConfig = {
     typeCheck: true,
   },
   settings: {
+    ...(enableTailwindCanonicalClasses
+      ? {
+          'better-tailwindcss': {
+            cwd: path.resolve(rootDir, 'web'),
+            entryPoint: 'app/styles/globals.css',
+            rootFontSize: 16,
+          },
+        }
+      : {}),
     'react-x': {
       additionalStateHooks: '/^use\\w*State(?:s)?|useAtom$/u',
     },
@@ -425,6 +451,7 @@ export const lintConfig = {
     'no-undef': 'error',
   },
   overrides: [
+    ...(enableTailwindCanonicalClasses ? [tailwindCanonicalClassesOverride] : []),
     {
       files: ['**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}'],
       rules: {
diff --git a/package.json b/package.json
index fa39d23fd73..16c8d9b5ec3 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "lint:oxlint": "vp lint",
     "lint:oxlint:fix": "vp lint --fix",
     "lint:oxlint:quiet": "vp lint --quiet",
+    "lint:tailwind": "TAILWIND_CANONICAL_CLASSES=true vp lint web packages/dify-ui",
+    "lint:tailwind:fix": "TAILWIND_CANONICAL_CLASSES=true vp lint --fix web packages/dify-ui",
     "lint:eslint": "eslint --concurrency=auto",
     "lint:eslint:fix": "eslint --fix --concurrency=auto",
     "lint:eslint:quiet": "eslint --quiet --concurrency=auto"
@@ -27,6 +29,7 @@
     "eslint": "catalog:",
     "eslint-markdown": "catalog:",
     "eslint-plugin-antfu": "catalog:",
+    "eslint-plugin-better-tailwindcss": "catalog:",
     "eslint-plugin-command": "catalog:",
     "eslint-plugin-erasable-syntax-only": "catalog:",
     "eslint-plugin-hyoban": "catalog:",
diff --git a/packages/dify-ui/src/autocomplete/index.tsx b/packages/dify-ui/src/autocomplete/index.tsx
index dede962654b..9127a5cbef0 100644
--- a/packages/dify-ui/src/autocomplete/index.tsx
+++ b/packages/dify-ui/src/autocomplete/index.tsx
@@ -119,7 +119,7 @@ const autocompleteInputVariants = cva(
     variants: {
       size: {
         small: 'px-2 py-1 system-xs-regular',
-        medium: 'px-3 py-[7px] system-sm-regular',
+        medium: 'px-3 py-1.75 system-sm-regular',
         large: 'px-4 py-2 system-md-regular',
       },
     },
diff --git a/packages/dify-ui/src/button/index.tsx b/packages/dify-ui/src/button/index.tsx
index cd8d0a8b7bb..18a812ee0ad 100644
--- a/packages/dify-ui/src/button/index.tsx
+++ b/packages/dify-ui/src/button/index.tsx
@@ -7,41 +7,41 @@ import { cva } from 'class-variance-authority'
 import { cn } from '../cn'
 
 export const buttonVariants = cva(
-  'inline-flex cursor-pointer items-center justify-center whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid data-[disabled]:cursor-not-allowed',
+  'inline-flex cursor-pointer items-center justify-center whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid data-disabled:cursor-not-allowed',
   {
     variants: {
       variant: {
         primary: [
           'border-components-button-primary-border bg-components-button-primary-bg text-components-button-primary-text shadow-sm',
           'hover:border-components-button-primary-border-hover hover:bg-components-button-primary-bg-hover',
-          'data-[disabled]:border-components-button-primary-border-disabled data-[disabled]:bg-components-button-primary-bg-disabled data-[disabled]:text-components-button-primary-text-disabled data-[disabled]:shadow-none',
+          'data-disabled:border-components-button-primary-border-disabled data-disabled:bg-components-button-primary-bg-disabled data-disabled:text-components-button-primary-text-disabled data-disabled:shadow-none',
         ],
         secondary: [
           'border-[0.5px] shadow-xs backdrop-blur-[5px]',
           'border-components-button-secondary-border bg-components-button-secondary-bg text-components-button-secondary-text',
           'hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover',
-          'data-[disabled]:border-components-button-secondary-border-disabled data-[disabled]:bg-components-button-secondary-bg-disabled data-[disabled]:text-components-button-secondary-text-disabled data-[disabled]:backdrop-blur-xs',
+          'data-disabled:border-components-button-secondary-border-disabled data-disabled:bg-components-button-secondary-bg-disabled data-disabled:text-components-button-secondary-text-disabled data-disabled:backdrop-blur-xs',
         ],
         'secondary-accent': [
           'border-[0.5px] shadow-xs',
           'border-components-button-secondary-border bg-components-button-secondary-bg text-components-button-secondary-accent-text',
           'hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover',
-          'data-[disabled]:border-components-button-secondary-border-disabled data-[disabled]:bg-components-button-secondary-bg-disabled data-[disabled]:text-components-button-secondary-accent-text-disabled',
+          'data-disabled:border-components-button-secondary-border-disabled data-disabled:bg-components-button-secondary-bg-disabled data-disabled:text-components-button-secondary-accent-text-disabled',
         ],
         tertiary: [
           'bg-components-button-tertiary-bg text-components-button-tertiary-text',
           'hover:bg-components-button-tertiary-bg-hover',
-          'data-[disabled]:bg-components-button-tertiary-bg-disabled data-[disabled]:text-components-button-tertiary-text-disabled',
+          'data-disabled:bg-components-button-tertiary-bg-disabled data-disabled:text-components-button-tertiary-text-disabled',
         ],
         ghost: [
           'text-components-button-ghost-text',
           'hover:bg-components-button-ghost-bg-hover',
-          'data-[disabled]:text-components-button-ghost-text-disabled',
+          'data-disabled:text-components-button-ghost-text-disabled',
         ],
         'ghost-accent': [
           'text-components-button-secondary-accent-text',
           'hover:bg-state-accent-hover',
-          'data-[disabled]:text-components-button-secondary-accent-text-disabled',
+          'data-disabled:text-components-button-secondary-accent-text-disabled',
         ],
       },
       size: {
@@ -61,7 +61,7 @@ export const buttonVariants = cva(
         class: [
           'border-components-button-destructive-primary-border bg-components-button-destructive-primary-bg text-components-button-destructive-primary-text',
           'hover:border-components-button-destructive-primary-border-hover hover:bg-components-button-destructive-primary-bg-hover',
-          'data-[disabled]:border-components-button-destructive-primary-border-disabled data-[disabled]:bg-components-button-destructive-primary-bg-disabled data-[disabled]:text-components-button-destructive-primary-text-disabled data-[disabled]:shadow-none',
+          'data-disabled:border-components-button-destructive-primary-border-disabled data-disabled:bg-components-button-destructive-primary-bg-disabled data-disabled:text-components-button-destructive-primary-text-disabled data-disabled:shadow-none',
         ],
       },
       {
@@ -70,7 +70,7 @@ export const buttonVariants = cva(
         class: [
           'border-components-button-destructive-secondary-border bg-components-button-destructive-secondary-bg text-components-button-destructive-secondary-text',
           'hover:border-components-button-destructive-secondary-border-hover hover:bg-components-button-destructive-secondary-bg-hover',
-          'data-[disabled]:border-components-button-destructive-secondary-border-disabled data-[disabled]:bg-components-button-destructive-secondary-bg-disabled data-[disabled]:text-components-button-destructive-secondary-text-disabled',
+          'data-disabled:border-components-button-destructive-secondary-border-disabled data-disabled:bg-components-button-destructive-secondary-bg-disabled data-disabled:text-components-button-destructive-secondary-text-disabled',
         ],
       },
       {
@@ -79,7 +79,7 @@ export const buttonVariants = cva(
         class: [
           'bg-components-button-destructive-tertiary-bg text-components-button-destructive-tertiary-text',
           'hover:bg-components-button-destructive-tertiary-bg-hover',
-          'data-[disabled]:bg-components-button-destructive-tertiary-bg-disabled data-[disabled]:text-components-button-destructive-tertiary-text-disabled',
+          'data-disabled:bg-components-button-destructive-tertiary-bg-disabled data-disabled:text-components-button-destructive-tertiary-text-disabled',
         ],
       },
       {
@@ -88,7 +88,7 @@ export const buttonVariants = cva(
         class: [
           'text-components-button-destructive-ghost-text',
           'hover:bg-components-button-destructive-ghost-bg-hover',
-          'data-[disabled]:text-components-button-destructive-ghost-text-disabled',
+          'data-disabled:text-components-button-destructive-ghost-text-disabled',
         ],
       },
     ],
diff --git a/packages/dify-ui/src/combobox/index.tsx b/packages/dify-ui/src/combobox/index.tsx
index d25474d400e..40dc1dfb84c 100644
--- a/packages/dify-ui/src/combobox/index.tsx
+++ b/packages/dify-ui/src/combobox/index.tsx
@@ -166,7 +166,7 @@ const comboboxInputVariants = cva(
     variants: {
       size: {
         small: 'px-2 py-1 system-xs-regular',
-        medium: 'px-3 py-[7px] system-sm-regular',
+        medium: 'px-3 py-1.75 system-sm-regular',
         large: 'px-4 py-2 system-md-regular',
       },
     },
diff --git a/packages/dify-ui/src/dialog/index.stories.tsx b/packages/dify-ui/src/dialog/index.stories.tsx
index 725cdd01874..6ba8df0148e 100644
--- a/packages/dify-ui/src/dialog/index.stories.tsx
+++ b/packages/dify-ui/src/dialog/index.stories.tsx
@@ -278,7 +278,7 @@ const OutsideScrollingContentDemo = () => {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger render={<Button />}>Review long release notes</DialogTrigger>
       <DialogPortal>
-        <DialogBackdrop className="duration-[600ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:duration-[350ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)]" />
+        <DialogBackdrop className="duration-600 ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)]" />
         <DialogViewport className="group/dialog">
           <ScrollAreaRoot className="h-full overscroll-contain group-data-ending-style/dialog:pointer-events-none">
             <ScrollAreaViewport
@@ -290,7 +290,7 @@ const OutsideScrollingContentDemo = () => {
                 <DialogPopup
                   ref={popupRef}
                   initialFocus={popupRef}
-                  className="relative mx-auto flex w-120 max-w-[calc(100vw-2rem)] flex-col overflow-hidden outline-hidden transition-[translate] duration-[700ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:translate-y-[max(100dvh,100%)] data-ending-style:scale-100 data-ending-style:opacity-100 data-ending-style:duration-[350ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] data-starting-style:translate-y-[100dvh] data-starting-style:scale-100 data-starting-style:opacity-100"
+                  className="relative mx-auto flex w-120 max-w-[calc(100vw-2rem)] flex-col overflow-hidden outline-hidden transition-[translate] duration-700 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:translate-y-[max(100dvh,100%)] data-ending-style:scale-100 data-ending-style:opacity-100 data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] data-starting-style:translate-y-[100dvh] data-starting-style:scale-100 data-starting-style:opacity-100"
                 >
                   <DialogCloseButton />
                   <ReleaseNoteHeader
@@ -323,12 +323,12 @@ export const OutsidePopupElements: Story = {
       <DialogPortal>
         <DialogBackdrop className="min-h-dvh" />
         <DialogViewport className="grid place-items-center px-4 py-12 xl:py-6">
-          <DialogPopup className="group/popup pointer-events-none relative flex h-full w-full max-w-[70rem] justify-center border-0 bg-transparent shadow-none transition-opacity data-ending-style:scale-100 data-ending-style:opacity-0 data-starting-style:scale-100 data-starting-style:opacity-0">
+          <DialogPopup className="group/popup pointer-events-none relative flex h-full w-full max-w-280 justify-center border-0 bg-transparent shadow-none transition-opacity data-ending-style:scale-100 data-ending-style:opacity-0 data-starting-style:scale-100 data-starting-style:opacity-0">
             <DialogCloseButton
               aria-label="Close"
               className="pointer-events-auto absolute -top-10 right-0 z-10 flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg text-text-tertiary shadow-xs outline-hidden hover:bg-components-button-secondary-bg-hover hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid xl:top-0"
             ></DialogCloseButton>
-            <div className="pointer-events-auto flex h-full w-full max-w-[70rem] flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-starting-style/popup:scale-105">
+            <div className="pointer-events-auto flex h-full w-full max-w-280 flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-starting-style/popup:scale-105">
               <div className="grid gap-2">
                 <DialogTitle className="text-lg leading-7 font-semibold text-text-primary">
                   Knowledge review
diff --git a/packages/dify-ui/src/drawer/index.stories.tsx b/packages/dify-ui/src/drawer/index.stories.tsx
index b12cf82b4e3..093f348366f 100644
--- a/packages/dify-ui/src/drawer/index.stories.tsx
+++ b/packages/dify-ui/src/drawer/index.stories.tsx
@@ -247,7 +247,7 @@ export const Positions: Story = {
         <DrawerPortal>
           <DrawerBackdrop className="fixed" />
           <DrawerViewport className="flex items-end justify-center">
-            <DrawerPopup className="-mb-12 touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-[swipe-direction=down]:max-h-[calc(80dvh_+_3rem)] data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_3rem_+_2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_3rem_+_2px))]">
+            <DrawerPopup className="-mb-12 touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[swipe-direction=down]:max-h-[calc(80dvh+3rem)] data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-3rem+2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-3rem+2px))]">
               <div className={handleClassName} />
               <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-12">
                 <div className="mx-auto w-full max-w-lg px-6 pt-6 pb-4 text-center">
@@ -258,7 +258,7 @@ export const Positions: Story = {
                     This drawer uses the default swipeDirection="down" bottom sheet behavior.
                   </DrawerDescription>
                 </div>
-                <div className="mx-auto min-h-0 w-full max-w-128 flex-1 overflow-y-auto px-6 pb-6">
+                <div className="mx-auto min-h-0 w-full max-w-lg flex-1 overflow-y-auto px-6 pb-6">
                   <div className="rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg-alt p-4 text-sm/5 text-text-secondary">
                     The drag handle sits at the top because the sheet dismisses downward.
                   </div>
@@ -278,9 +278,9 @@ export const Positions: Story = {
         <DrawerPortal>
           <DrawerBackdrop className="fixed" />
           <DrawerViewport className="flex items-start justify-center">
-            <DrawerPopup className="-mt-12 touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-[swipe-direction=up]:max-h-[calc(80dvh_+_3rem)] data-[swipe-direction=up]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(-100%_+_3rem_-_2px))] data-starting-style:data-[swipe-direction=up]:transform-[translateY(calc(-100%_+_3rem_-_2px))]">
+            <DrawerPopup className="-mt-12 touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[swipe-direction=up]:max-h-[calc(80dvh+3rem)] data-[swipe-direction=up]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(-100%+3rem-2px))] data-starting-style:data-[swipe-direction=up]:transform-[translateY(calc(-100%+3rem-2px))]">
               <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pt-12">
-                <div className="mx-auto w-full max-w-128 px-6 pt-6 pb-4 text-center">
+                <div className="mx-auto w-full max-w-lg px-6 pt-6 pb-4 text-center">
                   <DrawerTitle className="text-lg/6 font-semibold text-text-primary">
                     Top sheet
                   </DrawerTitle>
@@ -288,7 +288,7 @@ export const Positions: Story = {
                     This drawer is positioned with swipeDirection="up" and dismisses upward.
                   </DrawerDescription>
                 </div>
-                <div className="mx-auto min-h-0 w-full max-w-128 flex-1 overflow-y-auto px-6 pb-6">
+                <div className="mx-auto min-h-0 w-full max-w-lg flex-1 overflow-y-auto px-6 pb-6">
                   <div className="rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg-alt p-4 text-sm/5 text-text-secondary">
                     The drag handle sits at the bottom because the sheet dismisses upward.
                   </div>
@@ -331,9 +331,9 @@ function SnapPointsDemo() {
             className={cn(
               'relative touch-none overflow-visible',
               '[--bleed:3rem] [--top-margin:1rem]',
-              'pb-[max(0px,calc(var(--drawer-snap-point-offset,0px)_+_var(--drawer-swipe-movement-y,0px)))]',
+              'pb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)))]',
               'after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-(--bleed) after:bg-inherit after:content-[""]',
-              'data-[swipe-direction=down]:max-h-[calc(100dvh_-_var(--top-margin))]',
+              'data-[swipe-direction=down]:max-h-[calc(100dvh-var(--top-margin))]',
               'data-ending-style:pb-0 data-starting-style:pb-0',
             )}
           >
@@ -343,7 +343,7 @@ function SnapPointsDemo() {
                 Snap points
               </DrawerTitle>
             </div>
-            <DrawerContent className="min-h-0 flex-1 touch-auto overflow-y-auto overscroll-contain px-6 pt-4 pb-[calc(1.5rem_+_env(safe-area-inset-bottom,0))]">
+            <DrawerContent className="min-h-0 flex-1 touch-auto overflow-y-auto overscroll-contain px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0))]">
               <div className="mx-auto w-full max-w-90">
                 <DrawerDescription className="mb-4 text-center text-sm/5 text-text-tertiary">
                   Drag the sheet to snap between a compact peek and a near full-height view.
@@ -392,19 +392,19 @@ export const NestedDrawers: Story = {
         <DrawerViewport>
           <DrawerPopup
             className={cn(
-              '[--bleed:3rem] [--stack-scale:calc(1_-_(var(--nested-drawers,0)_*_var(--stack-step)))] [--stack-step:0.05]',
-              '[--stack-height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))_-_var(--bleed)))]',
+              '[--bleed:3rem] [--stack-scale:calc(1-(var(--nested-drawers,0)*var(--stack-step)))] [--stack-step:0.05]',
+              '[--stack-height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))]',
               '-mb-12 origin-bottom touch-auto',
               'after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:transition-[background-color] after:duration-200 after:content-[""]',
-              'data-[swipe-direction=down]:h-(--drawer-height) data-[swipe-direction=down]:max-h-[calc(82dvh_+_3rem)]',
-              'data-[swipe-direction=down]:transform-[translateY(calc(var(--drawer-snap-point-offset,0px)_+_var(--drawer-swipe-movement-y,0px)))_scale(var(--stack-scale))]',
-              'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_var(--bleed)_+_2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_var(--bleed)_+_2px))]',
-              'data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)]',
-              'data-nested-drawer-open:data-[swipe-direction=down]:h-[calc(var(--stack-height)_+_var(--bleed))]',
+              'data-[swipe-direction=down]:h-(--drawer-height) data-[swipe-direction=down]:max-h-[calc(82dvh+3rem)]',
+              'data-[swipe-direction=down]:transform-[translateY(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)))_scale(var(--stack-scale))]',
+              'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-var(--bleed)+2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-var(--bleed)+2px))]',
+              'data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)]',
+              'data-nested-drawer-open:data-[swipe-direction=down]:h-[calc(var(--stack-height)+var(--bleed))]',
               'data-nested-drawer-open:overflow-hidden data-nested-drawer-open:shadow-lg',
               'data-nested-drawer-open:after:bg-black/5',
-              'data-nested-drawer-open:[&_[data-nested-content]]:opacity-0 data-nested-drawer-swiping:[&_[data-nested-content]]:opacity-100',
-              'data-nested-drawer-open:[&_[data-nested-handle]]:opacity-0 data-nested-drawer-swiping:[&_[data-nested-handle]]:opacity-100',
+              'data-nested-drawer-open:**:data-nested-content:opacity-0 data-nested-drawer-swiping:**:data-nested-content:opacity-100',
+              'data-nested-drawer-open:**:data-nested-handle:opacity-0 data-nested-drawer-swiping:**:data-nested-handle:opacity-100',
             )}
           >
             <div
@@ -437,19 +437,19 @@ export const NestedDrawers: Story = {
                     <DrawerViewport className="flex items-end justify-center">
                       <DrawerPopup
                         className={cn(
-                          '[--bleed:3rem] [--stack-scale:calc(1_-_(var(--nested-drawers,0)_*_var(--stack-step)))] [--stack-step:0.05]',
-                          '[--stack-height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))_-_var(--bleed)))]',
+                          '[--bleed:3rem] [--stack-scale:calc(1-(var(--nested-drawers,0)*var(--stack-step)))] [--stack-step:0.05]',
+                          '[--stack-height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))]',
                           '-mb-12 origin-bottom touch-auto',
                           'after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:transition-[background-color] after:duration-200 after:content-[""]',
-                          'data-[swipe-direction=down]:h-(--drawer-height) data-[swipe-direction=down]:max-h-[calc(82dvh_+_3rem)]',
-                          'data-[swipe-direction=down]:transform-[translateY(calc(var(--drawer-snap-point-offset,0px)_+_var(--drawer-swipe-movement-y,0px)))_scale(var(--stack-scale))]',
-                          'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_var(--bleed)_+_2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_var(--bleed)_+_2px))]',
-                          'data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)]',
-                          'data-nested-drawer-open:data-[swipe-direction=down]:h-[calc(var(--stack-height)_+_var(--bleed))]',
+                          'data-[swipe-direction=down]:h-(--drawer-height) data-[swipe-direction=down]:max-h-[calc(82dvh+3rem)]',
+                          'data-[swipe-direction=down]:transform-[translateY(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)))_scale(var(--stack-scale))]',
+                          'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-var(--bleed)+2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-var(--bleed)+2px))]',
+                          'data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)]',
+                          'data-nested-drawer-open:data-[swipe-direction=down]:h-[calc(var(--stack-height)+var(--bleed))]',
                           'data-nested-drawer-open:overflow-hidden data-nested-drawer-open:shadow-lg',
                           'data-nested-drawer-open:after:bg-black/5',
-                          'data-nested-drawer-open:[&_[data-nested-content]]:opacity-0 data-nested-drawer-swiping:[&_[data-nested-content]]:opacity-100',
-                          'data-nested-drawer-open:[&_[data-nested-handle]]:opacity-0 data-nested-drawer-swiping:[&_[data-nested-handle]]:opacity-100',
+                          'data-nested-drawer-open:**:data-nested-content:opacity-0 data-nested-drawer-swiping:**:data-nested-content:opacity-100',
+                          'data-nested-drawer-open:**:data-nested-handle:opacity-0 data-nested-drawer-swiping:**:data-nested-handle:opacity-100',
                         )}
                       >
                         <div
@@ -494,19 +494,19 @@ export const NestedDrawers: Story = {
                                 <DrawerViewport className="flex items-end justify-center">
                                   <DrawerPopup
                                     className={cn(
-                                      '[--bleed:3rem] [--stack-scale:calc(1_-_(var(--nested-drawers,0)_*_var(--stack-step)))] [--stack-step:0.05]',
-                                      '[--stack-height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))_-_var(--bleed)))]',
+                                      '[--bleed:3rem] [--stack-scale:calc(1-(var(--nested-drawers,0)*var(--stack-step)))] [--stack-step:0.05]',
+                                      '[--stack-height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))]',
                                       '-mb-12 origin-bottom touch-auto',
                                       'after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:transition-[background-color] after:duration-200 after:content-[""]',
-                                      'data-[swipe-direction=down]:h-(--drawer-height) data-[swipe-direction=down]:max-h-[calc(82dvh_+_3rem)]',
-                                      'data-[swipe-direction=down]:transform-[translateY(calc(var(--drawer-snap-point-offset,0px)_+_var(--drawer-swipe-movement-y,0px)))_scale(var(--stack-scale))]',
-                                      'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_var(--bleed)_+_2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_var(--bleed)_+_2px))]',
-                                      'data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)]',
-                                      'data-nested-drawer-open:data-[swipe-direction=down]:h-[calc(var(--stack-height)_+_var(--bleed))]',
+                                      'data-[swipe-direction=down]:h-(--drawer-height) data-[swipe-direction=down]:max-h-[calc(82dvh+3rem)]',
+                                      'data-[swipe-direction=down]:transform-[translateY(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)))_scale(var(--stack-scale))]',
+                                      'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-var(--bleed)+2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-var(--bleed)+2px))]',
+                                      'data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)]',
+                                      'data-nested-drawer-open:data-[swipe-direction=down]:h-[calc(var(--stack-height)+var(--bleed))]',
                                       'data-nested-drawer-open:overflow-hidden data-nested-drawer-open:shadow-lg',
                                       'data-nested-drawer-open:after:bg-black/5',
-                                      'data-nested-drawer-open:[&_[data-nested-content]]:opacity-0 data-nested-drawer-swiping:[&_[data-nested-content]]:opacity-100',
-                                      'data-nested-drawer-open:[&_[data-nested-handle]]:opacity-0 data-nested-drawer-swiping:[&_[data-nested-handle]]:opacity-100',
+                                      'data-nested-drawer-open:**:data-nested-content:opacity-0 data-nested-drawer-swiping:**:data-nested-content:opacity-100',
+                                      'data-nested-drawer-open:**:data-nested-handle:opacity-0 data-nested-drawer-swiping:**:data-nested-handle:opacity-100',
                                     )}
                                   >
                                     <div
@@ -574,7 +574,7 @@ function IndentEffectDemo() {
     <DrawerProvider>
       <div
         ref={setPortalContainer}
-        className="relative h-[420px] w-[640px] overflow-hidden rounded-2xl border-[0.5px] border-divider-subtle bg-background-default"
+        className="relative h-105 w-160 overflow-hidden rounded-2xl border-[0.5px] border-divider-subtle bg-background-default"
       >
         <DrawerIndentBackground className="absolute inset-0 bg-state-accent-hover opacity-0 transition-opacity duration-200 data-active:opacity-100" />
         <DrawerIndent className="relative flex size-full flex-col items-center justify-center gap-4 bg-background-body transition-[border-radius,transform] duration-200 data-active:scale-[0.96] data-active:rounded-[20px]">
@@ -591,7 +591,7 @@ function IndentEffectDemo() {
             <DrawerPortal container={portalContainer}>
               <DrawerBackdrop />
               <DrawerViewport className="absolute flex items-end justify-center">
-                <DrawerPopup className="absolute -mb-12 touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-[swipe-direction=down]:max-h-[calc(80dvh_+_3rem)] data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_3rem_+_2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_3rem_+_2px))]">
+                <DrawerPopup className="absolute -mb-12 touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[swipe-direction=down]:max-h-[calc(80dvh+3rem)] data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-3rem+2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-3rem+2px))]">
                   <div className={handleClassName} />
                   <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-12">
                     <div className="mx-auto w-full max-w-96 px-6 pt-6 pb-4 text-center">
@@ -646,7 +646,7 @@ function NonModalDemo() {
       </div>
       <DrawerPortal>
         <DrawerViewport className="pointer-events-none">
-          <DrawerPopup className="pointer-events-auto touch-auto data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-3 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-r-[0.5px]">
+          <DrawerPopup className="pointer-events-auto touch-auto data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-3 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:max-w-105 data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-r-[0.5px]">
             <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
               <div className="flex shrink-0 items-start justify-between gap-4 px-6 pt-6 pb-4">
                 <div className="min-w-0">
@@ -732,7 +732,7 @@ export const MobileNavigation: Story = {
               aria-label="Mobile drawer viewport"
             >
               <ScrollAreaContent className="flex min-h-full min-w-0 items-end justify-center pt-8 min-[42rem]:px-16 min-[42rem]:py-16">
-                <DrawerPopup className="relative w-full max-w-[42rem] touch-auto overflow-visible transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] data-swiping:select-none data-[swipe-direction=down]:inset-auto data-[swipe-direction=down]:max-h-none data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(max(100dvh,100%)_+_2px))] motion-reduce:transition-none min-[42rem]:rounded-2xl min-[42rem]:border-[0.5px] min-[42rem]:border-b-[0.5px]">
+                <DrawerPopup className="relative w-full max-w-2xl touch-auto overflow-visible transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] data-swiping:select-none data-[swipe-direction=down]:inset-auto data-[swipe-direction=down]:max-h-none data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(max(100dvh,100%)+2px))] motion-reduce:transition-none min-[42rem]:rounded-2xl min-[42rem]:border-[0.5px] min-[42rem]:border-b-[0.5px]">
                   <nav
                     aria-label="Mobile navigation"
                     className="relative flex flex-col bg-components-panel-bg"
@@ -801,7 +801,7 @@ function SwipeToOpenDemo() {
   return (
     <div
       ref={setPortalContainer}
-      className="relative h-[360px] w-[560px] overflow-hidden rounded-2xl border-[0.5px] border-divider-subtle bg-background-body"
+      className="relative h-90 w-140 overflow-hidden rounded-2xl border-[0.5px] border-divider-subtle bg-background-body"
     >
       <Drawer swipeDirection="right" modal={false}>
         <DrawerSwipeArea className="absolute inset-y-0 right-0 z-10 flex w-10 touch-none items-center justify-center bg-state-accent-hover text-text-accent">
@@ -823,7 +823,7 @@ function SwipeToOpenDemo() {
         <DrawerPortal container={portalContainer}>
           <DrawerBackdrop className="absolute" />
           <DrawerViewport className="absolute">
-            <DrawerPopup className="absolute touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-[swipe-direction=right]:-right-12 data-[swipe-direction=right]:h-full data-[swipe-direction=right]:w-[calc(22.5rem_+_3rem)] data-[swipe-direction=right]:max-w-[calc(100%_+_3rem)] data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%_-_3rem_+_2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%_-_3rem_+_2px))]">
+            <DrawerPopup className="absolute touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[swipe-direction=right]:-right-12 data-[swipe-direction=right]:h-full data-[swipe-direction=right]:w-102 data-[swipe-direction=right]:max-w-[calc(100%+3rem)] data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%-3rem+2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%-3rem+2px))]">
               <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pr-12 pb-0">
                 <div className="flex shrink-0 items-start justify-between gap-4 px-6 pt-6 pb-4">
                   <div className="min-w-0">
@@ -870,7 +870,7 @@ function ActionSheetDemo() {
       <DrawerPortal>
         <DrawerBackdrop className="fixed" />
         <DrawerViewport className="flex items-end justify-center">
-          <DrawerPopup className="pointer-events-none relative flex w-full max-w-80 flex-col gap-3 overflow-visible border-none bg-transparent px-4 pb-[calc(1rem_+_env(safe-area-inset-bottom,0px))] shadow-none data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-[swipe-direction=down]:inset-auto data-[swipe-direction=down]:max-h-none data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_+_1rem_+_2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_+_1rem_+_2px))]">
+          <DrawerPopup className="pointer-events-none relative flex w-full max-w-80 flex-col gap-3 overflow-visible border-none bg-transparent px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] shadow-none data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[swipe-direction=down]:inset-auto data-[swipe-direction=down]:max-h-none data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%+1rem+2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%+1rem+2px))]">
             <DrawerContent className="pointer-events-auto flex-none overflow-hidden rounded-2xl border-[0.5px] border-divider-subtle bg-components-panel-bg p-0 pb-0 shadow-xl">
               <DrawerTitle className="sr-only">App actions</DrawerTitle>
               <DrawerDescription className="sr-only">
@@ -1035,7 +1035,7 @@ export const StackingAndAnimations: Story = {
       <DrawerPortal>
         <DrawerBackdrop className="fixed" />
         <DrawerViewport>
-          <DrawerPopup className="duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-nested-drawer-open:brightness-95 data-swiping:shadow-none data-[swipe-direction=right]:max-w-105 data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%_+_2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%_+_2px))] data-nested-drawer-open:[&_[data-animation-content]]:opacity-0 data-nested-drawer-swiping:[&_[data-animation-content]]:opacity-100">
+          <DrawerPopup className="duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:brightness-95 data-nested-drawer-open:**:data-animation-content:opacity-0 data-nested-drawer-swiping:**:data-animation-content:opacity-100 data-swiping:shadow-none data-[swipe-direction=right]:max-w-105 data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%+2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%+2px))]">
             <DrawerContent
               data-animation-content
               className="flex min-h-0 flex-1 flex-col p-0 pb-0 transition-opacity duration-300"
@@ -1066,7 +1066,7 @@ export const StackingAndAnimations: Story = {
                     </DrawerTrigger>
                     <DrawerPortal>
                       <DrawerViewport>
-                        <DrawerPopup className="duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-swiping:shadow-none data-[swipe-direction=right]:max-w-105 data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%_+_2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%_+_2px))]">
+                        <DrawerPopup className="duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:shadow-none data-[swipe-direction=right]:max-w-105 data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%+2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%+2px))]">
                           <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
                             <div className="flex shrink-0 items-start justify-between gap-4 px-6 pt-6 pb-4">
                               <div className="min-w-0">
diff --git a/packages/dify-ui/src/file-tree/index.tsx b/packages/dify-ui/src/file-tree/index.tsx
index 11575e51d2b..de592ec82d8 100644
--- a/packages/dify-ui/src/file-tree/index.tsx
+++ b/packages/dify-ui/src/file-tree/index.tsx
@@ -30,7 +30,7 @@ function fileTreeRowClassName({ className }: { className?: string }) {
   return cn(
     'group/file-tree-row relative flex h-6 w-full min-w-0 cursor-pointer items-center rounded-md ps-2 pe-1.5 text-start outline-hidden select-none',
     'hover:bg-state-base-hover focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid',
-    'data-[selected]:bg-state-base-active',
+    'data-selected:bg-state-base-active',
     'data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent',
     'aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent',
     className,
@@ -180,7 +180,7 @@ export function FileTreeGuide({ render, className, ...props }: FileTreeGuideProp
   const defaultProps: useRender.ElementProps<'span'> = {
     'aria-hidden': true,
     className: cn(
-      'relative h-6 w-5 shrink-0 before:absolute before:top-0 before:bottom-[-1px] before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-divider-subtle',
+      'relative h-6 w-5 shrink-0 before:absolute before:top-0 before:-bottom-px before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-divider-subtle',
       className,
     ),
   }
@@ -271,7 +271,7 @@ export function FileTreeLabel({ render, className, children, ...props }: FileTre
       'w-0 min-w-0 flex-1 truncate rounded-[5px] px-1 py-0.5',
       labelText &&
         'after:invisible after:block after:h-0 after:overflow-hidden after:system-sm-medium after:content-[attr(data-label)]',
-      'system-sm-regular text-text-secondary group-data-[selected]/file-tree-row:system-sm-medium group-data-[selected]/file-tree-row:text-text-primary',
+      'system-sm-regular text-text-secondary group-data-selected/file-tree-row:system-sm-medium group-data-selected/file-tree-row:text-text-primary',
       className,
     ),
     children,
diff --git a/packages/dify-ui/src/form-control-shared.ts b/packages/dify-ui/src/form-control-shared.ts
index 0a9a5ced598..bf432e79c33 100644
--- a/packages/dify-ui/src/form-control-shared.ts
+++ b/packages/dify-ui/src/form-control-shared.ts
@@ -24,9 +24,9 @@ export const textControlVariants = cva(
   {
     variants: {
       size: {
-        small: 'rounded-md px-2 py-[3px] system-xs-regular',
-        medium: 'rounded-lg px-3 py-[7px] system-sm-regular',
-        large: 'rounded-[10px] px-4 py-[7px] system-md-regular',
+        small: 'rounded-md px-2 py-0.75 system-xs-regular',
+        medium: 'rounded-lg px-3 py-1.75 system-sm-regular',
+        large: 'rounded-[10px] px-4 py-1.75 system-md-regular',
       },
     },
     defaultVariants: {
diff --git a/packages/dify-ui/src/number-field/index.tsx b/packages/dify-ui/src/number-field/index.tsx
index 455d01259b8..e7b1980f85c 100644
--- a/packages/dify-ui/src/number-field/index.tsx
+++ b/packages/dify-ui/src/number-field/index.tsx
@@ -59,7 +59,7 @@ export const numberFieldInputVariants = cva(
   {
     variants: {
       size: {
-        medium: 'px-3 py-[7px] system-sm-regular',
+        medium: 'px-3 py-1.75 system-sm-regular',
         large: 'px-4 py-2 system-md-regular',
       },
     },
diff --git a/packages/dify-ui/src/scroll-area/index.stories.tsx b/packages/dify-ui/src/scroll-area/index.stories.tsx
index 626c9ce8ee8..cae06e147a2 100644
--- a/packages/dify-ui/src/scroll-area/index.stories.tsx
+++ b/packages/dify-ui/src/scroll-area/index.stories.tsx
@@ -213,7 +213,7 @@ export const ScrollFade: Story = {
           role="region"
           className={cn(
             'h-full max-h-full max-w-full rounded-xl bg-components-panel-bg outline-none focus-visible:outline-none',
-            'mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat',
+            'mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%-min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat',
           )}
         >
           <VerticalContent className="flex flex-col gap-4 px-4 py-3 pr-6 system-sm-regular leading-6 text-text-secondary">
diff --git a/packages/dify-ui/src/slider/index.tsx b/packages/dify-ui/src/slider/index.tsx
index db6cdde2144..b806373caf7 100644
--- a/packages/dify-ui/src/slider/index.tsx
+++ b/packages/dify-ui/src/slider/index.tsx
@@ -47,7 +47,7 @@ const sliderThumbClassName = cn(
   'border-components-slider-knob-border bg-components-slider-knob shadow-sm',
   'transition-[background-color,border-color,box-shadow,opacity] motion-reduce:transition-none',
   'hover:bg-components-slider-knob-hover',
-  'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-state-accent-solid has-[:focus-visible]:ring-offset-0',
+  'has-focus-visible:ring-2 has-focus-visible:ring-state-accent-solid has-focus-visible:ring-offset-0',
   'active:shadow-md',
   'group-data-disabled/slider:border-components-slider-knob-border group-data-disabled/slider:bg-components-slider-knob-disabled group-data-disabled/slider:shadow-none',
 )
diff --git a/packages/dify-ui/src/switch/index.tsx b/packages/dify-ui/src/switch/index.tsx
index 11e3c8c454d..0dce682c205 100644
--- a/packages/dify-ui/src/switch/index.tsx
+++ b/packages/dify-ui/src/switch/index.tsx
@@ -18,7 +18,7 @@ const switchRootVariants = cva(
         xs: 'h-2.5 w-3.5 rounded-xs p-0.5',
         sm: 'h-3 w-5 rounded-[3.5px] p-0.5',
         md: 'h-4 w-7 rounded-[5px] p-0.5',
-        lg: 'h-5 w-9 rounded-md p-[3px]',
+        lg: 'h-5 w-9 rounded-md p-0.75',
       },
     },
     defaultVariants: {
@@ -33,8 +33,8 @@ const switchThumbVariants = cva(
     variants: {
       size: {
         xs: 'h-1.5 w-1 rounded-[1px] data-checked:translate-x-1.5',
-        sm: 'h-2 w-[7px] rounded-xs data-checked:translate-x-[9px]',
-        md: 'h-3 w-2.5 rounded-[3px] data-checked:translate-x-[14px]',
+        sm: 'h-2 w-1.75 rounded-xs data-checked:translate-x-2.25',
+        md: 'h-3 w-2.5 rounded-[3px] data-checked:translate-x-3.5',
         lg: 'size-3.5 rounded-sm data-checked:translate-x-4',
       },
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3c8aaf9cd59..7d5c46edd13 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -333,6 +333,9 @@ catalogs:
     eslint-plugin-antfu:
       specifier: 3.2.3
       version: 3.2.3
+    eslint-plugin-better-tailwindcss:
+      specifier: 4.7.0
+      version: 4.7.0
     eslint-plugin-command:
       specifier: 3.5.3
       version: 3.5.3
@@ -695,6 +698,9 @@ importers:
       eslint-plugin-antfu:
         specifier: 'catalog:'
         version: 3.2.3(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))
+      eslint-plugin-better-tailwindcss:
+        specifier: 'catalog:'
+        version: 4.7.0(@typescript/typescript6@6.0.2)(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))(oxlint@1.75.0(oxlint-tsgolint@7.0.2001)(vite-plus@0.2.6(@types/node@26.0.1)(@typescript/typescript6@6.0.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@voidzero-dev/vite-plus-core@0.2.6(@types/node@26.0.1)(@typescript/typescript6@6.0.2)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.1)(yaml@2.9.0))(esbuild@0.28.1)(happy-dom@20.11.1)(jiti@2.7.0)(tsx@4.23.1)(yaml@2.9.0)))(tailwindcss@4.3.3)
       eslint-plugin-command:
         specifier: 'catalog:'
         version: 3.5.3(@typescript-eslint/typescript-estree@8.65.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(@typescript-eslint/utils@8.65.0(@typescript/typescript6@6.0.2)(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))(supports-color@10.2.2))(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))
@@ -1960,18 +1966,12 @@ packages:
     peerDependencies:
       tailwindcss: '*'
 
-  '@emnapi/core@1.11.0':
-    resolution: {integrity: sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q==}
-
   '@emnapi/core@1.11.2':
     resolution: {integrity: sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==}
 
   '@emnapi/core@1.9.2':
     resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
 
-  '@emnapi/runtime@1.11.0':
-    resolution: {integrity: sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg==}
-
   '@emnapi/runtime@1.11.1':
     resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
 
@@ -2239,6 +2239,10 @@ packages:
     resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  '@eslint/css-tree@4.0.5':
+    resolution: {integrity: sha512-iPmijIAq4hlIJB86PYmY/fcZORHtjphSqICDbwuw32A/JmkhZQ/K/6TjHE03zqf3n5yABpVcbRAMG8Mi9ojy8g==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   '@eslint/markdown@7.5.1':
     resolution: {integrity: sha512-R8uZemG9dKTbru/DQRPblbJyXpObwKzo8rv1KYGGuPUPtjM4LXBYM9q5CIZAComzZupws3tWbDwam5AFpPLyJQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3425,207 +3429,104 @@ packages:
   '@oxc-project/types@0.141.0':
     resolution: {integrity: sha512-S4as7z0j0xQkXcJlyY5ehntwK8/wRkQb9Cyqw+J/N2rkWGQGK0SxD6X6DhQTc7qsxVTBxXbxZtBJh3mr3PtIzQ==}
 
-  '@oxc-resolver/binding-android-arm-eabi@11.21.3':
-    resolution: {integrity: sha512-eNU11A2WNizh04v3uyaJCootrHIaS0B9aHYXvAvVnPNk4xYSjMUjHnhQ6dewPN2MRYDskV85d1N0Aw0WNWhcyg==}
-    cpu: [arm]
-    os: [android]
-
   '@oxc-resolver/binding-android-arm-eabi@11.24.2':
     resolution: {integrity: sha512-y09e0L0SRI2OA2tUIrjBgoV3eH5hvUKXNkJqXmNo5V2WxIjyC7I7aJfRLMEVpA8yi95f90gFDvO0VMgrDw+vwA==}
     cpu: [arm]
     os: [android]
 
-  '@oxc-resolver/binding-android-arm64@11.21.3':
-    resolution: {integrity: sha512-8Q+ZjTLvn2dIcWsrmhdrEihm7q+ag/k+mkry7Z+t0QbbHaVxXQfvH9AewyVMh/WrpEKhQ3DDgx9fYbqeCpeOEw==}
-    cpu: [arm64]
-    os: [android]
-
   '@oxc-resolver/binding-android-arm64@11.24.2':
     resolution: {integrity: sha512-cl4icWaZFnLdg8m6qtnh5rBMuGbxc/ptStFHLeCNwr+2cZjkjNwQu/jYRS0CHlnPecOJMpuS5M6/BH+0J/YkEg==}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-resolver/binding-darwin-arm64@11.21.3':
-    resolution: {integrity: sha512-wkh0qKZGHXVUDxFw3oA1TXnU2BDYY/r775oJflGeIr8uDPPoN2pk8gijQIzYRT6hoql/lg3+Tx/SaTn9e2/aGg==}
-    cpu: [arm64]
-    os: [darwin]
-
   '@oxc-resolver/binding-darwin-arm64@11.24.2':
     resolution: {integrity: sha512-At29QEMF6HajbQvgY8K6OXnHD1x9rad74xBEfmCB6ZqCGsdq75aK7tOYcTbOanMy8qdIBrfL3SMr3p/lfSlb9w==}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-resolver/binding-darwin-x64@11.21.3':
-    resolution: {integrity: sha512-HbNc23FAQYbuyDV2vBWMez4u4mrsm5RAkniGZAWqr6lYZ3N4beeqIb776jzwRl8qL2zRhHVXpUj97X0QgogVzg==}
-    cpu: [x64]
-    os: [darwin]
-
   '@oxc-resolver/binding-darwin-x64@11.24.2':
     resolution: {integrity: sha512-A5Kqr1EUj4oIL5CF4WRssq/o5P0Y11cwoFouMRmQ7YnC/A8V93nv1nb7aSU8HwcgmXropjLNkVTl4MN87cu28Q==}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-resolver/binding-freebsd-x64@11.21.3':
-    resolution: {integrity: sha512-K6xNsTUPEUdfrn0+kbMq5nOUB5w1C5pavPQngt4TM2FpN91lP0PBe2srSpamb4d69O7h86oAi/qWX/kZNRSjkw==}
-    cpu: [x64]
-    os: [freebsd]
-
   '@oxc-resolver/binding-freebsd-x64@11.24.2':
     resolution: {integrity: sha512-R5xkRBRRz7ceH/P5Jrc6G7FmdUdgpLYyESFAUDVTNQ9K0sGPxcp4ljiwEwEqsvNcQ4sYbMRrWcHHBCu7ksAJVw==}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.3':
-    resolution: {integrity: sha512-VcFmOpcpWX1zoEy8M58tR2M9YxM+Z9RuQhqAx5q0CTmrruaP7Gveejg75hzd/5sg5nk9G3aLALEa3hE2FsmmTQ==}
-    cpu: [arm]
-    os: [linux]
-
   '@oxc-resolver/binding-linux-arm-gnueabihf@11.24.2':
     resolution: {integrity: sha512-k/RuYL4L/R58IBn3wT5ma3Wh4k62bp1eYCFRWCmMsasUOqL+H6sW0VGFadEzKWXFFlz+2uIMoeMk9ySSZJHgbg==}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-arm-musleabihf@11.21.3':
-    resolution: {integrity: sha512-quVoxFLBy43hWaQbbDtQNRwAX5vX76mv7n64icAtQcJ3eNgVeblqmkupF/hAneNthdqSlnd1sTjb3aQSaDPaCQ==}
-    cpu: [arm]
-    os: [linux]
-
   '@oxc-resolver/binding-linux-arm-musleabihf@11.24.2':
     resolution: {integrity: sha512-bnHAak3ujYfH5pKk4NieFNbvYvernfoQDgwLddbZ3OtMYrem87/qjlA+u+aKG0oZcqSLGCful/6/CEA+aeAgaA==}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-arm64-gnu@11.21.3':
-    resolution: {integrity: sha512-X0AqNZgcD07Q4V3RDK18/vYOj/HQT/FnmEFGYS2jTWqY7JO13ryE3TEs3eAIgUJhBnNkpEaiXqz3VK8M7qQhWQ==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
   '@oxc-resolver/binding-linux-arm64-gnu@11.24.2':
     resolution: {integrity: sha512-vDT3KHgzYp47gmtNOqL2VNhCyl5Zv643eyxm//A68J8DeUGXrvD1pZFiaT4jSfe+RInfnn1R2yVHye4enx6RnA==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-arm64-musl@11.21.3':
-    resolution: {integrity: sha512-YkaQnaKYdbuaXvRt5Qd0GpbihzVnyfR6z1SpYfIUC6RTu4NF7lDKPjVkYb+jRI2gedVO2rVpN35Y6akG6ud4Lw==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
   '@oxc-resolver/binding-linux-arm64-musl@11.24.2':
     resolution: {integrity: sha512-+kMlQvbzfyEYtu5FcjE4p+ttBLpKW4d/AsAsuE69BxV6V4twZJeIQZFfD8gh/wqglY0MkPSezWXQH0jBV13MUw==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-resolver/binding-linux-ppc64-gnu@11.21.3':
-    resolution: {integrity: sha512-gB9HwhrPiFqUzDeEq+y/CgAijz1YdI6BnXz5GaH2Pa9cWdutchlkGFAiAuGb/PjVQpiK6NFKzFuztxrweoit7A==}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
   '@oxc-resolver/binding-linux-ppc64-gnu@11.24.2':
     resolution: {integrity: sha512-shjfMhmZ3gq9fv/w7bi3PnZlgOPG+2QAOFf0BJF0EgBSIGZ6PMLN2zbGEblTUYB/NKVDRyYhE2ff3dJ1QqNPkA==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-riscv64-gnu@11.21.3':
-    resolution: {integrity: sha512-zjDWBlYk8QGv0H8dsPUWqkfjYIIjG2TvspGkzXL0eImbgxtZorA/klKeHyolevoT3Kvbi+1iMr9Lhrh7jf54Og==}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
   '@oxc-resolver/binding-linux-riscv64-gnu@11.24.2':
     resolution: {integrity: sha512-zGelwFR5oRo+b69k8Lrzun86DyUHzfKN6cnjbR9l7Z7NIRznOE/2ZvPa1IUKqAL2PzAXOdwkfVqNvO1H2RlpAw==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-riscv64-musl@11.21.3':
-    resolution: {integrity: sha512-4UfsQvacV388y1zpXL7C1x1FNYaV52JtuNRiuzrfQA2z1z6ElVrsidkGsrvQ5EgeSq1Pj7kaKqrgGkvFuxJ/tw==}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
   '@oxc-resolver/binding-linux-riscv64-musl@11.24.2':
     resolution: {integrity: sha512-qxZ1SWCXJY0eyhAlP6Lmo9F2Nrtx7EkYj9oCgL8apDPCwXwCEDA2U697bbT81JIc2IrVjxO4KX6WU2N+oN9Z4w==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-resolver/binding-linux-s390x-gnu@11.21.3':
-    resolution: {integrity: sha512-b5uH+HKH0MP5mNBYaK75SKsJbw52URqrx2LavYdq6wb0l3ExAG5niYRP9DWUNHdKilpaBVM2bXk9HNWrH3ew7Q==}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
   '@oxc-resolver/binding-linux-s390x-gnu@11.24.2':
     resolution: {integrity: sha512-sGCecF3cx2DFlH4t/z7ApnOnXqN48p5p5mlHDEnHTAukQa2P+qMVE4CwyWE9W+q/m3QJ7kKfGrIjax31f44oFQ==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-x64-gnu@11.21.3':
-    resolution: {integrity: sha512-PjYlmilBpNRh2ntXNYAK3Am5w/nPfEpnU/96iNx7CI8EzAn12J4JRiec63wHJTH31nLoCNxBg/829pN+3CfG3Q==}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
   '@oxc-resolver/binding-linux-x64-gnu@11.24.2':
     resolution: {integrity: sha512-k/VlMMcSzMlahb3/fENM4rTlsJ0s3fFROA0KXPBmKggqmTSaE383sl8F3KCOXPLmVsYfW6hCitMhXCEtNeZxxg==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-x64-musl@11.21.3':
-    resolution: {integrity: sha512-QTBAb7JuHlZ7JUEyM8UiQi2f7m/L4swBhP2TNpYIDc9Wp/wRw1G/8sl6i13aIzQAXH7LKIm294LeOHd0lQR8zA==}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
   '@oxc-resolver/binding-linux-x64-musl@11.24.2':
     resolution: {integrity: sha512-8hbnZyNi97b/8wapYaIF9+t9GmZKBW2vunaOc3h9HGJptH7b7XpvZqOTBSm/MpTjr7H497BlgOaSfLUdhmy2bw==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-resolver/binding-openharmony-arm64@11.21.3':
-    resolution: {integrity: sha512-4j1DFwjwv36ec9kds0jU/ucQ5Ha4ERO/H95BxR5JFf0kqUUAJ1kwII7XhTc1vZrkdJkvLGC9Q2MbpObpum8RBg==}
-    cpu: [arm64]
-    os: [openharmony]
-
   '@oxc-resolver/binding-openharmony-arm64@11.24.2':
     resolution: {integrity: sha512-MvyGik3a6pVgZ0t/kWlbmFxFLmXQJwgLsY2eYFHLpy0wGwRbfzeIGgDwQ3kXqE30z+kSXennRkCrT7TUvkptNg==}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxc-resolver/binding-wasm32-wasi@11.21.3':
-    resolution: {integrity: sha512-i8oluoel5kru/j1WNrjmQSiA3GQ7wvIYVR1IwIoZtKogAhya2iub+ZKIeSIkcJOrnzQ18Tzl/F+kL3fYOxZLvA==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
   '@oxc-resolver/binding-wasm32-wasi@11.24.2':
     resolution: {integrity: sha512-vHcssMPwO08RTvj/c0iOBz90attxyG3wQJ0dTcyEQK43LRpcdLWZlV5feBhv6Isn6ahbQIzHbCgfa81+RiML0Q==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@oxc-resolver/binding-win32-arm64-msvc@11.21.3':
-    resolution: {integrity: sha512-M/8dw8dD6aOs+NlPJax401CZB9I7Aut84isQLgALGGwke4Afvw+/7yYhZb94yXf6t2sPLhQLmSmtSV+2FhsOWg==}
-    cpu: [arm64]
-    os: [win32]
-
   '@oxc-resolver/binding-win32-arm64-msvc@11.24.2':
     resolution: {integrity: sha512-uokJqro2iBqkFvJdKQLP7d8/BUmFwESQFVmIJUQKj1Xn1a/LysJoe1vmeECLF5b3jsV8CAL5sEMJXX6SdK9Nhg==}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-resolver/binding-win32-x64-msvc@11.21.3':
-    resolution: {integrity: sha512-H7BCt/VnS9hnmMp42eGhZ99izSCRvlnWwy/N71K1/J8QoExwY4262Z8QiEkMDtduRJrztayDxETTckmUuAVL9Q==}
-    cpu: [x64]
-    os: [win32]
-
   '@oxc-resolver/binding-win32-x64-msvc@11.24.2':
     resolution: {integrity: sha512-UqGPmo56KDfLlfXFAFIrNflHT8tFxWGEivWg3Zeyp4Uy2NlKN1FGPr6/BxcLGG3+kZ6Wp14g5Uj+n71boqZfiw==}
     cpu: [x64]
@@ -6254,6 +6155,19 @@ packages:
     peerDependencies:
       eslint: '*'
 
+  eslint-plugin-better-tailwindcss@4.7.0:
+    resolution: {integrity: sha512-lrdlVW4pzLPj/zX5HRqMhKPesGijDfRhnSRJMlNcsrCyJHsndmHCLKTiRNa1eREUZ6G3D3QjdLc+G4tlfGrmkw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
+      oxlint: ^1.35.0
+      tailwindcss: ^3.3.0 || ^4.1.17
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+      oxlint:
+        optional: true
+
   eslint-plugin-command@3.5.3:
     resolution: {integrity: sha512-JIhmUOW2K2Dw1K+p4mtj5potkqTZ4ZaicrTkgCygPZCWErP2+O2F46n7ZwGKapeEjiwcVqoY8u01SxNUUXWPeQ==}
     peerDependencies:
@@ -7419,6 +7333,9 @@ packages:
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
+  mdn-data@2.29.0:
+    resolution: {integrity: sha512-pVxQFCcaYUEAH853+v7yoI/qzhxXSq1bTb9obMYGYAN1c3Hen+XDCEvr296XhstrwlSTNgOR7mCSD4JPjbJe5A==}
+
   mediabunny@1.51.0:
     resolution: {integrity: sha512-u327374xU8Ho0gCaMII7fUK8t0PnqkabCox1k8uUwvgvGb9o6YQGZEG2Qr4DTe7nTMpzfL7ukgnHDvDROySZ+Q==}
 
@@ -7914,9 +7831,6 @@ packages:
     resolution: {integrity: sha512-h6QFWd6lBMfjESqgQ27GjzrSDb0qbznp7VDQqp2zvgsrWut4vcchyMIzOVXvGQ2GMZgKw9RWrFNWv9WqGL0p7Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  oxc-resolver@11.21.3:
-    resolution: {integrity: sha512-2Mx3fKQz7+xgrBONjsxOgCGtMHOn38/HxMzW1I5efwXB5a4lRN0Vp40gYUJFBWJslcrvwoofTrqoTnLbwTd3pA==}
-
   oxc-resolver@11.24.2:
     resolution: {integrity: sha512-FY91FiDBj7ls5MsFS9jN3tjz2o0/zsdSsymlakySaBwVJZorHhkWyICLZMKxlu1R9vYo+sd3z1jwb4J8x7bNDw==}
 
@@ -8736,6 +8650,15 @@ packages:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
 
+  tailwind-csstree@0.3.3:
+    resolution: {integrity: sha512-je9J5UYRsTJqAjYrIBMMlge8T/rreRd44pJxgG5Zx/zeo4kAC/liUKqzztRZrGlYRJLvIf2Cb1DVJMTXSzEShA==}
+    engines: {node: '>=18.18'}
+    peerDependencies:
+      '@eslint/css': '>=1.0.0'
+    peerDependenciesMeta:
+      '@eslint/css':
+        optional: true
+
   tailwind-merge@3.6.0:
     resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
 
@@ -8863,6 +8786,10 @@ packages:
       typescript:
         optional: true
 
+  tsconfig-paths-webpack-plugin@4.2.0:
+    resolution: {integrity: sha512-zbem3rfRS8BgeNK50Zz5SIQgXzLafiHjOwUAvk/38/o1jHn/V5QAgVUcz884or7WYcPaH3N2CIfUc2u0ul7UcA==}
+    engines: {node: '>=10.13.0'}
+
   tsconfig-paths@4.2.0:
     resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
     engines: {node: '>=6'}
@@ -9502,7 +9429,7 @@ snapshots:
 
   '@amplitude/rrweb-snapshot@2.1.0':
     dependencies:
-      postcss: 8.5.19
+      postcss: 8.5.23
 
   '@amplitude/rrweb-types@2.0.0-alpha.40': {}
 
@@ -9878,12 +9805,6 @@ snapshots:
       '@iconify/utils': 3.1.3
       tailwindcss: 4.3.3
 
-  '@emnapi/core@1.11.0':
-    dependencies:
-      '@emnapi/wasi-threads': 1.2.2
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/core@1.11.2':
     dependencies:
       '@emnapi/wasi-threads': 1.2.2
@@ -9896,11 +9817,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.11.0':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/runtime@1.11.1':
     dependencies:
       tslib: 2.8.1
@@ -10143,6 +10059,11 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
+  '@eslint/css-tree@4.0.5':
+    dependencies:
+      mdn-data: 2.29.0
+      source-map-js: 1.2.1
+
   '@eslint/markdown@7.5.1(supports-color@10.2.2)':
     dependencies:
       '@eslint/core': 0.17.0
@@ -10925,13 +10846,6 @@ snapshots:
       '@napi-rs/keyring-win32-ia32-msvc': 1.3.0
       '@napi-rs/keyring-win32-x64-msvc': 1.3.0
 
-  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)':
-    dependencies:
-      '@emnapi/core': 1.11.0
-      '@emnapi/runtime': 1.11.0
-      '@tybys/wasm-util': 0.10.3
-    optional: true
-
   '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)':
     dependencies:
       '@emnapi/core': 1.11.2
@@ -11199,109 +11113,54 @@ snapshots:
 
   '@oxc-project/types@0.141.0': {}
 
-  '@oxc-resolver/binding-android-arm-eabi@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-android-arm-eabi@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-android-arm64@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-android-arm64@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-darwin-arm64@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-darwin-arm64@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-darwin-x64@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-darwin-x64@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-freebsd-x64@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-freebsd-x64@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-linux-arm-gnueabihf@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm-musleabihf@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-linux-arm-musleabihf@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm64-gnu@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-linux-arm64-gnu@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm64-musl@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-linux-arm64-musl@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-ppc64-gnu@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-linux-ppc64-gnu@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-riscv64-gnu@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-linux-riscv64-gnu@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-riscv64-musl@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-linux-riscv64-musl@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-s390x-gnu@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-linux-s390x-gnu@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-x64-gnu@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-linux-x64-gnu@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-x64-musl@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-linux-x64-musl@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-openharmony-arm64@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-openharmony-arm64@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-wasm32-wasi@11.21.3':
-    dependencies:
-      '@emnapi/core': 1.11.0
-      '@emnapi/runtime': 1.11.0
-      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)
-    optional: true
-
   '@oxc-resolver/binding-wasm32-wasi@11.24.2':
     dependencies:
       '@emnapi/core': 1.11.2
@@ -11309,15 +11168,9 @@ snapshots:
       '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
     optional: true
 
-  '@oxc-resolver/binding-win32-arm64-msvc@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-win32-arm64-msvc@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-win32-x64-msvc@11.21.3':
-    optional: true
-
   '@oxc-resolver/binding-win32-x64-msvc@11.24.2':
     optional: true
 
@@ -14001,6 +13854,24 @@ snapshots:
     dependencies:
       eslint: 10.8.0(jiti@2.7.0)(supports-color@10.2.2)
 
+  eslint-plugin-better-tailwindcss@4.7.0(@typescript/typescript6@6.0.2)(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))(oxlint@1.75.0(oxlint-tsgolint@7.0.2001)(vite-plus@0.2.6(@types/node@26.0.1)(@typescript/typescript6@6.0.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@voidzero-dev/vite-plus-core@0.2.6(@types/node@26.0.1)(@typescript/typescript6@6.0.2)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.1)(yaml@2.9.0))(esbuild@0.28.1)(happy-dom@20.11.1)(jiti@2.7.0)(tsx@4.23.1)(yaml@2.9.0)))(tailwindcss@4.3.3):
+    dependencies:
+      '@eslint/css-tree': 4.0.5
+      '@valibot/to-json-schema': 1.7.1(valibot@1.4.2(@typescript/typescript6@6.0.2))
+      enhanced-resolve: 5.24.1
+      jiti: 2.7.0
+      synckit: 0.11.13
+      tailwind-csstree: 0.3.3
+      tailwindcss: 4.3.3
+      tsconfig-paths-webpack-plugin: 4.2.0
+      valibot: 1.4.2(@typescript/typescript6@6.0.2)
+    optionalDependencies:
+      eslint: 10.8.0(jiti@2.7.0)(supports-color@10.2.2)
+      oxlint: 1.75.0(oxlint-tsgolint@7.0.2001)(vite-plus@0.2.6(@types/node@26.0.1)(@typescript/typescript6@6.0.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@voidzero-dev/vite-plus-core@0.2.6(@types/node@26.0.1)(@typescript/typescript6@6.0.2)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.1)(yaml@2.9.0))(esbuild@0.28.1)(happy-dom@20.11.1)(jiti@2.7.0)(tsx@4.23.1)(yaml@2.9.0))
+    transitivePeerDependencies:
+      - '@eslint/css'
+      - typescript
+
   eslint-plugin-command@3.5.3(@typescript-eslint/typescript-estree@8.65.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(@typescript-eslint/utils@8.65.0(@typescript/typescript6@6.0.2)(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))(supports-color@10.2.2))(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2)):
     dependencies:
       '@es-joy/jsdoccomment': 0.88.0
@@ -15418,6 +15289,8 @@ snapshots:
 
   mdn-data@2.0.30: {}
 
+  mdn-data@2.29.0: {}
+
   mediabunny@1.51.0:
     dependencies:
       '@types/dom-mediacapture-transform': 0.1.11
@@ -15992,28 +15865,6 @@ snapshots:
       '@oxc-parser/binding-win32-ia32-msvc': 0.140.0
       '@oxc-parser/binding-win32-x64-msvc': 0.140.0
 
-  oxc-resolver@11.21.3:
-    optionalDependencies:
-      '@oxc-resolver/binding-android-arm-eabi': 11.21.3
-      '@oxc-resolver/binding-android-arm64': 11.21.3
-      '@oxc-resolver/binding-darwin-arm64': 11.21.3
-      '@oxc-resolver/binding-darwin-x64': 11.21.3
-      '@oxc-resolver/binding-freebsd-x64': 11.21.3
-      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.21.3
-      '@oxc-resolver/binding-linux-arm-musleabihf': 11.21.3
-      '@oxc-resolver/binding-linux-arm64-gnu': 11.21.3
-      '@oxc-resolver/binding-linux-arm64-musl': 11.21.3
-      '@oxc-resolver/binding-linux-ppc64-gnu': 11.21.3
-      '@oxc-resolver/binding-linux-riscv64-gnu': 11.21.3
-      '@oxc-resolver/binding-linux-riscv64-musl': 11.21.3
-      '@oxc-resolver/binding-linux-s390x-gnu': 11.21.3
-      '@oxc-resolver/binding-linux-x64-gnu': 11.21.3
-      '@oxc-resolver/binding-linux-x64-musl': 11.21.3
-      '@oxc-resolver/binding-openharmony-arm64': 11.21.3
-      '@oxc-resolver/binding-wasm32-wasi': 11.21.3
-      '@oxc-resolver/binding-win32-arm64-msvc': 11.21.3
-      '@oxc-resolver/binding-win32-x64-msvc': 11.21.3
-
   oxc-resolver@11.24.2:
     optionalDependencies:
       '@oxc-resolver/binding-android-arm-eabi': 11.24.2
@@ -17029,7 +16880,7 @@ snapshots:
       jsonc-parser: 3.3.1
       open: 10.2.0
       oxc-parser: 0.127.0
-      oxc-resolver: 11.21.3
+      oxc-resolver: 11.24.2
       recast: 0.23.12
       semver: 7.8.5
       use-sync-external-store: 1.6.0(react@19.2.8)
@@ -17056,7 +16907,7 @@ snapshots:
       jsonc-parser: 3.3.1
       open: 10.2.0
       oxc-parser: 0.127.0
-      oxc-resolver: 11.21.3
+      oxc-resolver: 11.24.2
       recast: 0.23.12
       semver: 7.8.5
       use-sync-external-store: 1.6.0(react@19.2.8)
@@ -17183,6 +17034,8 @@ snapshots:
 
   tagged-tag@1.0.0: {}
 
+  tailwind-csstree@0.3.3: {}
+
   tailwind-merge@3.6.0: {}
 
   tailwindcss@4.3.3: {}
@@ -17286,6 +17139,13 @@ snapshots:
     optionalDependencies:
       typescript: '@typescript/typescript6@6.0.2'
 
+  tsconfig-paths-webpack-plugin@4.2.0:
+    dependencies:
+      chalk: 4.1.2
+      enhanced-resolve: 5.24.1
+      tapable: 2.3.3
+      tsconfig-paths: 4.2.0
+
   tsconfig-paths@4.2.0:
     dependencies:
       json5: 2.2.3
@@ -18139,6 +17999,7 @@ time:
   es-toolkit@1.50.0: '2026-07-24T08:24:09.928Z'
   eslint-markdown@0.12.1: '2026-07-10T23:35:26.055Z'
   eslint-plugin-antfu@3.2.3: '2026-05-11T02:24:38.348Z'
+  eslint-plugin-better-tailwindcss@4.7.0: '2026-07-19T13:26:01.366Z'
   eslint-plugin-command@3.5.3: '2026-07-14T04:59:31.991Z'
   eslint-plugin-erasable-syntax-only@0.4.2: '2026-06-18T00:56:01.038Z'
   eslint-plugin-hyoban@0.14.1: '2026-03-08T02:51:00.805Z'
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index aabf449c694..73147d01c61 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -160,6 +160,7 @@ catalog:
   eslint: 10.8.0
   eslint-markdown: 0.12.1
   eslint-plugin-antfu: 3.2.3
+  eslint-plugin-better-tailwindcss: 4.7.0
   eslint-plugin-command: 3.5.3
   eslint-plugin-erasable-syntax-only: 0.4.2
   eslint-plugin-hyoban: 0.14.1
diff --git a/web/__tests__/base/chat-flow.test.tsx b/web/__tests__/base/chat-flow.test.tsx
index 03449c65e67..6d74f646540 100644
--- a/web/__tests__/base/chat-flow.test.tsx
+++ b/web/__tests__/base/chat-flow.test.tsx
@@ -143,7 +143,7 @@ describe('Base Chat Flow', () => {
         expect(hoverArea).toHaveClass('left-0')
 
         fireEvent.mouseLeave(hoverArea)
-        expect(hoverArea).toHaveClass('left-[-248px]')
+        expect(hoverArea).toHaveClass('-left-62')
       }
     })
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx
index 243a2a931ec..9dc6d95346e 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx
@@ -112,7 +112,7 @@ function ChartViewContent({
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <div className="h-[106px] shrink-0">
+      <div className="h-26.5 shrink-0">
         <div className="px-6 pt-3">
           <div className="flex h-6 items-center">
             <h1 className="title-2xl-semi-bold text-text-primary">
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
index cdb021b0d56..61b69a6c631 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
@@ -86,7 +86,7 @@ const RangeSelector: FC<Props> = ({ isCustomRange, ranges, onSelect }) => {
           <RiArrowDownSLine className="size-4 text-text-quaternary group-data-popup-open:text-text-secondary" />
         </div>
       </SelectTrigger>
-      <SelectContent className="translate-x-[-24px]" popupClassName="w-[200px]" listClassName="p-1">
+      <SelectContent className="-translate-x-6" popupClassName="w-[200px]" listClassName="p-1">
         {items.map((item) => (
           <SelectItem
             key={item.value}
@@ -94,7 +94,7 @@ const RangeSelector: FC<Props> = ({ isCustomRange, ranges, onSelect }) => {
             className="relative h-8 py-0 pr-2 pl-7 system-md-regular"
           >
             <SelectItemText className="px-0">{item.name}</SelectItemText>
-            <SelectItemIndicator className="absolute top-[8px] left-2 ml-0" />
+            <SelectItemIndicator className="absolute top-2 left-2 ml-0" />
           </SelectItem>
         ))}
       </SelectContent>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
index aef1069ed4a..ff3188f0a9f 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
@@ -359,7 +359,7 @@ const ConfigPopup: FC<PopupProps> = ({
   }
 
   return (
-    <div className="w-[420px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-xl">
+    <div className="w-105 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-xl">
       <div className="flex items-center justify-between">
         <div className="flex items-center">
           <TracingIcon size="md" className="mr-2" />
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
index eb4b1ce88c4..9a039dbd125 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
@@ -25,11 +25,11 @@ const Field: FC<Props> = ({
 }) => {
   return (
     <div className={cn(className)}>
-      <div className="flex py-[7px]">
+      <div className="flex py-1.75">
         <div
           className={cn(
             labelClassName,
-            'flex h-[18px] items-center text-[13px] font-medium text-text-primary',
+            'flex h-4.5 items-center text-[13px] font-medium text-text-primary',
           )}
         >
           {label}{' '}
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 52a34256507..23ee973d42c 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -251,7 +251,7 @@ const Panel: FC = () => {
   if (!isLoaded) {
     return (
       <div className="mb-3 flex items-center justify-between">
-        <div className="w-[200px]">
+        <div className="w-50">
           <Loading />
         </div>
       </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 a152b9acc2c..d2d05f8d898 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
@@ -370,7 +370,7 @@ const ProviderConfigModal: FC<Props> = ({
         >
           <DialogContent className="max-h-[calc(100dvh-1rem)] w-auto max-w-[calc(100vw-1rem)] overflow-visible border-none bg-transparent p-0 shadow-none">
             <div className="flex items-center justify-center">
-              <div className="mx-2 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl bg-components-panel-bg shadow-xl">
+              <div className="mx-2 max-h-[calc(100vh-120px)] w-160 overflow-y-auto rounded-2xl bg-components-panel-bg shadow-xl">
                 <div className="px-8 pt-8">
                   <div className="mb-4 flex items-center justify-between">
                     <div className="title-2xl-semi-bold text-text-primary">
@@ -773,7 +773,7 @@ const ProviderConfigModal: FC<Props> = ({
                   </div>
                   <div className="my-8 flex h-8 items-center justify-between">
                     <a
-                      className="flex items-center space-x-1 text-xs leading-[18px] font-normal text-[#155EEF]"
+                      className="flex items-center space-x-1 text-xs leading-4.5 font-normal text-primary-600"
                       target="_blank"
                       href={docURL[type]}
                     >
@@ -796,7 +796,7 @@ const ProviderConfigModal: FC<Props> = ({
                               {t(($) => $['operation.remove'], { ns: 'common' })}
                             </span>
                           </Button>
-                          <Divider type="vertical" className="mx-3 h-[18px]" />
+                          <Divider type="vertical" className="mx-3 h-4.5" />
                         </>
                       )}
                       <Button
diff --git a/web/app/(shareLayout)/layout.tsx b/web/app/(shareLayout)/layout.tsx
index df4a9e2847a..0e3c180392b 100644
--- a/web/app/(shareLayout)/layout.tsx
+++ b/web/app/(shareLayout)/layout.tsx
@@ -4,7 +4,7 @@ import Splash from './components/splash'
 
 const Layout: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <div className="h-full min-w-[300px] pb-[env(safe-area-inset-bottom)]">
+    <div className="h-full min-w-75 pb-[env(safe-area-inset-bottom)]">
       <WebAppStoreProvider>
         <Splash>{children}</Splash>
       </WebAppStoreProvider>
diff --git a/web/app/(shareLayout)/webapp-reset-password/layout.tsx b/web/app/(shareLayout)/webapp-reset-password/layout.tsx
index 4d65514b4a5..a4a6694ec62 100644
--- a/web/app/(shareLayout)/webapp-reset-password/layout.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/layout.tsx
@@ -19,10 +19,10 @@ export default function SignInLayout({ children }: any) {
             className={cn(
               'flex w-full grow flex-col items-center justify-center',
               'px-6',
-              'md:px-[108px]',
+              'md:px-27',
             )}
           >
-            <div className="flex w-[400px] flex-col">{children}</div>
+            <div className="flex w-100 flex-col">{children}</div>
           </div>
           {!systemFeatures.branding.enabled && (
             <div className="px-8 py-6 system-xs-regular text-text-tertiary">
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 40fec223015..9791b5e5ad4 100644
--- a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
@@ -76,14 +76,10 @@ const ChangePasswordForm = () => {
 
   return (
     <div
-      className={cn(
-        'flex w-full grow flex-col items-center justify-center',
-        'px-6',
-        'md:px-[108px]',
-      )}
+      className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-27')}
     >
       {!showSuccess && (
-        <div className="flex flex-col md:w-[400px]">
+        <div className="flex flex-col md:w-100">
           <div className="mx-auto w-full">
             <h2 className="title-4xl-semi-bold text-text-primary">
               {t(($) => $.changePassword, { ns: 'login' })}
@@ -160,7 +156,7 @@ const ChangePasswordForm = () => {
         </div>
       )}
       {showSuccess && (
-        <div className="flex flex-col md:w-[400px]">
+        <div className="flex flex-col md:w-100">
           <div className="mx-auto w-full">
             <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" />
diff --git a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
index 004d025197f..28518e998cc 100644
--- a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
@@ -105,7 +105,7 @@ export default function CheckCode() {
   }
 
   return (
-    <div className="flex w-[400px] flex-col gap-3">
+    <div className="flex w-100 flex-col gap-3">
       <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>
diff --git a/web/app/(shareLayout)/webapp-signin/layout.tsx b/web/app/(shareLayout)/webapp-signin/layout.tsx
index b1f582bf6f4..691c844e781 100644
--- a/web/app/(shareLayout)/webapp-signin/layout.tsx
+++ b/web/app/(shareLayout)/webapp-signin/layout.tsx
@@ -21,11 +21,9 @@ export default function SignInLayout({ children }: PropsWithChildren) {
         >
           {/* <Header /> */}
           <div
-            className={cn(
-              'flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]',
-            )}
+            className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-27')}
           >
-            <div className="flex justify-center md:w-[440px] lg:w-[600px]">{children}</div>
+            <div className="flex justify-center md:w-110 lg:w-150">{children}</div>
           </div>
           {systemFeatures.branding.enabled === false && (
             <div className="px-8 py-6 system-xs-regular text-text-tertiary">
diff --git a/web/app/(shareLayout)/webapp-signin/normalForm.tsx b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
index b1f3b35abe1..01cdf8220ea 100644
--- a/web/app/(shareLayout)/webapp-signin/normalForm.tsx
+++ b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
@@ -51,11 +51,7 @@ const NormalForm = () => {
   if (isLoading) {
     return (
       <div
-        className={cn(
-          'flex w-full grow flex-col items-center justify-center',
-          'px-6',
-          'md:px-[108px]',
-        )}
+        className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-27')}
       >
         <Loading type="area" />
       </div>
diff --git a/web/app/(shareLayout)/webapp-signin/page.tsx b/web/app/(shareLayout)/webapp-signin/page.tsx
index ca1c96f78b0..ac923ebc38f 100644
--- a/web/app/(shareLayout)/webapp-signin/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/page.tsx
@@ -74,7 +74,7 @@ function WebSSOForm() {
       webAppAccessMode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
   ) {
     return (
-      <div className="w-full max-w-[400px]">
+      <div className="w-full max-w-100">
         <NormalForm />
       </div>
     )
diff --git a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
index 0210e693c0c..70c44d1b8a1 100644
--- a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
+++ b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
@@ -140,7 +140,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
         open={isShowAvatarPicker}
         onOpenChange={(open) => !open && setIsShowAvatarPicker(false)}
       >
-        <DialogContent className="w-[362px]! p-0!">
+        <DialogContent className="w-90.5! p-0!">
           <ImageInput onImageInput={handleImageInput} cropShape="round" />
           <Divider className="m-0" />
 
@@ -171,7 +171,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
         open={isShowDeleteConfirm}
         onOpenChange={(open) => !open && setIsShowDeleteConfirm(false)}
       >
-        <DialogContent className="w-[362px]! p-6!">
+        <DialogContent className="w-90.5! p-6!">
           <div className="mb-3 title-2xl-semi-bold text-text-primary">
             {t(($) => $['avatar.deleteTitle'], { ns: 'common' })}
           </div>
diff --git a/web/app/account/(commonLayout)/account-page/index.tsx b/web/app/account/(commonLayout)/account-page/index.tsx
index 219bdc47c03..80d3a82e6eb 100644
--- a/web/app/account/(commonLayout)/account-page/index.tsx
+++ b/web/app/account/(commonLayout)/account-page/index.tsx
@@ -148,7 +148,7 @@ export default function AccountPage() {
             imageUrl={icon_url}
           />
         </div>
-        <div className="mt-[3px] system-sm-medium text-text-secondary">{item.name}</div>
+        <div className="mt-0.75 system-sm-medium text-text-secondary">{item.name}</div>
       </div>
     )
   }
@@ -276,7 +276,7 @@ export default function AccountPage() {
         open={editPasswordModalVisible}
         onOpenChange={(open) => !open && (setEditPasswordModalVisible(false), resetPasswordForm())}
       >
-        <DialogContent className="w-[420px]! p-6!">
+        <DialogContent className="w-105! p-6!">
           <div className="mb-6 title-2xl-semi-bold text-text-primary">
             {userProfile.is_password_set
               ? t(($) => $['account.resetPassword'], { ns: 'common' })
diff --git a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
index 21bc9d61712..027907487fd 100644
--- a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
@@ -57,7 +57,7 @@ export default function FeedBack(props: DeleteAccountProps) {
       }}
     >
       <DialogContent
-        className="max-w-[480px] overflow-hidden!"
+        className="max-w-120 overflow-hidden!"
         backdropClassName="bg-background-overlay-backdrop backdrop-blur-[6px]"
       >
         <DialogTitle className="pr-8 pb-3 title-2xl-semi-bold text-text-primary">
diff --git a/web/app/account/(commonLayout)/delete-account/index.tsx b/web/app/account/(commonLayout)/delete-account/index.tsx
index 0f1eee0ac43..4c78e75720f 100644
--- a/web/app/account/(commonLayout)/delete-account/index.tsx
+++ b/web/app/account/(commonLayout)/delete-account/index.tsx
@@ -38,7 +38,7 @@ export default function DeleteAccount(props: DeleteAccountProps) {
       }}
     >
       <DialogContent
-        className="max-w-[480px] overflow-hidden!"
+        className="max-w-120 overflow-hidden!"
         backdropClassName="bg-background-overlay-backdrop backdrop-blur-[6px]"
       >
         <DialogTitle className="pr-8 pb-3 title-2xl-semi-bold text-text-primary">
diff --git a/web/app/account/(commonLayout)/header.tsx b/web/app/account/(commonLayout)/header.tsx
index f056bb32601..4d1af45c74d 100644
--- a/web/app/account/(commonLayout)/header.tsx
+++ b/web/app/account/(commonLayout)/header.tsx
@@ -33,7 +33,7 @@ const Header = () => {
           {systemFeatures.branding.enabled && systemFeatures.branding.login_page_logo ? (
             <img
               src={systemFeatures.branding.login_page_logo}
-              className="block h-[22px] w-auto object-contain"
+              className="block h-5.5 w-auto object-contain"
               alt=""
             />
           ) : (
@@ -41,7 +41,7 @@ const Header = () => {
           )}
         </Link>
         <div className="h-4 w-px origin-center rotate-[11.31deg] bg-divider-regular" />
-        <p className="relative mt-[-2px] title-3xl-semi-bold text-text-primary">
+        <p className="relative -mt-0.5 title-3xl-semi-bold text-text-primary">
           {t(($) => $['account.account'], { ns: 'common' })}
         </p>
       </div>
diff --git a/web/app/account/(commonLayout)/page.tsx b/web/app/account/(commonLayout)/page.tsx
index a4069506748..48147e87029 100644
--- a/web/app/account/(commonLayout)/page.tsx
+++ b/web/app/account/(commonLayout)/page.tsx
@@ -7,7 +7,7 @@ export default function Account() {
   const { t } = useTranslation()
   useDocumentTitle(t(($) => $['menus.account'], { ns: 'common' }))
   return (
-    <div className="mx-auto w-full max-w-[640px] px-6 pt-12">
+    <div className="mx-auto w-full max-w-160 px-6 pt-12">
       <AccountPage />
     </div>
   )
diff --git a/web/app/account/oauth/authorize/layout.tsx b/web/app/account/oauth/authorize/layout.tsx
index c17a0806442..051ec7058c6 100644
--- a/web/app/account/oauth/authorize/layout.tsx
+++ b/web/app/account/oauth/authorize/layout.tsx
@@ -19,8 +19,8 @@ export default function OAuthAuthorizeLayout({ children }: Props) {
     <div className="flex min-h-screen w-full justify-center bg-background-default-burn p-6">
       <div className="flex w-full shrink-0 flex-col items-center rounded-2xl border border-effects-highlight bg-background-default-subtle">
         <Header />
-        <div className="flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]">
-          <div className="flex flex-col md:w-[400px]">{children}</div>
+        <div className="flex w-full grow flex-col items-center justify-center px-6 md:px-27">
+          <div className="flex flex-col md:w-100">{children}</div>
         </div>
         {systemFeatures.branding.enabled === false && (
           <div className="px-8 py-6 system-xs-regular text-text-tertiary">
diff --git a/web/app/account/oauth/authorize/page.tsx b/web/app/account/oauth/authorize/page.tsx
index 337cfc6955d..48459351b02 100644
--- a/web/app/account/oauth/authorize/page.tsx
+++ b/web/app/account/oauth/authorize/page.tsx
@@ -190,7 +190,7 @@ export default function OAuthAuthorize() {
       )}
 
       {isLoggedIn && Boolean(authAppInfo?.scope) && (
-        <div className="mt-2 flex flex-col gap-2.5 rounded-xl bg-background-section-burn-inverted px-[22px] py-5 text-text-secondary">
+        <div className="mt-2 flex flex-col gap-2.5 rounded-xl bg-background-section-burn-inverted px-5.5 py-5 text-text-secondary">
           {authAppInfo!.scope
             .split(/\s+/)
             .filter(Boolean)
diff --git a/web/app/activate/activateForm.tsx b/web/app/activate/activateForm.tsx
index 0c7c71a6990..177959071b0 100644
--- a/web/app/activate/activateForm.tsx
+++ b/web/app/activate/activateForm.tsx
@@ -46,15 +46,11 @@ const ActivateForm = () => {
 
   return (
     <div
-      className={cn(
-        'flex w-full grow flex-col items-center justify-center',
-        'px-6',
-        'md:px-[108px]',
-      )}
+      className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-27')}
     >
       {!checkRes && <Loading />}
       {checkRes && !checkRes.is_valid && (
-        <div className="flex flex-col md:w-[400px]">
+        <div className="flex flex-col md:w-100">
           <div className="mx-auto w-full">
             <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">
               🤷‍♂️
diff --git a/web/app/components/app-sidebar/app-detail-section.tsx b/web/app/components/app-sidebar/app-detail-section.tsx
index e0e47df6ef8..93a990615f8 100644
--- a/web/app/components/app-sidebar/app-detail-section.tsx
+++ b/web/app/components/app-sidebar/app-detail-section.tsx
@@ -162,11 +162,11 @@ const AppDetailSection = ({ expand = true }: AppDetailSectionProps) => {
   return (
     <div className={cn('flex min-h-0 flex-1 flex-col', expand ? 'px-2 pb-2' : 'pb-2')}>
       {!expand && (
-        <div className="flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-[3px]">
+        <div className="flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-0.75">
           <Divider
             type="horizontal"
             bgStyle="solid"
-            className="my-0 h-px w-[27px] bg-divider-subtle"
+            className="my-0 h-px w-6.75 bg-divider-subtle"
           />
         </div>
       )}
diff --git a/web/app/components/app-sidebar/app-info/app-info-detail-drawer.tsx b/web/app/components/app-sidebar/app-info/app-info-detail-drawer.tsx
index 57a737f6c95..4fbea0071cc 100644
--- a/web/app/components/app-sidebar/app-info/app-info-detail-drawer.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-detail-drawer.tsx
@@ -28,7 +28,7 @@ export function AppInfoDetailDrawer({ open, onClose, children }: AppInfoDetailDr
         <DrawerViewport>
           <DrawerPopup
             aria-label="App info"
-            className="border-divider-burn bg-app-detail-bg p-0 data-[swipe-direction=left]:top-2 data-[swipe-direction=left]:bottom-2 data-[swipe-direction=left]:left-2 data-[swipe-direction=left]:h-auto data-[swipe-direction=left]:w-[452px] data-[swipe-direction=left]:max-w-[calc(100vw-1rem)] data-[swipe-direction=left]:rounded-2xl data-[swipe-direction=left]:border-r"
+            className="border-divider-burn bg-app-detail-bg p-0 data-[swipe-direction=left]:top-2 data-[swipe-direction=left]:bottom-2 data-[swipe-direction=left]:left-2 data-[swipe-direction=left]:h-auto data-[swipe-direction=left]:w-113 data-[swipe-direction=left]:max-w-[calc(100vw-1rem)] data-[swipe-direction=left]:rounded-2xl data-[swipe-direction=left]:border-r"
           >
             <DrawerContent className="flex min-h-0 flex-1 flex-col overflow-hidden p-0 pb-0">
               {children}
diff --git a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
index d8b9852e57b..91b77a4f28c 100644
--- a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
@@ -159,7 +159,7 @@ const AppInfoDetailPanel = ({
           </div>
         </div>
         {appDetail.description && (
-          <p className="overflow-wrap-anywhere max-h-[105px] w-full max-w-full overflow-y-auto system-xs-regular wrap-break-word whitespace-normal text-text-tertiary">
+          <p className="overflow-wrap-anywhere max-h-26.25 w-full max-w-full overflow-y-auto system-xs-regular wrap-break-word whitespace-normal text-text-tertiary">
             {appDetail.description}
           </p>
         )}
diff --git a/web/app/components/app-sidebar/app-info/app-info-modals.tsx b/web/app/components/app-sidebar/app-info/app-info-modals.tsx
index 873e3bea8d9..5d0f7e6eb91 100644
--- a/web/app/components/app-sidebar/app-info/app-info-modals.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-modals.tsx
@@ -178,7 +178,7 @@ const AppInfoModals = ({
                   <button
                     type="button"
                     onClick={() => setConfirmDeleteInput(appDetail.name)}
-                    className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full bg-black/[0.06] px-2.5 py-1 system-xs-medium text-text-secondary hover:bg-black/[0.1]"
+                    className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full bg-black/6 px-2.5 py-1 system-xs-medium text-text-secondary hover:bg-black/10"
                   >
                     {t(($) => $['operation.fill'], { ns: 'common' })}
                   </button>
diff --git a/web/app/components/app-sidebar/dataset-detail-section.tsx b/web/app/components/app-sidebar/dataset-detail-section.tsx
index b9e5e2c19b9..77cd0b82c5c 100644
--- a/web/app/components/app-sidebar/dataset-detail-section.tsx
+++ b/web/app/components/app-sidebar/dataset-detail-section.tsx
@@ -137,11 +137,11 @@ const DatasetDetailSection = ({ expand = true }: DatasetDetailSectionProps) => {
     >
       <div className={cn('flex min-h-0 flex-1 flex-col', expand ? 'px-2 pb-2' : 'pb-2')}>
         {!expand && (
-          <div className="flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-[3px]">
+          <div className="flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-0.75">
             <Divider
               type="horizontal"
               bgStyle="solid"
-              className="my-0 h-px w-[27px] bg-divider-subtle"
+              className="my-0 h-px w-6.75 bg-divider-subtle"
             />
           </div>
         )}
diff --git a/web/app/components/app-sidebar/dataset-info/menu.tsx b/web/app/components/app-sidebar/dataset-info/menu.tsx
index 8d6644feefb..5927443f013 100644
--- a/web/app/components/app-sidebar/dataset-info/menu.tsx
+++ b/web/app/components/app-sidebar/dataset-info/menu.tsx
@@ -30,7 +30,7 @@ const Menu = ({
   const runtimeMode = useDatasetDetailContextWithSelector((state) => state.dataset?.runtime_mode)
 
   return (
-    <div className="flex w-[200px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
+    <div className="flex w-50 flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
       <div className="flex flex-col p-1">
         {showEdit && (
           <MenuItem
diff --git a/web/app/components/app-sidebar/nav-link/index.tsx b/web/app/components/app-sidebar/nav-link/index.tsx
index aed01c81ed0..8c6d9a2b486 100644
--- a/web/app/components/app-sidebar/nav-link/index.tsx
+++ b/web/app/components/app-sidebar/nav-link/index.tsx
@@ -66,7 +66,7 @@ const NavLink = ({
 
   const renderIcon = () => (
     <div className="flex size-5 items-center justify-center">
-      <NavIcon className="size-[18px] shrink-0" aria-hidden="true" />
+      <NavIcon className="size-4.5 shrink-0" aria-hidden="true" />
     </div>
   )
 
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 a3d1cef5501..8b16d5f32e9 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
@@ -33,7 +33,7 @@ const CSVDownload: FC = () => {
       <div className="system-sm-medium text-text-primary">
         {t(($) => $['generation.csvStructureTitle'], { ns: 'share' })}
       </div>
-      <div className="mt-2 max-h-[500px] overflow-auto">
+      <div className="mt-2 max-h-125 overflow-auto">
         <table className="w-full table-fixed border-separate border-spacing-0 rounded-lg border border-divider-regular text-xs">
           <thead className="text-text-tertiary">
             <tr>
@@ -72,7 +72,7 @@ const CSVDownload: FC = () => {
         bom={true}
         data={getTemplate()}
       >
-        <div className="flex h-[18px] items-center space-x-1 system-xs-medium text-text-accent">
+        <div className="flex h-4.5 items-center space-x-1 system-xs-medium text-text-accent">
           <DownloadIcon className="mr-1 size-3" />
           {t(($) => $['batchModal.template'], { ns: 'appAnnotation' })}
         </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 6b387d05dc6..7127758e761 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
@@ -84,7 +84,7 @@ const BatchModal: FC<IBatchModalProps> = ({ appId, isShow, onCancel, onAdded })
 
   return (
     <Dialog open={isShow}>
-      <DialogContent className="w-full max-w-[520px]! overflow-hidden! rounded-xl! border-none px-8 py-6 text-left align-middle">
+      <DialogContent className="w-full max-w-130! overflow-hidden! rounded-xl! border-none px-8 py-6 text-left align-middle">
         <div className="relative pb-1 system-xl-medium text-text-primary">
           {t(($) => $['batchModal.title'], { ns: 'appAnnotation' })}
         </div>
@@ -105,7 +105,7 @@ const BatchModal: FC<IBatchModalProps> = ({ appId, isShow, onCancel, onAdded })
           </div>
         )}
 
-        <div className="mt-[28px] flex justify-end pt-6">
+        <div className="mt-7 flex justify-end pt-6">
           <Button className="mr-2 system-sm-medium text-text-tertiary" onClick={onCancel}>
             {t(($) => $['batchModal.cancel'], { ns: 'appAnnotation' })}
           </Button>
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 195ba37c667..c114b8ca1b3 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
@@ -21,7 +21,7 @@ type Props = Readonly<{
 }>
 
 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')}>
+  <div className={cn(className, 'flex h-4.5 items-center system-xs-medium text-text-tertiary')}>
     <RiEditFill className="mr-1 size-3.5" />
     <div>{title}</div>
     <div
diff --git a/web/app/components/app/annotation/empty-element.tsx b/web/app/components/app/annotation/empty-element.tsx
index d7fa7e38a69..cdf366f04fb 100644
--- a/web/app/components/app/annotation/empty-element.tsx
+++ b/web/app/components/app/annotation/empty-element.tsx
@@ -29,7 +29,7 @@ const EmptyElement: FC = () => {
 
   return (
     <div className="flex h-full items-center justify-center">
-      <div className="box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4">
+      <div className="box-border h-fit w-140 rounded-2xl bg-background-section-burn px-5 py-4">
         <span className="system-md-semibold text-text-secondary">
           {t(($) => $['noData.title'], { ns: 'appAnnotation' })}
           <ThreeDotsIcon className="relative -top-3 -left-1.5 inline" />
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 5fad004b822..e1e88163b64 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
@@ -7,7 +7,7 @@ import { ClockFastForward } from '@/app/components/base/icons/src/vender/line/ti
 const HitHistoryNoData: FC = () => {
   const { t } = useTranslation()
   return (
-    <div className="mx-auto mt-20 w-[480px] space-y-2 rounded-2xl bg-background-section-burn p-5">
+    <div className="mx-auto mt-20 w-120 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="size-5 text-text-tertiary" />
       </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 df14922184d..26feeab2343 100644
--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@@ -144,7 +144,7 @@ const ViewAnnotationModal: FC<Props> = ({ appId, isShow, onHide, item, onSave, o
       <HitHistoryNoData />
     ) : (
       <div>
-        <table className={cn('w-full min-w-[440px] border-collapse border-0')}>
+        <table className={cn('w-full min-w-110 border-collapse border-0')}>
           <thead className="system-xs-medium-uppercase text-text-tertiary">
             <tr>
               <td className="w-5 rounded-l-lg bg-background-section-burn pr-1 pl-2 whitespace-nowrap">
@@ -162,7 +162,7 @@ const ViewAnnotationModal: FC<Props> = ({ appId, isShow, onHide, item, onSave, o
               <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">
                 {t(($) => $['hitHistoryTable.score'], { ns: 'appAnnotation' })}
               </td>
-              <td className="w-[160px] rounded-r-lg bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">
+              <td className="w-40 rounded-r-lg bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">
                 {t(($) => $['hitHistoryTable.time'], { ns: 'appAnnotation' })}
               </td>
             </tr>
@@ -174,19 +174,19 @@ const ViewAnnotationModal: FC<Props> = ({ appId, isShow, onHide, item, onSave, o
                 className="cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover"
               >
                 <td
-                  className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
+                  className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
                   title={item.question}
                 >
                   {item.question}
                 </td>
                 <td
-                  className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
+                  className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
                   title={item.match}
                 >
                   {item.match}
                 </td>
                 <td
-                  className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
+                  className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
                   title={item.response}
                 >
                   {item.response}
@@ -241,7 +241,7 @@ const ViewAnnotationModal: FC<Props> = ({ appId, isShow, onHide, item, onSave, o
                   <div className="flex h-6 items-center justify-between pr-5 pl-6">
                     <DrawerTitle render={<div />} className="min-w-0">
                       <TabSlider
-                        className="relative top-[9px] shrink-0"
+                        className="relative top-2.25 shrink-0"
                         value={activeTab}
                         onChange={(v) => setActiveTab(v as TabType)}
                         options={tabs}
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 e11c60308e9..84642946a96 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
@@ -19,7 +19,7 @@ const AccessControlDialog = ({ className, children, show, onClose }: DialogProps
     <Dialog open={show} disablePointerDismissal onOpenChange={(open) => !open && close()}>
       <DialogContent
         className={cn(
-          'h-auto max-h-[calc(100dvh-2rem)] min-h-[323px] w-[600px] max-w-none overflow-y-auto rounded-2xl border-none bg-components-panel-bg p-0 shadow-xl transition-all',
+          'h-auto max-h-[calc(100dvh-2rem)] min-h-80.75 w-150 max-w-none overflow-y-auto rounded-2xl border-none bg-components-panel-bg p-0 shadow-xl transition-all',
           className,
         )}
       >
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 8eb5bd53794..5f2edf5f659 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
@@ -118,7 +118,7 @@ export default function AddMemberOrGroupDialog() {
         aria-label={t(($) => $['operation.add'], { ns: 'common' })}
         icon={false}
         size="small"
-        className="h-6 w-auto min-w-[52px] shrink-0 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 data-popup-open:bg-state-accent-hover"
+        className="h-6 w-auto min-w-13 shrink-0 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 data-popup-open:bg-state-accent-hover"
       >
         <span className="inline-flex min-w-0 items-center justify-center gap-x-0.5 whitespace-nowrap">
           <span className="i-ri-add-circle-fill size-4 shrink-0" aria-hidden="true" />
@@ -304,7 +304,7 @@ function GroupItem({ group, subject }: GroupItemProps) {
           <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"
+                className="h-3.5 w-3.5 text-components-avatar-shape-fill-stop-0"
                 aria-hidden="true"
               />
             </div>
@@ -321,7 +321,7 @@ function GroupItem({ group, subject }: GroupItemProps) {
         onPointerDown={(event) => event.preventDefault()}
         onClick={handleExpandClick}
       >
-        <span className="px-[3px]">
+        <span className="px-0.75">
           {t(($) => $['accessControlDialog.operateGroupAndMember.expand'], { ns: 'app' })}
         </span>
         <RiArrowRightSLine className="size-4" aria-hidden="true" />
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 98f76f3aa64..dadef6c4e2a 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
@@ -54,7 +54,7 @@ export default function SpecificGroupsOrMembers() {
         </div>
       </div>
       <div className="px-1 pb-1">
-        <div className="flex max-h-[400px] flex-col gap-y-2 overflow-y-auto rounded-lg bg-background-section p-2">
+        <div className="flex max-h-100 flex-col gap-y-2 overflow-y-auto rounded-lg bg-background-section p-2">
           {isPending ? <Loading /> : <RenderGroupsAndMembers />}
         </div>
       </div>
@@ -114,7 +114,7 @@ function GroupItem({ group }: GroupItemProps) {
   return (
     <BaseItem
       icon={
-        <RiOrganizationChart className="h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0" />
+        <RiOrganizationChart className="h-3.5 w-3.5 text-components-avatar-shape-fill-stop-0" />
       }
       onRemove={handleRemoveGroup}
     >
@@ -165,7 +165,7 @@ function BaseItem({ icon, onRemove, children }: BaseItemProps) {
         aria-label={t(($) => $['operation.remove'], { ns: 'common' })}
         onClick={onRemove}
       >
-        <RiCloseCircleFill className="h-[14px] w-[14px] text-text-quaternary" aria-hidden="true" />
+        <RiCloseCircleFill className="h-3.5 w-3.5 text-text-quaternary" aria-hidden="true" />
       </button>
     </div>
   )
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 fabae55ddb6..219c5116868 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
@@ -69,12 +69,12 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
         </>
       </DropdownMenuTrigger>
       <DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="w-[288px] p-1">
-        <div className="flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary">
+        <div className="flex h-5.5 items-center px-3 text-xs font-medium text-text-tertiary">
           {t(($) => $.publishAs, { ns: 'appDebug' })}
         </div>
         {validModelConfigs.map((item, index) => (
           <DropdownMenuItem key={item.id} className="gap-0 px-3" onClick={() => onSelect(item)}>
-            <span className="min-w-[18px] italic">#{index + 1}</span>
+            <span className="min-w-4.5 italic">#{index + 1}</span>
             <ModelIcon modelName={item.model} provider={item.providerItem} className="ml-2" />
             <div
               className="ml-1 truncate text-text-secondary"
diff --git a/web/app/components/app/app-publisher/sections.tsx b/web/app/components/app/app-publisher/sections.tsx
index eb4bbc6f0e3..95f1b532095 100644
--- a/web/app/components/app/app-publisher/sections.tsx
+++ b/web/app/components/app/app-publisher/sections.tsx
@@ -184,7 +184,7 @@ export const PublisherSummarySection = ({
               <p className="mt-1 text-xs/4 text-text-secondary">
                 {t(($) => $['publishLimit.startNodeDesc'], { ns: 'workflow' })}
               </p>
-              <UpgradeBtn isShort className="mt-[9px] mb-[12px] h-[32px] w-[93px] self-start" />
+              <UpgradeBtn isShort className="mt-2.25 mb-3 h-8 w-23.25 self-start" />
             </div>
           )}
         </>
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 b6dcd6a3ce6..60ba341ee5d 100644
--- a/web/app/components/app/app-publisher/version-info-modal.tsx
+++ b/web/app/components/app/app-publisher/version-info-modal.tsx
@@ -74,7 +74,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
         if (!open) onClose()
       }}
     >
-      <DialogContent className="w-full max-w-[480px] overflow-hidden! border-none p-0 text-left align-middle">
+      <DialogContent className="w-full max-w-120 overflow-hidden! border-none p-0 text-left align-middle">
         <div className="relative w-full p-6 pr-14 pb-4">
           <div className="title-2xl-semi-bold text-text-primary first-letter:capitalize">
             {versionInfo?.marked_name
@@ -87,7 +87,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
             aria-label={t(($) => $['operation.close'], { ns: 'common' })}
             onClick={onClose}
           >
-            <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" aria-hidden="true" />
+            <RiCloseLine className="h-4.5 w-4.5 text-text-tertiary" aria-hidden="true" />
           </button>
         </div>
         <div className="flex flex-col gap-y-4 px-6 py-3">
diff --git a/web/app/components/app/configuration/base/group-name/index.tsx b/web/app/components/app/configuration/base/group-name/index.tsx
index a54a829bb2d..0472cda0bd4 100644
--- a/web/app/components/app/configuration/base/group-name/index.tsx
+++ b/web/app/components/app/configuration/base/group-name/index.tsx
@@ -9,7 +9,7 @@ type IGroupNameProps = {
 const GroupName: FC<IGroupNameProps> = ({ name }) => {
   return (
     <div className="mb-1 flex items-center">
-      <div className="mr-3 text-xs leading-[18px] font-semibold text-text-tertiary uppercase">
+      <div className="mr-3 text-xs leading-4.5 font-semibold text-text-tertiary uppercase">
         {name}
       </div>
       <div
diff --git a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
index 3662e24e0c9..f829bf1f54b 100644
--- a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
@@ -20,7 +20,7 @@ const FormattingChanged: FC<IFormattingChangedProps> = ({ onConfirm }) => {
       })}
       footer={
         <div className="flex space-x-2">
-          <Button variant="primary" className="flex w-[96px]! justify-start" onClick={onConfirm}>
+          <Button variant="primary" className="flex w-24! justify-start" onClick={onConfirm}>
             <span className="text-[13px] font-medium">
               {t(($) => $['feature.dataSet.queryVariable.ok'], { ns: 'appDebug' })}
             </span>
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 5cbb09f043a..0cbc6abea55 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
@@ -11,8 +11,8 @@ const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({ onSetting }) => {
   const { t } = useTranslation()
 
   return (
-    <div className="flex grow flex-col items-center justify-center pb-[120px]">
-      <div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
+    <div className="flex grow flex-col items-center justify-center pb-30">
+      <div className="flex w-full max-w-100 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 size-5 text-text-tertiary" />
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 cd39405509c..28d3574b8ce 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
@@ -159,7 +159,7 @@ const AdvancedPromptInput: FC<Props> = ({
     >
       <div className="flex items-center pr-2">
         <RiErrorWarningFill className="mr-1 h-4 w-4 text-[#F79009]" />
-        <div className="text-[13px] leading-[18px] font-medium text-[#DC6803]">
+        <div className="text-[13px] leading-4.5 font-medium text-[#DC6803]">
           {t(($) => $['promptMode.contextMissing'], { ns: 'appDebug' })}
         </div>
       </div>
@@ -221,13 +221,13 @@ const AdvancedPromptInput: FC<Props> = ({
         )}
 
         <PromptEditorHeightResizeWrap
-          className="min-h-[102px] overflow-y-auto px-4 text-sm text-text-secondary"
+          className="min-h-25.5 overflow-y-auto px-4 text-sm text-text-secondary"
           height={editorHeight}
           minHeight={minHeight}
           onHeightChange={setEditorHeight}
           footer={
             <div className="flex pb-2 pl-4">
-              <div className="h-[18px] rounded-md bg-divider-regular px-1 text-xs leading-[18px] text-text-tertiary">
+              <div className="h-4.5 rounded-md bg-divider-regular px-1 text-xs leading-4.5 text-text-tertiary">
                 {value.length}
               </div>
             </div>
@@ -235,7 +235,7 @@ const AdvancedPromptInput: FC<Props> = ({
           hideResize={noResize}
         >
           <PromptEditor
-            className="min-h-[84px]"
+            className="min-h-21"
             value={value}
             contextBlock={{
               show: true,
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 f6eab489f37..a65782e8343 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
@@ -51,7 +51,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
     >
       <div
         ref={mainContentRef}
-        className="w-[420px] rounded-xl bg-components-panel-bg p-6"
+        className="w-105 rounded-xl bg-components-panel-bg p-6"
         style={{
           boxShadow:
             '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)',
@@ -65,7 +65,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
             <div className="text-sm font-medium text-text-primary">
               {t(($) => $.autoAddVar, { ns: 'appDebug' })}
             </div>
-            <div className="mt-[15px] flex max-h-[66px] flex-wrap space-x-1 overflow-y-auto px-1">
+            <div className="mt-3.75 flex max-h-16.5 flex-wrap space-x-1 overflow-y-auto px-1">
               {varNameArr.map((name) => (
                 <VarHighlight key={name} name={name} />
               ))}
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 9236e969700..2a82242c7a0 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
@@ -25,12 +25,12 @@ const EditModal: FC<Props> = ({ isShow, saveLoading, data, onClose, onSave }) =>
         if (!open) onClose()
       }}
     >
-      <DialogContent className="w-full max-w-[480px] overflow-hidden! border-none p-6 text-left align-middle">
+      <DialogContent className="w-full max-w-120 overflow-hidden! border-none p-6 text-left align-middle">
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {t(($) => $['feature.conversationHistory.editModal.title'], { ns: 'appDebug' })}
         </DialogTitle>
 
-        <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">
+        <div className="mt-6 text-sm leading-5.25 font-medium text-text-primary">
           {t(($) => $['feature.conversationHistory.editModal.userPrefix'], { ns: 'appDebug' })}
         </div>
         <input
@@ -44,7 +44,7 @@ const EditModal: FC<Props> = ({ isShow, saveLoading, data, onClose, onSave }) =>
           }
         />
 
-        <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">
+        <div className="mt-6 text-sm leading-5.25 font-medium text-text-primary">
           {t(($) => $['feature.conversationHistory.editModal.assistantPrefix'], { ns: 'appDebug' })}
         </div>
         <input
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx
index 1b10dd9dd68..2f23e360f51 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx
@@ -31,7 +31,7 @@ const HistoryPanel: FC<Props> = ({ showWarning, onShowEditModal }) => {
           <div className="text-xs text-text-tertiary">
             {t(($) => $['feature.conversationHistory.description'], { ns: 'appDebug' })}
           </div>
-          <div className="ml-3 h-[14px] w-px bg-divider-regular"></div>
+          <div className="ml-3 h-3.5 w-px bg-divider-regular"></div>
           <OperationButton operation="edit" onClick={onShowEditModal} />
         </div>
       }
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 13dd4d9278c..94520e6d5c0 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
@@ -19,7 +19,7 @@ const MessageTypeSelector: FC<Props> = ({ value, onChange }) => {
     setHide()
   }, ref)
   return (
-    <div className="relative left-[-8px]" ref={ref}>
+    <div className="relative -left-2" ref={ref}>
       <div
         onClick={toggleShow}
         className={cn(
@@ -31,7 +31,7 @@ const MessageTypeSelector: FC<Props> = ({ value, onChange }) => {
         <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">
+        <div className="absolute top-7.5 z-10 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
           {allTypes.map((type) => (
             <div
               key={type}
@@ -39,7 +39,7 @@ const MessageTypeSelector: FC<Props> = ({ value, onChange }) => {
                 setHide()
                 onChange(type)
               }}
-              className="flex h-9 min-w-[44px] cursor-pointer items-center rounded-lg px-3 text-sm font-medium text-text-secondary uppercase hover:bg-state-base-hover"
+              className="flex h-9 min-w-11 cursor-pointer items-center rounded-lg px-3 text-sm font-medium text-text-secondary uppercase hover:bg-state-base-hover"
             >
               {type}
             </div>
diff --git a/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx b/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
index 0dbd29cf288..e249b63cc64 100644
--- a/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
+++ b/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
@@ -94,7 +94,7 @@ const PromptEditorHeightResizeWrap: FC<Props> = ({
           className="absolute bottom-0 left-0 flex h-2 w-full cursor-row-resize justify-center"
           onMouseDown={handleStartResize}
         >
-          <div className="h-[3px] w-5 rounded-xs bg-gray-300"></div>
+          <div className="h-0.75 w-5 rounded-xs bg-gray-300"></div>
         </div>
       )}
     </div>
diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index 61f9e60ad49..06685462a47 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -219,21 +219,21 @@ const Prompt: FC<ISimplePromptInput> = ({
         )}
 
         <PromptEditorHeightResizeWrap
-          className="min-h-[228px] rounded-t-xl bg-background-default px-4 pt-2 text-sm text-text-secondary"
+          className="min-h-57 rounded-t-xl bg-background-default px-4 pt-2 text-sm text-text-secondary"
           height={editorHeight}
           minHeight={minHeight}
           onHeightChange={setEditorHeight}
           hideResize={noResize}
           footer={
             <div className="flex rounded-b-xl bg-background-default pb-2 pl-4">
-              <div className="h-[18px] rounded-md bg-components-badge-bg-gray-soft px-1 text-xs leading-[18px] text-text-tertiary">
+              <div className="h-4.5 rounded-md bg-components-badge-bg-gray-soft px-1 text-xs leading-4.5 text-text-tertiary">
                 {promptTemplate.length}
               </div>
             </div>
           }
         >
           <PromptEditor
-            className="min-h-[210px]"
+            className="min-h-52.5"
             compact
             value={promptTemplate}
             contextBlock={{
diff --git a/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx b/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
index 43563dff4d9..4a9874dcfb1 100644
--- a/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
@@ -270,7 +270,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
             value={jsonSchemaStr}
             onChange={onJSONSchemaChange}
             noWrapper
-            className="h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
+            className="h-20 overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
             placeholder={<div className="whitespace-pre">{jsonConfigPlaceHolder}</div>}
           />
         </Field>
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 35fa59397b4..53dd2bbbe03 100644
--- a/web/app/components/app/configuration/config-var/var-item.tsx
+++ b/web/app/components/app/configuration/config-var/var-item.tsx
@@ -39,7 +39,7 @@ 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',
+        'group relative mb-1 flex h-8.5 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,
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 ac1a5f374ea..d719fab41c5 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
@@ -48,7 +48,7 @@ const ParamConfigContent: FC = () => {
       <div className="space-y-6 pt-3">
         <div>
           <div className="mb-2 flex items-center space-x-1">
-            <div className="text-[13px] leading-[18px] font-semibold text-text-secondary">
+            <div className="text-[13px] leading-4.5 font-semibold text-text-secondary">
               {t(($) => $['vision.visionSettings.resolution'], { ns: 'appDebug' })}
             </div>
             <Infotip
@@ -90,7 +90,7 @@ const ParamConfigContent: FC = () => {
           </div>
         </div>
         <div>
-          <div className="mb-2 text-[13px] leading-[18px] font-semibold text-text-secondary">
+          <div className="mb-2 text-[13px] leading-4.5 font-semibold text-text-secondary">
             {t(($) => $['vision.visionSettings.uploadMethod'], { ns: 'appDebug' })}
           </div>
           <div className="flex items-center gap-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 9bfb56a00dc..39a6feb0ab1 100644
--- a/web/app/components/app/configuration/config-vision/param-config.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config.tsx
@@ -27,7 +27,7 @@ const ParamsConfig: FC = () => {
         sideOffset={4}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="w-80 space-y-3 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-lg sm:w-[412px]">
+        <div className="w-80 space-y-3 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-lg sm:w-103">
           <ParamConfigContent />
         </div>
       </PopoverContent>
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 ecbbb9528fc..3ae944d569c 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
@@ -39,7 +39,7 @@ export function AgentSetting({ isChatModel, payload, isFunctionCall, onCancel, o
         if (!open) onCancel()
       }}
     >
-      <DialogContent className="top-2 right-2 bottom-2 left-auto flex h-auto max-h-none w-[640px] max-w-[calc(100vw-1rem)] translate-x-0 translate-y-0 flex-col overflow-hidden rounded-xl p-0">
+      <DialogContent className="top-2 right-2 bottom-2 left-auto flex h-auto max-h-none w-160 max-w-[calc(100vw-1rem)] translate-x-0 translate-y-0 flex-col overflow-hidden rounded-xl p-0">
         <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pr-5 pl-6">
           <DialogTitle className="text-base leading-6 font-semibold text-text-primary">
             {t(($) => $['agent.setting.name'], { ns: 'appDebug' })}
@@ -51,7 +51,7 @@ export function AgentSetting({ isChatModel, payload, isFunctionCall, onCancel, o
         </div>
         {/* Body */}
         <div
-          className="grow overflow-y-auto border-b border-divider-regular p-6 pt-5 pb-[68px]"
+          className="grow overflow-y-auto border-b border-divider-regular p-6 pt-5 pb-17"
           style={{
             borderBottom: 'rgba(0, 0, 0, 0.05)',
           }}
@@ -63,7 +63,7 @@ export function AgentSetting({ isChatModel, payload, isFunctionCall, onCancel, o
             name={t(($) => $['agent.agentMode'], { ns: 'appDebug' })}
             description={t(($) => $['agent.agentModeDes'], { ns: 'appDebug' })}
           >
-            <div className="text-[13px] leading-[18px] font-medium text-text-primary">
+            <div className="text-[13px] leading-4.5 font-medium text-text-primary">
               {isFunctionCall
                 ? t(($) => $['agent.agentModeType.functionCall'], { ns: 'appDebug' })
                 : t(($) => $['agent.agentModeType.ReACT'], { ns: 'appDebug' })}
@@ -81,7 +81,7 @@ export function AgentSetting({ isChatModel, payload, isFunctionCall, onCancel, o
             <Fieldset className="flex items-center">
               <FieldsetLegend className="sr-only">{maximumIterationsLabel}</FieldsetLegend>
               <Slider
-                className="mr-3 w-[156px]"
+                className="mr-3 w-39"
                 min={maxIterationsMin}
                 max={MAX_ITERATIONS_NUM}
                 value={tempPayload.max_iteration}
@@ -121,11 +121,11 @@ export function AgentSetting({ isChatModel, payload, isFunctionCall, onCancel, o
               <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">
+              <div className="h-99 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>
               <div className="px-4">
-                <div className="inline-flex h-5 items-center rounded-md bg-components-input-bg-normal px-1 text-xs leading-[18px] font-medium text-text-tertiary">
+                <div className="inline-flex h-5 items-center rounded-md bg-components-input-bg-normal px-1 text-xs leading-4.5 font-medium text-text-tertiary">
                   {
                     (isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion)
                       .length
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 08473d761cd..9a4ea6422d6 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
@@ -183,7 +183,7 @@ const AgentTools: FC = () => {
         }
         headerRight={
           <div className="flex items-center">
-            <div className="text-xs leading-[18px] font-normal text-text-tertiary">
+            <div className="text-xs leading-4.5 font-normal text-text-tertiary">
               {tools.filter((item) => !!item.enabled).length}/{tools.length}
               &nbsp;
               {t(($) => $['agent.tools.enabled'], { ns: 'appDebug' })}
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 184179b694f..af9cdfe71be 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
@@ -179,7 +179,7 @@ const SettingBuiltInTool: FC<Props> = ({
         <DrawerViewport>
           <DrawerPopup
             className={cn(
-              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-6 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-6 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[420px] data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
+              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-6 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-6 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-105 data-[swipe-direction=right]:max-w-105 data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
             )}
           >
             <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
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 0d723785481..642279ada6e 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
@@ -297,11 +297,11 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         if (!open) onClose()
       }}
     >
-      <DialogContent className="h-[min(680px,calc(100dvh-2rem))] max-h-none! w-[1140px] max-w-none! min-w-[1140px] overflow-hidden! border-none p-0! text-left align-middle">
+      <DialogContent className="h-[min(680px,calc(100dvh-2rem))] max-h-none! w-285 max-w-none! min-w-285 overflow-hidden! border-none p-0! text-left align-middle">
         <div className="flex h-full min-h-0 flex-wrap">
-          <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
+          <div className="h-full w-142.5 shrink-0 overflow-y-auto border-r border-divider-regular p-6">
             <div className="mb-5">
-              <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>
+              <div className={`text-lg leading-7 font-bold ${s.textGradient}`}>
                 {t(($) => $['generate.title'], { ns: 'appDebug' })}
               </div>
               <div className="mt-1 text-[13px] font-normal text-text-tertiary">
@@ -323,7 +323,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
             {isBasicMode && (
               <div className="mt-4">
                 <div className="flex items-center">
-                  <div className="mr-3 shrink-0 text-xs leading-[18px] font-semibold text-text-tertiary uppercase">
+                  <div className="mr-3 shrink-0 text-xs leading-4.5 font-semibold text-text-tertiary uppercase">
                     {t(($) => $['generate.tryIt'], { ns: 'appDebug' })}
                   </div>
                   <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 2054d2d523d..ae4b7413e5e 100644
--- a/web/app/components/app/configuration/config/automatic/idea-output.tsx
+++ b/web/app/components/app/configuration/config/automatic/idea-output.tsx
@@ -41,7 +41,7 @@ const IdeaOutput: FC<Props> = ({ value, onChange }) => {
       {!isFoldIdeaOutput && (
         <Textarea
           aria-label={t(($) => $[`${i18nPrefix}.idealOutput`], { ns: 'appDebug' })}
-          className="h-[80px]"
+          className="h-20"
           placeholder={t(($) => $[`${i18nPrefix}.idealOutputPlaceholder`], { ns: 'appDebug' })}
           value={value}
           onValueChange={(value) => onChange(value)}
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index 08b52f58436..22a740123b4 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -70,7 +70,7 @@ const InstructionEditor: FC<Props> = ({
         instanceId={editorKey}
         placeholder={placeholder}
         placeholderClassName="px-4 pt-3"
-        className={cn('min-h-[240px] pb-8')}
+        className={cn('min-h-60 pb-8')}
         value={value}
         workflowVariableBlock={{
           show: true,
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 1f1cc64f097..f1aab5613fa 100644
--- a/web/app/components/app/configuration/config/automatic/version-selector.tsx
+++ b/web/app/components/app/configuration/config/automatic/version-selector.tsx
@@ -49,7 +49,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
         alignOffset={-12}
         popupClassName="w-[208px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
       >
-        <div className="flex h-[22px] items-center px-3 pl-3 system-xs-medium-uppercase text-text-tertiary">
+        <div className="flex h-5.5 items-center px-3 pl-3 system-xs-medium-uppercase text-text-tertiary">
           {t(($) => $['generate.versions'], { ns: 'appDebug' })}
         </div>
         <DropdownMenuRadioGroup
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 bb2a52dca9b..49a49f268fa 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
@@ -211,11 +211,11 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = ({
         if (!open) onClose()
       }}
     >
-      <DialogContent className="h-[min(680px,calc(100dvh-2rem))] max-h-none! w-full min-w-[1140px] overflow-hidden! border-none p-0! text-left align-middle">
+      <DialogContent className="h-[min(680px,calc(100dvh-2rem))] max-h-none! w-full min-w-285 overflow-hidden! border-none p-0! text-left align-middle">
         <div className="relative flex h-full min-h-0 flex-wrap">
-          <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
+          <div className="h-full w-142.5 shrink-0 overflow-y-auto border-r border-divider-regular p-6">
             <div className="mb-5">
-              <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>
+              <div className={`text-lg leading-7 font-bold ${s.textGradient}`}>
                 {t(($) => $['codegen.title'], { ns: 'appDebug' })}
               </div>
               <div className="mt-1 text-[13px] font-normal text-text-tertiary">
diff --git a/web/app/components/app/configuration/config/index.tsx b/web/app/components/app/configuration/config/index.tsx
index 37d45153a9c..8c049c7601b 100644
--- a/web/app/components/app/configuration/config/index.tsx
+++ b/web/app/components/app/configuration/config/index.tsx
@@ -59,7 +59,7 @@ const Config: FC = () => {
 
   return (
     <>
-      <div className="relative h-0 grow overflow-y-auto px-6 pb-[50px]">
+      <div className="relative h-0 grow overflow-y-auto px-6 pb-12.5">
         {/* Template */}
         <ConfigPrompt
           mode={mode}
diff --git a/web/app/components/app/configuration/configuration-view.tsx b/web/app/components/app/configuration/configuration-view.tsx
index 67f6e226559..aa0425b5cb3 100644
--- a/web/app/components/app/configuration/configuration-view.tsx
+++ b/web/app/components/app/configuration/configuration-view.tsx
@@ -131,7 +131,7 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
       <FeaturesProvider features={featuresData}>
         <MittProvider>
           <div className="flex h-full flex-col">
-            <div className="relative flex h-[200px] grow pt-14">
+            <div className="relative flex h-50 grow pt-14">
               <div className="bg-default-subtle absolute top-0 left-0 h-14 w-full">
                 <div className="flex h-14 items-center justify-between px-6">
                   <div className="flex items-center gap-2">
@@ -168,7 +168,7 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
                           debugWithMultipleModel={debugWithMultipleModel}
                           onDebugWithMultipleModelChange={onEnableMultipleModelDebug}
                         />
-                        <Divider type="vertical" className="mx-2 h-[14px]" />
+                        <Divider type="vertical" className="mx-2 h-3.5" />
                       </>
                     )}
                     {isMobile && (
@@ -187,7 +187,7 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
                 </div>
               </div>
               <div
-                className={`flex size-full shrink-0 flex-col sm:w-1/2 ${debugWithMultipleModel && 'max-w-[560px]'}`}
+                className={`flex size-full shrink-0 flex-col sm:w-1/2 ${debugWithMultipleModel && 'max-w-140'}`}
               >
                 <Config />
               </div>
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 8fdcd07a06c..c8ef5d52b6f 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
@@ -124,7 +124,7 @@ const Item: FC<ItemProps> = ({ config, onSave, onRemove, readonly = false, edita
         <DrawerPortal>
           <DrawerBackdrop className={cn(!isMobile && 'bg-transparent')} />
           <DrawerViewport>
-            <DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[640px] data-[swipe-direction=right]:rounded-xl">
+            <DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-160 data-[swipe-direction=right]:rounded-xl">
               <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
                 {showSettingsModal && (
                   <SettingsModal
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 c548f0e8863..77bcef22106 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
@@ -20,11 +20,11 @@ export type Props = Readonly<{
 }>
 
 const VarItem: FC<{ item: Option }> = ({ item }) => (
-  <div className="flex h-[18px] items-center space-x-1 rounded-sm bg-[#EFF8FF] px-1">
+  <div className="flex h-4.5 items-center space-x-1 rounded-sm bg-[#EFF8FF] px-1">
     <IconTypeIcon type={item.type as IInputTypeIconProps['type']} className="text-[#1570EF]" />
     <div className="flex text-xs font-medium text-[#1570EF]">
       <span className="opacity-60">{'{{'}</span>
-      <span className="max-w-[150px] truncate">{item.value}</span>
+      <span className="max-w-37.5 truncate">{item.value}</span>
       <span className="opacity-60">{'}}'}</span>
     </div>
   </div>
@@ -82,7 +82,7 @@ const VarPicker: FC<Props> = ({
         popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
       >
         {options.length > 0 ? (
-          <div className="max-h-[50vh] w-[240px] overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
+          <div className="max-h-[50vh] w-60 overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
             {options.map(({ name, value, type }) => (
               <div
                 key={value}
@@ -97,7 +97,7 @@ const VarPicker: FC<Props> = ({
             ))}
           </div>
         ) : (
-          <div className="w-[240px] rounded-lg border border-components-panel-border bg-components-panel-bg p-6 shadow-lg">
+          <div className="w-60 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>
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 cd94714c69d..ee845f30757 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
@@ -265,7 +265,7 @@ const ConfigContent: FC<Props> = ({
                     onCheckedChange={handleManuallyToggleRerank}
                   />
                 )}
-                <div className="ml-1 system-sm-semibold leading-[32px] text-text-secondary">
+                <div className="ml-1 system-sm-semibold leading-8 text-text-secondary">
                   {t(($) => $['modelProvider.rerankModel.key'], { ns: 'common' })}
                 </div>
                 <Infotip
@@ -341,7 +341,7 @@ const ConfigContent: FC<Props> = ({
       {isInWorkflow && type === RETRIEVE_TYPE.oneWay && (
         <div className="mt-4">
           <div className="flex items-center space-x-0.5">
-            <div className="text-[13px] leading-[32px] font-medium text-text-primary">
+            <div className="text-[13px] leading-8 font-medium text-text-primary">
               {t(($) => $['modelProvider.systemReasoningModel.key'], { ns: 'common' })}
             </div>
             <Infotip
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 3b6b516a7c0..fab8ac18683 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
@@ -125,7 +125,7 @@ const ParamsConfig = ({ disabled, selectedDatasets }: ParamsConfigProps) => {
             }
           }}
         >
-          <DialogContent className="w-full max-w-[480px] border-none text-left align-middle sm:min-w-[528px]">
+          <DialogContent className="w-full max-w-120 border-none text-left align-middle sm:min-w-132">
             <ConfigContent
               datasetConfigs={tempDataSetConfigs}
               onChange={handleSetTempDataSetConfigs}
diff --git a/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
index 829b4d3039b..b6722b8a78d 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
@@ -44,7 +44,7 @@ const WeightedScore = ({ value, onChange = noop, readonly = false }: WeightedSco
           />
         </div>
         <div className="mt-3 flex justify-between">
-          <div className="flex w-[90px] shrink-0 items-center system-xs-semibold-uppercase text-util-colors-blue-light-blue-light-500">
+          <div className="flex w-22.5 shrink-0 items-center system-xs-semibold-uppercase text-util-colors-blue-light-blue-light-500">
             <div
               className="mr-1 truncate uppercase"
               title={t(($) => $['weightedScore.semantic'], { ns: 'dataset' }) || ''}
@@ -53,7 +53,7 @@ const WeightedScore = ({ value, onChange = noop, readonly = false }: WeightedSco
             </div>
             {formatNumber(value.value[0]!)}
           </div>
-          <div className="flex w-[90px] shrink-0 items-center justify-end system-xs-semibold-uppercase text-util-colors-teal-teal-500">
+          <div className="flex w-22.5 shrink-0 items-center justify-end system-xs-semibold-uppercase text-util-colors-teal-teal-500">
             {formatNumber(value.value[1]!)}
             <div
               className="ml-1 truncate uppercase"
diff --git a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
index acc668ebad6..88081a1118b 100644
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
@@ -166,7 +166,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
                       {item.name}
                     </div>
                     {!item.embedding_available && (
-                      <span className="ml-1 shrink-0 rounded-md border border-divider-deep px-1 text-xs leading-[18px] font-normal text-text-tertiary">
+                      <span className="ml-1 shrink-0 rounded-md border border-divider-deep px-1 text-xs leading-4.5 font-normal text-text-tertiary">
                         {t(($) => $.unavailable, { ns: 'dataset' })}
                       </span>
                     )}
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 ce20215f8d7..1d1ab94faac 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
@@ -229,7 +229,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         </div>
       </div>
       {/* Body */}
-      <div className="overflow-y-auto border-b border-divider-regular p-6 pt-5 pb-[68px]">
+      <div className="overflow-y-auto border-b border-divider-regular p-6 pt-5 pb-17">
         <div className={cn(rowClass, 'items-center')}>
           <div className={labelClass}>
             <div className="system-sm-semibold text-text-secondary">
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 182f9749f16..abc84cc8914 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
@@ -73,7 +73,7 @@ const ExternalRetrievalSection: FC<ExternalRetrievalSectionProps> = ({
           {t(($) => $['form.externalKnowledgeAPI'], { ns: 'datasetSettings' })}
         </div>
       </div>
-      <div className="w-full max-w-[480px]">
+      <div className="w-full max-w-120">
         <div className="flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2">
           <ApiConnectionMod className="size-4 text-text-secondary" />
           <div className="overflow-hidden system-sm-medium text-ellipsis text-text-secondary">
@@ -92,7 +92,7 @@ const ExternalRetrievalSection: FC<ExternalRetrievalSectionProps> = ({
           {t(($) => $['form.externalKnowledgeID'], { ns: 'datasetSettings' })}
         </div>
       </div>
-      <div className="w-full max-w-[480px]">
+      <div className="w-full max-w-120">
         <div className="flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2">
           <div className="system-xs-regular text-text-tertiary">
             {currentDataset?.external_knowledge_info.external_knowledge_id}
@@ -125,12 +125,12 @@ const InternalRetrievalSection: FC<InternalRetrievalSectionProps> = ({
   docLink,
 }) => (
   <div className={rowClass}>
-    <div className={cn(labelClass, 'w-auto min-w-[168px]')}>
+    <div className={cn(labelClass, 'w-auto min-w-42')}>
       <div>
         <div className="system-sm-semibold text-text-secondary">
           {t(($) => $['form.retrievalSetting.title'], { ns: 'datasetSettings' })}
         </div>
-        <div className="text-xs leading-[18px] font-normal text-text-tertiary">
+        <div className="text-xs leading-4.5 font-normal text-text-tertiary">
           <a
             target="_blank"
             rel="noopener noreferrer"
@@ -230,10 +230,10 @@ export const RetrievalChangeTip: FC<RetrievalChangeTipProps> = ({
   if (!visible) return null
 
   return (
-    <div className="absolute right-[30px] bottom-[76px] left-[30px] z-10 flex h-10 items-center justify-between rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 shadow-lg">
+    <div className="absolute right-7.5 bottom-19 left-7.5 z-10 flex h-10 items-center justify-between rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 shadow-lg">
       <div className="flex items-center">
         <AlertTriangle className="mr-1 h-3 w-3 text-[#F79009]" />
-        <div className="text-xs leading-[18px] font-medium text-gray-700">{message}</div>
+        <div className="text-xs leading-4.5 font-medium text-gray-700">{message}</div>
       </div>
       <button
         type="button"
diff --git a/web/app/components/app/configuration/debug/chat-user-input.tsx b/web/app/components/app/configuration/debug/chat-user-input.tsx
index fd2679870fa..9268a2b77ba 100644
--- a/web/app/components/app/configuration/debug/chat-user-input.tsx
+++ b/web/app/components/app/configuration/debug/chat-user-input.tsx
@@ -108,7 +108,7 @@ const ChatUserInput = ({ inputs }: Props) => {
                 )}
                 {type === 'paragraph' && (
                   <Textarea
-                    className="h-[120px] grow"
+                    className="h-30 grow"
                     aria-label={name || key}
                     placeholder={name}
                     value={inputs[key] ? `${inputs[key]}` : ''}
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx
index 4cd775f22e6..62e60003387 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx
@@ -115,7 +115,7 @@ const DebugWithMultipleModel = () => {
           <DebugItem
             key={modelConfig.id}
             modelAndParameter={modelConfig}
-            className={`absolute top-0 left-6 min-h-[200px] ${twoLine && index === 0 && 'mr-2'} ${threeLine && (index === 0 || index === 1) && 'mr-2'} ${fourLine && (index === 0 || index === 2) && 'mr-2'} ${fourLine && (index === 0 || index === 1) && 'mb-2'} `}
+            className={`absolute top-0 left-6 min-h-50 ${twoLine && index === 0 && 'mr-2'} ${threeLine && (index === 0 || index === 1) && 'mr-2'} ${fourLine && (index === 0 || index === 2) && 'mr-2'} ${fourLine && (index === 0 || index === 1) && 'mb-2'} `}
             style={{
               width: size.width,
               height: size.height,
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 282d9f3a3c1..4efdfa0af14 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
@@ -80,7 +80,7 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({ modelAndParamet
 
         return (
           <div
-            className={`flex h-8 max-w-[200px] cursor-pointer items-center rounded-lg px-2 ${open && 'bg-state-base-hover'} ${!isEmpty && !isActive && 'bg-[#FFFAEB]!'} `}
+            className={`flex h-8 max-w-50 cursor-pointer items-center rounded-lg px-2 ${open && 'bg-state-base-hover'} ${!isEmpty && !isActive && 'bg-[#FFFAEB]!'} `}
           >
             {iconProvider && !isEmpty && (
               <ModelIcon
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index 8c3e29a03ad..0856cd89ee6 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -432,7 +432,7 @@ const Debug: FC<IDebug> = ({
                   {multipleModelConfigs.length}
                   /4)
                 </Button>
-                <div className="mx-2 h-[14px] w-px bg-divider-regular" />
+                <div className="mx-2 h-3.5 w-px bg-divider-regular" />
               </>
             ) : null}
             {mode !== AppModeEnum.COMPLETION && (
@@ -471,7 +471,7 @@ const Debug: FC<IDebug> = ({
                       </TooltipContent>
                     </Tooltip>
                     {expanded && (
-                      <div className="absolute right-[5px] bottom-[-14px] z-10 h-3 w-3 rotate-45 border-t-[0.5px] border-l-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />
+                      <div className="absolute right-1.25 -bottom-3.5 z-10 h-3 w-3 rotate-45 border-t-[0.5px] border-l-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />
                     )}
                   </div>
                 )}
@@ -534,8 +534,8 @@ const Debug: FC<IDebug> = ({
           {(!modelConfig.provider || !isAPIKeySet) && <HasNotSetAPIKEY onSetting={onSetting} />}
           {/* No model selected */}
           {modelConfig.provider && isAPIKeySet && !modelConfig.model_id && (
-            <div className="flex grow flex-col items-center justify-center pb-[120px]">
-              <div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
+            <div className="flex grow flex-col items-center justify-center pb-30">
+              <div className="flex w-full max-w-100 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 size-5 text-text-tertiary" />
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 b516738e960..d409a76c12d 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -187,7 +187,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                     {type === 'paragraph' && (
                       <Textarea
                         aria-label={name}
-                        className="h-[120px] grow"
+                        className="h-30 grow"
                         placeholder={name}
                         value={inputs[key] ? `${inputs[key]}` : ''}
                         onValueChange={(value) => {
@@ -252,7 +252,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
             ))}
             {visionConfig?.enabled && (
               <div className="mt-3 justify-between xl:flex">
-                <div className="mr-1 w-[120px] shrink-0 py-2 text-sm text-text-primary">
+                <div className="mr-1 w-30 shrink-0 py-2 text-sm text-text-primary">
                   {t(($) => $['imageUploader.imageUpload'], { ns: 'common' })}
                 </div>
                 <div className="grow">
@@ -279,7 +279,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
         )}
         {!userInputFieldCollapse && (
           <div className="flex justify-between border-t border-divider-subtle p-4 pt-3">
-            <Button className="w-[72px]" disabled={debugInputReadonly} onClick={onClear}>
+            <Button className="w-18" disabled={debugInputReadonly} onClick={onClear}>
               {t(($) => $['operation.clear'], { ns: 'common' })}
             </Button>
             {canNotRun && (
@@ -290,7 +290,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                       variant="primary"
                       disabled={canNotRun || !canTestAndRun}
                       onClick={() => onSend?.()}
-                      className="w-[96px]"
+                      className="w-24"
                     >
                       <RiPlayLargeFill className="mr-0.5 size-4 shrink-0" aria-hidden="true" />
                       {t(($) => $['inputs.run'], { ns: 'appDebug' })}
@@ -307,7 +307,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                 variant="primary"
                 disabled={canNotRun || !canTestAndRun}
                 onClick={() => onSend?.()}
-                className="w-[96px]"
+                className="w-24"
               >
                 <RiPlayLargeFill className="mr-0.5 size-4 shrink-0" aria-hidden="true" />
                 {t(($) => $['inputs.run'], { ns: 'appDebug' })}
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 6add0bf6260..8c8425dfafe 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
@@ -115,7 +115,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
 
   return (
     <Dialog open onOpenChange={noop}>
-      <DialogContent className="w-[640px]! max-w-none! p-8! pb-6!">
+      <DialogContent className="w-160! max-w-none! p-8! pb-6!">
         <div className="mb-2 text-xl font-semibold text-text-primary">
           {`${action} ${t(($) => $['variableConfig.apiBasedVar'], { ns: 'appDebug' })}`}
         </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 8c8e24fcb04..05b6d7439f6 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
@@ -42,7 +42,7 @@ const AppCard = ({ app, canCreate, onCreate }: AppCardProps) => {
   return (
     <div
       className={cn(
-        'group relative flex h-[132px] cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 shadow-xs hover:shadow-lg',
+        'group relative flex h-33 cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 shadow-xs hover:shadow-lg',
       )}
     >
       <div className="flex shrink-0 grow-0 items-center gap-3 pb-2">
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 5313b21d24e..fd7dc7a18f0 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
@@ -186,14 +186,14 @@ const Apps = ({ onSuccess, onCreateFromBlank }: AppsProps) => {
   return (
     <div className="flex h-full flex-col">
       <div className="flex items-center justify-between border-b border-divider-burn py-3">
-        <div className="min-w-[180px] pl-5">
+        <div className="min-w-45 pl-5">
           <span className="title-xl-semi-bold text-text-primary">
             {t(($) => $['newApp.startFromTemplate'], { ns: 'app' })}
           </span>
         </div>
-        <div className="flex max-w-[548px] flex-1 items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1.5 shadow-md">
+        <div className="flex max-w-137 flex-1 items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1.5 shadow-md">
           <AppTypeSelector value={currentType} onChange={setCurrentType} />
-          <div className="h-[14px]">
+          <div className="h-3.5">
             <Divider type="vertical" />
           </div>
           <Input
@@ -208,11 +208,11 @@ const Apps = ({ onSuccess, onCreateFromBlank }: AppsProps) => {
             onClear={() => handleKeywordsChange('')}
           />
         </div>
-        <div className="h-8 w-[180px]"></div>
+        <div className="h-8 w-45"></div>
       </div>
       <div className="relative flex flex-1 overflow-y-auto">
         {!searchKeywords && (
-          <div className="h-full w-[200px] p-4">
+          <div className="h-full w-50 p-4">
             <Sidebar
               current={activeCategory as AppCategories}
               categories={visibleCategories}
@@ -240,7 +240,7 @@ const Apps = ({ onSuccess, onCreateFromBlank }: AppsProps) => {
                         })}
                   </p>
                 ) : (
-                  <div className="flex h-[22px] items-center">
+                  <div className="flex h-5.5 items-center">
                     <AppCategoryLabel
                       category={activeCategory as AppCategories}
                       className="title-md-semi-bold text-text-primary"
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index 14f0869b54f..6caf124a59f 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -169,7 +169,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
       <div className="flex h-full justify-center overflow-x-hidden overflow-y-auto">
         <div className="flex flex-1 shrink-0 justify-end">
           <div className="px-10">
-            <div className="h-6 w-full 2xl:h-[139px]" />
+            <div className="h-6 w-full 2xl:h-34.75" />
             <div className="pt-1 pb-6">
               <span className="title-2xl-semi-bold text-text-primary">
                 {t(($) => $['newApp.startFromBlank'], { ns: 'app' })}
@@ -180,7 +180,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                 {t(($) => $['newApp.chooseAppType'], { ns: 'app' })}
               </span>
             </div>
-            <div className="flex w-[660px] flex-col gap-4">
+            <div className="flex w-165 flex-col gap-4">
               <div>
                 <div className="flex flex-row gap-2">
                   <AppTypeCard
@@ -363,13 +363,13 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
           </div>
         </div>
         <div className="relative flex h-full flex-1 shrink justify-start overflow-hidden">
-          <div className="absolute top-0 right-0 left-0 h-6 border-b border-b-divider-subtle 2xl:h-[139px]"></div>
-          <div className="max-w-[760px] border-x border-x-divider-subtle">
-            <div className="h-6 2xl:h-[139px]" />
+          <div className="absolute top-0 right-0 left-0 h-6 border-b border-b-divider-subtle 2xl:h-34.75"></div>
+          <div className="max-w-190 border-x border-x-divider-subtle">
+            <div className="h-6 2xl:h-34.75" />
             <AppPreview mode={appMode} />
             <div className="absolute inset-x-0 border-b border-b-divider-subtle"></div>
             <div
-              className="flex h-[448px] w-[664px] items-center justify-center"
+              className="flex h-112 w-166 items-center justify-center"
               style={{
                 background:
                   'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)',
@@ -440,7 +440,7 @@ function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardP
     <button
       type="button"
       className={cn(
-        'relative box-content h-[84px] w-[191px] cursor-pointer rounded-xl border-[0.5px] border-components-option-card-option-border bg-components-panel-on-panel-item-bg p-3 text-left shadow-xs outline-hidden hover:shadow-md focus-visible:ring-2 focus-visible:ring-state-accent-solid',
+        'relative box-content h-21 w-47.75 cursor-pointer rounded-xl border-[0.5px] border-components-option-card-option-border bg-components-panel-on-panel-item-bg p-3 text-left shadow-xs outline-hidden hover:shadow-md focus-visible:ring-2 focus-visible:ring-state-accent-solid',
         active
           ? 'shadow-md outline-[1.5px] outline-components-option-card-option-selected-border outline-solid'
           : '',
diff --git a/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx b/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
index 692e7317f79..b83575f12a2 100644
--- a/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
+++ b/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
@@ -36,7 +36,7 @@ function DSLConfirmModal({
         if (!open && !confirmLoading) onCancel()
       }}
     >
-      <AlertDialogContent className="w-[480px] overflow-hidden! border-none text-left align-middle shadow-xl">
+      <AlertDialogContent className="w-120 overflow-hidden! border-none text-left align-middle shadow-xl">
         <div className="flex flex-col items-start gap-2 self-stretch p-6 pb-4">
           <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
             {t(($) => $['newApp.appCreateDSLErrorTitle'], { ns: 'app' })}
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 f45356794ae..5bfa5e242bd 100644
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/app/create-from-dsl-modal/uploader.tsx
@@ -183,7 +183,7 @@ export function Uploader({
               </span>
               <div
                 id={fileMetadataId}
-                className="font-inter flex h-3 items-center gap-1 self-stretch text-[10px] leading-3 font-medium text-text-tertiary uppercase"
+                className="font-inter flex h-3 items-center gap-1 self-stretch text-2xs leading-3 font-medium text-text-tertiary uppercase"
               >
                 <span>{displayName}</span>
                 <span className="text-text-quaternary">·</span>
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index 1cc62f2f292..0fa4671a8cd 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -70,7 +70,7 @@ const DuplicateAppModal = ({
   return (
     <>
       <Dialog open={show}>
-        <DialogContent className="w-full max-w-[480px]! overflow-hidden! border-none px-8 text-left align-middle">
+        <DialogContent className="w-full max-w-120! overflow-hidden! border-none px-8 text-left align-middle">
           <button
             type="button"
             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"
@@ -79,7 +79,7 @@ const DuplicateAppModal = ({
           >
             <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">
+          <div className="relative mt-3 mb-9 text-xl leading-7.5 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/in-site-message/index.tsx b/web/app/components/app/in-site-message/index.tsx
index 7abbe35889f..b09e8cd7cd0 100644
--- a/web/app/components/app/in-site-message/index.tsx
+++ b/web/app/components/app/in-site-message/index.tsx
@@ -112,12 +112,12 @@ function InSiteMessage({
   return (
     <div
       className={cn(
-        'fixed right-3 bottom-3 z-50 w-[360px] overflow-hidden rounded-xl border border-components-panel-border-subtle bg-components-panel-bg shadow-2xl backdrop-blur-[5px]',
+        'fixed right-3 bottom-3 z-50 w-90 overflow-hidden rounded-xl border border-components-panel-border-subtle bg-components-panel-bg shadow-2xl backdrop-blur-[5px]',
         className,
       )}
     >
       <div
-        className="flex min-h-[128px] flex-col justify-end gap-0.5 bg-cover px-4 pt-6 pb-3 text-text-primary-on-surface"
+        className="flex min-h-32 flex-col justify-end gap-0.5 bg-cover px-4 pt-6 pb-3 text-text-primary-on-surface"
         style={headerStyle}
       >
         <div className="title-3xl-bold whitespace-pre-line">{normalizedTitle}</div>
diff --git a/web/app/components/app/log/empty-element.tsx b/web/app/components/app/log/empty-element.tsx
index 0557e81f717..79f81e808ed 100644
--- a/web/app/components/app/log/empty-element.tsx
+++ b/web/app/components/app/log/empty-element.tsx
@@ -49,7 +49,7 @@ const EmptyElement: FC<{ appDetail: App }> = ({ appDetail }) => {
 
   return (
     <div className="flex h-full items-center justify-center">
-      <div className="box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4">
+      <div className="box-border h-fit w-140 rounded-2xl bg-background-section-burn px-5 py-4">
         <span className="system-md-semibold text-text-secondary">
           {t(($) => $['table.empty.element.title'], { ns: 'appLog' })}
           <ThreeDotsIcon className="relative -top-3 -left-1.5 inline text-text-secondary" />
diff --git a/web/app/components/app/log/filter.tsx b/web/app/components/app/log/filter.tsx
index b8e6781d51c..27de95fb53b 100644
--- a/web/app/components/app/log/filter.tsx
+++ b/web/app/components/app/log/filter.tsx
@@ -62,7 +62,7 @@ const Filter: FC<IFilterProps> = ({
   return (
     <div className="mb-2 flex flex-row flex-wrap items-center gap-2">
       <Chip
-        className="min-w-[150px]"
+        className="min-w-37.5"
         panelClassName="w-[270px]"
         leftIcon={<RiCalendarLine className="size-4 text-text-secondary" />}
         value={queryParams.period}
@@ -81,7 +81,7 @@ const Filter: FC<IFilterProps> = ({
         }))}
       />
       <Chip
-        className="min-w-[150px]"
+        className="min-w-37.5"
         panelClassName="w-[270px]"
         showLeftIcon={false}
         value={queryParams.annotation_status || 'all'}
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index f77795a9695..dbae6fb3a63 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -501,7 +501,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
       <div className="mx-1 mb-1 grow overflow-auto rounded-b-xl bg-background-section-burn">
         {!isChatMode ? (
           <div className="px-6 py-4">
-            <div className="flex h-[18px] items-center space-x-3">
+            <div className="flex h-4.5 items-center space-x-3">
               <div className="system-xs-semibold-uppercase text-text-tertiary">
                 {t(($) => $['table.header.output'], { ns: 'appLog' })}
               </div>
@@ -906,7 +906,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
 
   return (
     <div className="relative mt-2 grow overflow-x-auto">
-      <table className={cn('w-full min-w-[440px] border-collapse border-0')}>
+      <table className={cn('w-full min-w-110 border-collapse border-0')}>
         <thead className="system-xs-medium-uppercase text-text-tertiary">
           <tr>
             <td className="w-5 rounded-l-lg bg-background-section-burn pr-1 pl-2 whitespace-nowrap"></td>
@@ -967,12 +967,12 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
                     </div>
                   )}
                 </td>
-                <td className="w-[160px] p-3 pr-2" style={{ maxWidth: isChatMode ? 300 : 200 }}>
+                <td className="w-40 p-3 pr-2" style={{ maxWidth: isChatMode ? 300 : 200 }}>
                   {renderTdValue(leftValue, isLeftEmpty, isChatMode && log.annotated)}
                 </td>
                 <td className="p-3 pr-2">{renderTdValue(endUser || defaultValue, !endUser)}</td>
                 {isChatflow && (
-                  <td className="w-[160px] p-3 pr-2" style={{ maxWidth: isChatMode ? 300 : 200 }}>
+                  <td className="w-40 p-3 pr-2" style={{ maxWidth: isChatMode ? 300 : 200 }}>
                     {statusTdRender(log.status_count)}
                   </td>
                 )}
@@ -1024,13 +1024,13 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
                     </>
                   )}
                 </td>
-                <td className="w-[160px] p-3 pr-2">
+                <td className="w-40 p-3 pr-2">
                   {formatTime(
                     log.updated_at,
                     t(($) => $.dateTimeFormat, { ns: 'appLog' }) as string,
                   )}
                 </td>
-                <td className="w-[160px] p-3 pr-2">
+                <td className="w-40 p-3 pr-2">
                   {formatTime(
                     log.created_at,
                     t(($) => $.dateTimeFormat, { ns: 'appLog' }) as string,
@@ -1052,7 +1052,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
         <DrawerPortal>
           <DrawerBackdrop className={cn(!isMobile && 'bg-transparent')} />
           <DrawerViewport>
-            <DrawerPopup className="bg-components-panel-bg p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-4 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[640px] data-[swipe-direction=right]:rounded-xl">
+            <DrawerPopup className="bg-components-panel-bg p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-4 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-160 data-[swipe-direction=right]:rounded-xl">
               <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
                 <DrawerContext.Provider
                   value={{
diff --git a/web/app/components/app/log/model-info.tsx b/web/app/components/app/log/model-info.tsx
index 93d846d127f..ea0a36a1f8e 100644
--- a/web/app/components/app/log/model-info.tsx
+++ b/web/app/components/app/log/model-info.tsx
@@ -70,7 +70,7 @@ const ModelInfo: FC<Props> = ({ model }) => {
             sideOffset={4}
             popupClassName="border-none bg-transparent shadow-none"
           >
-            <div className="relative w-[280px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-4 pt-3 pb-2 shadow-xl">
+            <div className="relative w-70 overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-4 pt-3 pb-2 shadow-xl">
               <div className="mb-1 h-6 system-sm-semibold-uppercase text-text-secondary">
                 {t(($) => $['detail.modelParams'], { ns: 'appLog' })}
               </div>
diff --git a/web/app/components/app/log/var-panel.tsx b/web/app/components/app/log/var-panel.tsx
index 1c96e5b06d7..ceb18463734 100644
--- a/web/app/components/app/log/var-panel.tsx
+++ b/web/app/components/app/log/var-panel.tsx
@@ -39,10 +39,10 @@ const VarPanel: FC<Props> = ({ varList, message_files }) => {
         )}
       </div>
       {!isCollapse && (
-        <div className="flex max-h-[500px] flex-col gap-2 overflow-y-auto p-3">
+        <div className="flex max-h-125 flex-col gap-2 overflow-y-auto p-3">
           {varList.map(({ label, value }, index) => (
             <div key={index} className="flex py-2 system-xs-medium">
-              <div className="flex w-[128px] shrink-0 text-text-accent">
+              <div className="flex w-32 shrink-0 text-text-accent">
                 <span className="shrink-0 opacity-60">{'{{'}</span>
                 <span className="truncate">{label}</span>
                 <span className="shrink-0 opacity-60">{'}}'}</span>
@@ -53,7 +53,7 @@ const VarPanel: FC<Props> = ({ varList, message_files }) => {
 
           {message_files.length > 0 && (
             <div className="mt-1 flex py-2">
-              <div className="w-[128px] shrink-0 system-xs-medium text-text-tertiary">
+              <div className="w-32 shrink-0 system-xs-medium text-text-tertiary">
                 {t(($) => $['detail.uploadImages'], { ns: 'appLog' })}
               </div>
               <div className="flex space-x-2">
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 f670dd13f73..337d4a57a40 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -79,7 +79,7 @@ const APIKeyInfoPanel: FC = () => {
       </Button>
       {!isCloud && (
         <a
-          className="mt-2 flex h-[26px] items-center space-x-1 p-1 text-xs font-medium text-[#155EEF]"
+          className="mt-2 flex h-6.5 items-center space-x-1 p-1 text-xs font-medium text-primary-600"
           href="https://cloud.dify.ai/apps"
           target="_blank"
           rel="noopener noreferrer"
diff --git a/web/app/components/app/overview/app-card-sections.tsx b/web/app/components/app/overview/app-card-sections.tsx
index 0b0bc281485..b9552eafbeb 100644
--- a/web/app/components/app/overview/app-card-sections.tsx
+++ b/web/app/components/app/overview/app-card-sections.tsx
@@ -132,7 +132,7 @@ export const WorkflowLaunchDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-[560px]! max-w-[calc(100vw-2rem)]! p-0!">
+      <DialogContent className="w-140! max-w-[calc(100vw-2rem)]! p-0!">
         <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
           <DialogTitle className="title-2xl-semi-bold text-text-primary">
             {t(($) => $['overview.appInfo.workflowLaunchHiddenInputs.title'], {
@@ -355,7 +355,7 @@ export const AppCardOperations = ({
           <div
             className={cn(
               disabled ? 'text-components-button-ghost-text-disabled' : 'text-text-tertiary',
-              'px-[3px] system-xs-medium',
+              'px-0.75 system-xs-medium',
               shouldTruncate && 'min-w-0 truncate',
             )}
           >
@@ -373,16 +373,16 @@ export const AppCardOperations = ({
               show={disabled}
             >
               <Button
-                className="min-w-[88px] rounded-r-none border-0 px-0 py-0 shadow-none backdrop-blur-none hover:bg-components-button-secondary-bg"
+                className="min-w-22 rounded-r-none border-0 px-0 py-0 shadow-none backdrop-blur-none hover:bg-components-button-secondary-bg"
                 size="small"
                 variant="secondary"
                 onClick={onClick}
                 disabled={disabled}
               >
-                <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 h-full min-w-22 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="size-3.5" />
-                    <div className="px-[3px] system-xs-medium">{label}</div>
+                    <div className="px-0.75 system-xs-medium">{label}</div>
                   </div>
                 </div>
               </Button>
@@ -409,7 +409,7 @@ export const AppCardOperations = ({
       const actionButton = (
         <Button
           className={cn(
-            'mr-1 max-w-full min-w-[88px] overflow-hidden [&>*]:max-w-full [&>*]:min-w-0',
+            'mr-1 max-w-full min-w-22 overflow-hidden *:max-w-full *:min-w-0',
             !shouldTruncate && 'shrink-0',
           )}
           size="small"
diff --git a/web/app/components/app/overview/app-chart.tsx b/web/app/components/app/overview/app-chart.tsx
index 582033c797f..ba0241e063a 100644
--- a/web/app/components/app/overview/app-chart.tsx
+++ b/web/app/components/app/overview/app-chart.tsx
@@ -103,7 +103,7 @@ const Chart: React.FC<IChartProps> = ({
 
   return (
     <div
-      className={`flex h-[316px] w-full min-w-0 flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg xl:min-w-[480px] ${className ?? ''}`}
+      className={`flex h-79 w-full min-w-0 flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg xl:min-w-120 ${className ?? ''}`}
     >
       <div className="flex h-11 shrink-0 items-center px-6 pt-6 pb-1">
         <div className="flex min-w-0 items-center">
@@ -132,7 +132,7 @@ const Chart: React.FC<IChartProps> = ({
           </div>
         )}
       </div>
-      <div className="h-[240px] shrink-0 px-6 pb-4">
+      <div className="h-60 shrink-0 px-6 pb-4">
         <ReactECharts
           option={options}
           opts={ECHARTS_RENDER_OPTIONS}
diff --git a/web/app/components/app/overview/customize/index.tsx b/web/app/components/app/overview/customize/index.tsx
index 6458db30e16..63805206231 100644
--- a/web/app/components/app/overview/customize/index.tsx
+++ b/web/app/components/app/overview/customize/index.tsx
@@ -67,7 +67,7 @@ const CustomizeModal: FC<IShareLinkProps> = ({
 
   return (
     <Dialog open={isShow} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[640px] flex-col overflow-hidden!">
+      <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-160 flex-col overflow-hidden!">
         <DialogTitle className="shrink-0 title-2xl-semi-bold text-text-primary">
           {t(($) => $[`${prefixCustomize}.title`], { ns: 'appOverview' })}
         </DialogTitle>
diff --git a/web/app/components/app/overview/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
index 216a58894f2..351e093dd18 100644
--- a/web/app/components/app/overview/embedded/index.tsx
+++ b/web/app/components/app/overview/embedded/index.tsx
@@ -382,10 +382,7 @@ const Embedded = ({
       }}
     >
       <DialogContent
-        className={cn(
-          'flex max-h-[calc(100dvh-2rem)] w-[640px] flex-col overflow-hidden!',
-          className,
-        )}
+        className={cn('flex max-h-[calc(100dvh-2rem)] w-160 flex-col overflow-hidden!', className)}
       >
         <DialogTitle className="shrink-0 title-2xl-semi-bold text-text-primary">
           {t(($) => $[`${prefixEmbedded}.title`], { ns: 'appOverview' })}
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index 5d7998e0055..cbb8fe5edcc 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -351,7 +351,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
   return (
     <>
       <Dialog open={isShow} onOpenChange={(open) => !open && handleClose()} disablePointerDismissal>
-        <DialogContent className="grid max-h-[calc(100dvh-2rem)] w-[520px] grid-rows-[auto_minmax(0,1fr)] overflow-hidden p-0">
+        <DialogContent className="grid max-h-[calc(100dvh-2rem)] w-130 grid-rows-[auto_minmax(0,1fr)] overflow-hidden p-0">
           {/* header */}
           <div className="shrink-0 pt-5 pr-5 pb-3 pl-6">
             <div className="flex items-center gap-1">
@@ -448,7 +448,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                   <SelectTrigger
                     aria-label={t(($) => $[`${prefixSettings}.language`], { ns: 'appOverview' })}
                     size="medium"
-                    className="w-[200px]"
+                    className="w-50"
                   >
                     {selectedLanguage?.name ?? t(($) => $['placeholder.select'], { ns: 'common' })}
                   </SelectTrigger>
@@ -473,7 +473,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                       {t(($) => $[`${prefixSettings}.chatColorThemeDesc`], { ns: 'appOverview' })}
                     </div>
                   </div>
-                  <Field name="chat_color_theme" className="w-[200px] shrink-0">
+                  <Field name="chat_color_theme" className="w-50 shrink-0">
                     <FieldControl
                       className="mb-1"
                       value={inputInfo.chatColorTheme ?? ''}
@@ -534,11 +534,11 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                           })}
                         </div>
                         {isCloudSandboxPlan && (
-                          <div className="h-[18px] select-none">
+                          <div className="h-4.5 select-none">
                             <PremiumBadgeButton size="s" color="blue" onClick={handlePlanClick}>
                               <span
                                 aria-hidden="true"
-                                className="i-custom-public-common-sparkles-soft flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0"
+                                className="i-custom-public-common-sparkles-soft flex h-3.5 w-3.5 items-center py-px pl-0.75 text-components-premium-badge-indigo-text-stop-0"
                               />
                               <div className="system-xs-medium">
                                 <span className="p-1">
@@ -561,7 +561,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                     {isCloudSandboxPlan ? (
                       <Tooltip>
                         <TooltipTrigger render={inputPlaceholderField} />
-                        <TooltipContent className="w-[180px]">
+                        <TooltipContent className="w-45">
                           {t(($) => $[`${prefixSettings}.more.inputPlaceholderTooltip`], {
                             ns: 'appOverview',
                           })}
@@ -586,11 +586,11 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                       </div>
                       {/* upgrade button */}
                       {isCloudSandboxPlan && (
-                        <div className="h-[18px] select-none">
+                        <div className="h-4.5 select-none">
                           <PremiumBadgeButton size="s" color="blue" onClick={handlePlanClick}>
                             <span
                               aria-hidden="true"
-                              className="i-custom-public-common-sparkles-soft flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0"
+                              className="i-custom-public-common-sparkles-soft flex h-3.5 w-3.5 items-center py-px pl-0.75 text-components-premium-badge-indigo-text-stop-0"
                             />
                             <div className="system-xs-medium">
                               <span className="p-1">
@@ -629,7 +629,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                             </div>
                           }
                         />
-                        <TooltipContent className="w-[180px]">
+                        <TooltipContent className="w-45">
                           {t(($) => $[`${prefixSettings}.more.copyrightTooltip`], {
                             ns: 'appOverview',
                           })}
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index 0f5b3dbfa31..6c3a19064f2 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -119,7 +119,7 @@ const SwitchAppModal = ({
         <DialogContent
           className={cn(
             'w-full overflow-hidden! border-none text-left align-middle',
-            cn('w-[600px] max-w-[600px] p-8'),
+            cn('w-150 max-w-150 p-8'),
           )}
         >
           <button
@@ -133,7 +133,7 @@ const SwitchAppModal = ({
           <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">
+          <div className="relative mt-3 text-xl leading-7.5 font-semibold text-text-primary">
             {t(($) => $.switch, { ns: 'app' })}
           </div>
           <div className="my-1 text-sm/5 text-text-tertiary">
@@ -144,7 +144,7 @@ const SwitchAppModal = ({
             <span>{t(($) => $.switchTipEnd, { ns: 'app' })}</span>
           </div>
           <div className="pb-4">
-            <div className="py-2 text-sm leading-[20px] font-medium text-text-primary">
+            <div className="py-2 text-sm leading-5 font-medium text-text-primary">
               {t(($) => $.switchLabel, { ns: 'app' })}
             </div>
             <div className="flex items-center justify-between space-x-2">
diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index cf7acec882f..7908185b1f7 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -296,8 +296,8 @@ const GenerationItem: FC<IGenerationItemProps> = ({
             {!isTop && (
               <div
                 className={cn(
-                  'absolute top-[-32px] flex h-[33px] w-4 justify-center',
-                  isMobile ? 'left-[17px]' : 'left-[50%] translate-x-[-50%]',
+                  'absolute -top-8 flex h-8.25 w-4 justify-center',
+                  isMobile ? 'left-4.25' : 'left-[50%] translate-x-[-50%]',
                 )}
               >
                 <div className="h-full w-0.5 bg-divider-regular"></div>
diff --git a/web/app/components/app/type-selector/index.tsx b/web/app/components/app/type-selector/index.tsx
index 84f1927540a..14af654dbd9 100644
--- a/web/app/components/app/type-selector/index.tsx
+++ b/web/app/components/app/type-selector/index.tsx
@@ -148,7 +148,7 @@ function AppTypeSelectTrigger({ values }: { readonly values: AppSelectorProps['v
     return (
       <div className={cn('flex h-8 items-center justify-between gap-1')}>
         <RiFilter3Line className="size-4 text-text-tertiary" />
-        <div className="min-w-[65px] grow text-center system-sm-medium text-text-tertiary">
+        <div className="min-w-16.25 grow text-center system-sm-medium text-text-tertiary">
           {t(($) => $['typeSelector.all'], { ns: 'app' })}
         </div>
         <RiArrowDownSLine className="size-4 text-text-tertiary" />
diff --git a/web/app/components/app/workflow-log/filter.tsx b/web/app/components/app/workflow-log/filter.tsx
index 2e09ce9c48a..0a1fb707351 100644
--- a/web/app/components/app/workflow-log/filter.tsx
+++ b/web/app/components/app/workflow-log/filter.tsx
@@ -69,7 +69,7 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
         ]}
       />
       <Chip
-        className="min-w-[150px]"
+        className="min-w-37.5"
         panelClassName="w-[270px]"
         leftIcon={<RiCalendarLine className="size-4 text-text-secondary" />}
         value={queryParams.period}
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index 0fdd257c9d0..0a3d77e3619 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -128,7 +128,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
 
   return (
     <div className="overflow-x-auto">
-      <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
+      <table className={cn('mt-2 w-full min-w-110 border-collapse border-0')}>
         <thead className="system-xs-medium-uppercase text-text-tertiary">
           <tr>
             <td className="w-5 rounded-l-lg bg-background-section-burn pr-1 pl-2 whitespace-nowrap"></td>
@@ -199,7 +199,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
                     </div>
                   )}
                 </td>
-                <td className="w-[180px] p-3 pr-2">
+                <td className="w-45 p-3 pr-2">
                   {formatTime(
                     log.created_at,
                     t(($) => $.dateTimeFormat, { ns: 'appLog' }) as string,
@@ -248,7 +248,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
         <DrawerPortal>
           <DrawerBackdrop className={cn(!isMobile && 'bg-transparent')} />
           <DrawerViewport>
-            <DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[600px] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border data-[swipe-direction=right]:border-components-panel-border">
+            <DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-150 data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border data-[swipe-direction=right]:border-components-panel-border">
               <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
                 <DetailPanel
                   onClose={onCloseDrawer}
diff --git a/web/app/components/apps/app-card-skeleton.tsx b/web/app/components/apps/app-card-skeleton.tsx
index 853575c03d1..8917ad61c5d 100644
--- a/web/app/components/apps/app-card-skeleton.tsx
+++ b/web/app/components/apps/app-card-skeleton.tsx
@@ -19,7 +19,7 @@ export const AppCardSkeleton = React.memo(({ count = 6 }: AppCardSkeletonProps)
       {skeletonKeys.map((key) => (
         <div
           key={key}
-          className="h-[160px] overflow-hidden rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg p-4 shadow-xs"
+          className="h-40 overflow-hidden rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg p-4 shadow-xs"
         >
           <SkeletonContainer className="h-full">
             <SkeletonRow>
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index 1528906d49e..e9a88389cde 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -626,7 +626,7 @@ export function AppCardActionBar({ app, onRefresh }: AppCardActionBarProps) {
                     aria-hidden
                     className={cn(
                       app.is_starred ? 'text-text-warning-secondary' : 'text-text-tertiary',
-                      'size-[18px]',
+                      'size-4.5',
                     )}
                   />
                 </button>
@@ -662,7 +662,7 @@ export function AppCardActionBar({ app, onRefresh }: AppCardActionBarProps) {
                 <span
                   aria-hidden
                   className={cn(
-                    'h-[18px] w-[18px] text-text-tertiary',
+                    'h-4.5 w-4.5 text-text-tertiary',
                     isExporting
                       ? 'i-ri-loader-2-line animate-spin motion-reduce:animate-none'
                       : 'i-ri-more-fill',
@@ -1178,7 +1178,7 @@ export function AppCard({
           {app.description}
         </div>
       </div>
-      <div className="flex h-[26px] shrink-0 items-start px-3" />
+      <div className="flex h-6.5 shrink-0 items-start px-3" />
       <div
         className={cn(
           'flex min-w-0 shrink-0 items-center overflow-hidden pt-2 pb-3 pl-4 system-xs-regular text-text-tertiary',
@@ -1229,7 +1229,7 @@ export function AppCard({
           </Link>
         )}
         <div
-          className="absolute top-[104px] right-3 left-3 flex h-[26px] min-w-0 items-start"
+          className="absolute top-26 right-3 left-3 flex h-6.5 min-w-0 items-start"
           onClick={(e) => {
             e.stopPropagation()
             e.preventDefault()
@@ -1267,7 +1267,7 @@ export function AppCard({
                       aria-hidden
                       className={cn(
                         app.is_starred ? 'text-text-warning-secondary' : 'text-text-tertiary',
-                        'size-[18px]',
+                        'size-4.5',
                       )}
                     />
                   </button>
@@ -1303,7 +1303,7 @@ export function AppCard({
                   <span
                     aria-hidden
                     className={cn(
-                      'h-[18px] w-[18px] text-text-tertiary',
+                      'h-4.5 w-4.5 text-text-tertiary',
                       isExporting
                         ? 'i-ri-loader-2-line animate-spin motion-reduce:animate-none'
                         : 'i-ri-more-fill',
@@ -1438,7 +1438,7 @@ export function AppCard({
                   <button
                     type="button"
                     onClick={() => setConfirmDeleteInput(app.name)}
-                    className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full bg-black/[0.06] px-2.5 py-1 system-xs-medium text-text-secondary hover:bg-black/[0.1]"
+                    className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full bg-black/6 px-2.5 py-1 system-xs-medium text-text-secondary hover:bg-black/10"
                   >
                     {t(($) => $['operation.fill'], { ns: 'common' })}
                   </button>
diff --git a/web/app/components/apps/first-empty-state/action-card.tsx b/web/app/components/apps/first-empty-state/action-card.tsx
index 7f93055476b..5bfb6c44cdf 100644
--- a/web/app/components/apps/first-empty-state/action-card.tsx
+++ b/web/app/components/apps/first-empty-state/action-card.tsx
@@ -141,7 +141,7 @@ function ActionCardContent({
     isCompact ? (
       <CompactBadge badge={badge} badgeVariant={badgeVariant} />
     ) : (
-      <span className="absolute top-4 right-4 flex min-w-[18px] items-center justify-center gap-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px] system-2xs-medium-uppercase text-text-tertiary">
+      <span className="absolute top-4 right-4 flex min-w-4.5 items-center justify-center gap-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1.25 py-0.75 system-2xs-medium-uppercase text-text-tertiary">
         {badge}
       </span>
     )
@@ -180,10 +180,10 @@ function FirstEmptyActionCard(props: FirstEmptyActionCardProps) {
       ? 'w-full items-center gap-3 overflow-hidden px-3 py-2.5 backdrop-blur-md'
       : 'flex-col border border-components-panel-border bg-components-panel-on-panel-item-bg hover:shadow-sm',
     props.visualStyle === 'compact'
-      ? 'min-h-[156px] overflow-hidden px-4 pt-6 pb-3'
+      ? 'min-h-39 overflow-hidden px-4 pt-6 pb-3'
       : props.visualStyle === 'list'
         ? undefined
-        : 'min-h-[204px] p-6',
+        : 'min-h-51 p-6',
     isDisabled &&
       'cursor-not-allowed text-text-disabled shadow-none hover:bg-components-button-secondary-bg',
     props.className,
diff --git a/web/app/components/apps/first-empty-state/index.tsx b/web/app/components/apps/first-empty-state/index.tsx
index f88723aa4f6..09ea83b7104 100644
--- a/web/app/components/apps/first-empty-state/index.tsx
+++ b/web/app/components/apps/first-empty-state/index.tsx
@@ -70,7 +70,7 @@ function FirstEmptyState({
 
   return (
     <div className="flex grow flex-col overflow-hidden">
-      <div className="relative min-h-[430px] flex-1 overflow-hidden">
+      <div className="relative min-h-107.5 flex-1 overflow-hidden">
         <div className="pointer-events-none absolute inset-x-8 inset-y-2 grid grid-cols-[repeat(auto-fill,minmax(296px,1fr))] grid-rows-4 gap-3">
           {EMPTY_PLACEHOLDER_CARD_IDS.map((id) => (
             <div key={id} className="rounded-xl bg-background-default-lighter opacity-75" />
@@ -81,7 +81,7 @@ function FirstEmptyState({
           className="absolute inset-0 flex items-center justify-center overflow-hidden p-2"
           aria-labelledby="apps-first-empty-title"
         >
-          <div className="flex w-full max-w-[520px] flex-col items-center gap-6">
+          <div className="flex w-full max-w-130 flex-col items-center gap-6">
             <div className="flex flex-col items-center gap-3">
               <div className="flex size-14 items-center justify-center rounded-[10px]">
                 <div className="flex size-full min-w-px items-center justify-center overflow-hidden rounded-xl border border-dashed border-divider-regular bg-components-card-bg p-1 backdrop-blur-md">
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 368e3e8bf3e..2891d12e620 100644
--- a/web/app/components/apps/import-from-marketplace-template-modal.tsx
+++ b/web/app/components/apps/import-from-marketplace-template-modal.tsx
@@ -72,7 +72,7 @@ const ImportFromMarketplaceTemplateModal = ({
         if (!open) onClose()
       }}
     >
-      <DialogContent className="w-[520px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl">
+      <DialogContent className="w-130 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl">
         <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 size-8 cursor-pointer items-center" onClick={onClose}>
diff --git a/web/app/components/apps/starred-app-card.tsx b/web/app/components/apps/starred-app-card.tsx
index 777f02209ac..60212e7160b 100644
--- a/web/app/components/apps/starred-app-card.tsx
+++ b/web/app/components/apps/starred-app-card.tsx
@@ -56,7 +56,7 @@ export function StarredAppCard({
     isRbacEnabled,
   })
   const cardClassName = cn(
-    'flex h-[72px] min-w-0 items-center gap-3 overflow-hidden rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg px-4 py-3 shadow-xs outline-hidden transition-shadow duration-200',
+    'flex h-18 min-w-0 items-center gap-3 overflow-hidden rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg px-4 py-3 shadow-xs outline-hidden transition-shadow duration-200',
     isPreviewOnly
       ? 'cursor-not-allowed opacity-60 focus-visible:ring-2 focus-visible:ring-state-accent-solid'
       : 'hover:shadow-lg focus-visible:ring-2 focus-visible:ring-state-accent-solid',
diff --git a/web/app/components/apps/studio-list-header.tsx b/web/app/components/apps/studio-list-header.tsx
index 97f26c204d4..5e2a7a9122a 100644
--- a/web/app/components/apps/studio-list-header.tsx
+++ b/web/app/components/apps/studio-list-header.tsx
@@ -7,7 +7,7 @@ type StudioListHeaderProps = {
 
 export function StudioListHeader({ title, children }: StudioListHeaderProps) {
   return (
-    <div className="sticky top-0 z-10 flex flex-col gap-[14px] bg-background-body px-8 pt-4 pb-2">
+    <div className="sticky top-0 z-10 flex flex-col gap-3.5 bg-background-body px-8 pt-4 pb-2">
       <div className="flex h-6 min-w-0 items-center">{title}</div>
       {children}
     </div>
diff --git a/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx b/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx
index 250bd42acaf..5f6d1ee5fde 100644
--- a/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx
+++ b/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx
@@ -157,7 +157,7 @@ describe('AgentLogModal', () => {
     const modal = screen.getByRole('dialog')
     expect(container).not.toContainElement(modal)
     expect(document.body).toContainElement(modal)
-    expect(modal).toHaveClass('fixed', 'z-50', 'w-[480px]!', 'left-[max(8px,calc(100vw-1136px))]!')
+    expect(modal).toHaveClass('fixed', 'z-50', 'w-120!', 'left-[max(8px,calc(100vw-1136px))]!')
   })
 
   it('should call onCancel when close button is clicked', () => {
diff --git a/web/app/components/base/agent-log-modal/detail.tsx b/web/app/components/base/agent-log-modal/detail.tsx
index 66149b5d855..ff61478f8f6 100644
--- a/web/app/components/base/agent-log-modal/detail.tsx
+++ b/web/app/components/base/agent-log-modal/detail.tsx
@@ -80,7 +80,7 @@ const AgentLogDetail: FC<AgentLogDetailProps> = ({
         <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',
+            '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-4.5 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'}
@@ -91,7 +91,7 @@ const AgentLogDetail: FC<AgentLogDetailProps> = ({
         <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',
+            '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-4.5 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'}
diff --git a/web/app/components/base/agent-log-modal/index.stories.tsx b/web/app/components/base/agent-log-modal/index.stories.tsx
index eb3f5a861d1..7008274c8a6 100644
--- a/web/app/components/base/agent-log-modal/index.stories.tsx
+++ b/web/app/components/base/agent-log-modal/index.stories.tsx
@@ -105,7 +105,7 @@ const AgentLogModalDemo = ({ width = 960 }: { width?: number }) => {
   return (
     <>
       <ToastHost />
-      <div className="relative min-h-[540px] w-full bg-background-default-subtle p-6">
+      <div className="relative min-h-135 w-full bg-background-default-subtle p-6">
         <AgentLogModal
           currentLogItem={MOCK_CHAT_ITEM}
           width={width}
diff --git a/web/app/components/base/agent-log-modal/index.tsx b/web/app/components/base/agent-log-modal/index.tsx
index 0067b5e42ca..f49f766f663 100644
--- a/web/app/components/base/agent-log-modal/index.tsx
+++ b/web/app/components/base/agent-log-modal/index.tsx
@@ -49,7 +49,7 @@ const AgentLogModal: FC<AgentLogModalProps> = ({ currentLogItem, width, floating
       >
         <DialogContent
           backdropClassName="bg-transparent!"
-          className="top-16! bottom-4! left-[max(8px,calc(100vw-1136px))]! flex max-h-none! w-[480px]! max-w-[calc(100vw-16px)]! translate-x-0! translate-y-0! flex-col overflow-hidden! rounded-xl! border-[0.5px]! border-components-panel-border! bg-components-panel-bg! p-0! pt-3! pb-3! shadow-xl!"
+          className="top-16! bottom-4! left-[max(8px,calc(100vw-1136px))]! flex max-h-none! w-120! max-w-[calc(100vw-16px)]! translate-x-0! translate-y-0! flex-col overflow-hidden! rounded-xl! border-[0.5px]! border-components-panel-border! bg-components-panel-bg! p-0! pt-3! pb-3! shadow-xl!"
         >
           <DialogTitle className="text-md shrink-0 px-4 py-1 font-semibold text-text-primary">
             {t(($) => $['runDetail.workflowTitle'], { ns: 'appLog' })}
diff --git a/web/app/components/base/agent-log-modal/iteration.tsx b/web/app/components/base/agent-log-modal/iteration.tsx
index 402e600c792..501e20b50d1 100644
--- a/web/app/components/base/agent-log-modal/iteration.tsx
+++ b/web/app/components/base/agent-log-modal/iteration.tsx
@@ -19,12 +19,12 @@ const Iteration: FC<Props> = ({ iterationInfo, isFinal, index }) => {
     <div className={cn('px-4 py-2')}>
       <div className="flex items-center">
         {isFinal && (
-          <div className="mr-3 shrink-0 text-xs leading-[18px] font-semibold text-text-tertiary">
+          <div className="mr-3 shrink-0 text-xs leading-4.5 font-semibold text-text-tertiary">
             {t(($) => $['agentLogDetail.finalProcessing'], { ns: 'appLog' })}
           </div>
         )}
         {!isFinal && (
-          <div className="mr-3 shrink-0 text-xs leading-[18px] font-semibold text-text-tertiary">{`${t(($) => $['agentLogDetail.iteration'], { ns: 'appLog' }).toUpperCase()} ${index}`}</div>
+          <div className="mr-3 shrink-0 text-xs leading-4.5 font-semibold text-text-tertiary">{`${t(($) => $['agentLogDetail.iteration'], { ns: 'appLog' }).toUpperCase()} ${index}`}</div>
         )}
         <Divider bgStyle="gradient" className="mx-0 h-px grow" />
       </div>
diff --git a/web/app/components/base/agent-log-modal/result.tsx b/web/app/components/base/agent-log-modal/result.tsx
index 6ced84be170..ec901ba85a0 100644
--- a/web/app/components/base/agent-log-modal/result.tsx
+++ b/web/app/components/base/agent-log-modal/result.tsx
@@ -66,26 +66,26 @@ const ResultPanel: FC<ResultPanelProps> = ({
           </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">
+              <div className="w-26 shrink-0 truncate px-2 py-1.25 text-xs leading-4.5 text-text-tertiary">
                 {t(($) => $['meta.status'], { ns: 'runLog' })}
               </div>
-              <div className="grow px-2 py-[5px] text-xs leading-[18px] text-text-primary">
+              <div className="grow px-2 py-1.25 text-xs leading-4.5 text-text-primary">
                 <span>SUCCESS</span>
               </div>
             </div>
             <div className="flex">
-              <div className="w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary">
+              <div className="w-26 shrink-0 truncate px-2 py-1.25 text-xs leading-4.5 text-text-tertiary">
                 {t(($) => $['meta.executor'], { ns: 'runLog' })}
               </div>
-              <div className="grow px-2 py-[5px] text-xs leading-[18px] text-text-primary">
+              <div className="grow px-2 py-1.25 text-xs leading-4.5 text-text-primary">
                 <span>{created_by || 'N/A'}</span>
               </div>
             </div>
             <div className="flex">
-              <div className="w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary">
+              <div className="w-26 shrink-0 truncate px-2 py-1.25 text-xs leading-4.5 text-text-tertiary">
                 {t(($) => $['meta.startTime'], { ns: 'runLog' })}
               </div>
-              <div className="grow px-2 py-[5px] text-xs leading-[18px] text-text-primary">
+              <div className="grow px-2 py-1.25 text-xs leading-4.5 text-text-primary">
                 <span>
                   {formatTime(
                     Date.parse(created_at) / 1000,
@@ -95,26 +95,26 @@ const ResultPanel: FC<ResultPanelProps> = ({
               </div>
             </div>
             <div className="flex">
-              <div className="w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary">
+              <div className="w-26 shrink-0 truncate px-2 py-1.25 text-xs leading-4.5 text-text-tertiary">
                 {t(($) => $['meta.time'], { ns: 'runLog' })}
               </div>
-              <div className="grow px-2 py-[5px] text-xs leading-[18px] text-text-primary">
+              <div className="grow px-2 py-1.25 text-xs leading-4.5 text-text-primary">
                 <span>{`${elapsed_time?.toFixed(3)}s`}</span>
               </div>
             </div>
             <div className="flex">
-              <div className="w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary">
+              <div className="w-26 shrink-0 truncate px-2 py-1.25 text-xs leading-4.5 text-text-tertiary">
                 {t(($) => $['meta.tokens'], { ns: 'runLog' })}
               </div>
-              <div className="grow px-2 py-[5px] text-xs leading-[18px] text-text-primary">
+              <div className="grow px-2 py-1.25 text-xs leading-4.5 text-text-primary">
                 <span>{`${total_tokens || 0} Tokens`}</span>
               </div>
             </div>
             <div className="flex">
-              <div className="w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary">
+              <div className="w-26 shrink-0 truncate px-2 py-1.25 text-xs leading-4.5 text-text-tertiary">
                 {t(($) => $['agentLogDetail.agentMode'], { ns: 'appLog' })}
               </div>
-              <div className="grow px-2 py-[5px] text-xs leading-[18px] text-text-primary">
+              <div className="grow px-2 py-1.25 text-xs leading-4.5 text-text-primary">
                 <span>
                   {agentMode === 'function_call'
                     ? t(($) => $['agent.agentModeType.functionCall'], { ns: 'appDebug' })
@@ -123,18 +123,18 @@ const ResultPanel: FC<ResultPanelProps> = ({
               </div>
             </div>
             <div className="flex">
-              <div className="w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary">
+              <div className="w-26 shrink-0 truncate px-2 py-1.25 text-xs leading-4.5 text-text-tertiary">
                 {t(($) => $['agentLogDetail.toolUsed'], { ns: 'appLog' })}
               </div>
-              <div className="grow px-2 py-[5px] text-xs leading-[18px] text-text-primary">
+              <div className="grow px-2 py-1.25 text-xs leading-4.5 text-text-primary">
                 <span>{tools?.length ? tools?.join(', ') : 'Null'}</span>
               </div>
             </div>
             <div className="flex">
-              <div className="w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary">
+              <div className="w-26 shrink-0 truncate px-2 py-1.25 text-xs leading-4.5 text-text-tertiary">
                 {t(($) => $['agentLogDetail.iterations'], { ns: 'appLog' })}
               </div>
-              <div className="grow px-2 py-[5px] text-xs leading-[18px] text-text-primary">
+              <div className="grow px-2 py-1.25 text-xs leading-4.5 text-text-primary">
                 <span>{iterations}</span>
               </div>
             </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 32fd6da6356..5ab968b5efc 100644
--- a/web/app/components/base/agent-log-modal/tool-call.tsx
+++ b/web/app/components/base/agent-log-modal/tool-call.tsx
@@ -56,7 +56,7 @@ const ToolCallItem: FC<Props> = ({
       >
         <div
           className={cn(
-            'flex cursor-pointer items-center py-3 pr-3 pl-[6px]',
+            'flex cursor-pointer items-center py-3 pr-3 pl-1.5',
             !collapseState && 'pb-2!',
           )}
           onClick={() => setCollapseState(!collapseState)}
@@ -73,14 +73,12 @@ const ToolCallItem: FC<Props> = ({
             toolIcon={toolCall.tool_icon}
           />
           <div
-            className={cn(
-              'grow truncate text-[13px] leading-[16px] font-semibold text-text-secondary',
-            )}
+            className={cn('grow truncate text-[13px] leading-4 font-semibold text-text-secondary')}
             title={toolName}
           >
             {toolName}
           </div>
-          <div className="shrink-0 text-xs leading-[18px] text-text-tertiary">
+          <div className="shrink-0 text-xs leading-4.5 text-text-tertiary">
             {!!toolCall.time_cost && <span>{getTime(toolCall.time_cost || 0)}</span>}
             {isLLM && <span>{`${getTokenCount(tokens || 0)} tokens`}</span>}
           </div>
@@ -93,15 +91,15 @@ const ToolCallItem: FC<Props> = ({
         </div>
         {!collapseState && (
           <div className="pb-2">
-            <div className={cn('px-[10px] py-1')}>
+            <div className={cn('px-2.5 py-1')}>
               {toolCall.status === 'error' && (
-                <div className="rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] bg-[#fef3f2] px-3 py-[10px] text-xs leading-[18px] text-[#d92d20] shadow-xs">
+                <div className="rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] bg-[#fef3f2] px-3 py-2.5 text-xs leading-4.5 text-[#d92d20] shadow-xs">
                   {toolCall.error}
                 </div>
               )}
             </div>
             {toolCall.tool_input && (
-              <div className={cn('px-[10px] py-1')}>
+              <div className={cn('px-2.5 py-1')}>
                 <CodeEditor
                   readOnly
                   title={<div>INPUT</div>}
@@ -112,7 +110,7 @@ const ToolCallItem: FC<Props> = ({
               </div>
             )}
             {toolCall.tool_output && (
-              <div className={cn('px-[10px] py-1')}>
+              <div className={cn('px-2.5 py-1')}>
                 <CodeEditor
                   readOnly
                   title={<div>OUTPUT</div>}
@@ -123,7 +121,7 @@ const ToolCallItem: FC<Props> = ({
               </div>
             )}
             {isLLM && (
-              <div className={cn('px-[10px] py-1')}>
+              <div className={cn('px-2.5 py-1')}>
                 <CodeEditor
                   readOnly
                   title={<div>OBSERVATION</div>}
@@ -134,7 +132,7 @@ const ToolCallItem: FC<Props> = ({
               </div>
             )}
             {isLLM && (
-              <div className={cn('px-[10px] py-1')}>
+              <div className={cn('px-2.5 py-1')}>
                 <CodeEditor
                   readOnly
                   title={<div>{isFinal ? 'FINAL ANSWER' : 'THOUGHT'}</div>}
diff --git a/web/app/components/base/app-icon-picker/ImageInput.tsx b/web/app/components/base/app-icon-picker/ImageInput.tsx
index cff398888ad..8d0e5ec278c 100644
--- a/web/app/components/base/app-icon-picker/ImageInput.tsx
+++ b/web/app/components/base/app-icon-picker/ImageInput.tsx
@@ -90,8 +90,8 @@ const ImageInput: FC<UploaderProps> = ({ className, cropShape, onImageInput }) =
       >
         {!inputImage ? (
           <>
-            <ImagePlus className="pointer-events-none mb-3 h-[30px] w-[30px]" />
-            <div className="mb-[2px] text-sm font-medium">
+            <ImagePlus className="pointer-events-none mb-3 h-7.5 w-7.5" />
+            <div className="mb-0.5 text-sm font-medium">
               <span className="pointer-events-none">
                 {t(($) => $['imageInput.dropImageHere'], { ns: 'common' })}
                 &nbsp;
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 21f87fb3cec..61492b9b8c8 100644
--- a/web/app/components/base/app-icon-picker/index.stories.tsx
+++ b/web/app/components/base/app-icon-picker/index.stories.tsx
@@ -33,7 +33,7 @@ const AppIconPickerDemo = () => {
   const [selection, setSelection] = useState<AppIconSelection | null>(null)
 
   return (
-    <div className="flex min-h-[320px] flex-col items-start gap-4 px-6 py-8 md:px-12">
+    <div className="flex min-h-80 flex-col items-start gap-4 px-6 py-8 md:px-12">
       <button
         type="button"
         className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
index d84ec468f8f..f8cb056ecda 100644
--- a/web/app/components/base/app-icon-picker/index.tsx
+++ b/web/app/components/base/app-icon-picker/index.tsx
@@ -182,7 +182,7 @@ function AppIconPickerContent({
       className={cn(
         'w-full overflow-hidden! border-none text-left align-middle',
         s.container,
-        'h-[min(462px,calc(100dvh-2rem))]! max-h-none! w-[362px]! p-0!',
+        'h-[min(462px,calc(100dvh-2rem))]! max-h-none! w-90.5! p-0!',
         className,
       )}
     >
diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index 048c9ad183e..8fe2cb12896 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -86,7 +86,7 @@ const EditIconVariants = cva('text-text-primary-on-surface', {
       xs: 'size-3',
       tiny: 'size-3.5',
       small: 'size-5',
-      medium: 'size-[22px]',
+      medium: 'size-5.5',
       large: 'size-6',
       xl: 'size-7',
       xxl: 'size-8',
diff --git a/web/app/components/base/app-unavailable.tsx b/web/app/components/base/app-unavailable.tsx
index 539a23a191b..0a5d1511cf3 100644
--- a/web/app/components/base/app-unavailable.tsx
+++ b/web/app/components/base/app-unavailable.tsx
@@ -22,7 +22,7 @@ const AppUnavailable: FC<IAppUnavailableProps> = ({
   return (
     <div className={cn('flex h-screen w-screen items-center justify-center', className)}>
       <h1
-        className="mr-5 h-[50px] shrink-0 pr-5 text-[24px] leading-[50px] font-medium"
+        className="mr-5 h-12.5 shrink-0 pr-5 text-[24px] leading-12.5 font-medium"
         style={{
           borderRight: '1px solid rgba(0,0,0,.3)',
         }}
diff --git a/web/app/components/base/audio-gallery/AudioPlayer.tsx b/web/app/components/base/audio-gallery/AudioPlayer.tsx
index 8cdfec592fe..1df62f6680a 100644
--- a/web/app/components/base/audio-gallery/AudioPlayer.tsx
+++ b/web/app/components/base/audio-gallery/AudioPlayer.tsx
@@ -233,7 +233,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
     [duration],
   )
   return (
-    <div className="flex h-9 max-w-[420px] min-w-[240px] items-center gap-2 rounded-[10px] border border-components-panel-border-subtle bg-components-chat-input-audio-bg-alt p-2 shadow-xs backdrop-blur-xs">
+    <div className="flex h-9 max-w-105 min-w-60 items-center gap-2 rounded-[10px] border border-components-panel-border-subtle bg-components-chat-input-audio-bg-alt p-2 shadow-xs backdrop-blur-xs">
       <audio ref={audioRef} src={src} preload="auto" data-testid="audio-player">
         {/* If srcs array is provided, render multiple source elements */}
         {srcs && srcs.map((srcUrl, index) => <source key={index} src={srcUrl} />)}
@@ -263,7 +263,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
             onTouchMove={handleMouseMove}
             onTouchStart={handleCanvasInteraction}
           />
-          <div className="inline-flex min-w-[50px] items-center justify-center system-xs-medium text-text-accent-secondary">
+          <div className="inline-flex min-w-12.5 items-center justify-center system-xs-medium text-text-accent-secondary">
             <span className="rounded-[10px] px-0.5 py-1">{formatTime(duration)}</span>
           </div>
         </div>
diff --git a/web/app/components/base/badge.tsx b/web/app/components/base/badge.tsx
index 3a4745b8c9a..4d90e3eb3af 100644
--- a/web/app/components/base/badge.tsx
+++ b/web/app/components/base/badge.tsx
@@ -25,14 +25,14 @@ const Badge = ({
     <div
       className={cn(
         'relative inline-flex items-center rounded-[5px] border border-divider-deep leading-3 whitespace-nowrap text-text-tertiary',
-        size === 'xs' ? 'min-w-4 justify-center px-1 py-0.5' : 'h-5 px-[5px]',
+        size === 'xs' ? 'min-w-4 justify-center px-1 py-0.5' : 'h-5 px-1.25',
         variant === 'dimm' && 'bg-components-badge-bg-dimm',
         uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
         className,
       )}
     >
       {hasRedCornerMark && (
-        <div className="absolute top-[-2px] right-[-2px] h-1.5 w-1.5 rounded-xs border border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg shadow-sm"></div>
+        <div className="absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-xs border border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg shadow-sm"></div>
       )}
       {children || text}
     </div>
diff --git a/web/app/components/base/badge/index.tsx b/web/app/components/base/badge/index.tsx
index 56095f25828..8b0f33dec52 100644
--- a/web/app/components/base/badge/index.tsx
+++ b/web/app/components/base/badge/index.tsx
@@ -62,15 +62,15 @@ const Badge: React.FC<BadgeProps> = ({
         getBadgeState(state),
         size === 's'
           ? iconOnly
-            ? 'p-[3px]'
-            : 'px-[5px] py-[3px]'
+            ? 'p-0.75'
+            : 'px-1.25 py-0.75'
           : size === 'l'
             ? iconOnly
               ? 'p-1.5'
               : 'px-2 py-1'
             : iconOnly
               ? 'p-1'
-              : 'px-[5px] py-[2px]',
+              : 'px-1.25 py-0.5',
         uppercase ? 'system-2xs-medium-uppercase' : 'system-2xs-medium',
       )}
       style={styleCss}
diff --git a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
index 39a9dc4388e..9bdcb00fe01 100644
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@@ -303,12 +303,12 @@ const ChatWrapper = () => {
     if (!description || currentConversationId || hasSent) return null
     return (
       <div className={cn('flex flex-col items-center px-4 pt-6', isMobile && 'pt-4')}>
-        <div className="w-full max-w-[672px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md">
+        <div className="w-full max-w-2xl rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md">
           <div className={cn('p-6', isMobile && 'p-4')}>
             <div
               ref={handleDescRef}
               className={cn(
-                'relative system-xs-regular break-words whitespace-pre-wrap text-text-tertiary',
+                'relative system-xs-regular wrap-break-word whitespace-pre-wrap text-text-tertiary',
                 !descExpanded && 'line-clamp-3',
                 descExpanded && 'max-h-32 overflow-y-auto',
               )}
@@ -363,7 +363,7 @@ const ChatWrapper = () => {
     if (welcomeMessage.suggestedQuestions && welcomeMessage.suggestedQuestions?.length > 0) {
       return (
         <div className="flex min-h-[50vh] items-center justify-center px-4 py-12">
-          <div className="flex max-w-[720px] grow gap-4">
+          <div className="flex max-w-180 grow gap-4">
             <AppIcon
               size="xl"
               iconType={appData?.site.icon_type}
@@ -390,7 +390,7 @@ const ChatWrapper = () => {
           background={appData?.site.icon_background}
           imageUrl={appData?.site.icon_url}
         />
-        <div className="max-w-[768px] px-4">
+        <div className="max-w-3xl px-4">
           <Markdown
             className="body-2xl-regular! text-text-tertiary!"
             content={welcomeMessage.content}
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 85f9fdbc0cd..8cf2c1b9f72 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
@@ -79,7 +79,7 @@ const HeaderInMobile = () => {
     <>
       <div className="flex shrink-0 items-center gap-1 bg-mask-top2bottom-gray-50-to-transparent px-2 py-3">
         <ActionButton size="l" className="shrink-0" onClick={() => setShowSidebar(true)}>
-          <div className="i-ri-menu-line h-[18px] w-[18px]" />
+          <div className="i-ri-menu-line h-4.5 w-4.5" />
         </ActionButton>
         <div className="flex grow items-center justify-center">
           {!currentConversationId && (
diff --git a/web/app/components/base/chat/chat-with-history/header/index.tsx b/web/app/components/base/chat/chat-with-history/header/index.tsx
index de87b49cf99..c9193c8f676 100644
--- a/web/app/components/base/chat/chat-with-history/header/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/index.tsx
@@ -94,7 +94,7 @@ const Header = () => {
             size="l"
             onClick={() => handleSidebarCollapse(false)}
           >
-            <RiLayoutRight2Line className="h-[18px] w-[18px]" />
+            <RiLayoutRight2Line className="h-4.5 w-4.5" />
           </ActionButton>
           <div className="mr-1 shrink-0">
             <AppIcon
@@ -125,7 +125,7 @@ const Header = () => {
             </>
           )}
           <div className="flex items-center px-1">
-            <div className="h-[14px] w-px bg-divider-regular"></div>
+            <div className="h-3.5 w-px bg-divider-regular"></div>
           </div>
           {isSidebarCollapsed && (
             <Tooltip>
@@ -143,7 +143,7 @@ const Header = () => {
                       disabled={!currentConversationId || isResponding}
                       onClick={handleNewConversation}
                     >
-                      <RiEditBoxLine className="h-[18px] w-[18px]" />
+                      <RiEditBoxLine className="h-4.5 w-4.5" />
                     </ActionButton>
                   </div>
                 }
@@ -158,7 +158,7 @@ const Header = () => {
               <TooltipTrigger
                 render={
                   <ActionButton size="l" onClick={handleNewConversation}>
-                    <RiResetLeftLine className="h-[18px] w-[18px]" />
+                    <RiResetLeftLine className="h-4.5 w-4.5" />
                   </ActionButton>
                 }
               />
diff --git a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
index bf7bb20f929..6fbc4f8103d 100644
--- a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
@@ -35,7 +35,7 @@ const MobileOperationDropdown = ({
             size="l"
             state={open ? ActionButtonState.Hover : ActionButtonState.Default}
           >
-            <div className="i-ri-more-fill h-[18px] w-[18px]" aria-hidden="true" />
+            <div className="i-ri-more-fill h-4.5 w-4.5" aria-hidden="true" />
           </ActionButton>
         }
       />
diff --git a/web/app/components/base/chat/chat-with-history/index.tsx b/web/app/components/base/chat/chat-with-history/index.tsx
index ee23a1c9179..d0a7e427863 100644
--- a/web/app/components/base/chat/chat-with-history/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/index.tsx
@@ -50,7 +50,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({ className }) => {
       {!isMobile && (
         <div
           className={cn(
-            'flex w-[236px] flex-col p-1 pr-0 transition-all duration-200 ease-in-out',
+            'flex w-59 flex-col p-1 pr-0 transition-all duration-200 ease-in-out',
             isSidebarCollapsed && 'w-0 overflow-hidden p-0!',
           )}
         >
@@ -63,7 +63,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({ className }) => {
           <div
             className={cn(
               'absolute top-0 z-20 flex h-full w-[256px] flex-col p-2 transition-all duration-500 ease-in-out',
-              showSidePanel ? 'left-0' : 'left-[-248px]',
+              showSidePanel ? 'left-0' : '-left-62',
             )}
             onMouseEnter={() => setShowSidePanel(true)}
             onMouseLeave={() => setShowSidePanel(false)}
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
index 36d4423f4bf..ee4da3715c9 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
@@ -152,7 +152,7 @@ const InputsFormContent = ({ showTip }: Props) => {
               value={inputsFormValue?.[form.variable] || ''}
               onChange={(v) => handleFormChange(form.variable, v)}
               noWrapper
-              className="bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
+              className="bg h-20 overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
               placeholder={<div className="whitespace-pre">{form.json_schema}</div>}
             />
           )}
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 ce761e554a2..0b77ef3361c 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
@@ -29,7 +29,7 @@ const InputsFormNode = ({ collapsed, setCollapsed }: Props) => {
     <div className={cn('flex flex-col items-center px-4 pt-6', isMobile && 'pt-4')}>
       <div
         className={cn(
-          'w-full max-w-[672px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md',
+          'w-full max-w-2xl rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md',
           collapsed && 'border border-components-card-border bg-components-card-bg shadow-none',
         )}
       >
@@ -90,7 +90,7 @@ const InputsFormNode = ({ collapsed, setCollapsed }: Props) => {
         )}
       </div>
       {collapsed && (
-        <div className="flex w-full max-w-[720px] items-center py-4">
+        <div className="flex w-full max-w-180 items-center py-4">
           <Divider bgStyle="gradient" className="h-px basis-1/2 rotate-180" />
           <Divider bgStyle="gradient" className="h-px basis-1/2" />
         </div>
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 e08ed97e575..3cc0df4e175 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
@@ -15,7 +15,7 @@ const ViewFormDropdown = () => {
       <PopoverTrigger
         render={
           <ActionButton size="l" state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
-            <RiChatSettingsLine className="h-[18px] w-[18px]" />
+            <RiChatSettingsLine className="h-4.5 w-4.5" />
           </ActionButton>
         }
       />
@@ -25,7 +25,7 @@ const ViewFormDropdown = () => {
         alignOffset={4}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-xs">
+        <div className="w-100 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="size-6 shrink-0" />
             <div className="grow system-xl-semibold text-text-secondary">
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 609a6f76198..40493ae0023 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
@@ -107,12 +107,12 @@ const Sidebar = ({ isPanel }: Props) => {
         </div>
         {!isMobile && isSidebarCollapsed && (
           <ActionButton size="l" onClick={() => handleSidebarCollapse(false)}>
-            <span aria-hidden className="i-ri-expand-right-line h-[18px] w-[18px]" />
+            <span aria-hidden className="i-ri-expand-right-line h-4.5 w-4.5" />
           </ActionButton>
         )}
         {!isMobile && !isSidebarCollapsed && (
           <ActionButton size="l" onClick={() => handleSidebarCollapse(true)}>
-            <span aria-hidden className="i-ri-layout-left-2-line h-[18px] w-[18px]" />
+            <span aria-hidden className="i-ri-layout-left-2-line h-4.5 w-4.5" />
           </ActionButton>
         )}
       </div>
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx b/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
index 746d9f0bce7..85fd0b61467 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
@@ -27,7 +27,7 @@ const RenameModal: FC<IRenameModalProps> = ({ isShow, saveLoading, name, onClose
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {t(($) => $['chat.renameConversation'], { ns: 'common' })}
         </DialogTitle>
-        <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">
+        <div className="mt-6 text-sm leading-5.25 font-medium text-text-primary">
           {t(($) => $['chat.conversationName'], { ns: 'common' })}
         </div>
         <Input
diff --git a/web/app/components/base/chat/chat/answer/__tests__/workflow-process.spec.tsx b/web/app/components/base/chat/chat/answer/__tests__/workflow-process.spec.tsx
index 44a3af66837..80ddfc8e79a 100644
--- a/web/app/components/base/chat/chat/answer/__tests__/workflow-process.spec.tsx
+++ b/web/app/components/base/chat/chat/answer/__tests__/workflow-process.spec.tsx
@@ -160,7 +160,7 @@ describe('WorkflowProcessItem', () => {
         />,
       )
       expect(screen.getByTestId('workflow-process-item')).toHaveClass(
-        'bg-[var(--color-workflow-process-failed-bg)]',
+        'bg-(--color-workflow-process-failed-bg)',
       )
     })
 
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx b/web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx
index 26097c9feb9..fcae503f566 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx
@@ -10,7 +10,7 @@ type ExecutedActionProps = {
 const ExecutedAction = ({ executedAction }: ExecutedActionProps) => {
   return (
     <div className="flex flex-col gap-y-1 py-1" data-testid="executed-action">
-      <Divider className="mt-1 mb-2 w-[30px]" />
+      <Divider className="mt-1 mb-2 w-7.5" />
       <div className="flex items-center gap-x-1 system-xs-regular text-text-tertiary">
         <div className="i-custom-vender-workflow-trigger-all size-3.5 shrink-0" />
         <Trans
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx b/web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx
index 275485421c5..6b09c9d5430 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx
@@ -31,7 +31,7 @@ const HumanInputFieldRenderer = ({ field, value, onChange }: Props) => {
     return (
       <Textarea
         aria-label={field.output_variable_name}
-        className="h-[104px] sm:text-xs"
+        className="h-26 sm:text-xs"
         value={typeof value === 'string' ? value : ''}
         onValueChange={(nextValue) => onChange(nextValue)}
         data-testid="content-item-textarea"
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/submitted-content-item.tsx b/web/app/components/base/chat/chat/answer/human-input-content/submitted-content-item.tsx
index 40b4ee95a50..5983efbbbcf 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/submitted-content-item.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/submitted-content-item.tsx
@@ -48,7 +48,7 @@ const SubmittedContentItem = ({ content, formInputFields, values }: SubmittedCon
   if (isParagraphFormInput(field)) {
     return (
       <span
-        className="body-md-regular break-words text-text-primary"
+        className="body-md-regular wrap-break-word text-text-primary"
         data-testid={`submitted-field-${fieldName}`}
       >
         {typeof value === 'string' ? value : ''}
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/submitted-field-values.tsx b/web/app/components/base/chat/chat/answer/human-input-content/submitted-field-values.tsx
index 8f7a9483e9a..96e97c74e79 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/submitted-field-values.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/submitted-field-values.tsx
@@ -63,7 +63,7 @@ const SubmittedFieldValues = ({ fields, values }: SubmittedFieldValuesProps) =>
         return (
           <div
             key={fieldName}
-            className="body-md-regular break-words text-text-primary"
+            className="body-md-regular wrap-break-word text-text-primary"
             data-testid={`submitted-field-${fieldName}`}
           >
             {String(value)}
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/tips.tsx b/web/app/components/base/chat/chat/answer/human-input-content/tips.tsx
index 058d736d94e..2b1812f55e5 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/tips.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/tips.tsx
@@ -16,7 +16,7 @@ const Tips = ({ showEmailTip, isEmailDebugMode, showDebugModeTip }: TipsProps) =
 
   return (
     <>
-      <Divider className="my-2! w-[30px]" />
+      <Divider className="my-2! w-7.5" />
       <div className="space-y-1 pt-1" data-testid="tips">
         {showEmailTip && !isEmailDebugMode && (
           <div className="system-xs-regular text-text-secondary">
diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx
index 13f5e7e83dc..f39eca3d619 100644
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@@ -163,7 +163,7 @@ const Answer: FC<AnswerProps> = ({
         <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">
+            <div className="absolute -top-0.75 -left-0.75 flex h-4 w-4 items-center rounded-full border-[0.5px] border-divider-subtle bg-background-section-burn pl-1.5 shadow-xs">
               <LoadingAnim type="avatar" />
             </div>
           )}
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index 53c34e7aa0e..09be259d7e1 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -220,7 +220,7 @@ function Operation({
           'absolute flex justify-end gap-1',
           hasWorkflowProcess && 'right-2 -bottom-4',
           !positionRight && 'right-2 -bottom-4',
-          !hasWorkflowProcess && positionRight && 'top-[9px]!',
+          !hasWorkflowProcess && positionRight && 'top-2.25!',
         )}
         style={!hasWorkflowProcess && positionRight ? { left: contentWidth + 8 } : {}}
         data-testid="operation-bar"
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 6ec2d2b917d..91d988ff118 100644
--- a/web/app/components/base/chat/chat/answer/workflow-process.tsx
+++ b/web/app/components/base/chat/chat/answer/workflow-process.tsx
@@ -53,15 +53,15 @@ const WorkflowProcessItem = ({
       className={cn(
         '-mx-1 rounded-xl px-2.5',
         collapse
-          ? 'border-l-[0.25px] border-components-panel-border py-[7px]'
-          : 'border-[0.5px] border-components-panel-border-subtle px-1 pt-[7px] pb-1',
+          ? 'border-l-[0.25px] border-components-panel-border py-1.75'
+          : 'border-[0.5px] border-components-panel-border-subtle px-1 pt-1.75 pb-1',
         running && !collapse && 'bg-background-section-burn',
         succeeded && !collapse && 'bg-state-success-hover',
         failed && !collapse && 'bg-state-destructive-hover',
         paused && !collapse && 'bg-state-warning-hover',
         collapse && !failed && !paused && 'bg-workflow-process-bg',
         collapse && paused && 'bg-workflow-process-paused-bg',
-        collapse && failed && 'bg-[var(--color-workflow-process-failed-bg)]',
+        collapse && failed && 'bg-(--color-workflow-process-failed-bg)',
       )}
       data-testid="workflow-process-item"
     >
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 be122a43f89..32fdc40c9fd 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
@@ -303,16 +303,16 @@ const ChatInputArea = ({
     <>
       <div
         className={cn(
-          'pointer-events-auto relative z-10 overflow-hidden rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-[9px] shadow-md',
+          'pointer-events-auto relative z-10 overflow-hidden rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-2.25 shadow-md',
           isDragActive &&
             'border border-dashed border-components-option-card-option-selected-border',
           disabled && 'pointer-events-none border-components-panel-border opacity-50 shadow-none',
         )}
       >
-        <div className="px-[9px] pt-[9px]">
+        <div className="px-2.25 pt-2.25">
           <FileListInChatInput fileConfig={visionConfig!} />
         </div>
-        <div className="relative max-h-[158px] overflow-x-hidden overflow-y-auto px-[9px]">
+        <div className="relative max-h-39.5 overflow-x-hidden overflow-y-auto px-2.25">
           <div ref={wrapperRef} className="flex items-center justify-between">
             <div className="relative flex w-full grow items-center">
               <div
@@ -360,7 +360,7 @@ const ChatInputArea = ({
           </div>
         </div>
         {showVoiceInput && speechToTextTarget && (
-          <div className="px-[9px]">
+          <div className="px-2.25">
             <VoiceInput
               ref={voiceInputRef}
               target={speechToTextTarget}
@@ -372,7 +372,7 @@ const ChatInputArea = ({
             />
           </div>
         )}
-        {isMultipleLine && <div className="px-[9px]">{operation}</div>}
+        {isMultipleLine && <div className="px-2.25">{operation}</div>}
       </div>
       {shouldShowFooterNotice && (
         <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">
diff --git a/web/app/components/base/chat/chat/citation/index.tsx b/web/app/components/base/chat/chat/citation/index.tsx
index c7b7086fb58..2ae793f9a52 100644
--- a/web/app/components/base/chat/chat/citation/index.tsx
+++ b/web/app/components/base/chat/chat/citation/index.tsx
@@ -87,7 +87,7 @@ const Citation: FC<CitationProps> = ({
           <div
             key={res.documentId}
             data-testid="citation-measurement-item"
-            className="absolute top-0 left-0 -z-10 mr-1 mb-1 h-7 w-auto max-w-[240px] pr-2 pl-7 text-xs whitespace-nowrap opacity-0"
+            className="absolute top-0 left-0 -z-10 mr-1 mb-1 h-7 w-auto max-w-60 pr-2 pl-7 text-xs whitespace-nowrap opacity-0"
             ref={(ele: HTMLDivElement | null) => {
               elesRef.current[index] = ele!
             }}
diff --git a/web/app/components/base/chat/chat/citation/popup.tsx b/web/app/components/base/chat/chat/citation/popup.tsx
index 04239acf97b..df10c98c1b5 100644
--- a/web/app/components/base/chat/chat/citation/popup.tsx
+++ b/web/app/components/base/chat/chat/citation/popup.tsx
@@ -43,7 +43,7 @@ const Popup: FC<PopupProps> = ({ data, showHitInfo = 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"
+            className="flex h-7 max-w-60 items-center rounded-lg bg-components-button-secondary-bg px-2"
           >
             <FileIcon type={fileType} className="mr-1 size-4 shrink-0" />
             <div className="truncate text-xs text-text-tertiary">{data.documentName}</div>
@@ -58,10 +58,10 @@ const Popup: FC<PopupProps> = ({ data, showHitInfo = false }) => {
       >
         <div
           data-testid="popup-content"
-          className="max-w-[360px] rounded-xl bg-background-section-burn shadow-lg backdrop-blur-[5px]"
+          className="max-w-90 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">
+            <div className="flex h-4.5 items-center">
               <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') &&
@@ -80,7 +80,7 @@ const Popup: FC<PopupProps> = ({ data, showHitInfo = false }) => {
               </div>
             </div>
           </div>
-          <div className="max-h-[450px] overflow-y-auto rounded-lg bg-components-panel-bg px-4 py-0.5">
+          <div className="max-h-112.5 overflow-y-auto rounded-lg bg-components-panel-bg px-4 py-0.5">
             <div className="w-full">
               {data.sources.map((source, index) => {
                 const itemKey = source.document_id
@@ -107,7 +107,7 @@ const Popup: FC<PopupProps> = ({ data, showHitInfo = false }) => {
                         {showHitInfo && (
                           <Link
                             href={`/datasets/${source.dataset_id}/documents/${source.document_id}`}
-                            className="hidden h-[18px] items-center text-xs text-text-accent group-hover:flex"
+                            className="hidden h-4.5 items-center text-xs text-text-accent group-hover:flex"
                           >
                             {t(($) => $['chat.citation.linkToDataset'], { ns: 'common' })}
                             <i
diff --git a/web/app/components/base/chat/chat/content-switch.tsx b/web/app/components/base/chat/chat/content-switch.tsx
index b56d5655e69..f9100863f7c 100644
--- a/web/app/components/base/chat/chat/content-switch.tsx
+++ b/web/app/components/base/chat/chat/content-switch.tsx
@@ -25,7 +25,7 @@ export default function ContentSwitch({
           disabled={prevDisabled}
           onClick={() => !prevDisabled && switchSibling('prev')}
         >
-          <ChevronRight className="h-[14px] w-[14px] rotate-180 text-text-primary" />
+          <ChevronRight className="h-3.5 w-3.5 rotate-180 text-text-primary" />
         </button>
         <span className="px-2 text-xs text-text-primary">
           {currentIndex + 1} /{count}
@@ -37,7 +37,7 @@ export default function ContentSwitch({
           disabled={nextDisabled}
           onClick={() => !nextDisabled && switchSibling('next')}
         >
-          <ChevronRight className="h-[14px] w-[14px] text-text-primary" />
+          <ChevronRight className="h-3.5 w-3.5 text-text-primary" />
         </button>
       </div>
     )
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index 6511e87707d..51466a847b5 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -273,7 +273,7 @@ const Chat: FC<ChatProps> = ({
                   className="pointer-events-auto border-components-panel-border bg-components-panel-bg text-components-button-secondary-text"
                   onClick={onStopResponding}
                 >
-                  <div className="mr-[5px] i-custom-vender-solid-mediaAndDevices-stop-circle h-3.5 w-3.5" />
+                  <div className="mr-1.25 i-custom-vender-solid-mediaAndDevices-stop-circle h-3.5 w-3.5" />
                   <span className="text-xs font-normal">
                     {t(($) => $['operation.stopResponding'], { ns: 'appDebug' })}
                   </span>
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index 88fa754a654..1e435ba1c32 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -182,7 +182,7 @@ const Question: FC<QuestionProps> = ({
             !isEditing &&
               'rounded-2xl bg-background-gradient-bg-fill-chat-bubble-bg-3 text-text-primary',
             isEditing &&
-              'rounded-[24px] border-[3px] border-components-option-card-option-selected-border bg-components-panel-bg-blur shadow-lg',
+              'rounded-3xl border-[3px] border-components-option-card-option-selected-border bg-components-panel-bg-blur shadow-lg',
           )}
           style={
             !isEditing && theme?.chatBubbleColorStyle
@@ -202,7 +202,7 @@ const Question: FC<QuestionProps> = ({
             <Markdown content={content} />
           ) : (
             <div className="flex flex-col gap-4">
-              <div className="max-h-[158px] overflow-x-hidden overflow-y-auto pr-1">
+              <div className="max-h-39.5 overflow-x-hidden overflow-y-auto pr-1">
                 <Textarea
                   className={cn(
                     'w-full resize-none bg-transparent p-0 body-lg-regular leading-7 text-text-primary outline-hidden',
@@ -236,7 +236,7 @@ const Question: FC<QuestionProps> = ({
             />
           )}
         </div>
-        <div className="mt-1 h-[18px]" />
+        <div className="mt-1 h-4.5" />
       </div>
       {!hideAvatar && (
         <div className="size-10 shrink-0">
diff --git a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
index 839b2fe3a40..493036889d6 100644
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -291,12 +291,12 @@ const ChatWrapper = () => {
     if (!description || currentConversationId || hasSent) return null
     return (
       <div className={cn('flex flex-col items-center px-4 pt-6', isMobile && 'pt-4')}>
-        <div className="w-full max-w-[672px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md">
+        <div className="w-full max-w-2xl rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md">
           <div className={cn('p-6', isMobile && 'p-4')}>
             <div
               ref={descRef}
               className={cn(
-                'relative system-xs-regular break-words whitespace-pre-wrap text-text-tertiary',
+                'relative system-xs-regular wrap-break-word whitespace-pre-wrap text-text-tertiary',
                 !descExpanded && 'line-clamp-3',
                 descExpanded && 'max-h-32 overflow-y-auto',
               )}
@@ -365,7 +365,7 @@ const ChatWrapper = () => {
             isMobile ? 'min-h-[30vh] py-0' : 'h-[50vh]',
           )}
         >
-          <div className="flex max-w-[720px] grow gap-4">
+          <div className="flex max-w-180 grow gap-4">
             <AppIcon
               size="xl"
               iconType={appData?.site.icon_type}
@@ -395,7 +395,7 @@ const ChatWrapper = () => {
           background={appData?.site.icon_background}
           imageUrl={appData?.site.icon_url}
         />
-        <div className="max-w-[768px] px-4">
+        <div className="max-w-3xl px-4">
           <Markdown
             className="body-2xl-regular! text-text-tertiary!"
             content={welcomeMessage.content}
diff --git a/web/app/components/base/chat/embedded-chatbot/header/index.tsx b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
index 9d64d7fa235..9c307d3fd66 100644
--- a/web/app/components/base/chat/embedded-chatbot/header/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
@@ -126,14 +126,11 @@ const Header: FC<IHeaderProps> = ({
                   >
                     {expanded ? (
                       <div
-                        className="i-ri-collapse-diagonal-2-line h-[18px] w-[18px]"
+                        className="i-ri-collapse-diagonal-2-line h-4.5 w-4.5"
                         aria-hidden="true"
                       />
                     ) : (
-                      <div
-                        className="i-ri-expand-diagonal-2-line h-[18px] w-[18px]"
-                        aria-hidden="true"
-                      />
+                      <div className="i-ri-expand-diagonal-2-line h-4.5 w-4.5" aria-hidden="true" />
                     )}
                   </ActionButton>
                 }
@@ -154,7 +151,7 @@ const Header: FC<IHeaderProps> = ({
                     aria-label={t(($) => $['chat.resetChat'], { ns: 'share' })}
                     onClick={onCreateNewChat}
                   >
-                    <div className="i-ri-reset-left-line h-[18px] w-[18px]" aria-hidden="true" />
+                    <div className="i-ri-reset-left-line h-4.5 w-4.5" aria-hidden="true" />
                   </ActionButton>
                 }
               />
@@ -200,7 +197,7 @@ const Header: FC<IHeaderProps> = ({
                   {expanded ? (
                     <div
                       className={cn(
-                        'i-ri-collapse-diagonal-2-line h-[18px] w-[18px]',
+                        'i-ri-collapse-diagonal-2-line h-4.5 w-4.5',
                         theme?.colorPathOnHeader,
                       )}
                       aria-hidden="true"
@@ -208,7 +205,7 @@ const Header: FC<IHeaderProps> = ({
                   ) : (
                     <div
                       className={cn(
-                        'i-ri-expand-diagonal-2-line h-[18px] w-[18px]',
+                        'i-ri-expand-diagonal-2-line h-4.5 w-4.5',
                         theme?.colorPathOnHeader,
                       )}
                       aria-hidden="true"
@@ -234,10 +231,7 @@ const Header: FC<IHeaderProps> = ({
                   onClick={onCreateNewChat}
                 >
                   <div
-                    className={cn(
-                      'i-ri-reset-left-line h-[18px] w-[18px]',
-                      theme?.colorPathOnHeader,
-                    )}
+                    className={cn('i-ri-reset-left-line h-4.5 w-4.5', theme?.colorPathOnHeader)}
                     aria-hidden="true"
                   />
                 </ActionButton>
diff --git a/web/app/components/base/chat/embedded-chatbot/index.tsx b/web/app/components/base/chat/embedded-chatbot/index.tsx
index d67dc55f1c6..06622364671 100644
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@@ -76,7 +76,7 @@ const Chatbot = () => {
       </div>
       {/* powered by */}
       {isMobile && (
-        <div className="flex h-[60px] shrink-0 items-center pl-2">
+        <div className="flex h-15 shrink-0 items-center pl-2">
           {!appData?.custom_config?.remove_webapp_brand && (
             <div className={cn('flex shrink-0 items-center gap-1.5 px-2')}>
               <div className="system-2xs-medium-uppercase text-text-tertiary">
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
index 61e9fbc6c13..f399bb55b39 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
@@ -156,7 +156,7 @@ const InputsFormContent = ({ showTip }: Props) => {
               value={inputsFormValue?.[form.variable] || ''}
               onChange={(v) => handleFormChange(form.variable, v)}
               noWrapper
-              className="h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
+              className="h-20 overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
               placeholder={<div className="whitespace-pre">{form.json_schema}</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 fddaaa2f4c2..9b999a15744 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
@@ -38,7 +38,7 @@ const InputsFormNode = ({ collapsed, setCollapsed }: Props) => {
     >
       <div
         className={cn(
-          'w-full max-w-[672px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md',
+          'w-full max-w-2xl rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md',
           collapsed && 'border border-components-card-border bg-components-card-bg shadow-none',
           isTryApp && 'max-w-[auto]',
         )}
@@ -100,7 +100,7 @@ const InputsFormNode = ({ collapsed, setCollapsed }: Props) => {
         )}
       </div>
       {collapsed && (
-        <div className="flex w-full max-w-[720px] items-center py-4">
+        <div className="flex w-full max-w-180 items-center py-4">
           <Divider bgStyle="gradient" className="h-px basis-1/2 rotate-180" />
           <Divider bgStyle="gradient" className="h-px basis-1/2" />
         </div>
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 676dd56ffab..78eb10c21df 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
@@ -23,7 +23,7 @@ const ViewFormDropdown = ({ iconColor }: Props) => {
             state={open ? ActionButtonState.Hover : ActionButtonState.Default}
             data-testid="view-form-dropdown-trigger"
           >
-            <div className={cn('i-ri-chat-settings-line h-[18px] w-[18px] shrink-0', iconColor)} />
+            <div className={cn('i-ri-chat-settings-line h-4.5 w-4.5 shrink-0', iconColor)} />
           </ActionButton>
         }
       />
@@ -35,7 +35,7 @@ const ViewFormDropdown = ({ iconColor }: Props) => {
       >
         <div
           data-testid="view-form-dropdown-content"
-          className="w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-xs"
+          className="w-100 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 size-6 shrink-0" />
diff --git a/web/app/components/base/chip/index.tsx b/web/app/components/base/chip/index.tsx
index 8656291b88b..d67306d4206 100644
--- a/web/app/components/base/chip/index.tsx
+++ b/web/app/components/base/chip/index.tsx
@@ -121,7 +121,7 @@ function Chip<T extends ItemValue>({
           placement="bottom-start"
           sideOffset={4}
           popupClassName={cn(
-            'relative w-[240px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-0 text-sm text-text-secondary shadow-lg outline-hidden backdrop-blur-[5px] focus:outline-hidden focus-visible:outline-hidden',
+            'relative w-60 rounded-xl border-[0.5px] bg-components-panel-bg-blur p-0 text-sm text-text-secondary shadow-lg outline-hidden backdrop-blur-[5px] focus:outline-hidden focus-visible:outline-hidden',
             panelClassName,
           )}
           listClassName="max-h-72 p-1"
diff --git a/web/app/components/base/corner-label/index.tsx b/web/app/components/base/corner-label/index.tsx
index 5fb433f1d60..ad7a99551d9 100644
--- a/web/app/components/base/corner-label/index.tsx
+++ b/web/app/components/base/corner-label/index.tsx
@@ -18,7 +18,7 @@ const CornerLabel: React.FC<CornerLabelProps> = ({
 }) => {
   return (
     <div className={cn('group/corner-label inline-flex items-start', className)}>
-      <Corner className={cn('h-5 w-[13px] text-background-section-burn', cornerClassName)} />
+      <Corner className={cn('h-5 w-3.25 text-background-section-burn', cornerClassName)} />
       <div
         className={cn(
           'flex items-center gap-0.5 bg-background-section-burn py-1 pr-2',
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 9e23e5d776a..9419fc12493 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
@@ -7,7 +7,7 @@ type OptionListProps = {
 } & HTMLAttributes<HTMLUListElement>
 
 const optionListClassName = cn(
-  'flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]',
+  'flex h-52 flex-col gap-y-0.5 overflow-y-auto pb-46',
   'scrollbar-none [&::-webkit-scrollbar]:hidden',
 )
 
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 050ba253383..00975777740 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
@@ -45,7 +45,7 @@ const Footer: FC<DatePickerFooterProps> = ({
           className="flex items-center justify-center px-1.5 py-1 system-xs-medium text-components-button-secondary-accent-text"
           onClick={handleSelectCurrentDate}
         >
-          <span className="px-[3px]">{t(($) => $['operation.now'], { ns: 'time' })}</span>
+          <span className="px-0.75">{t(($) => $['operation.now'], { ns: 'time' })}</span>
         </button>
         {/* Confirm Button */}
         <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 3058438cae9..68e1e97cec4 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
@@ -29,14 +29,14 @@ const Header: FC<DatePickerHeaderProps> = ({
         onClick={onClickPrevMonth}
         className="rounded-lg p-1.5 hover:bg-state-base-hover"
       >
-        <RiArrowUpSLine className="h-[18px] w-[18px] text-text-secondary" />
+        <RiArrowUpSLine className="h-4.5 w-4.5 text-text-secondary" />
       </button>
       <button
         type="button"
         onClick={onClickNextMonth}
         className="rounded-lg p-1.5 hover:bg-state-base-hover"
       >
-        <RiArrowDownSLine className="h-[18px] w-[18px] text-text-secondary" />
+        <RiArrowDownSLine className="h-4.5 w-4.5 text-text-secondary" />
       </button>
     </div>
   )
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 77603748ffe..f70ab90fb3b 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
@@ -244,7 +244,7 @@ const DatePicker = ({
             })
           ) : (
             <div
-              className="group flex w-[252px] cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt"
+              className="group flex w-63 cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt"
               onClick={handleClickTrigger}
               data-testid="date-picker-trigger"
             >
@@ -281,7 +281,7 @@ const DatePicker = ({
         sideOffset={0}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5">
+        <div className="mt-1 w-63 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5">
           {/* Header */}
           {view === ViewType.date ? (
             <DatePickerHeader
diff --git a/web/app/components/base/date-and-time-picker/index.stories.tsx b/web/app/components/base/date-and-time-picker/index.stories.tsx
index 46f020cd972..3fe8cac2f07 100644
--- a/web/app/components/base/date-and-time-picker/index.stories.tsx
+++ b/web/app/components/base/date-and-time-picker/index.stories.tsx
@@ -41,7 +41,7 @@ const DatePickerPlayground = (props: DatePickerProps) => {
         onChange={setValue}
         onClear={() => setValue(undefined)}
       />
-      <div className="w-[252px] rounded-lg border border-divider-subtle bg-components-panel-bg p-3 text-xs text-text-secondary">
+      <div className="w-63 rounded-lg border border-divider-subtle bg-components-panel-bg p-3 text-xs text-text-secondary">
         Selected datetime:{' '}
         <span className="font-mono text-text-primary">{value ? value.format() : 'undefined'}</span>
       </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 6f4b3529077..7587e08d78e 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
@@ -224,7 +224,7 @@ const TimePicker = ({
             <div
               className={cn(
                 'group flex cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt',
-                triggerFullWidth ? 'w-full min-w-0' : 'w-[252px]',
+                triggerFullWidth ? 'w-full min-w-0' : 'w-63',
               )}
               onClick={handleClickTrigger}
               data-testid="time-picker-trigger"
@@ -269,7 +269,7 @@ const TimePicker = ({
         className={popupClassName}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5">
+        <div className="mt-1 w-63 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5">
           {/* Header */}
           <Header title={title} />
 
diff --git a/web/app/components/base/effect/index.tsx b/web/app/components/base/effect/index.tsx
index 931c7491647..69dd8b93862 100644
--- a/web/app/components/base/effect/index.tsx
+++ b/web/app/components/base/effect/index.tsx
@@ -9,7 +9,7 @@ const Effect = ({ className }: EffectProps) => {
   return (
     <div
       className={cn(
-        'absolute size-[112px] rounded-full bg-util-colors-blue-brand-blue-brand-500 blur-[80px]',
+        'absolute size-28 rounded-full bg-util-colors-blue-brand-blue-brand-500 blur-[80px]',
         className,
       )}
     />
diff --git a/web/app/components/base/emoji-picker/Inner.stories.tsx b/web/app/components/base/emoji-picker/Inner.stories.tsx
index 6aabfffbfb7..4a630ee0168 100644
--- a/web/app/components/base/emoji-picker/Inner.stories.tsx
+++ b/web/app/components/base/emoji-picker/Inner.stories.tsx
@@ -24,7 +24,7 @@ const InnerDemo = () => {
   const [selection, setSelection] = useState<{ emoji: string; background: string } | null>(null)
 
   return (
-    <div className="flex h-[520px] flex-col gap-4 rounded-xl border border-divider-subtle bg-components-panel-bg p-6 shadow-lg">
+    <div className="flex h-130 flex-col gap-4 rounded-xl border border-divider-subtle bg-components-panel-bg p-6 shadow-lg">
       <EmojiPickerInner
         onSelect={(emoji, background) => setSelection({ emoji, background })}
         className="flex-1 overflow-hidden rounded-xl border border-divider-subtle bg-white"
diff --git a/web/app/components/base/emoji-picker/Inner.tsx b/web/app/components/base/emoji-picker/Inner.tsx
index c9981dc20a0..f30319045e7 100644
--- a/web/app/components/base/emoji-picker/Inner.tsx
+++ b/web/app/components/base/emoji-picker/Inner.tsx
@@ -68,7 +68,7 @@ function EmojiPickerInner({ emoji, background, onSelect, className }: IEmojiPick
       </div>
       <Divider className="my-3" />
 
-      <div className="max-h-[200px] w-full overflow-x-hidden overflow-y-auto px-3">
+      <div className="max-h-50 w-full overflow-x-hidden overflow-y-auto px-3">
         {isSearching && (
           <>
             <div key="category-search" className="flex flex-col">
diff --git a/web/app/components/base/emoji-picker/index.stories.tsx b/web/app/components/base/emoji-picker/index.stories.tsx
index 30ee161792d..e8849ab9f74 100644
--- a/web/app/components/base/emoji-picker/index.stories.tsx
+++ b/web/app/components/base/emoji-picker/index.stories.tsx
@@ -32,7 +32,7 @@ const EmojiPickerDemo = () => {
   const [selection, setSelection] = useState<{ emoji: string; background: string } | null>(null)
 
   return (
-    <div className="flex min-h-[320px] flex-col items-start gap-4 px-6 py-8 md:px-12">
+    <div className="flex min-h-80 flex-col items-start gap-4 px-6 py-8 md:px-12">
       <button
         type="button"
         className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 80a0488e362..15c4de8b324 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -39,7 +39,7 @@ function EmojiPickerContent({ className, onOpenChange, onSelect }: EmojiPickerCo
     <DialogContent
       className={cn(
         'max-h-none w-full overflow-hidden! text-left align-middle',
-        'flex max-h-[552px] flex-col rounded-xl border-[0.5px] border-divider-subtle p-0 shadow-xl',
+        'flex max-h-138 flex-col rounded-xl border-[0.5px] border-divider-subtle p-0 shadow-xl',
         className,
       )}
     >
diff --git a/web/app/components/base/error-boundary/index.tsx b/web/app/components/base/error-boundary/index.tsx
index 938699489f1..9e6ac2b9b71 100644
--- a/web/app/components/base/error-boundary/index.tsx
+++ b/web/app/components/base/error-boundary/index.tsx
@@ -122,7 +122,7 @@ class ErrorBoundaryInner extends React.Component<
         <div
           className={cn(
             'border-state-critical-border bg-state-critical-hover-alt flex flex-col items-center justify-center rounded-lg border p-8',
-            isolate && 'min-h-[200px]',
+            isolate && 'min-h-50',
             className,
           )}
         >
diff --git a/web/app/components/base/features/index.stories.tsx b/web/app/components/base/features/index.stories.tsx
index 60de7bfd1b1..35e8d6e6b57 100644
--- a/web/app/components/base/features/index.stories.tsx
+++ b/web/app/components/base/features/index.stories.tsx
@@ -40,7 +40,7 @@ const FeaturesDemo = () => {
 
   return (
     <FeaturesProvider features={features}>
-      <div className="flex h-[520px] items-center justify-center bg-background-default-subtle">
+      <div className="flex h-130 items-center justify-center bg-background-default-subtle">
         <div className="rounded-xl border border-divider-subtle bg-components-panel-bg p-6 text-sm text-text-secondary shadow-inner">
           <div className="mb-4 font-medium text-text-primary">Feature toggles preview</div>
           <div className="flex gap-3">
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 9652ce9c13c..8e78e0054d1 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
@@ -85,7 +85,7 @@ const ConfigParamModal: FC<Props> = ({
         if (!open) onHide()
       }}
     >
-      <DialogContent className="mt-14! w-[640px]! max-w-none! border-none p-6! text-left align-middle">
+      <DialogContent className="mt-14! w-160! 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' })}
         </div>
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 c3149562e3d..aec5d6a61bd 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
@@ -105,7 +105,7 @@ const AnnotationReply = ({ disabled, onChange }: Props) => {
                       {annotationReply.score_threshold ?? '-'}
                     </div>
                   </div>
-                  <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
+                  <div className="h-6.75 w-px rotate-12 bg-divider-subtle"></div>
                   <div className="">
                     <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">
                       {t(($) => $['modelProvider.embeddingModel.key'], { ns: 'common' })}
@@ -119,7 +119,7 @@ const AnnotationReply = ({ disabled, onChange }: Props) => {
               {isHovering && (
                 <div className="flex items-center justify-between">
                   <Button
-                    className="w-[178px]"
+                    className="w-44.5"
                     onClick={() => setIsShowAnnotationConfigInit(true)}
                     disabled={disabled}
                   >
@@ -127,7 +127,7 @@ const AnnotationReply = ({ disabled, onChange }: Props) => {
                     {t(($) => $['operation.params'], { ns: 'common' })}
                   </Button>
                   <Button
-                    className="w-[178px]"
+                    className="w-44.5"
                     onClick={() => {
                       router.push(`/app/${appId}/annotations`)
                     }}
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
index 5d5f27cfa8a..7a055f1d4ab 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
@@ -25,7 +25,7 @@ const ScoreSlider: FC<Props> = ({ className, value, onChange }) => {
 
   return (
     <div className={className}>
-      <div className="relative mt-[14px]">
+      <div className="relative mt-3.5">
         <Slider
           className="w-full"
           value={safeValue}
@@ -36,7 +36,7 @@ const ScoreSlider: FC<Props> = ({ className, value, onChange }) => {
           aria-label={t(($) => $['feature.annotation.scoreThreshold.title'], { ns: 'appDebug' })}
         />
         <div
-          className="pointer-events-none absolute top-[-16px] system-sm-semibold text-text-primary"
+          className="pointer-events-none absolute -top-4 system-sm-semibold text-text-primary"
           style={{
             left: `calc(4px + ${safeValue / SCORE_MAX} * (100% - 8px))`,
             transform: 'translateX(-50%)',
@@ -45,7 +45,7 @@ const ScoreSlider: FC<Props> = ({ className, value, onChange }) => {
           {(safeValue / 100).toFixed(2)}
         </div>
       </div>
-      <div className="mt-[10px] flex items-center justify-between system-xs-semibold-uppercase">
+      <div className="mt-2.5 flex items-center justify-between system-xs-semibold-uppercase">
         <div className="flex space-x-1 text-util-colors-cyan-cyan-500">
           <div>0.0</div>
           <div>·</div>
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 c043c1b40e0..878d22807a4 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
@@ -139,7 +139,7 @@ const OpeningSettingModal = ({
               {t(($) => $['openingStatement.openingQuestionDescription'], { ns: 'appDebug' })}
             </Infotip>
           </div>
-          <div className="text-xs leading-[18px] font-medium text-text-tertiary">
+          <div className="text-xs leading-4.5 font-medium text-text-tertiary">
             {tempSuggestedQuestions.length}/{MAX_QUESTION_NUM}
           </div>
         </div>
@@ -236,7 +236,7 @@ const OpeningSettingModal = ({
 
   return (
     <Dialog open onOpenChange={(open) => !open && onCancel()} disablePointerDismissal>
-      <DialogContent className="mt-14 w-[640px] max-w-none rounded-2xl bg-components-panel-bg-blur p-6">
+      <DialogContent className="mt-14 w-160 max-w-none rounded-2xl bg-components-panel-bg-blur p-6">
         <div className="mb-6 flex items-center justify-between">
           <div className="title-2xl-semi-bold text-text-primary">
             {t(($) => $['feature.conversationOpener.title'], { ns: 'appDebug' })}
@@ -255,7 +255,7 @@ const OpeningSettingModal = ({
             <div className="mb-3 text-sm font-medium text-text-primary">
               {t(($) => $['openingStatement.editorTitle'], { ns: 'appDebug' })}
             </div>
-            <div className="relative min-h-[80px] rounded-lg bg-components-input-bg-normal px-3 py-2">
+            <div className="relative min-h-20 rounded-lg bg-components-input-bg-normal px-3 py-2">
               <PromptEditor
                 value={tempValue}
                 onChange={setTempValue}
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 b36f46a1d4e..556935091e1 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
@@ -41,10 +41,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-105! 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-28! 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-16! 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 d4f5925473a..faae1805fc5 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
@@ -74,7 +74,7 @@ const FileUpload = ({ disabled, onChange }: Props) => {
                   </div>
                   <div className="system-xs-regular text-text-secondary">{supportedTypes}</div>
                 </div>
-                <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
+                <div className="h-6.75 w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
                   <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">
                     {t(($) => $['feature.fileUpload.numberLimit'], { ns: 'appDebug' })}
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx
index 74c63e0d8c4..a80564a3e3a 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx
@@ -34,7 +34,7 @@ const FileUploadSettings = ({
         sideOffset={32}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="max-h-[calc(100vh-20px)] w-[360px] overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-2xl">
+        <div className="max-h-[calc(100vh-20px)] w-90 overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-2xl">
           <SettingContent
             imageUpload={imageUpload}
             onClose={() => onOpen(false)}
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 b67b753c6f1..02492c58524 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
@@ -115,7 +115,7 @@ const FollowUpSettingModal = ({ data, onSave, onCancel }: FollowUpSettingModalPr
         if (!open) onCancel()
       }}
     >
-      <DialogContent className="w-[640px]! max-w-none! p-8! pb-6!">
+      <DialogContent className="w-160! max-w-none! p-8! pb-6!">
         <DialogCloseButton className="top-8 right-8" />
         <DialogTitle className="pr-8 text-xl font-semibold text-text-primary">
           {t(($) => $['feature.suggestedQuestionsAfterAnswer.modal.title'], { ns: 'appDebug' })}
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 40e182b5a95..f7eee353d6e 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
@@ -82,7 +82,7 @@ const FileUpload = ({ disabled, onChange }: Props) => {
                   </div>
                   <div className="system-xs-regular text-text-secondary">{supportedTypes}</div>
                 </div>
-                <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
+                <div className="h-6.75 w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
                   <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">
                     {t(($) => $['feature.imageUpload.numberLimit'], { ns: 'appDebug' })}
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 e251bc12b93..116866a7629 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
@@ -145,7 +145,7 @@ const Moderation = ({ disabled, onChange }: Props) => {
                   </div>
                   <div className="system-xs-regular text-text-secondary">{providerContent}</div>
                 </div>
-                <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
+                <div className="h-6.75 w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
                   <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">
                     {t(($) => $['feature.moderation.contentEnableLabel'], { ns: 'appDebug' })}
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 ef264bff51a..9406bcb6cdb 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
@@ -301,7 +301,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({ data, onCance
 
   return (
     <Dialog open>
-      <DialogContent className="mt-14! w-[600px]! max-w-none! overflow-hidden border-[0.5px]! border-components-panel-border! p-0! text-left align-middle">
+      <DialogContent className="mt-14! w-150! max-w-none! overflow-hidden border-[0.5px]! border-components-panel-border! p-0! text-left align-middle">
         <div className="flex items-start gap-2 px-6 pt-6 pr-14 pb-3">
           <div className="title-2xl-semi-bold text-text-primary">
             {t(($) => $['feature.moderation.modal.title'], { ns: 'appDebug' })}
@@ -312,7 +312,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({ data, onCance
             className="absolute top-5 right-5 flex size-8 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
             onClick={onCancel}
           >
-            <span className="i-ri-close-line size-[18px]" aria-hidden="true" />
+            <span className="i-ri-close-line size-4.5" aria-hidden="true" />
           </button>
         </div>
         <div className="flex flex-col gap-4 px-6 py-3">
@@ -326,7 +326,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({ data, onCance
                   type="button"
                   key={provider.key}
                   className={cn(
-                    'flex min-h-[68px] flex-col items-start justify-center gap-1.5 rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg px-3 py-2 text-left text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
+                    'flex min-h-17 flex-col items-start justify-center gap-1.5 rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg px-3 py-2 text-left text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
                     localeData.type !== provider.key &&
                       'hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
                     localeData.type === provider.key &&
@@ -379,7 +379,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({ data, onCance
                 {t(($) => $['feature.moderation.modal.keywords.tip'], { ns: 'appDebug' })}
               </div>
               {/* Keep this counter composed locally; extract only if more textarea counter cases repeat. */}
-              <div className="relative h-[88px]">
+              <div className="relative h-22">
                 <Textarea
                   aria-label={
                     t(($) => $['feature.moderation.modal.provider.keywords'], {
@@ -475,8 +475,8 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({ data, onCance
             </div>
           </div>
         </div>
-        <div className="flex h-[76px] items-center justify-end gap-2 px-6 pt-5 pb-6">
-          <Button onClick={onCancel} size="medium" className="min-w-[72px]">
+        <div className="flex h-19 items-center justify-end gap-2 px-6 pt-5 pb-6">
+          <Button onClick={onCancel} size="medium" className="min-w-18">
             {t(($) => $['operation.cancel'], { ns: 'common' })}
           </Button>
           <Button
@@ -484,7 +484,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({ data, onCance
             size="medium"
             onClick={handleSave}
             disabled={localeData.type === 'openai_moderation' && !isOpenAIProviderConfigured}
-            className="min-w-[72px]"
+            className="min-w-18"
           >
             {t(($) => $['operation.save'], { ns: 'common' })}
           </Button>
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 0d6c1f7723a..ee395db903c 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
@@ -75,7 +75,7 @@ const TextToSpeech = ({ disabled, onChange }: Props) => {
                     {languageInfo?.name || '-'}
                   </div>
                 </div>
-                <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
+                <div className="h-6.75 w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
                   <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">
                     {t(($) => $['voice.voiceSettings.voice'], { ns: 'appDebug' })}
@@ -85,7 +85,7 @@ const TextToSpeech = ({ disabled, onChange }: Props) => {
                       t(($) => $['voice.defaultDisplay'], { ns: 'appDebug' })}
                   </div>
                 </div>
-                <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
+                <div className="h-6.75 w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
                   <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">
                     {t(($) => $['voice.voiceSettings.autoPlay'], { ns: 'appDebug' })}
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx
index cfd4bc37369..7453c0b2d8b 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx
@@ -34,7 +34,7 @@ const VoiceSettings = ({
         sideOffset={placementLeft ? 32 : 4}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="w-[360px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-2xl">
+        <div className="w-90 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-2xl">
           <ParamConfigContent onClose={() => onOpen(false)} onChange={onChange} />
         </div>
       </PopoverContent>
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 68411bd4cd2..3cc47d5c048 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
@@ -55,7 +55,7 @@ const FileFromLinkOrLocal = ({
         sideOffset={4}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="w-[280px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg">
+        <div className="w-70 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg">
           {showFromLink && (
             <>
               <div
@@ -93,9 +93,9 @@ const FileFromLinkOrLocal = ({
           )}
           {showFromLink && showFromLocal && (
             <div className="flex h-7 items-center p-2 system-2xs-medium-uppercase text-text-quaternary">
-              <div className="mr-2 h-px w-[93px] bg-linear-to-l from-[rgba(16,24,40,0.08)]" />
+              <div className="mr-2 h-px w-23.25 bg-linear-to-l from-[rgba(16,24,40,0.08)]" />
               OR
-              <div className="ml-2 h-px w-[93px] bg-linear-to-r from-[rgba(16,24,40,0.08)]" />
+              <div className="ml-2 h-px w-23.25 bg-linear-to-r from-[rgba(16,24,40,0.08)]" />
             </div>
           )}
           {showFromLocal && (
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 d6732d6708e..28861f7684a 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
@@ -53,7 +53,7 @@ const FileImageItem = ({
           </Button>
         )}
         <FileImageRender
-          className="h-[68px] w-[68px] shadow-md"
+          className="h-17 w-17 shadow-md"
           imageUrl={base64Url || url || ''}
           showDownloadAction={showDownloadAction}
         />
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 2aecb6cad15..26d5dc393ea 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
@@ -45,7 +45,7 @@ const FileItem = ({
     <>
       <div
         className={cn(
-          'group/file-item relative h-[68px] w-[144px] rounded-lg border-[0.5px] border-components-panel-border bg-components-card-bg p-2 shadow-xs',
+          'group/file-item relative h-17 w-36 rounded-lg border-[0.5px] border-components-panel-border bg-components-card-bg p-2 shadow-xs',
           !uploadError && 'hover:bg-components-card-bg-alt',
           uploadError && 'border border-state-destructive-border bg-state-destructive-hover',
           uploadError &&
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx
index 1ed0fc7a6dd..133850ea895 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx
@@ -39,7 +39,7 @@ const ChatInputDemo = ({ initialFiles = mockFiles, ...props }: ChatInputDemoProp
     <>
       <ToastHost />
       <FileContextProvider value={files} onChange={setFiles}>
-        <div className="w-[360px] rounded-2xl border border-divider-subtle bg-components-panel-bg p-4">
+        <div className="w-90 rounded-2xl border border-divider-subtle bg-components-panel-bg p-4">
           <div className="mb-3 text-xs text-text-secondary">Simulated chat input</div>
           <div className="flex items-center gap-2">
             <FileUploaderInChatInput {...props} />
diff --git a/web/app/components/base/float-right-container/index.stories.tsx b/web/app/components/base/float-right-container/index.stories.tsx
index 2d539cce4ea..42efae18d86 100644
--- a/web/app/components/base/float-right-container/index.stories.tsx
+++ b/web/app/components/base/float-right-container/index.stories.tsx
@@ -26,7 +26,7 @@ const ContainerDemo = () => {
   const [isMobile, setIsMobile] = useState(false)
 
   return (
-    <div className="flex h-[360px] flex-col gap-4 bg-background-default-subtle p-6">
+    <div className="flex h-90 flex-col gap-4 bg-background-default-subtle p-6">
       <div className="flex items-center gap-3">
         <button
           type="button"
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 1dd6895a289..cb94595013a 100644
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/web/app/components/base/form/components/base/base-field.tsx
@@ -379,7 +379,7 @@ const BaseField = ({
                   {dynamicNoticeTitle && (
                     <div
                       className={cn(
-                        'flex h-[22px] items-center px-3 system-xs-medium-uppercase text-text-tertiary',
+                        'flex h-5.5 items-center px-3 system-xs-medium-uppercase text-text-tertiary',
                         dynamicNoticeClassName,
                       )}
                     >
@@ -419,7 +419,7 @@ const BaseField = ({
                   {dynamicNoticeTitle && (
                     <div
                       className={cn(
-                        'flex h-[22px] items-center px-3 system-xs-medium-uppercase text-text-tertiary',
+                        'flex h-5.5 items-center px-3 system-xs-medium-uppercase text-text-tertiary',
                         dynamicNoticeClassName,
                       )}
                     >
@@ -507,7 +507,7 @@ const BaseField = ({
             ) && (
               <div
                 className={cn(
-                  'mt-1 px-0 py-[2px] system-xs-regular',
+                  'mt-1 px-0 py-0.5 system-xs-regular',
                   VALIDATE_STATUS_STYLE_MAP[fieldState?.validateStatus].textClassName,
                 )}
               >
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 959bcf98a32..4d102d4b9ba 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 = ({ option }: TriggerProps) => {
     <span className="flex min-w-0 items-center gap-x-0.5">
       <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">
+      <span className="relative inline-flex h-5 shrink-0 items-center rounded-[5px] border border-divider-deep px-1.25 system-xs-medium leading-3 whitespace-nowrap text-text-tertiary">
         {option.type}
       </span>
     </span>
diff --git a/web/app/components/base/form/components/field/select.tsx b/web/app/components/base/form/components/field/select.tsx
index c4602a32c9e..0854a17cb8d 100644
--- a/web/app/components/base/form/components/field/select.tsx
+++ b/web/app/components/base/form/components/field/select.tsx
@@ -79,7 +79,7 @@ const SelectField = ({
           {popupProps?.title && (
             <div
               className={cn(
-                'flex h-[22px] items-center px-3 system-xs-medium-uppercase text-text-tertiary',
+                'flex h-5.5 items-center px-3 system-xs-medium-uppercase text-text-tertiary',
                 popupProps.titleClassName,
               )}
             >
diff --git a/web/app/components/base/image-uploader/image-link-input.tsx b/web/app/components/base/image-uploader/image-link-input.tsx
index 158e30fa489..3e7cbd2c2c0 100644
--- a/web/app/components/base/image-uploader/image-link-input.tsx
+++ b/web/app/components/base/image-uploader/image-link-input.tsx
@@ -37,7 +37,7 @@ const ImageLinkInput: FC<ImageLinkInputProps> = ({ onUpload, disabled }) => {
     <div className="flex h-8 items-center rounded-lg border border-components-panel-border bg-components-panel-bg pr-1 pl-1.5 shadow-xs">
       <input
         type="text"
-        className="mr-0.5 h-[18px] grow appearance-none bg-transparent px-1 text-[13px] text-text-primary outline-hidden"
+        className="mr-0.5 h-4.5 grow appearance-none bg-transparent px-1 text-[13px] text-text-primary outline-hidden"
         value={imageLink}
         onChange={(e) => setImageLink(e.target.value)}
         placeholder={safeText}
diff --git a/web/app/components/base/image-uploader/image-list.stories.tsx b/web/app/components/base/image-uploader/image-list.stories.tsx
index d8f3f115647..210f50b2059 100644
--- a/web/app/components/base/image-uploader/image-list.stories.tsx
+++ b/web/app/components/base/image-uploader/image-list.stories.tsx
@@ -122,7 +122,7 @@ const ImageUploaderPlayground = ({ readonly }: Story['args']) => {
   }
 
   return (
-    <div className="flex w-[360px] flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-4">
+    <div className="flex w-90 flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-4">
       <div className="flex flex-col gap-2">
         <span className="text-xs font-medium tracking-[0.18em] text-text-tertiary uppercase">
           Add images
diff --git a/web/app/components/base/image-uploader/image-list.tsx b/web/app/components/base/image-uploader/image-list.tsx
index 85b2dfe2ed1..29d6fc16b94 100644
--- a/web/app/components/base/image-uploader/image-list.tsx
+++ b/web/app/components/base/image-uploader/image-list.tsx
@@ -119,7 +119,7 @@ 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-2.25 -right-2.25 z-10 h-4.5 w-4.5 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',
               )}
diff --git a/web/app/components/base/infotip/index.tsx b/web/app/components/base/infotip/index.tsx
index 64f303f0d6e..019bac8f4a2 100644
--- a/web/app/components/base/infotip/index.tsx
+++ b/web/app/components/base/infotip/index.tsx
@@ -98,7 +98,7 @@ export function Infotip({
         placement={placement}
         sideOffset={sideOffset}
         popupClassName={cn(
-          'max-w-[300px] rounded-md px-3 py-2 system-xs-regular text-text-tertiary',
+          'max-w-75 rounded-md px-3 py-2 system-xs-regular text-text-tertiary',
           popupClassName,
         )}
       >
diff --git a/web/app/components/base/inline-delete-confirm/index.tsx b/web/app/components/base/inline-delete-confirm/index.tsx
index c9b683693e9..850c2990f91 100644
--- a/web/app/components/base/inline-delete-confirm/index.tsx
+++ b/web/app/components/base/inline-delete-confirm/index.tsx
@@ -36,7 +36,7 @@ const InlineDeleteConfirm: FC<InlineDeleteConfirmProps> = ({
       aria-labelledby="inline-delete-confirm-title"
       aria-describedby="inline-delete-confirm-description"
       className={cn(
-        'flex w-[120px] flex-col justify-center gap-1.5',
+        'flex w-30 flex-col justify-center gap-1.5',
         'rounded-[10px] border-[0.5px] border-components-panel-border-subtle',
         'bg-components-panel-bg-blur px-2 pt-1.5 pb-2',
         'backdrop-blur-[10px]',
diff --git a/web/app/components/base/input-with-copy/index.tsx b/web/app/components/base/input-with-copy/index.tsx
index 89f7d3ba844..9608dbcf8ef 100644
--- a/web/app/components/base/input-with-copy/index.tsx
+++ b/web/app/components/base/input-with-copy/index.tsx
@@ -40,7 +40,7 @@ const InputWithCopy = React.forwardRef<HTMLInputElement, InputWithCopyProps>(
         <input
           ref={ref}
           className={cn(
-            'w-full appearance-none border border-transparent bg-components-input-bg-normal py-[7px] text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
+            'w-full appearance-none border border-transparent bg-components-input-bg-normal py-1.75 text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
             'rounded-lg px-3 system-sm-regular',
             showCopyButton && 'pr-8',
             inputProps.disabled &&
diff --git a/web/app/components/base/input/index.tsx b/web/app/components/base/input/index.tsx
index 19c1aff33c9..37c3358aa90 100644
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@@ -104,13 +104,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           ref={ref}
           style={styleCss}
           className={cn(
-            'w-full appearance-none border border-transparent bg-components-input-bg-normal py-[7px] text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
+            'w-full appearance-none border border-transparent bg-components-input-bg-normal py-1.75 text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
             inputVariants({ size }),
-            showLeftIcon && 'pl-[26px]',
+            showLeftIcon && 'pl-6.5',
             showLeftIcon && size === 'large' && 'pl-7',
-            showClearIcon && value && 'pr-[26px]',
+            showClearIcon && value && 'pr-6.5',
             showClearIcon && value && size === 'large' && 'pr-7',
-            (destructive || showCopyIcon) && 'pr-[26px]',
+            (destructive || showCopyIcon) && 'pr-6.5',
             (destructive || showCopyIcon) && size === 'large' && 'pr-7',
             disabled &&
               'cursor-not-allowed border-transparent bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:border-transparent hover:bg-components-input-bg-disabled',
diff --git a/web/app/components/base/logo/dify-logo.tsx b/web/app/components/base/logo/dify-logo.tsx
index f94b9112ec1..4df9d8bb119 100644
--- a/web/app/components/base/logo/dify-logo.tsx
+++ b/web/app/components/base/logo/dify-logo.tsx
@@ -10,7 +10,7 @@ const difyLogoVariants = cva(
     variants: {
       size: {
         small: 'h-4 w-9',
-        medium: 'h-[22px] w-12',
+        medium: 'h-5.5 w-12',
         large: 'h-7 w-16',
       },
     },
diff --git a/web/app/components/base/mermaid/index.tsx b/web/app/components/base/mermaid/index.tsx
index b7a351f73f6..97e35585950 100644
--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@@ -454,7 +454,7 @@ const Flowchart = (props: FlowchartProps) => {
       'bg-white': currentTheme === Theme.light,
       'bg-slate-900': currentTheme === Theme.dark,
     }),
-    errorMessage: cn('px-[26px] py-4', {
+    errorMessage: cn('px-6.5 py-4', {
       'text-red-500': currentTheme === Theme.light,
       'text-red-400': currentTheme === Theme.dark,
     }),
@@ -496,7 +496,7 @@ const Flowchart = (props: FlowchartProps) => {
     <div ref={props.ref as React.RefObject<HTMLDivElement>} className={themeClasses.container}>
       <div className={themeClasses.segmented}>
         <div className="msh-segmented-group">
-          <label className="msh-segmented-item m-2 flex w-[200px] items-center space-x-1">
+          <label className="msh-segmented-item m-2 flex w-50 items-center space-x-1">
             <div
               key="classic"
               className={getLookButtonClass('classic')}
@@ -537,7 +537,7 @@ const Flowchart = (props: FlowchartProps) => {
       />
 
       {isLoading && !svgString && (
-        <div className="px-[26px] py-4">
+        <div className="px-6.5 py-4">
           <LoadingAnim type="text" />
           <div className="mt-2 text-sm text-gray-500">
             {t(($) => $['mermaid.waitForCompletion'], { ns: 'app' })}
diff --git a/web/app/components/base/message-log-modal/index.stories.tsx b/web/app/components/base/message-log-modal/index.stories.tsx
index 7d6366671c7..04960dc1b1f 100644
--- a/web/app/components/base/message-log-modal/index.stories.tsx
+++ b/web/app/components/base/message-log-modal/index.stories.tsx
@@ -139,7 +139,7 @@ const MessageLogPreview = (props: MessageLogModalProps) => {
   useMessageLogMocks()
 
   return (
-    <div className="relative min-h-[640px] w-full bg-background-default-subtle p-6">
+    <div className="relative min-h-160 w-full bg-background-default-subtle p-6">
       <WorkflowContextProvider>
         <MessageLogModal {...props} currentLogItem={mockCurrentLogItem} />
       </WorkflowContextProvider>
diff --git a/web/app/components/base/message-log-modal/index.tsx b/web/app/components/base/message-log-modal/index.tsx
index 9a57f4e1c53..4c934f8f856 100644
--- a/web/app/components/base/message-log-modal/index.tsx
+++ b/web/app/components/base/message-log-modal/index.tsx
@@ -70,7 +70,7 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
       >
         <DialogContent
           backdropClassName="bg-transparent!"
-          className="top-16! bottom-4! left-[max(8px,calc(100vw-1136px))]! flex max-h-none! w-[480px]! max-w-[calc(100vw-16px)]! translate-x-0! translate-y-0! flex-col overflow-hidden! rounded-xl! border-[0.5px]! border-components-panel-border! bg-components-panel-bg! p-0! pt-3! shadow-xl!"
+          className="top-16! bottom-4! left-[max(8px,calc(100vw-1136px))]! flex max-h-none! w-120! max-w-[calc(100vw-16px)]! translate-x-0! translate-y-0! flex-col overflow-hidden! rounded-xl! border-[0.5px]! border-components-panel-border! bg-components-panel-bg! p-0! pt-3! shadow-xl!"
         >
           {modalContent}
         </DialogContent>
diff --git a/web/app/components/base/notion-page-selector/base.tsx b/web/app/components/base/notion-page-selector/base.tsx
index b836434fc5d..42a10e2d9ad 100644
--- a/web/app/components/base/notion-page-selector/base.tsx
+++ b/web/app/components/base/notion-page-selector/base.tsx
@@ -195,7 +195,7 @@ const NotionPageSelector = ({
         <div className="overflow-hidden rounded-b-xl">
           {isFetchingNotionPages ? (
             <div
-              className="flex h-[296px] items-center justify-center"
+              className="flex h-74 items-center justify-center"
               data-testid="notion-page-selector-loading"
             >
               <Loading />
diff --git a/web/app/components/base/notion-page-selector/credential-selector/index.tsx b/web/app/components/base/notion-page-selector/credential-selector/index.tsx
index 0e135bd211d..12c3de0f1ac 100644
--- a/web/app/components/base/notion-page-selector/credential-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/credential-selector/index.tsx
@@ -35,7 +35,7 @@ const CredentialSelector = ({ value, items, onSelect }: CredentialSelectorProps)
       value={currentCredential?.credentialId ?? null}
       onValueChange={(nextValue) => nextValue && onSelect(nextValue)}
     >
-      <SelectTrigger aria-label={currentDisplayName} className="w-[168px]">
+      <SelectTrigger aria-label={currentDisplayName} className="w-42">
         <span className="flex min-w-0 items-center">
           <CredentialIcon
             className="mr-2 shrink-0"
diff --git a/web/app/components/base/notion-page-selector/page-selector/index.tsx b/web/app/components/base/notion-page-selector/page-selector/index.tsx
index b33217e1b4a..28c69d01d90 100644
--- a/web/app/components/base/notion-page-selector/page-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/page-selector/index.tsx
@@ -47,7 +47,7 @@ const PageSelector = ({
 
   if (!rows.length) {
     return (
-      <div className="flex h-[296px] items-center justify-center text-[13px] text-text-tertiary">
+      <div className="flex h-74 items-center justify-center text-[13px] text-text-tertiary">
         {t(($) => $['dataSource.notion.selector.noSearchResult'], { ns: 'common' })}
       </div>
     )
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 608618344d8..f13dbc42aae 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
@@ -44,7 +44,7 @@ const NotionPageRow = ({
   return (
     <div
       className={cn(
-        'group flex cursor-pointer items-center rounded-md pr-[2px] pl-2 hover:bg-state-base-hover',
+        'group flex cursor-pointer items-center rounded-md pr-0.5 pl-2 hover:bg-state-base-hover',
         isPreviewed && 'bg-state-base-hover',
       )}
       style={style}
@@ -101,7 +101,7 @@ const NotionPageRow = ({
       )}
       {searchValue && (
         <div
-          className="ml-1 max-w-[120px] shrink-0 truncate text-xs text-text-quaternary"
+          className="ml-1 max-w-30 shrink-0 truncate text-xs text-text-quaternary"
           title={breadcrumbs.join(' / ')}
         >
           {breadcrumbs.join(' / ')}
diff --git a/web/app/components/base/notion-page-selector/page-selector/virtual-page-list.tsx b/web/app/components/base/notion-page-selector/page-selector/virtual-page-list.tsx
index f0076a8fe90..2541a0ee873 100644
--- a/web/app/components/base/notion-page-selector/page-selector/virtual-page-list.tsx
+++ b/web/app/components/base/notion-page-selector/page-selector/virtual-page-list.tsx
@@ -78,7 +78,7 @@ const VirtualPageList = ({
   })
 
   return (
-    <div ref={scrollRef} className="h-[296px] overflow-auto" data-testid="virtual-list">
+    <div ref={scrollRef} className="h-74 overflow-auto" data-testid="virtual-list">
       <div
         style={{
           height: `${rowVirtualizer.getTotalSize()}px`,
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 fe33cd86bca..2373e7f33e7 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
@@ -19,12 +19,10 @@ const SearchInput = ({ value, onChange }: SearchInputProps) => {
   const safePlaceholderText = placeholderText || ''
 
   return (
-    <div
-      className={cn('flex h-8 w-[200px] items-center rounded-lg bg-components-input-bg-normal p-2')}
-    >
+    <div className={cn('flex h-8 w-50 items-center rounded-lg bg-components-input-bg-normal p-2')}>
       <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"
+        className="min-w-0 grow appearance-none border-0 bg-transparent px-1 text-[13px] leading-4 text-components-input-text-filled outline-0 placeholder:text-components-input-text-placeholder"
         value={value}
         onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
         placeholder={safePlaceholderText}
diff --git a/web/app/components/base/page-unavailable.tsx b/web/app/components/base/page-unavailable.tsx
index 17dbd46f169..f41e816281d 100644
--- a/web/app/components/base/page-unavailable.tsx
+++ b/web/app/components/base/page-unavailable.tsx
@@ -13,7 +13,7 @@ const PageUnavailable = ({ className }: PageUnavailableProps) => {
   return (
     <div className={cn('flex h-screen w-screen items-center justify-center', className)}>
       <h1
-        className="mr-5 h-[50px] shrink-0 pr-5 text-[24px] leading-[50px] font-medium"
+        className="mr-5 h-12.5 shrink-0 pr-5 text-[24px] leading-12.5 font-medium"
         style={{
           borderRight: '1px solid rgba(0,0,0,.3)',
         }}
diff --git a/web/app/components/base/premium-badge/index.tsx b/web/app/components/base/premium-badge/index.tsx
index 246f6da19ef..798f92e4546 100644
--- a/web/app/components/base/premium-badge/index.tsx
+++ b/web/app/components/base/premium-badge/index.tsx
@@ -49,7 +49,7 @@ function BadgeHighlight({ size }: { size?: PremiumBadgeProps['size'] }) {
       aria-hidden="true"
       className={cn(
         'absolute top-0 right-1/2 translate-x-[20%] opacity-50 transition-[opacity,transform] duration-100 ease-out hover:translate-x-[30%] hover:opacity-80 motion-reduce:transition-none',
-        size === 's' ? 'h-[18px] w-12' : 'h-6 w-12',
+        size === 's' ? 'h-4.5 w-12' : 'h-6 w-12',
       )}
     />
   )
diff --git a/web/app/components/base/prompt-editor/index.stories.tsx b/web/app/components/base/prompt-editor/index.stories.tsx
index a9376c53093..91051fb30ed 100644
--- a/web/app/components/base/prompt-editor/index.stories.tsx
+++ b/web/app/components/base/prompt-editor/index.stories.tsx
@@ -82,7 +82,7 @@ const PromptEditorDemo = (args: any) => {
 
   return (
     <div style={{ width: '600px' }}>
-      <div className="min-h-[120px] rounded-lg border border-gray-300 p-4">
+      <div className="min-h-30 rounded-lg border border-gray-300 p-4">
         <PromptEditorMock
           {...args}
           value={value}
@@ -189,7 +189,7 @@ const MultipleEditorsDemo = () => {
     <div style={{ width: '700px' }} className="flex flex-col gap-6">
       <div className="flex flex-col gap-2">
         <label className="text-sm font-medium text-gray-700">System Prompt</label>
-        <div className="min-h-[100px] rounded-lg border border-gray-300 bg-blue-50 p-4">
+        <div className="min-h-25 rounded-lg border border-gray-300 bg-blue-50 p-4">
           <PromptEditorMock
             value={systemPrompt}
             onChange={setSystemPrompt}
@@ -200,7 +200,7 @@ const MultipleEditorsDemo = () => {
       </div>
       <div className="flex flex-col gap-2">
         <label className="text-sm font-medium text-gray-700">User Prompt</label>
-        <div className="min-h-[100px] rounded-lg border border-gray-300 p-4">
+        <div className="min-h-25 rounded-lg border border-gray-300 p-4">
           <PromptEditorMock
             value={userPrompt}
             onChange={setUserPrompt}
@@ -264,7 +264,7 @@ The Team`)
         </div>
         <div className="flex flex-col gap-2">
           <label className="text-sm font-medium text-gray-700">Email Body</label>
-          <div className="min-h-[200px] rounded-lg border border-gray-300 p-4">
+          <div className="min-h-50 rounded-lg border border-gray-300 p-4">
             <PromptEditorMock
               value={body}
               onChange={setBody}
@@ -303,7 +303,7 @@ const ChatPromptBuilderDemo = () => {
         <h3 className="text-lg font-semibold">Chat Prompt Builder</h3>
         <span className="text-xs text-gray-500">{characterCount} characters</span>
       </div>
-      <div className="min-h-[200px] rounded-lg border border-gray-300 bg-gray-50 p-4">
+      <div className="min-h-50 rounded-lg border border-gray-300 bg-gray-50 p-4">
         <PromptEditorMock
           value={prompt}
           onChange={handleChange}
@@ -334,7 +334,7 @@ const APIInstructionEditorDemo = () => {
   return (
     <div style={{ width: '700px' }} className="rounded-lg border border-gray-200 bg-white p-6">
       <h3 className="mb-4 text-lg font-semibold">API Processing Instructions</h3>
-      <div className="min-h-[180px] rounded-lg border-2 border-indigo-300 bg-indigo-50 p-4">
+      <div className="min-h-45 rounded-lg border-2 border-indigo-300 bg-indigo-50 p-4">
         <PromptEditorMock
           value={instructions}
           onChange={setInstructions}
diff --git a/web/app/components/base/prompt-editor/plugins/agent-output-block/component.tsx b/web/app/components/base/prompt-editor/plugins/agent-output-block/component.tsx
index 846dda09918..ba4e34ca0e0 100644
--- a/web/app/components/base/prompt-editor/plugins/agent-output-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/agent-output-block/component.tsx
@@ -172,7 +172,7 @@ const AgentOutputBlockComponent = ({
         tabIndex={0}
         aria-label={t(($) => $['nodes.agent.outputVars.edit'], { ns: 'workflow', name })}
         contentEditable={false}
-        className="group/agent-output inline-flex min-w-[18px] cursor-pointer items-center gap-1 rounded-[5px] border border-util-colors-violet-violet-100 bg-util-colors-violet-violet-50 px-1 py-0.5 align-middle shadow-xs"
+        className="group/agent-output inline-flex min-w-4.5 cursor-pointer items-center gap-1 rounded-[5px] border border-util-colors-violet-violet-100 bg-util-colors-violet-violet-50 px-1 py-0.5 align-middle shadow-xs"
         onClick={handleEditRequest}
         onKeyDown={(event) => {
           if (event.key !== 'Enter' && event.key !== ' ') return
@@ -202,7 +202,7 @@ const AgentOutputBlockComponent = ({
   return (
     <span
       contentEditable={false}
-      className="inline-flex items-center gap-[3px] rounded-[5px] border border-util-colors-violet-violet-700 bg-util-colors-violet-violet-50 p-px align-middle shadow-xs"
+      className="inline-flex items-center gap-0.75 rounded-[5px] border border-util-colors-violet-violet-700 bg-util-colors-violet-violet-50 p-px align-middle shadow-xs"
     >
       <span className="flex min-w-0 items-center gap-0.5 pl-0.5">
         <span
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 05921f080f9..ea92701171c 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
@@ -162,7 +162,7 @@ export const useVariableOptions = (
           return (
             <VariableMenuItem
               title={item.value}
-              icon={<BracketsX className="h-[14px] w-[14px] text-text-accent" />}
+              icon={<BracketsX className="h-3.5 w-3.5 text-text-accent" />}
               queryString={queryString}
               isSelected={isSelected}
               onClick={onSelect}
@@ -190,7 +190,7 @@ export const useVariableOptions = (
         return (
           <VariableMenuItem
             title={t(($) => $['promptEditor.variable.modal.add'], { ns: 'common' })}
-            icon={<BracketsX className="h-[14px] w-[14px] text-text-accent" />}
+            icon={<BracketsX className="h-3.5 w-3.5 text-text-accent" />}
             queryString={queryString}
             isSelected={isSelected}
             onClick={onSelect}
@@ -233,7 +233,7 @@ export const useExternalToolOptions = (
               title={item.name}
               icon={
                 <AppIcon
-                  className="h-[14px]! w-[14px]!"
+                  className="h-3.5! w-3.5!"
                   icon={item.icon}
                   background={item.icon_background}
                 />
@@ -266,7 +266,7 @@ export const useExternalToolOptions = (
         return (
           <VariableMenuItem
             title={t(($) => $['promptEditor.variable.modal.addTool'], { ns: 'common' })}
-            icon={<Tool03 className="h-[14px] w-[14px] text-text-accent" />}
+            icon={<Tool03 className="h-3.5 w-3.5 text-text-accent" />}
             extraElement={<ArrowUpRight className="size-3 text-text-tertiary" />}
             queryString={queryString}
             isSelected={isSelected}
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 64e62df3e2d..929a0f012be 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
@@ -243,7 +243,7 @@ const ComponentPicker = ({
             // See https://github.com/facebook/lexical/blob/ac97dfa9e14a73ea2d6934ff566282d7f758e8bb/packages/lexical-react/src/shared/LexicalMenu.ts#L493
             <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"
+                className="w-65 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg"
                 style={{
                   ...floatingStyles,
                   visibility: isPositioned ? 'visible' : 'hidden',
diff --git a/web/app/components/base/prompt-editor/plugins/context-block/component.tsx b/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
index 426909a303c..42defaf3211 100644
--- a/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
@@ -41,7 +41,7 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
       ref={ref}
     >
       <span
-        className="mr-1 i-custom-vender-solid-files-file-05 h-[14px] w-[14px]"
+        className="mr-1 i-custom-vender-solid-files-file-05 h-3.5 w-3.5"
         data-testid="file-icon"
       />
       <div className="mr-1 text-xs font-medium">
@@ -54,7 +54,7 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
               <button
                 type="button"
                 aria-label={t(($) => $['promptEditor.context.item.title'], { ns: 'common' })}
-                className={`flex h-[18px] w-[18px] cursor-pointer items-center justify-center rounded border-none p-0 text-[11px] font-semibold ${open ? 'bg-[#6938EF] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'} `}
+                className={`flex h-4.5 w-4.5 cursor-pointer items-center justify-center rounded border-none p-0 text-[11px] font-semibold ${open ? 'bg-[#6938EF] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'} `}
                 ref={triggerRef}
                 onClick={(e) => e.preventDefault()}
               >
@@ -68,7 +68,7 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
             alignOffset={-147}
             popupClassName="border-none bg-transparent shadow-none"
           >
-            <div className="w-[360px] rounded-xl bg-white shadow-lg">
+            <div className="w-90 rounded-xl bg-white shadow-lg">
               <div className="p-4">
                 <div className="mb-2 text-xs font-medium text-gray-500">
                   {t(($) => $['promptEditor.context.modal.title'], {
@@ -76,12 +76,12 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
                     num: localDatasets.length,
                   })}
                 </div>
-                <div className="max-h-[270px] overflow-y-auto">
+                <div className="max-h-67.5 overflow-y-auto">
                   {localDatasets.map((dataset) => (
                     <div key={dataset.id} className="flex h-8 items-center">
                       <div className="mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5] bg-[#F5F8FF]">
                         <span
-                          className="i-custom-vender-solid-files-folder h-4 w-4 text-[#444CE7]"
+                          className="i-custom-vender-solid-files-folder h-4 w-4 text-indigo-600"
                           data-testid="folder-icon"
                         />
                       </div>
@@ -93,11 +93,11 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
                 </div>
                 <button
                   type="button"
-                  className="flex h-8 cursor-pointer items-center border-none bg-transparent p-0 text-left text-[#155EEF] focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                  className="flex h-8 cursor-pointer items-center border-none bg-transparent p-0 text-left text-primary-600 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                   onClick={onAddContext}
                 >
                   <div className="mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-gray-100">
-                    <span className="i-ri-add-line h-[14px] w-[14px]" aria-hidden="true" />
+                    <span className="i-ri-add-line h-3.5 w-3.5" aria-hidden="true" />
                   </div>
                   <div className="text-[13px] font-medium" title="">
                     {t(($) => $['promptEditor.context.modal.add'], { ns: 'common' })}
diff --git a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
index 68cf7d17e12..0940d5c37d0 100644
--- a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
@@ -25,7 +25,7 @@ const CurrentBlockComponent: FC<CurrentBlockComponentProps> = ({ nodeKey, genera
   return (
     <div
       className={cn(
-        'group/wrap relative mx-0.5 flex h-[18px] items-center rounded-[5px] border pr-[3px] pl-0.5 text-util-colors-violet-violet-600 select-none hover:border-state-accent-solid hover:bg-state-accent-hover',
+        'group/wrap relative mx-0.5 flex h-4.5 items-center rounded-[5px] border pr-0.75 pl-0.5 text-util-colors-violet-violet-600 select-none hover:border-state-accent-solid hover:bg-state-accent-hover',
         isSelected
           ? 'border-state-accent-solid bg-state-accent-hover'
           : 'border-components-panel-border-subtle bg-components-badge-white-to-dark',
@@ -35,7 +35,7 @@ const CurrentBlockComponent: FC<CurrentBlockComponentProps> = ({ nodeKey, genera
       }}
       ref={ref}
     >
-      <Icon className="mr-0.5 h-[14px] w-[14px]" />
+      <Icon className="mr-0.5 h-3.5 w-3.5" />
       <div className="text-xs font-medium">
         {generatorType === GeneratorType.prompt ? 'current_prompt' : 'current_code'}
       </div>
diff --git a/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx b/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx
index 8732d854da3..7255c5ab404 100644
--- a/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx
@@ -71,11 +71,11 @@ export default function DraggableBlockPlugin({
       targetLineComponent={
         <div
           ref={targetLineRef}
-          className="pointer-events-none absolute top-0 left-[-21px] opacity-0 will-change-transform"
+          className="pointer-events-none absolute top-0 -left-5.25 opacity-0 will-change-transform"
           data-testid="draggable-target-line"
           // style={{ width: 500 }} // width not worked here
         >
-          <div className="absolute top-0 -right-10 left-0 h-[2px] bg-text-accent-secondary"></div>
+          <div className="absolute top-0 -right-10 left-0 h-0.5 bg-text-accent-secondary"></div>
         </div>
       }
       isOnMenu={isOnMenu}
diff --git a/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx b/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
index 7d0c2deabca..84c2c4bb481 100644
--- a/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
@@ -22,7 +22,7 @@ const ErrorMessageBlockComponent: FC<Props> = ({ nodeKey }) => {
   return (
     <div
       className={cn(
-        'group/wrap relative mx-0.5 flex h-[18px] items-center rounded-[5px] border pr-[3px] pl-0.5 text-util-colors-orange-dark-orange-dark-600 select-none hover:border-state-accent-solid hover:bg-state-accent-hover',
+        'group/wrap relative mx-0.5 flex h-4.5 items-center rounded-[5px] border pr-0.75 pl-0.5 text-util-colors-orange-dark-orange-dark-600 select-none hover:border-state-accent-solid hover:bg-state-accent-hover',
         isSelected
           ? 'border-state-accent-solid bg-state-accent-hover'
           : 'border-components-panel-border-subtle bg-components-badge-white-to-dark',
@@ -32,7 +32,7 @@ const ErrorMessageBlockComponent: FC<Props> = ({ nodeKey }) => {
       }}
       ref={ref}
     >
-      <Variable02 className="mr-0.5 h-[14px] w-[14px]" />
+      <Variable02 className="mr-0.5 h-3.5 w-3.5" />
       <div className="text-xs font-medium">error_message</div>
     </div>
   )
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 603b10c3710..5539802c218 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
@@ -44,7 +44,7 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
       className={`group inline-flex h-6 items-center rounded-[5px] border border-transparent pr-0.5 pl-1 text-[#DD2590] hover:bg-[#FCE7F6] ${open ? 'bg-[#FCE7F6]' : 'bg-[#FDF2FA]'} ${isSelected && 'border-[#F670C7]!'} `}
       ref={ref}
     >
-      <MessageClockCircle className="mr-1 h-[14px] w-[14px]" />
+      <MessageClockCircle className="mr-1 h-3.5 w-3.5" />
       <div className="mr-1 text-xs font-medium">
         {t(($) => $['promptEditor.history.item.title'], { ns: 'common' })}
       </div>
@@ -53,7 +53,7 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
           nativeButton={false}
           render={
             <div
-              className={`flex h-[18px] w-[18px] cursor-pointer items-center justify-center rounded ${open ? 'bg-[#DD2590] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'} `}
+              className={`flex h-4.5 w-4.5 cursor-pointer items-center justify-center rounded ${open ? 'bg-[#DD2590] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'} `}
               ref={triggerRef}
               onClick={(e) => e.preventDefault()}
             >
@@ -67,7 +67,7 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
           alignOffset={-148}
           popupClassName="border-none bg-transparent shadow-none"
         >
-          <div className="w-[360px] rounded-xl bg-white shadow-lg">
+          <div className="w-90 rounded-xl bg-white shadow-lg">
             <div className="p-4">
               <div className="mb-2 text-xs font-medium text-gray-500">
                 {t(($) => $['promptEditor.history.modal.title'], { ns: 'common' })}
@@ -82,7 +82,7 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
               </div>
             </div>
             <div
-              className="cursor-pointer rounded-b-xl border-t border-black/5 px-4 py-3 text-xs text-[#155EEF]"
+              className="cursor-pointer rounded-b-xl border-t border-black/5 px-4 py-3 text-xs text-primary-600"
               onClick={onEditRole}
             >
               {t(($) => $['promptEditor.history.modal.edit'], { ns: 'common' })}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx
index ab6f188b03a..141b414af5f 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx
@@ -122,7 +122,7 @@ describe('InputField', () => {
     // (and the footer/actions reachable via the internal scroll) even when it is
     // rendered outside the shortcuts popup that defines --shortcut-popup-max-height,
     // e.g. inside the edit dialog. See issue #37979.
-    expect(panel).toHaveClass('max-h-[var(--shortcut-popup-max-height,80dvh)]', 'overflow-hidden')
+    expect(panel).toHaveClass('max-h-(--shortcut-popup-max-height,80dvh)', 'overflow-hidden')
     expect(header).toHaveClass('shrink-0', 'pb-2')
     expect(scrollBody).toHaveClass('min-h-0', 'flex-1', 'overflow-y-auto')
     expect(footer).toHaveClass('shrink-0', 'bg-components-panel-bg')
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
index f5d7429a575..b1065adf1e7 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
@@ -133,7 +133,7 @@ const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
 
   return (
     <div className="group relative flex h-8 w-full items-center rounded-lg border-[1.5px] border-components-input-border-active bg-background-default-hover pr-0.5 pl-1.5 select-none">
-      <div className="absolute top-[-12px] left-2.5">
+      <div className="absolute -top-3 left-2.5">
         <div className="absolute bottom-1 h-[1.5px] w-full bg-background-default-subtle"></div>
         <div className="relative flex items-center space-x-0.5 px-1 text-text-accent-light-mode-only">
           <VariableX className="size-3" />
@@ -190,7 +190,7 @@ const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
             if (!open) hideEditModal()
           }}
         >
-          <DialogContent className="w-full max-w-[372px] overflow-hidden! border-none p-0! text-left align-middle">
+          <DialogContent className="w-full max-w-93 overflow-hidden! border-none p-0! text-left align-middle">
             <InputField
               nodeId={nodeId}
               isEdit
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
index f6a70e66f71..fe86bea8491 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
@@ -215,7 +215,7 @@ const InputField: React.FC<InputFieldProps> = ({
   }, [handleSave])
 
   return (
-    <div className="flex max-h-[var(--shortcut-popup-max-height,80dvh)] w-[372px] flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
+    <div className="flex max-h-(--shortcut-popup-max-height,80dvh) w-93 flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
       <div className="shrink-0 p-3 pb-2">
         <div className="system-md-semibold text-text-primary">
           {t(($) => $[`${i18nPrefix}.title`], { ns: 'workflow' })}
@@ -278,7 +278,7 @@ const InputField: React.FC<InputFieldProps> = ({
               {t(($) => $[`${i18nPrefix}.options`], { ns: 'workflow' })}
             </div>
             {tempPayload.option_source.type === 'variable' ? (
-              <div className="relative min-h-[80px] rounded-lg border border-transparent bg-components-input-bg-normal px-3 pt-2 pb-8">
+              <div className="relative min-h-20 rounded-lg border border-transparent bg-components-input-bg-normal px-3 pt-2 pb-8">
                 <VarReferencePicker
                   nodeId={nodeId}
                   value={tempPayload.option_source.selector}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
index 8195169bd04..2a87c122d89 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
@@ -37,7 +37,7 @@ type PlaceholderProps = {
 const Placeholder = ({ varPickerProps, onTypeClick }: PlaceholderProps) => {
   const { t } = useTranslation()
   return (
-    <div className="mt-1 h-[80px] rounded-lg bg-components-input-bg-normal px-3 pt-2 system-sm-regular text-text-tertiary">
+    <div className="mt-1 h-20 rounded-lg bg-components-input-bg-normal px-3 pt-2 system-sm-regular text-text-tertiary">
       <div className="flex flex-wrap items-center leading-5">
         <Trans
           i18nKey={($) => $[`${i18nPrefix}.prePopulateFieldPlaceholder`]}
@@ -117,7 +117,7 @@ const PrePopulate: FC<Props> = ({
 
   if (isVariable) {
     return (
-      <div className="relative h-[80px] rounded-lg border border-transparent bg-components-input-bg-normal px-3 pt-2">
+      <div className="relative h-20 rounded-lg border border-transparent bg-components-input-bg-normal px-3 pt-2">
         <VarReferencePicker {...varPickerProps} isJustShowValue />
         <TypeSwitch
           className="absolute bottom-1 left-1.5"
@@ -130,14 +130,14 @@ const PrePopulate: FC<Props> = ({
   return (
     <div
       className={cn(
-        'relative min-h-[80px] rounded-lg border border-transparent bg-components-input-bg-normal pb-1',
+        'relative min-h-20 rounded-lg border border-transparent bg-components-input-bg-normal pb-1',
         isFocus && 'border-components-input-border-active bg-components-input-bg-active shadow-xs',
       )}
     >
       <Textarea
         aria-label={t(($) => $[`${i18nPrefix}.staticContent`], { ns: 'workflow' })}
         value={value || ''}
-        className="h-[43px] min-h-[43px] rounded-none border-none bg-transparent px-3 hover:bg-transparent focus:bg-transparent focus:shadow-none"
+        className="h-10.75 min-h-10.75 rounded-none border-none bg-transparent px-3 hover:bg-transparent focus:bg-transparent focus:shadow-none"
         onValueChange={(value) => onValueChange?.(value)}
         onFocus={() => {
           setOnPlaceholderClicked(true)
diff --git a/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx b/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
index d534ec83d16..e36380a8248 100644
--- a/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
@@ -22,7 +22,7 @@ const LastRunBlockComponent: FC<Props> = ({ nodeKey }) => {
   return (
     <div
       className={cn(
-        'group/wrap relative mx-0.5 flex h-[18px] items-center rounded-[5px] border pr-[3px] pl-0.5 text-text-accent select-none hover:border-state-accent-solid hover:bg-state-accent-hover',
+        'group/wrap relative mx-0.5 flex h-4.5 items-center rounded-[5px] border pr-0.75 pl-0.5 text-text-accent select-none hover:border-state-accent-solid hover:bg-state-accent-hover',
         isSelected
           ? 'border-state-accent-solid bg-state-accent-hover'
           : 'border-components-panel-border-subtle bg-components-badge-white-to-dark',
@@ -32,7 +32,7 @@ const LastRunBlockComponent: FC<Props> = ({ nodeKey }) => {
       }}
       ref={ref}
     >
-      <Variable02 className="mr-0.5 h-[14px] w-[14px]" />
+      <Variable02 className="mr-0.5 h-3.5 w-3.5" />
       <div className="text-xs font-medium">last_run</div>
     </div>
   )
diff --git a/web/app/components/base/prompt-editor/plugins/query-block/component.tsx b/web/app/components/base/prompt-editor/plugins/query-block/component.tsx
index 80ecf8e4138..d9b1a2f5a98 100644
--- a/web/app/components/base/prompt-editor/plugins/query-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/query-block/component.tsx
@@ -17,7 +17,7 @@ const QueryBlockComponent: FC<QueryBlockComponentProps> = ({ nodeKey }) => {
       className={`inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#FFF6ED] pr-0.5 pl-1 hover:bg-[#FFEAD5] ${isSelected && 'border-[#FD853A]!'} `}
       ref={ref}
     >
-      <UserEdit02 className="mr-1 h-[14px] w-[14px] text-[#FD853A]" />
+      <UserEdit02 className="mr-1 h-3.5 w-3.5 text-[#FD853A]" />
       <div className="text-xs font-medium text-[#EC4A0A] opacity-60">{'{{'}</div>
       <div className="text-xs font-medium text-[#EC4A0A]">
         {t(($) => $['promptEditor.query.item.title'], { ns: 'common' })}
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 7aab8f07df4..eed2603e944 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
@@ -16,7 +16,7 @@ const RequestURLBlockComponent: FC<RequestURLBlockComponentProps> = ({ nodeKey }
   return (
     <div
       className={cn(
-        'group/wrap relative mx-0.5 flex h-[18px] items-center rounded-[5px] border border-components-panel-border-subtle bg-components-badge-white-to-dark px-1 select-none hover:border-[#7839ee]',
+        'group/wrap relative mx-0.5 flex h-4.5 items-center rounded-[5px] border border-components-panel-border-subtle bg-components-badge-white-to-dark px-1 select-none hover:border-[#7839ee]',
         isSelected && 'border-[#7839ee]! hover:border-[#7839ee]!',
       )}
       ref={ref}
diff --git a/web/app/components/base/prompt-editor/plugins/roster-reference-block/component.tsx b/web/app/components/base/prompt-editor/plugins/roster-reference-block/component.tsx
index 2c1f8591d06..e3558e77df7 100644
--- a/web/app/components/base/prompt-editor/plugins/roster-reference-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/roster-reference-block/component.tsx
@@ -42,7 +42,7 @@ const RosterReferenceBlockComponent = ({ text }: RosterReferenceBlockComponentPr
       data-roster-reference-warning={warning ? true : undefined}
       title={warning ?? token.label}
       className={cn(
-        'inline-flex min-w-[18px] items-center gap-0.5 overflow-hidden rounded-[5px] border py-px pr-1 pl-px align-middle shadow-xs shadow-shadow-shadow-3',
+        'inline-flex min-w-4.5 items-center gap-0.5 overflow-hidden rounded-[5px] border py-px pr-1 pl-px align-middle shadow-xs shadow-shadow-shadow-3',
         warning
           ? 'border-components-badge-status-light-warning-halo bg-state-warning-hover'
           : 'border-state-accent-hover-alt bg-state-accent-hover',
@@ -54,7 +54,7 @@ const RosterReferenceBlockComponent = ({ text }: RosterReferenceBlockComponentPr
           'inline-flex size-4 shrink-0 items-center justify-center rounded-[5px] border-[0.5px] border-divider-subtle bg-background-default-dodge',
           token.kind === 'cli_tool' && 'border-divider-regular bg-text-tertiary',
           isKnowledge &&
-            'border-divider-subtle bg-util-colors-green-green-500 p-[3px] text-text-primary-on-surface shadow-xs shadow-shadow-shadow-3',
+            'border-divider-subtle bg-util-colors-green-green-500 p-0.75 text-text-primary-on-surface shadow-xs shadow-shadow-shadow-3',
         )}
       >
         {customIcon || defaultIcon}
diff --git a/web/app/components/base/prompt-log-modal/card.tsx b/web/app/components/base/prompt-log-modal/card.tsx
index bb5585d6890..42032744b76 100644
--- a/web/app/components/base/prompt-log-modal/card.tsx
+++ b/web/app/components/base/prompt-log-modal/card.tsx
@@ -20,7 +20,7 @@ const Card: FC<CardProps> = ({ log }) => {
               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>
+                <div className="font-semibold text-indigo-800">{item.role.toUpperCase()}</div>
                 <CopyFeedbackNew
                   className="hidden size-6 group-hover/card:block"
                   content={item.text}
diff --git a/web/app/components/base/prompt-log-modal/index.stories.tsx b/web/app/components/base/prompt-log-modal/index.stories.tsx
index 3f3b3092d42..a57e50cd736 100644
--- a/web/app/components/base/prompt-log-modal/index.stories.tsx
+++ b/web/app/components/base/prompt-log-modal/index.stories.tsx
@@ -39,7 +39,7 @@ const PromptLogPreview = (props: PromptLogModalProps) => {
   usePromptLogMocks()
 
   return (
-    <div className="relative min-h-[540px] w-full bg-background-default-subtle p-6">
+    <div className="relative min-h-135 w-full bg-background-default-subtle p-6">
       <PromptLogModal {...props} currentLogItem={mockLogItem} />
     </div>
   )
diff --git a/web/app/components/base/prompt-log-modal/index.tsx b/web/app/components/base/prompt-log-modal/index.tsx
index 8c302b6fc5c..6c8e83a749a 100644
--- a/web/app/components/base/prompt-log-modal/index.tsx
+++ b/web/app/components/base/prompt-log-modal/index.tsx
@@ -44,7 +44,7 @@ const PromptLogModal: FC<PromptLogModalProps> = ({ currentLogItem, width, onCanc
           {currentLogItem.log?.length === 1 && (
             <>
               <CopyFeedbackNew className="size-6" content={currentLogItem.log[0]!.text} />
-              <div className="mx-2.5 h-[14px] w-px bg-divider-regular" />
+              <div className="mx-2.5 h-3.5 w-px bg-divider-regular" />
             </>
           )}
           <button
diff --git a/web/app/components/base/qrcode/index.tsx b/web/app/components/base/qrcode/index.tsx
index e2e690912b5..5074887e2f9 100644
--- a/web/app/components/base/qrcode/index.tsx
+++ b/web/app/components/base/qrcode/index.tsx
@@ -64,7 +64,7 @@ const ShareQRCode = ({ content }: Props) => {
         {isShow && (
           <div
             ref={qrCodeRef}
-            className="absolute top-8 -right-8 z-10 flex w-[232px] flex-col items-center rounded-lg bg-components-panel-bg p-4 shadow-xs"
+            className="absolute top-8 -right-8 z-10 flex w-58 flex-col items-center rounded-lg bg-components-panel-bg p-4 shadow-xs"
             onClick={handlePanelClick}
           >
             <QRCode size={160} value={content} className="mb-2" />
diff --git a/web/app/components/base/radio-card/index.tsx b/web/app/components/base/radio-card/index.tsx
index e6261649f86..3af5c37517f 100644
--- a/web/app/components/base/radio-card/index.tsx
+++ b/web/app/components/base/radio-card/index.tsx
@@ -99,7 +99,7 @@ function RadioCard<Value = string>(props: Props<Value>) {
   )
   const rootClassName = cn(
     'group/radio-card relative rounded-xl border-[0.5px] border-components-option-card-option-border bg-components-option-card-option-bg p-3 transition-colors',
-    'has-[[data-checked]]:border-[1.5px] has-[[data-checked]]:bg-components-option-card-option-selected-bg',
+    'has-data-checked:border-[1.5px] has-data-checked:bg-components-option-card-option-selected-bg',
     className,
   )
   const config = !!chosenConfig && (
diff --git a/web/app/components/base/search-input/index.stories.tsx b/web/app/components/base/search-input/index.stories.tsx
index 9199116260a..b07e37bcffc 100644
--- a/web/app/components/base/search-input/index.stories.tsx
+++ b/web/app/components/base/search-input/index.stories.tsx
@@ -326,7 +326,7 @@ const CommandPaletteDemo = () => {
           placeholder="Type a command or search..."
         />
       </div>
-      <div className="max-h-[400px] overflow-y-auto">
+      <div className="max-h-100 overflow-y-auto">
         {filteredCommands.length > 0 ? (
           filteredCommands.map((cmd) => (
             <div
diff --git a/web/app/components/base/sort/index.tsx b/web/app/components/base/sort/index.tsx
index d336e5979c5..86f6583c0d8 100644
--- a/web/app/components/base/sort/index.tsx
+++ b/web/app/components/base/sort/index.tsx
@@ -63,7 +63,7 @@ function Sort({ order, value, items, onSelect }: Props) {
                   key={item.value}
                   value={item.value}
                   closeOnClick
-                  className="mx-0 gap-2 rounded-lg px-2 py-[6px]"
+                  className="mx-0 gap-2 rounded-lg px-2 py-1.5"
                 >
                   <div
                     title={item.name}
diff --git a/web/app/components/base/tab-slider-new/index.tsx b/web/app/components/base/tab-slider-new/index.tsx
index 2f7ed53934c..c2edd1a767d 100644
--- a/web/app/components/base/tab-slider-new/index.tsx
+++ b/web/app/components/base/tab-slider-new/index.tsx
@@ -21,7 +21,7 @@ const TabSliderNew: FC<TabSliderProps> = ({ className, value, onChange, options
           data-testid={`tab-item-${option.value}`}
           onClick={() => onChange(option.value)}
           className={cn(
-            'mr-1 flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] text-[13px] leading-[18px] font-medium text-text-tertiary hover:bg-state-base-hover',
+            'mr-1 flex h-8 cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-1.75 text-[13px] leading-4.5 font-medium text-text-tertiary hover:bg-state-base-hover',
             value === option.value &&
               'border-components-main-nav-nav-button-border bg-state-base-hover text-components-main-nav-nav-button-text-active shadow-xs',
           )}
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index 47475181b64..1bbe631000e 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -78,7 +78,7 @@ const TagInput = ({
     <div
       className={cn(
         'flex flex-wrap',
-        !isInWorkflow && 'min-w-[200px]',
+        !isInWorkflow && 'min-w-50',
         isSpecialMode ? 'rounded-lg bg-components-input-bg-normal pb-1 pl-1' : '',
       )}
     >
@@ -118,8 +118,8 @@ const TagInput = ({
           <span
             data-input-value={value || inputPlaceholder}
             className={cn(
-              !isInWorkflow && 'max-w-[300px]',
-              isInWorkflow && 'max-w-[146px]',
+              !isInWorkflow && 'max-w-75',
+              isInWorkflow && 'max-w-36.5',
               'grid overflow-hidden rounded-md py-1 system-xs-regular after:invisible after:col-start-1 after:row-start-1 after:whitespace-pre after:content-[attr(data-input-value)]',
               isSpecialMode && 'border border-transparent px-1.5',
               focused && isSpecialMode && 'border-dashed border-divider-deep',
diff --git a/web/app/components/base/theme-selector.tsx b/web/app/components/base/theme-selector.tsx
index f11fe0c1b45..cfe4ba2849f 100644
--- a/web/app/components/base/theme-selector.tsx
+++ b/web/app/components/base/theme-selector.tsx
@@ -48,7 +48,7 @@ export default function ThemeSelector() {
         render={
           <ActionButton
             aria-label={t(($) => $['theme.theme'], { ns: 'common' })}
-            className="h-8 w-8 p-[6px] data-popup-open:bg-state-base-hover"
+            className="h-8 w-8 p-1.5 data-popup-open:bg-state-base-hover"
           />
         }
       >
diff --git a/web/app/components/base/theme-switcher.tsx b/web/app/components/base/theme-switcher.tsx
index 5e9a3b9877c..06ad259dd1e 100644
--- a/web/app/components/base/theme-switcher.tsx
+++ b/web/app/components/base/theme-switcher.tsx
@@ -28,7 +28,7 @@ export default function ThemeSwitcher() {
         </div>
       </button>
       <div
-        className={cn('h-[14px] w-px bg-transparent', theme === 'dark' && 'bg-divider-regular')}
+        className={cn('h-3.5 w-px bg-transparent', theme === 'dark' && 'bg-divider-regular')}
         data-testid="divider"
       ></div>
       <button
@@ -46,7 +46,7 @@ export default function ThemeSwitcher() {
         </div>
       </button>
       <div
-        className={cn('h-[14px] w-px bg-transparent', theme === 'system' && 'bg-divider-regular')}
+        className={cn('h-3.5 w-px bg-transparent', theme === 'system' && 'bg-divider-regular')}
         data-testid="divider"
       ></div>
       <button
diff --git a/web/app/components/base/upgrade-modal/index.tsx b/web/app/components/base/upgrade-modal/index.tsx
index 1cfbdb97cf3..a2e858d0658 100644
--- a/web/app/components/base/upgrade-modal/index.tsx
+++ b/web/app/components/base/upgrade-modal/index.tsx
@@ -42,7 +42,7 @@ export function UpgradeModal({
       <DialogContent
         className={cn(
           styles.surface,
-          'w-[580px] max-w-[480px] overflow-hidden rounded-2xl p-0',
+          'w-145 max-w-120 overflow-hidden rounded-2xl p-0',
           classNames?.content,
         )}
       >
diff --git a/web/app/components/base/user-avatar-list/index.tsx b/web/app/components/base/user-avatar-list/index.tsx
index ab8c60c24e1..73b875e8437 100644
--- a/web/app/components/base/user-avatar-list/index.tsx
+++ b/web/app/components/base/user-avatar-list/index.tsx
@@ -67,7 +67,7 @@ export const UserAvatarList: FC<UserAvatarListProps> = memo(
         {shouldShowCount && remainingCount > 0 && (
           <div className="relative shrink-0" style={{ zIndex: 0 }}>
             <div
-              className="inline-flex items-center justify-center rounded-full bg-gray-500 text-[10px] leading-none text-white ring-2 ring-components-panel-bg"
+              className="inline-flex items-center justify-center rounded-full bg-gray-500 text-2xs leading-none text-white ring-2 ring-components-panel-bg"
               style={{
                 width: avatarSizeToPx[size],
                 height: avatarSizeToPx[size],
diff --git a/web/app/components/base/voice-input/index.stories.tsx b/web/app/components/base/voice-input/index.stories.tsx
index a38aa6d8e31..8cd3a073075 100644
--- a/web/app/components/base/voice-input/index.stories.tsx
+++ b/web/app/components/base/voice-input/index.stories.tsx
@@ -26,13 +26,13 @@ const VoiceInputMock = ({ onConverted, onCancel }: any) => {
 
   return (
     <div className="relative h-16 w-full overflow-hidden rounded-xl border-2 border-primary-600">
-      <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]">
+      <div className="absolute inset-[1.5px] flex items-center overflow-hidden rounded-[10.5px] bg-primary-25 py-3.5 pr-[6.5px] pl-[14.5px]">
         {/* Waveform visualization placeholder */}
-        <div className="absolute bottom-0 left-0 flex h-4 w-full items-end gap-[3px] px-2">
+        <div className="absolute bottom-0 left-0 flex h-4 w-full items-end gap-0.75 px-2">
           {Array.from({ length: 40 }).map((_, i) => (
             <div
               key={i}
-              className="w-[2px] rounded-t bg-blue-200"
+              className="w-0.5 rounded-t bg-blue-200"
               style={{
                 height: `${Math.random() * 100}%`,
                 animation: state === 'recording' ? 'pulse 1s infinite' : 'none',
@@ -71,7 +71,7 @@ const VoiceInputMock = ({ onConverted, onCancel }: any) => {
         )}
 
         <div
-          className={`w-[45px] pl-1 text-xs font-medium ${duration > 500 ? 'text-red-600' : 'text-gray-700'}`}
+          className={`w-11.25 pl-1 text-xs font-medium ${duration > 500 ? 'text-red-600' : 'text-gray-700'}`}
         >
           {`0${minutes}:${seconds >= 10 ? seconds : `0${seconds}`}`}
         </div>
diff --git a/web/app/components/base/voice-input/index.tsx b/web/app/components/base/voice-input/index.tsx
index b930ad3692c..e86c3101806 100644
--- a/web/app/components/base/voice-input/index.tsx
+++ b/web/app/components/base/voice-input/index.tsx
@@ -203,7 +203,7 @@ function VoiceInput({
 
   return (
     <div ref={ref} className={cn(s.wrapper, 'absolute inset-0 rounded-xl')}>
-      <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]">
+      <div className="absolute inset-[1.5px] flex items-center overflow-hidden rounded-[10.5px] bg-primary-25 py-3.5 pr-[6.5px] pl-[14.5px]">
         <canvas ref={canvasRef} className="absolute bottom-0 left-0 h-4 w-full" />
         {(isStarting || isConverting) && (
           <div
@@ -250,7 +250,7 @@ function VoiceInput({
         )}
         <div
           className={cn(
-            'w-[45px] pl-1 text-xs font-medium',
+            'w-11.25 pl-1 text-xs font-medium',
             duration > 500 ? 'text-text-destructive' : 'text-text-secondary',
           )}
           data-testid="voice-input-timer"
diff --git a/web/app/components/billing/annotation-full/index.tsx b/web/app/components/billing/annotation-full/index.tsx
index efbcac78b6d..3412259b8a8 100644
--- a/web/app/components/billing/annotation-full/index.tsx
+++ b/web/app/components/billing/annotation-full/index.tsx
@@ -19,7 +19,7 @@ const AnnotationFull: FC = () => {
     >
       <div className="mt-6 flex cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-3.5 py-4 shadow-md transition-all duration-200 ease-in-out">
         <div className="flex items-center justify-between">
-          <div className={cn(s.textGradient, 'text-base leading-[24px] font-semibold')}>
+          <div className={cn(s.textGradient, 'text-base leading-6 font-semibold')}>
             <div>{t(($) => $['annotatedResponse.fullTipLine1'], { ns: 'billing' })}</div>
             <div>{t(($) => $['annotatedResponse.fullTipLine2'], { ns: 'billing' })}</div>
           </div>
diff --git a/web/app/components/billing/annotation-full/modal.tsx b/web/app/components/billing/annotation-full/modal.tsx
index ab7301f12d0..c85c0df0c35 100644
--- a/web/app/components/billing/annotation-full/modal.tsx
+++ b/web/app/components/billing/annotation-full/modal.tsx
@@ -33,7 +33,7 @@ const AnnotationFullModal: FC<Props> = ({ show, onHide }) => {
         >
           <div className="mt-6 flex cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-7 py-6 shadow-md transition-all duration-200 ease-in-out">
             <div className="flex items-center justify-between">
-              <div className={cn(s.textGradient, 'text-[18px] leading-[27px] font-semibold')}>
+              <div className={cn(s.textGradient, 'text-[18px] leading-6.75 font-semibold')}>
                 <div>{t(($) => $['annotatedResponse.fullTipLine1'], { ns: 'billing' })}</div>
                 <div>{t(($) => $['annotatedResponse.fullTipLine2'], { ns: 'billing' })}</div>
               </div>
diff --git a/web/app/components/billing/pricing/header.tsx b/web/app/components/billing/pricing/header.tsx
index c6e1ed1d0dc..e225830677c 100644
--- a/web/app/components/billing/pricing/header.tsx
+++ b/web/app/components/billing/pricing/header.tsx
@@ -14,11 +14,11 @@ const Header = ({ onClose }: HeaderProps) => {
   const { t } = useTranslation()
 
   return (
-    <div className="flex min-h-[105px] w-full justify-center px-10">
+    <div className="flex min-h-26.25 w-full justify-center px-10">
       <div className="relative flex max-w-[1680px] grow flex-col justify-end gap-y-1 border-x border-divider-accent p-6 pt-8">
         <div className="flex items-end">
-          <div aria-hidden="true" className="py-[5px]">
-            <DifyLogo alt="" className="h-[27px] w-[60px]" />
+          <div aria-hidden="true" className="py-1.25">
+            <DifyLogo alt="" className="h-6.75 w-15" />
           </div>
           <DialogTitle
             className={cn(
@@ -34,7 +34,7 @@ const Header = ({ onClose }: HeaderProps) => {
         </DialogDescription>
         <Button
           variant="secondary"
-          className="absolute right-[-18px] bottom-[40.5px] z-10 size-9 rounded-full p-2"
+          className="absolute -right-4.5 bottom-[40.5px] z-10 size-9 rounded-full p-2"
           aria-label={t(($) => $['operation.close'], { ns: 'common' })}
           onClick={onClose}
         >
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
index 987db6368fd..d5de0c97ee3 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
@@ -192,7 +192,7 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({ plan, currentPlan, planRange, c
       </div>
       <List plan={plan} />
       <Dialog open={showEducationPricingConfirm} onOpenChange={setShowEducationPricingConfirm}>
-        <DialogContent backdropProps={{ forceRender: true }} className="w-[520px]">
+        <DialogContent backdropProps={{ forceRender: true }} className="w-130">
           <DialogCloseButton
             aria-label={t(($) => $['operation.close'], { ns: 'common' })}
             className="top-6 right-6"
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
index 9c3e606eb13..44b1b778f19 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
@@ -15,7 +15,7 @@ const Tooltip = ({ content }: TooltipProps) => {
         delay={0}
         closeDelay={0}
         aria-label={content}
-        className="group relative z-10 flex size-[18px] items-center justify-center rounded-sm border-0 bg-state-base-hover p-0 transition-[border-radius,background-color] duration-500 ease-in-out hover:rounded-none hover:bg-saas-dify-blue-static"
+        className="group relative z-10 flex size-4.5 items-center justify-center rounded-sm border-0 bg-state-base-hover p-0 transition-[border-radius,background-color] duration-500 ease-in-out hover:rounded-none hover:bg-saas-dify-blue-static"
       >
         <RiInfoI className="size-3.5 text-text-tertiary group-hover:text-text-primary-on-surface" />
       </PopoverTrigger>
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
index 2a2fc4c0ba8..176cedc3535 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
@@ -47,7 +47,7 @@ const Button = ({ plan, handleGetPayUrl }: ButtonProps) => {
       <div className="flex grow items-center gap-x-2">
         <span>{t(($) => $[`${i18nPrefix}.btnText`], { ns: 'billing' })}</span>
         {isPremiumPlan && (
-          <span className="pt-[7px] pb-px">
+          <span className="pt-1.75 pb-px">
             <AwsMarketplace className="h-6" />
           </span>
         )}
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 b767518aba7..14bb1dc8dd3 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
@@ -69,7 +69,7 @@ const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({ plan }) => {
       <div className="flex flex-col px-5 py-4">
         <div className="flex flex-col gap-y-6 px-1 pt-10">
           {STYLE_MAP[plan].icon}
-          <div className="flex min-h-[104px] flex-col gap-y-2">
+          <div className="flex min-h-26 flex-col gap-y-2">
             <div className="text-[30px] leading-[1.2] font-medium text-text-primary">
               {t(($) => $[`${i18nPrefix}.name`], { ns: 'billing' })}
             </div>
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.tsx
index 1c82e452b60..257d702c38e 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.tsx
@@ -16,7 +16,7 @@ const List = ({ plan }: ListProps) => {
   }) as string[]
 
   return (
-    <div className="flex flex-col gap-y-[10px] p-6">
+    <div className="flex flex-col gap-y-2.5 p-6">
       <div className="system-md-semibold text-text-secondary">
         <Trans
           i18nKey={($) => $[`${i18nPrefix}.includesTitle`]}
diff --git a/web/app/components/billing/priority-label/index.tsx b/web/app/components/billing/priority-label/index.tsx
index 2d6eb9b81d3..0e7be9e601c 100644
--- a/web/app/components/billing/priority-label/index.tsx
+++ b/web/app/components/billing/priority-label/index.tsx
@@ -31,7 +31,7 @@ const PriorityLabel = ({ className }: PriorityLabelProps) => {
         render={
           <div
             className={cn(
-              'ml-1 inline-flex h-[18px] shrink-0 items-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-[5px] system-2xs-medium text-text-accent-secondary',
+              'ml-1 inline-flex h-4.5 shrink-0 items-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1.25 system-2xs-medium text-text-accent-secondary',
               className,
             )}
           />
diff --git a/web/app/components/billing/upgrade-btn/index.tsx b/web/app/components/billing/upgrade-btn/index.tsx
index a6c109a3321..bd2d8e06bb7 100644
--- a/web/app/components/billing/upgrade-btn/index.tsx
+++ b/web/app/components/billing/upgrade-btn/index.tsx
@@ -84,7 +84,7 @@ const UpgradeBtn: FC<Props> = ({
     >
       <SparklesSoft
         aria-hidden="true"
-        className="flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0"
+        className="flex h-3.5 w-3.5 items-center py-px pl-0.75 text-components-premium-badge-indigo-text-stop-0"
       />
       <div className="system-xs-medium">
         <span className="p-1">{label}</span>
diff --git a/web/app/components/billing/vector-space-full/index.tsx b/web/app/components/billing/vector-space-full/index.tsx
index 282eba3ad04..7d98709891d 100644
--- a/web/app/components/billing/vector-space-full/index.tsx
+++ b/web/app/components/billing/vector-space-full/index.tsx
@@ -19,7 +19,7 @@ const VectorSpaceFull: FC = () => {
     >
       <div className="px-6 py-5">
         <div className="flex items-center justify-between">
-          <div className={cn(s.textGradient, 'text-base leading-[24px] font-semibold')}>
+          <div className={cn(s.textGradient, 'text-base leading-6 font-semibold')}>
             <div>{t(($) => $['vectorSpace.fullTip'], { ns: 'billing' })}</div>
             <div>{t(($) => $['vectorSpace.fullSolution'], { ns: 'billing' })}</div>
           </div>
diff --git a/web/app/components/custom/custom-page/index.tsx b/web/app/components/custom/custom-page/index.tsx
index 7bafef74529..3c3756ebded 100644
--- a/web/app/components/custom/custom-page/index.tsx
+++ b/web/app/components/custom/custom-page/index.tsx
@@ -33,7 +33,7 @@ const CustomPage = () => {
           </div>
           <button
             type="button"
-            className="flex h-10 w-[120px] cursor-pointer items-center justify-center rounded-3xl border-none bg-white p-0 system-md-semibold text-text-accent shadow-xs hover:opacity-95"
+            className="flex h-10 w-30 cursor-pointer items-center justify-center rounded-3xl border-none bg-white p-0 system-md-semibold text-text-accent shadow-xs hover:opacity-95"
             onClick={() => setShowPricingModal()}
           >
             {t(($) => $['upgradeBtn.encourageShort'], { ns: 'billing' })}
@@ -42,7 +42,7 @@ const CustomPage = () => {
       )}
       <CustomWebAppBrand />
       {showContact && (
-        <div className="absolute bottom-0 h-[50px] text-xs leading-[50px] text-text-quaternary">
+        <div className="absolute bottom-0 h-12.5 text-xs leading-12.5 text-text-quaternary">
           {t(($) => $['customize.prefix'], { ns: 'custom' })}
           <a
             className="text-text-accent"
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 eef450b39a8..4a7d678aeed 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
@@ -16,8 +16,8 @@ const ChatPreviewCard = ({
   imgKey,
 }: ChatPreviewCardProps) => {
   return (
-    <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 h-80 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-58 shrink-0 flex-col p-1 pr-0">
         <div className="flex items-center gap-3 p-3 pr-2">
           <div
             className={cn(
@@ -36,7 +36,7 @@ const ChatPreviewCard = ({
           <Button variant="secondary-accent" className="w-full justify-center">
             <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 className="h-2 w-23.5 rounded-xs bg-text-accent-light-mode-only"></div>
             </div>
           </Button>
         </div>
@@ -45,10 +45,10 @@ const ChatPreviewCard = ({
             <div className="h-2 w-14 rounded-xs bg-text-quaternary opacity-20"></div>
           </div>
           <div className="flex h-8 items-center px-3 py-1">
-            <div className="h-2 w-[168px] rounded-xs bg-text-quaternary opacity-20"></div>
+            <div className="h-2 w-42 rounded-xs bg-text-quaternary opacity-20"></div>
           </div>
           <div className="flex h-8 items-center px-3 py-1">
-            <div className="h-2 w-[128px] rounded-xs bg-text-quaternary opacity-20"></div>
+            <div className="h-2 w-32 rounded-xs bg-text-quaternary opacity-20"></div>
           </div>
         </div>
         <div className="flex shrink-0 items-center justify-between p-3">
@@ -65,17 +65,17 @@ const ChatPreviewCard = ({
           </div>
         </div>
       </div>
-      <div className="flex w-[138px] grow flex-col justify-between p-2 pr-0">
-        <div className="flex grow flex-col justify-between rounded-l-2xl border-[0.5px] border-r-0 border-components-panel-border-subtle bg-chatbot-bg pt-16 pb-4 pl-[22px]">
-          <div className="w-[720px] rounded-2xl border border-divider-subtle bg-chat-bubble-bg px-4 py-3">
+      <div className="flex w-34.5 grow flex-col justify-between p-2 pr-0">
+        <div className="flex grow flex-col justify-between rounded-l-2xl border-[0.5px] border-r-0 border-components-panel-border-subtle bg-chatbot-bg pt-16 pb-4 pl-5.5">
+          <div className="w-180 rounded-2xl border border-divider-subtle bg-chat-bubble-bg px-4 py-3">
             <div className="mb-1 body-md-regular text-text-primary">
               Hello! How can I assist you today?
             </div>
             <Button size="small">
-              <div className="h-2 w-[144px] rounded-xs bg-text-quaternary opacity-20"></div>
+              <div className="h-2 w-36 rounded-xs bg-text-quaternary opacity-20"></div>
             </Button>
           </div>
-          <div className="flex h-[52px] w-[578px] items-center rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pl-3.5 body-lg-regular text-text-placeholder shadow-md backdrop-blur-xs">
+          <div className="flex h-13 w-144.5 items-center rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pl-3.5 body-lg-regular text-text-placeholder shadow-md backdrop-blur-xs">
             Talk to Dify
           </div>
         </div>
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 ca390b592e5..ad17882a912 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
@@ -16,7 +16,7 @@ const WorkflowPreviewCard = ({
   imgKey,
 }: WorkflowPreviewCardProps) => {
   return (
-    <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="flex h-80 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
diff --git a/web/app/components/datasets/chunk.tsx b/web/app/components/datasets/chunk.tsx
index 4bf12c08806..3b10e2cb7d8 100644
--- a/web/app/components/datasets/chunk.tsx
+++ b/web/app/components/datasets/chunk.tsx
@@ -11,7 +11,7 @@ const ChunkLabel: FC<ChunkLabelProps> = (props) => {
   const { label, characterCount } = props
   return (
     <div className="flex items-center text-xs font-medium text-text-tertiary">
-      <SelectionMod className="size-[10px]" />
+      <SelectionMod className="size-2.5" />
       <p className="ml-0.5 flex gap-2">
         <span>{label}</span>
         <span>·</span>
@@ -42,15 +42,11 @@ export const QAPreview: FC<QAPreviewProps> = (props) => {
   return (
     <div className="flex flex-col gap-y-2">
       <div className="flex gap-x-1">
-        <label className="shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">
-          Q
-        </label>
+        <label className="shrink-0 text-[13px] leading-5 font-medium text-text-tertiary">Q</label>
         <p className="body-md-regular text-text-secondary">{qa.question}</p>
       </div>
       <div className="flex gap-x-1">
-        <label className="shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">
-          A
-        </label>
+        <label className="shrink-0 text-[13px] leading-5 font-medium text-text-tertiary">A</label>
         <p className="body-md-regular text-text-secondary">{qa.answer}</p>
       </div>
     </div>
diff --git a/web/app/components/datasets/common/document-picker/__tests__/preview-document-picker.spec.tsx b/web/app/components/datasets/common/document-picker/__tests__/preview-document-picker.spec.tsx
index 323b4a9ddd6..353ce77eed3 100644
--- a/web/app/components/datasets/common/document-picker/__tests__/preview-document-picker.spec.tsx
+++ b/web/app/components/datasets/common/document-picker/__tests__/preview-document-picker.spec.tsx
@@ -456,7 +456,7 @@ describe('PreviewDocumentPicker', () => {
       })
 
       const nameElement = screen.getByText('Test')
-      expect(nameElement).toHaveClass('max-w-[200px]')
+      expect(nameElement).toHaveClass('max-w-50')
     })
   })
 
diff --git a/web/app/components/datasets/common/document-picker/index.tsx b/web/app/components/datasets/common/document-picker/index.tsx
index 08aea3bbe82..7a79022e15b 100644
--- a/web/app/components/datasets/common/document-picker/index.tsx
+++ b/web/app/components/datasets/common/document-picker/index.tsx
@@ -79,12 +79,12 @@ function DocumentPickerTriggerValue({
       <FileIcon name={document?.name} extension={getDocumentExtension(document)} size="xl" />
       <span className="flex min-w-0 flex-col items-start">
         <span className="flex max-w-full min-w-0 items-center gap-1">
-          <span className="max-w-[280px] min-w-0 truncate system-md-semibold text-text-primary">
+          <span className="max-w-70 min-w-0 truncate system-md-semibold text-text-primary">
             {document?.name || '--'}
           </span>
           <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">
+        <span className="flex h-3 max-w-75 items-center gap-0.5 text-text-tertiary">
           <TypeIcon className="size-3 shrink-0" />
           <span className={cn('truncate system-2xs-medium-uppercase', isParentChild && 'mt-0.5')}>
             {isGeneralMode && t(($) => $['chunkingMode.general'], { ns: 'dataset' })}
@@ -173,12 +173,12 @@ export function DocumentPicker({ datasetId, value, parentMode, onChange }: Props
         <DocumentList className="mt-2 data-empty:mt-0" />
         {data ? (
           <ComboboxEmpty className="p-0">
-            <div className="mt-2 flex h-[100px] w-full items-center justify-center px-3 py-2 system-sm-regular text-text-tertiary">
+            <div className="mt-2 flex h-25 w-full items-center justify-center px-3 py-2 system-sm-regular text-text-tertiary">
               {t(($) => $.noData, { ns: 'common' })}
             </div>
           </ComboboxEmpty>
         ) : (
-          <ComboboxStatus className="mt-2 flex h-[100px] w-full items-center justify-center">
+          <ComboboxStatus className="mt-2 flex h-25 w-full items-center justify-center">
             <Loading />
           </ComboboxStatus>
         )}
diff --git a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
index 18a987baf66..b6155bc39d7 100644
--- a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
+++ b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
@@ -48,11 +48,11 @@ const PreviewDocumentPicker: FC<Props> = ({ className, value, files, onChange })
             <FileIcon name={name} extension={extension} size="lg" />
             <div className="ml-1 flex flex-col items-start">
               <div className="flex items-center space-x-0.5">
-                <span className={cn('max-w-[200px] truncate system-md-semibold text-text-primary')}>
+                <span className={cn('max-w-50 truncate system-md-semibold text-text-primary')}>
                   {' '}
                   {name || '--'}
                 </span>
-                <ArrowIcon className="h-[18px] w-[18px] text-text-primary" />
+                <ArrowIcon className="h-4.5 w-4.5 text-text-primary" />
               </div>
             </div>
           </div>
@@ -63,7 +63,7 @@ const PreviewDocumentPicker: FC<Props> = ({ className, value, files, onChange })
         sideOffset={4}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="w-[392px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]">
+        <div className="w-98 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]">
           {files?.length > 1 && (
             <div className="flex h-8 items-center pl-2 system-xs-medium-uppercase text-text-tertiary">
               {t(($) => $.preprocessDocument, { ns: 'dataset', num: files.length })}
@@ -72,7 +72,7 @@ const PreviewDocumentPicker: FC<Props> = ({ className, value, files, onChange })
           {files?.length > 0 ? (
             <PreviewDocumentList list={files} onChange={handleChange} />
           ) : (
-            <div className="mt-2 flex h-[100px] w-[360px] items-center justify-center">
+            <div className="mt-2 flex h-25 w-90 items-center justify-center">
               <Loading />
             </div>
           )}
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 cbf850724d8..da735fa0def 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
@@ -51,7 +51,7 @@ const StatusAction: FC<Props> = ({
 }) => {
   const { Icon, color } = getIcon(type)
   return (
-    <div className="relative flex h-[34px] items-center rounded-lg border border-components-panel-border bg-components-panel-bg-blur pr-3 pl-2 shadow-xs">
+    <div className="relative flex h-8.5 items-center rounded-lg border border-components-panel-border bg-components-panel-bg-blur pr-3 pl-2 shadow-xs">
       <div
         className={`absolute inset-0 rounded-lg opacity-40 ${
           (type === 'success' &&
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 3febcf51cd8..b42079ad957 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
@@ -56,10 +56,7 @@ const ImageItem = ({ file, showDeleteAction, onRemove, onReUpload, onPreview }:
           <RiCloseLine className="size-4 text-components-button-secondary-text" />
         </Button>
       )}
-      <FileImageRender
-        className="h-[68px] w-[68px] shadow-md"
-        imageUrl={base64Url || sourceUrl || ''}
-      />
+      <FileImageRender className="h-17 w-17 shadow-md" imageUrl={base64Url || sourceUrl || ''} />
       {progress >= 0 && !fileIsUploaded(file) && (
         <div className="absolute inset-0 z-10 flex items-center justify-center border-2 border-effects-image-frame bg-background-overlay-alt">
           <ProgressCircle
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
index e52449905f4..56965ebb472 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
@@ -33,7 +33,7 @@ const DSLConfirmModal = ({
         if (!open) onCancel()
       }}
     >
-      <AlertDialogContent className="w-[480px] max-w-none! overflow-hidden! border-none p-6 text-left align-middle shadow-xl">
+      <AlertDialogContent className="w-120 max-w-none! overflow-hidden! border-none p-6 text-left align-middle shadow-xl">
         <div className="flex flex-col items-start gap-2 self-stretch pb-4">
           <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
             {t(($) => $['newApp.appCreateDSLErrorTitle'], { ns: 'app' })}
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/header.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/header.tsx
index 3f3b7067419..0fd93854d78 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/header.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/header.tsx
@@ -16,7 +16,7 @@ const Header = ({ onClose }: HeaderProps) => {
         className="absolute top-5 right-5 flex size-8 cursor-pointer items-center"
         onClick={onClose}
       >
-        <RiCloseLine className="size-[18px] text-text-tertiary" />
+        <RiCloseLine className="size-4.5 text-text-tertiary" />
       </div>
     </div>
   )
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
index 012f7223fe1..dedcb0b3e5e 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
@@ -52,7 +52,7 @@ const CreateFromDSLModal = ({
   return (
     <>
       <Dialog open={show} onOpenChange={(open) => !open && !showConfirmModal && onClose()}>
-        <DialogContent className="w-full max-w-[480px]! overflow-hidden! rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0! text-left align-middle shadow-xl">
+        <DialogContent className="w-full max-w-120! overflow-hidden! rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0! text-left align-middle shadow-xl">
           <Header onClose={onClose} />
           <Tab currentTab={currentTab} setCurrentTab={setCurrentTab} />
           <div className="px-6 py-4">
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 9de6e9efe11..5dc435103c8 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
@@ -120,7 +120,7 @@ const Uploader: FC<Props> = ({ file, updateFile, className }) => {
               <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">
+              <div className="font-inter flex h-3 items-center gap-1 self-stretch text-2xs leading-3 font-medium text-text-tertiary uppercase">
                 <span>PIPELINE</span>
                 <span className="text-text-quaternary">·</span>
                 <span>{formatFileSize(file.size)}</span>
diff --git a/web/app/components/datasets/create-from-pipeline/index.tsx b/web/app/components/datasets/create-from-pipeline/index.tsx
index 7b33822b353..cfc891cb51a 100644
--- a/web/app/components/datasets/create-from-pipeline/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/index.tsx
@@ -7,7 +7,7 @@ import List from './list'
 const CreateFromPipeline = () => {
   return (
     <div className="relative flex h-[calc(100vh-56px)] flex-col overflow-hidden rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle">
-      <Effect className="top-[-34px] left-8 opacity-20" />
+      <Effect className="-top-8.5 left-8 opacity-20" />
       <Header />
       <List />
       <Footer />
diff --git a/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx
index 6309795bb61..e0ec166d8c5 100644
--- a/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx
@@ -164,7 +164,7 @@ describe('CreateCard', () => {
     it('should have fixed height', () => {
       const { container } = render(<CreateCard />)
       const card = container.firstChild as HTMLElement
-      expect(card).toHaveClass('h-[132px]')
+      expect(card).toHaveClass('h-33')
     })
 
     it('should have shadow and border', () => {
diff --git a/web/app/components/datasets/create-from-pipeline/list/create-card.tsx b/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
index dcdfe70d596..5daf9a51b95 100644
--- a/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
@@ -36,7 +36,7 @@ const CreateCard = () => {
 
   return (
     <div
-      className="group relative flex h-[132px] cursor-pointer flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-3 shadow-xs shadow-shadow-shadow-3"
+      className="group relative flex h-33 cursor-pointer flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-3 shadow-xs shadow-shadow-shadow-3"
       onClick={handleCreate}
     >
       <div className="flex items-center gap-x-3 p-4 pb-2">
diff --git a/web/app/components/datasets/create-from-pipeline/list/index.tsx b/web/app/components/datasets/create-from-pipeline/list/index.tsx
index baad1318b3d..270f91c30a6 100644
--- a/web/app/components/datasets/create-from-pipeline/list/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/index.tsx
@@ -3,7 +3,7 @@ import CustomizedList from './customized-list'
 
 const List = () => {
   return (
-    <div className="grow gap-y-1 overflow-y-auto px-16 pt-1 pb-[60px]">
+    <div className="grow gap-y-1 overflow-y-auto px-16 pt-1 pb-15">
       <BuiltInPipelineList />
       <CustomizedList />
     </div>
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
index fc4919f8ea9..e59ca63aa8d 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
@@ -686,7 +686,7 @@ describe('TemplateCard', () => {
     it('should have fixed height', () => {
       const { container } = render(<TemplateCard {...defaultProps} />)
       const card = container.firstChild as HTMLElement
-      expect(card).toHaveClass('h-[132px]')
+      expect(card).toHaveClass('h-33')
     })
 
     it('should have shadow and border', () => {
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/details/__tests__/index.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/details/__tests__/index.spec.tsx
index b4bdb282809..3706db3d62c 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/details/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/details/__tests__/index.spec.tsx
@@ -281,7 +281,7 @@ describe('Details', () => {
       })
 
       const { container } = render(<Details {...defaultProps} />)
-      const sidebar = container.querySelector('[class*="w-[360px]"]')
+      const sidebar = container.querySelector('.w-90')
       expect(sidebar).toBeInTheDocument()
     })
 
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
index 92fdaeb432e..7e8cd62d375 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
@@ -48,7 +48,7 @@ const Details = ({ id, type, onApplyTemplate, onClose }: DetailsProps) => {
       <div className="flex grow items-center justify-center p-3 pr-0">
         <WorkflowPreview {...pipelineTemplateInfo.graph} className="overflow-hidden rounded-2xl" />
       </div>
-      <div className="relative flex w-[360px] shrink-0 flex-col">
+      <div className="relative flex w-90 shrink-0 flex-col">
         <button
           type="button"
           className="absolute top-4 right-4 z-10 flex size-8 items-center justify-center"
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
index 75c7ddd4e46..228db651f45 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
@@ -145,7 +145,7 @@ const TemplateCard = ({ pipeline, showMoreOperations = true, type }: TemplateCar
   }, [pipeline.id, deletePipeline, invalidCustomizedTemplateList])
 
   return (
-    <div className="group relative flex h-[132px] cursor-pointer flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-3 shadow-xs shadow-shadow-shadow-3">
+    <div className="group relative flex h-33 cursor-pointer flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-3 shadow-xs shadow-shadow-shadow-3">
       <Content
         name={pipeline.name}
         description={pipeline.description}
@@ -167,7 +167,7 @@ const TemplateCard = ({ pipeline, showMoreOperations = true, type }: TemplateCar
             if (!open) closeEditModal()
           }}
         >
-          <DialogContent className="w-[calc(100vw-2rem)] max-w-[520px]! overflow-hidden! border-none p-0 text-left align-middle">
+          <DialogContent className="w-[calc(100vw-2rem)] max-w-130! overflow-hidden! border-none p-0 text-left align-middle">
             <EditPipelineInfo pipeline={pipeline} onClose={closeEditModal} />
           </DialogContent>
         </Dialog>
diff --git a/web/app/components/datasets/create/embedding-process/indexing-progress-item.tsx b/web/app/components/datasets/create/embedding-process/indexing-progress-item.tsx
index 886341c5e84..be57451e50b 100644
--- a/web/app/components/datasets/create/embedding-process/indexing-progress-item.tsx
+++ b/web/app/components/datasets/create/embedding-process/indexing-progress-item.tsx
@@ -30,7 +30,7 @@ const StatusIcon: FC<{ status: string; error?: string }> = ({ status, error }) =
         </TooltipTrigger>
         <TooltipContent
           sideOffset={4}
-          className="max-w-60 rounded-xl border-[0.5px] border-components-panel-border px-4 py-[14px] body-xs-regular text-text-secondary"
+          className="max-w-60 rounded-xl border-[0.5px] border-components-panel-border px-4 py-3.5 body-xs-regular text-text-secondary"
         >
           {error}
         </TooltipContent>
@@ -74,7 +74,7 @@ const IndexingProgressItem: FC<IndexingProgressItemProps> = ({
   return (
     <div
       className={cn(
-        'relative h-[26px] overflow-hidden rounded-md bg-components-progress-bar-bg',
+        'relative h-6.5 overflow-hidden rounded-md bg-components-progress-bar-bg',
         isError && 'bg-state-destructive-hover-alt',
       )}
     >
@@ -84,7 +84,7 @@ const IndexingProgressItem: FC<IndexingProgressItemProps> = ({
           style={{ width: `${percent}%` }}
         />
       )}
-      <div className="z-1 flex h-full items-center gap-1 pr-2 pl-[6px]">
+      <div className="z-1 flex h-full items-center gap-1 pr-2 pl-1.5">
         <SourceTypeIcon sourceType={sourceType} name={name} notionIcon={notionIcon} />
         <div className="flex w-0 grow items-center gap-1" title={name}>
           <div className="truncate system-xs-medium text-text-secondary">{name}</div>
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
index 2868ce3cc12..b55c9f3e0c2 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
@@ -51,7 +51,7 @@ const EmptyDatasetCreationModal = ({ show = false, onHide }: IProps) => {
         if (!open) onHide()
       }}
     >
-      <DialogContent className="w-full max-w-[520px]! overflow-hidden! border-none px-8 text-left align-middle">
+      <DialogContent className="w-full max-w-130! overflow-hidden! border-none px-8 text-left align-middle">
         <div className={s.modalHeader}>
           <div className={s.title}>
             {t(($) => $['stepOne.modal.title'], { ns: 'datasetCreation' })}
diff --git a/web/app/components/datasets/create/file-uploader/__tests__/index.spec.tsx b/web/app/components/datasets/create/file-uploader/__tests__/index.spec.tsx
index 41bed909bcd..22a476b5502 100644
--- a/web/app/components/datasets/create/file-uploader/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/file-uploader/__tests__/index.spec.tsx
@@ -248,7 +248,7 @@ describe('FileUploader', () => {
     it('should have correct container width', () => {
       const { container } = render(<FileUploader {...defaultProps} />)
       const wrapper = container.firstChild as HTMLElement
-      expect(wrapper).toHaveClass('w-[640px]')
+      expect(wrapper).toHaveClass('w-160')
     })
 
     it('should have proper spacing', () => {
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 79eda0d0e0d..a61e5a06a35 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
@@ -38,7 +38,7 @@ const FileListItem = ({ fileItem, onPreview, onRemove }: FileListItemProps) => {
   return (
     <div
       onClick={handleClick}
-      className="flex h-12 max-w-[640px] items-center rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg text-xs leading-3 text-text-tertiary shadow-xs"
+      className="flex h-12 max-w-160 items-center rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg text-xs leading-3 text-text-tertiary shadow-xs"
     >
       <div className="flex w-12 shrink-0 items-center justify-center">
         <DocumentFileIcon
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 732bf2a34cb..2998f265411 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
@@ -47,7 +47,7 @@ const UploadDropzone = ({
       <div
         ref={dropRef}
         className={cn(
-          'relative mb-2 box-border flex min-h-20 max-w-[640px] 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 mb-2 box-border flex min-h-20 max-w-160 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',
           dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent',
         )}
       >
diff --git a/web/app/components/datasets/create/file-uploader/index.tsx b/web/app/components/datasets/create/file-uploader/index.tsx
index 811fbffcff3..028c32c8ac1 100644
--- a/web/app/components/datasets/create/file-uploader/index.tsx
+++ b/web/app/components/datasets/create/file-uploader/index.tsx
@@ -50,7 +50,7 @@ const FileUploader = ({
   })
 
   return (
-    <div className="mb-5 w-[640px]">
+    <div className="mb-5 w-160">
       <div className={cn('mb-1 text-sm/6 font-semibold text-text-secondary', titleClassName)}>
         {t(($) => $['stepOne.uploader.title'], { ns: 'datasetCreation' })}
       </div>
@@ -71,7 +71,7 @@ const FileUploader = ({
       )}
 
       {fileList.length > 0 && (
-        <div className="max-w-[640px] cursor-default space-y-1">
+        <div className="max-w-160 cursor-default space-y-1">
           {fileList.map((fileItem) => (
             <FileListItem
               key={fileItem.fileID}
diff --git a/web/app/components/datasets/create/step-one/components/next-step-button.tsx b/web/app/components/datasets/create/step-one/components/next-step-button.tsx
index ede901d53b7..a2d5b110e61 100644
--- a/web/app/components/datasets/create/step-one/components/next-step-button.tsx
+++ b/web/app/components/datasets/create/step-one/components/next-step-button.tsx
@@ -16,9 +16,9 @@ function NextStepButton({ disabled, onClick }: NextStepButtonProps) {
   const { t } = useTranslation()
 
   return (
-    <div className="flex max-w-[640px] justify-end gap-2">
+    <div className="flex max-w-160 justify-end gap-2">
       <Button disabled={disabled} variant="primary" onClick={onClick}>
-        <span className="flex gap-0.5 px-[10px]">
+        <span className="flex gap-0.5 px-2.5">
           <span className="px-0.5">{t(($) => $['stepOne.button'], { ns: 'datasetCreation' })}</span>
           <RiArrowRightLine className="size-4" />
         </span>
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index dcdb066629e..b144b0d7fcb 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -192,7 +192,7 @@ const StepOne = ({
 
   return (
     <div className="size-full overflow-x-auto">
-      <div className="flex h-full w-full min-w-[1440px]">
+      <div className="flex h-full w-full min-w-360">
         {/* Left Panel - Form */}
         <div className="relative h-full w-1/2 overflow-y-auto">
           <div className="flex justify-end">
@@ -226,7 +226,7 @@ const StepOne = ({
                     supportBatchUpload={supportBatchUpload}
                   />
                   {isShowVectorSpaceFull && (
-                    <div className="mb-4 max-w-[640px]">
+                    <div className="mb-4 max-w-160">
                       <VectorSpaceFull />
                     </div>
                   )}
@@ -244,13 +244,13 @@ const StepOne = ({
               {dataSourceType === DataSourceType.NOTION && (
                 <>
                   {!isNotionAuthed && (
-                    <div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}>
+                    <div className={cn('mb-8 w-160', !shouldShowDataSourceTypeList && 'mt-12')}>
                       <NotionConnector onSetting={onSetting} />
                     </div>
                   )}
                   {isNotionAuthed && (
                     <>
-                      <div className="mb-8 w-[640px]">
+                      <div className="mb-8 w-160">
                         <NotionPageSelector
                           value={notionPages.map((page) => page.page_id)}
                           onSelect={updateNotionPages}
@@ -261,7 +261,7 @@ const StepOne = ({
                         />
                       </div>
                       {isShowVectorSpaceFull && (
-                        <div className="mb-4 max-w-[640px]">
+                        <div className="mb-4 max-w-160">
                           <VectorSpaceFull />
                         </div>
                       )}
@@ -277,7 +277,7 @@ const StepOne = ({
               {/* Web Data Source */}
               {dataSourceType === DataSourceType.WEB && (
                 <>
-                  <div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}>
+                  <div className={cn('mb-8 w-160', !shouldShowDataSourceTypeList && 'mt-12')}>
                     <Website
                       onPreview={showWebsitePreview}
                       checkedCrawlResult={websitePages}
@@ -290,7 +290,7 @@ const StepOne = ({
                     />
                   </div>
                   {isShowVectorSpaceFull && (
-                    <div className="mb-4 max-w-[640px]">
+                    <div className="mb-4 max-w-160">
                       <VectorSpaceFull />
                     </div>
                   )}
@@ -304,7 +304,7 @@ const StepOne = ({
               {/* Empty Dataset Creation Link */}
               {!datasetId && (
                 <>
-                  <div className="my-8 h-px max-w-[640px] bg-divider-regular" />
+                  <div className="my-8 h-px max-w-160 bg-divider-regular" />
                   <span
                     className="inline-flex cursor-pointer items-center text-[13px] leading-4 text-text-accent"
                     onClick={openModal}
diff --git a/web/app/components/datasets/create/step-three/index.tsx b/web/app/components/datasets/create/step-three/index.tsx
index 27e97965d83..7f6162da282 100644
--- a/web/app/components/datasets/create/step-three/index.tsx
+++ b/web/app/components/datasets/create/step-three/index.tsx
@@ -39,8 +39,8 @@ const StepThree = ({
 
   return (
     <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">
+      <div className="h-full max-w-240 shrink-0 grow overflow-y-auto px-14 sm:px-16">
+        <div className="mx-auto max-w-160 pt-10 pb-8">
           {!datasetId && (
             <>
               <div className="flex flex-col gap-y-1 pb-3">
@@ -92,8 +92,8 @@ const StepThree = ({
         </div>
       </div>
       {!isMobile && (
-        <div className="shrink-0 pt-[88px] pr-8 text-xs">
-          <div className="flex w-[328px] flex-col gap-3 rounded-xl bg-background-section p-6 text-text-tertiary">
+        <div className="shrink-0 pt-22 pr-8 text-xs">
+          <div className="flex w-82 flex-col gap-3 rounded-xl bg-background-section p-6 text-text-tertiary">
             <div className="flex size-10 items-center justify-center rounded-[10px] bg-components-card-bg shadow-lg">
               <RiBookOpenLine className="size-5 text-text-accent" />
             </div>
diff --git a/web/app/components/datasets/create/step-two/components/__tests__/inputs.spec.tsx b/web/app/components/datasets/create/step-two/components/__tests__/inputs.spec.tsx
index c74a7244b71..7bb0fdd7068 100644
--- a/web/app/components/datasets/create/step-two/components/__tests__/inputs.spec.tsx
+++ b/web/app/components/datasets/create/step-two/components/__tests__/inputs.spec.tsx
@@ -149,13 +149,13 @@ describe('#39592 narrow-container regression (structural)', () => {
   it('gives the MaxLength input a min-width floor so it can never collapse to a sliver', () => {
     render(<MaxLengthInput onChange={vi.fn()} />)
     const input = screen.getByRole('textbox')
-    expect(input.className).toContain('min-w-[64px]')
+    expect(input.className).toContain('min-w-16')
   })
 
   it('gives the OverlapInput input a min-width floor too', () => {
     render(<OverlapInput onChange={vi.fn()} />)
     const input = screen.getByRole('textbox')
-    expect(input.className).toContain('min-w-[64px]')
+    expect(input.className).toContain('min-w-16')
   })
 
   it('caps each field width when stacked and restores flex-1 across the 552px container query', () => {
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 afe42470404..4002f0bebab 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,7 +94,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
           if (!open) onQAConfirmDialogClose()
         }}
       >
-        <AlertDialogContent className="w-[432px]">
+        <AlertDialogContent className="w-108">
           <div className="flex flex-col gap-2 p-6 pb-4">
             <AlertDialogTitle className="text-lg/7 font-semibold text-text-primary">
               {t(($) => $['stepTwo.qaSwitchHighQualityTipTitle'], { ns: 'datasetCreation' })}
@@ -123,7 +123,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
                 {t(($) => $['stepTwo.qualified'], { ns: 'datasetCreation' })}
                 <Badge
                   className={cn(
-                    'ml-1 h-[18px]',
+                    'ml-1 h-4.5',
                     !hasSetIndexType && indexType === IndexingType.QUALIFIED
                       ? 'border-text-accent-secondary text-text-accent-secondary'
                       : '',
diff --git a/web/app/components/datasets/create/step-two/components/inputs.tsx b/web/app/components/datasets/create/step-two/components/inputs.tsx
index df3fc8ab8c6..efdbf9b6634 100644
--- a/web/app/components/datasets/create/step-two/components/inputs.tsx
+++ b/web/app/components/datasets/create/step-two/components/inputs.tsx
@@ -151,7 +151,7 @@ function CompoundNumberInput({
           // min-w-[64px] overrides the component's default min-w-0 so the input
           // can never collapse to an unusable sliver, even in an unforeseen
           // container; belt to the row's flex-wrap braces.
-          className={cn('min-w-[64px]', className)}
+          className={cn('min-w-16', className)}
           onBlur={onBlur}
         />
         {Boolean(unit) && <NumberFieldUnit size={size}>{unit}</NumberFieldUnit>}
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 35f6a176423..3a29329b166 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
@@ -97,7 +97,7 @@ export const ParentChildOptions: FC<ParentChildOptionsProps> = ({
   return (
     <OptionCard
       title={t(($) => $['stepTwo.parentChild'], { ns: 'datasetCreation' })}
-      icon={<ParentChildChunk className="h-[20px] w-[20px]" />}
+      icon={<ParentChildChunk className="h-5 w-5" />}
       effectImg={BlueEffect.src}
       className="text-util-colors-blue-light-blue-light-500"
       activeHeaderClassName="bg-dataset-option-card-blue-gradient"
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 2a84804b3ed..b0519e78369 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
@@ -86,7 +86,7 @@ export const PreviewPanel: FC<PreviewPanelProps> = ({
         }
         className={cn(
           'relative flex h-full w-1/2 shrink-0 p-4 pr-0',
-          isMobile && 'w-full max-w-[524px]',
+          isMobile && 'w-full max-w-131',
         )}
         mainClassName="space-y-6"
       >
@@ -176,7 +176,7 @@ export const PreviewPanel: FC<PreviewPanelProps> = ({
                 </SkeletonRow>
                 <SkeletonRectangle className="w-full" />
                 <SkeletonRectangle className="w-full" />
-                <SkeletonRectangle className="w-[422px]" />
+                <SkeletonRectangle className="w-105.5" />
               </SkeletonContainer>
             ))}
           </div>
diff --git a/web/app/components/datasets/create/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index aa90cac5ed7..67f93d14078 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -29,7 +29,7 @@ export const TopBar: FC<TopBarProps> = (props) => {
   return (
     <div
       className={cn(
-        'relative flex h-[52px] shrink-0 items-center justify-between border-b border-b-divider-subtle',
+        'relative flex h-13 shrink-0 items-center justify-between border-b border-b-divider-subtle',
         className,
       )}
     >
diff --git a/web/app/components/datasets/create/website/base/crawled-result.tsx b/web/app/components/datasets/create/website/base/crawled-result.tsx
index bae352606b4..8568d87409d 100644
--- a/web/app/components/datasets/create/website/base/crawled-result.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result.tsx
@@ -67,7 +67,7 @@ const CrawledResult: FC<Props> = ({
         'border-t-[0.5px] border-divider-regular shadow-xs shadow-shadow-shadow-3',
       )}
     >
-      <div className="flex h-[34px] items-center justify-between px-4">
+      <div className="flex h-8.5 items-center justify-between px-4">
         <CheckboxWithLabel
           isChecked={isCheckAll}
           onChange={handleCheckedAll}
diff --git a/web/app/components/datasets/create/website/base/crawling.tsx b/web/app/components/datasets/create/website/base/crawling.tsx
index c51a201047c..56e49c5a6e8 100644
--- a/web/app/components/datasets/create/website/base/crawling.tsx
+++ b/web/app/components/datasets/create/website/base/crawling.tsx
@@ -15,14 +15,14 @@ const Crawling: FC<Props> = ({ className = '', crawledNum, totalNum }) => {
 
   return (
     <div className={className}>
-      <div className="flex h-[34px] items-center border-y-[0.5px] border-divider-regular px-4 text-xs text-text-tertiary shadow-xs shadow-shadow-shadow-3">
+      <div className="flex h-8.5 items-center border-y-[0.5px] border-divider-regular px-4 text-xs text-text-tertiary shadow-xs shadow-shadow-shadow-3">
         {t(($) => $['stepOne.website.totalPageScraped'], { ns: 'datasetCreation' })} {crawledNum}/
         {totalNum}
       </div>
 
       <div className="p-2">
         {['', '', '', ''].map((item, index) => (
-          <div className="py-[5px]" key={index}>
+          <div className="py-1.25" key={index}>
             <RowStruct className="text-text-quaternary" />
           </div>
         ))}
diff --git a/web/app/components/datasets/create/website/base/field.tsx b/web/app/components/datasets/create/website/base/field.tsx
index a93af69f1ed..24d9421d7a4 100644
--- a/web/app/components/datasets/create/website/base/field.tsx
+++ b/web/app/components/datasets/create/website/base/field.tsx
@@ -30,11 +30,11 @@ const Field: FC<Props> = ({
 }) => {
   return (
     <div className={cn(className)}>
-      <div className="flex py-[7px]">
+      <div className="flex py-1.75">
         <div
           className={cn(
             labelClassName,
-            'flex h-[16px] items-center text-[13px] font-semibold text-text-secondary',
+            'flex h-4 items-center text-[13px] font-semibold text-text-secondary',
           )}
         >
           {label}{' '}
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 fe6498669f4..cd5017fad52 100644
--- a/web/app/components/datasets/create/website/base/options-wrap.tsx
+++ b/web/app/components/datasets/create/website/base/options-wrap.tsx
@@ -27,12 +27,12 @@ const OptionsWrap: FC<Props> = ({ className = '', children, controlFoldOptions }
   return (
     <div className={cn(className, !fold ? 'mb-0' : 'mb-3')}>
       <div
-        className="flex h-[26px] cursor-pointer items-center gap-x-1 py-1 select-none"
+        className="flex h-6.5 cursor-pointer items-center gap-x-1 py-1 select-none"
         onClick={foldToggle}
       >
         <div className="flex grow items-center">
           <RiEqualizer2Line className="mr-1 size-4 text-text-secondary" />
-          <span className="text-[13px] leading-[16px] font-semibold text-text-secondary uppercase">
+          <span className="text-[13px] leading-4 font-semibold text-text-secondary uppercase">
             {t(($) => $[`${I18N_PREFIX}.options`], { ns: 'datasetCreation' })}
           </span>
         </div>
diff --git a/web/app/components/datasets/create/website/firecrawl/index.tsx b/web/app/components/datasets/create/website/firecrawl/index.tsx
index b3ae36cd198..211bcfb5854 100644
--- a/web/app/components/datasets/create/website/firecrawl/index.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/index.tsx
@@ -226,7 +226,7 @@ const FireCrawl: FC<Props> = ({
         </OptionsWrap>
 
         {!isInit && (
-          <div className="relative left-[-16px] mt-3 w-[calc(100%+32px)] rounded-b-xl">
+          <div className="relative -left-4 mt-3 w-[calc(100%+32px)] rounded-b-xl">
             {isRunning && (
               <Crawling
                 className="mt-2"
diff --git a/web/app/components/datasets/create/website/jina-reader/index.tsx b/web/app/components/datasets/create/website/jina-reader/index.tsx
index 8bfa9a73d0c..3f85f5c69d2 100644
--- a/web/app/components/datasets/create/website/jina-reader/index.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/index.tsx
@@ -212,7 +212,7 @@ const JinaReader: FC<Props> = ({
         </OptionsWrap>
 
         {!isInit && (
-          <div className="relative left-[-16px] mt-3 w-[calc(100%+32px)] rounded-b-xl">
+          <div className="relative -left-4 mt-3 w-[calc(100%+32px)] rounded-b-xl">
             {isRunning && (
               <Crawling
                 className="mt-2"
diff --git a/web/app/components/datasets/create/website/no-data.tsx b/web/app/components/datasets/create/website/no-data.tsx
index 810bd8b4dd8..90777373d36 100644
--- a/web/app/components/datasets/create/website/no-data.tsx
+++ b/web/app/components/datasets/create/website/no-data.tsx
@@ -65,7 +65,7 @@ const NoData: FC<Props> = ({ onConfig, provider }) => {
 
   return (
     <>
-      <div className="mt-4 max-w-[640px] rounded-2xl bg-workflow-process-bg p-6">
+      <div className="mt-4 max-w-160 rounded-2xl bg-workflow-process-bg p-6">
         <div className="flex h-12 w-12 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
           {currentProvider.emoji}
         </div>
diff --git a/web/app/components/datasets/create/website/watercrawl/index.tsx b/web/app/components/datasets/create/website/watercrawl/index.tsx
index fe640d99c6a..cff8845bf0d 100644
--- a/web/app/components/datasets/create/website/watercrawl/index.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/index.tsx
@@ -211,7 +211,7 @@ const WaterCrawl: FC<Props> = ({
         </OptionsWrap>
 
         {!isInit && (
-          <div className="relative left-[-16px] mt-3 w-[calc(100%+32px)] rounded-b-xl">
+          <div className="relative -left-4 mt-3 w-[calc(100%+32px)] rounded-b-xl">
             {isRunning && (
               <Crawling
                 className="mt-2"
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 2833430c217..586eb657172 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
@@ -114,7 +114,7 @@ const DocumentTableRow = React.memo(
           </div>
         </td>
         <td>
-          <div className="group mr-6 flex max-w-[460px] items-center hover:mr-0">
+          <div className="group mr-6 flex max-w-115 items-center hover:mr-0">
             <div className="flex shrink-0 items-center">
               <DocumentSourceIcon doc={doc} fileType={fileType} />
             </div>
diff --git a/web/app/components/datasets/documents/components/documents-header.tsx b/web/app/components/datasets/documents/components/documents-header.tsx
index eee44600d98..b4eb5e40c75 100644
--- a/web/app/components/datasets/documents/components/documents-header.tsx
+++ b/web/app/components/datasets/documents/components/documents-header.tsx
@@ -155,7 +155,7 @@ const DocumentsHeader: FC<DocumentsHeaderProps> = ({
         {/* Left: Filters */}
         <div className="flex items-center gap-2">
           <Chip
-            className="w-[160px]"
+            className="w-40"
             showLeftIcon={false}
             value={statusFilterValue}
             items={statusFilterItems}
diff --git a/web/app/components/datasets/documents/components/list.tsx b/web/app/components/datasets/documents/components/list.tsx
index c4a121b8f2d..ff4b0612d37 100644
--- a/web/app/components/datasets/documents/components/list.tsx
+++ b/web/app/components/datasets/documents/components/list.tsx
@@ -144,7 +144,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}`}
+          className={`w-full max-w-full min-w-175 border-collapse border-0 text-sm ${s.documentTable}`}
         >
           <thead className="h-8 border-b border-divider-subtle text-xs/8 font-medium text-text-tertiary uppercase">
             <tr>
@@ -161,7 +161,7 @@ const DocumentList = ({
                 </div>
               </td>
               <td>{t(($) => $['list.table.header.fileName'], { ns: 'datasetDocuments' })}</td>
-              <td className="w-[130px]">
+              <td className="w-32.5">
                 {t(($) => $['list.table.header.chunkingMode'], { ns: 'datasetDocuments' })}
               </td>
               <td className="w-24">
diff --git a/web/app/components/datasets/documents/components/operations.tsx b/web/app/components/datasets/documents/components/operations.tsx
index ac843da0d0e..ca177c6d991 100644
--- a/web/app/components/datasets/documents/components/operations.tsx
+++ b/web/app/components/datasets/documents/components/operations.tsx
@@ -403,7 +403,7 @@ const Operations = ({
             <DropdownMenuContent
               placement="bottom-end"
               sideOffset={4}
-              popupClassName={cn('w-[200px] py-0', className)}
+              popupClassName={cn('w-50 py-0', className)}
             >
               <div className="w-full py-1">
                 {canShowPrimarySection && (
diff --git a/web/app/components/datasets/documents/components/rename-modal.tsx b/web/app/components/datasets/documents/components/rename-modal.tsx
index a3e893fd74b..6a4e9ba6f19 100644
--- a/web/app/components/datasets/documents/components/rename-modal.tsx
+++ b/web/app/components/datasets/documents/components/rename-modal.tsx
@@ -55,7 +55,7 @@ const RenameModal: FC<Props> = ({ documentId, datasetId, name, onClose, onSaved
           {t(($) => $['list.table.rename'], { ns: 'datasetDocuments' })}
         </DialogTitle>
 
-        <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">
+        <div className="mt-6 text-sm leading-5.25 font-medium text-text-primary">
           {t(($) => $['list.table.name'], { ns: 'datasetDocuments' })}
         </div>
         <Input className="mt-2 h-10" value={newName} onChange={(e) => setNewName(e.target.value)} />
diff --git a/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
index 10d18654ee7..134ef8abc38 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
@@ -45,7 +45,7 @@ const Actions = ({
     <div className="flex items-center gap-x-2 overflow-hidden">
       {showSelect && (
         <>
-          <label className="flex shrink-0 cursor-pointer items-center gap-x-2 py-[3px] pr-2 pl-4">
+          <label className="flex shrink-0 cursor-pointer items-center gap-x-2 py-0.75 pr-2 pl-4">
             <Checkbox
               onCheckedChange={(checked) => onSelectAll?.(checked)}
               indeterminate={indeterminate}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/list.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/list.tsx
index dfb3ed43568..05389384423 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/list.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/list.tsx
@@ -10,7 +10,7 @@ type ListProps = {
 
 const List = ({ currentCredentialId, credentials, onCredentialChange }: ListProps) => {
   return (
-    <div className="flex w-[280px] flex-col gap-y-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
+    <div className="flex w-70 flex-col gap-y-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
       {credentials.map((credential) => {
         const isSelected = credential.id === currentCredentialId
         return (
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
index f040af3bfcd..e4b8d95ecc2 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
@@ -180,7 +180,7 @@ const OnlineDocuments = ({
               isMultipleChoice={supportBatchUpload}
             />
           ) : (
-            <div className="flex h-[296px] items-center justify-center">
+            <div className="flex h-74 items-center justify-center">
               <Loading type="app" />
             </div>
           )}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/index.tsx
index 65ee30aece6..0b8b9057b8e 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/index.tsx
@@ -49,7 +49,7 @@ const PageSelector = ({
 
   if (!rows.length) {
     return (
-      <div className="flex h-[296px] items-center justify-center text-[13px] text-text-tertiary">
+      <div className="flex h-74 items-center justify-center text-[13px] text-text-tertiary">
         {t(($) => $['dataSource.notion.selector.noSearchResult'], { ns: 'common' })}
       </div>
     )
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/title.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/title.tsx
index c25034d2077..9714268e022 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/title.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/title.tsx
@@ -9,7 +9,7 @@ const Title = ({ name }: TitleProps) => {
   const { t } = useTranslation()
 
   return (
-    <div className="px-[5px] py-1 system-sm-medium text-text-secondary">
+    <div className="px-1.25 py-1 system-sm-medium text-text-secondary">
       {t(($) => $['onlineDocument.pageSelectorTitle'], { ns: 'datasetPipeline', name })}
     </div>
   )
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
index d07f66e448e..93138df69eb 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
@@ -54,7 +54,7 @@ const Bucket = ({
       <button
         type="button"
         className={cn(
-          'max-w-full shrink truncate rounded-md px-[5px] py-1',
+          'max-w-full shrink truncate rounded-md px-1.25 py-1',
           isActive
             ? 'system-sm-medium text-text-secondary'
             : 'system-sm-regular text-text-tertiary',
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx
index 76ce25172cb..e435a84bbbd 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx
@@ -15,7 +15,7 @@ const Drive = ({ breadcrumbs, handleBackToRoot }: DriveProps) => {
       <button
         type="button"
         className={cn(
-          'max-w-full shrink truncate rounded-md px-[5px] py-1',
+          'max-w-full shrink truncate rounded-md px-1.25 py-1',
           breadcrumbs.length > 0 &&
             'system-sm-regular text-text-tertiary hover:bg-state-base-hover',
           breadcrumbs.length === 0 && 'system-sm-medium text-text-secondary',
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/menu.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/menu.tsx
index 8e89f8322f8..fa553fafbb4 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/menu.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/menu.tsx
@@ -9,7 +9,7 @@ type MenuProps = {
 
 const Menu = ({ breadcrumbs, startIndex, onBreadcrumbClick }: MenuProps) => {
   return (
-    <div className="flex w-[136px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
+    <div className="flex w-34 flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
       {breadcrumbs.map((breadcrumb, index) => {
         return (
           <Item
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx
index 0c0dd3c65b5..c10cdafa2b0 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx
@@ -96,7 +96,7 @@ const Breadcrumbs = ({
   return (
     <div className="flex grow items-center overflow-hidden">
       {showSearchResult && (
-        <div className="text-test-secondary px-[5px] system-sm-medium">
+        <div className="text-test-secondary px-1.25 system-sm-medium">
           {t(($) => $['onlineDrive.breadcrumbs.searchResult'], {
             ns: 'datasetPipeline',
             searchResultsLength,
@@ -105,7 +105,7 @@ const Breadcrumbs = ({
         </div>
       )}
       {!showSearchResult && showBucketListTitle && (
-        <div className="text-test-secondary px-[5px] system-sm-medium">
+        <div className="text-test-secondary px-1.25 system-sm-medium">
           {t(($) => $['onlineDrive.breadcrumbs.allBuckets'], { ns: 'datasetPipeline' })}
         </div>
       )}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
index 3c1eab3e757..4d564b7c5d0 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
@@ -28,7 +28,7 @@ const BreadcrumbItem = ({
       <button
         type="button"
         className={cn(
-          'max-w-full shrink truncate rounded-md px-[5px] py-1',
+          'max-w-full shrink truncate rounded-md px-1.25 py-1',
           isActive
             ? 'system-sm-medium text-text-secondary'
             : 'system-sm-regular text-text-tertiary',
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/index.tsx
index 056fea14b73..db88f4d64f5 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/index.tsx
@@ -56,7 +56,7 @@ const FileList = ({
   }
 
   return (
-    <div className="flex h-[400px] flex-col overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg shadow-xs shadow-shadow-shadow-3">
+    <div className="flex h-100 flex-col overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg shadow-xs shadow-shadow-shadow-3">
       <Header
         breadcrumbs={breadcrumbs}
         inputValue={inputValue}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
index c30c4c231c0..69a6897b3bf 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
@@ -21,7 +21,7 @@ const EmptySearchResult = ({
         {t(($) => $['onlineDrive.emptySearchResult'], { ns: 'datasetPipeline' })}
       </div>
       <Button variant="secondary-accent" size="small" onClick={onResetKeywords} className="px-1.5">
-        <span className="px-[3px]">
+        <span className="px-0.75">
           {t(($) => $['onlineDrive.resetKeywords'], { ns: 'datasetPipeline' })}
         </span>
       </Button>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx
index b2a4912bbdd..1c68845cfb9 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx
@@ -21,14 +21,14 @@ const FileIcon = ({ type, fileName, size = 'md', className }: FileIconProps) =>
   }, [type, fileName])
 
   if (type === OnlineDriveFileType.bucket) {
-    return <BucketsBlue className={cn('size-[18px]', className)} />
+    return <BucketsBlue className={cn('size-4.5', className)} />
   }
 
   if (type === OnlineDriveFileType.folder) {
-    return <Folder className={cn('size-[18px]', className)} />
+    return <Folder className={cn('size-4.5', className)} />
   }
 
-  return <FileTypeIcon size={size} type={fileType} className={cn('size-[18px]', className)} />
+  return <FileTypeIcon size={size} type={fileType} className={cn('size-4.5', className)} />
 }
 
 export default React.memo(FileIcon)
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
index 6a0fe3d5588..abd581c4d33 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
@@ -52,7 +52,7 @@ const Item = ({
 
   return (
     <div
-      className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-[3px] hover:bg-state-base-hover"
+      className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-0.75 hover:bg-state-base-hover"
       onClick={handleClickItem}
     >
       {!isBucket && isMultipleChoice && (
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/index.spec.tsx
index c9973b7e60a..3fd2fd1dc18 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/index.spec.tsx
@@ -515,7 +515,7 @@ describe('Crawling', () => {
       const { container } = render(<Crawling {...defaultProps} />)
 
       // Assert - Should have 3 skeleton items
-      const skeletonItems = container.querySelectorAll('.px-2.py-\\[5px\\]')
+      const skeletonItems = container.querySelectorAll('.px-2.py-1\\.25')
       expect(skeletonItems.length).toBe(3)
     })
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx
index 5f9122b818c..3ac4855d967 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx
@@ -24,7 +24,7 @@ const Block = React.memo(({ className }: BlockProps) => {
 
 const Item = React.memo(({ firstLineWidth, secondLineWidth }: ItemProps) => {
   return (
-    <div className="flex gap-x-2 px-2 py-[5px]">
+    <div className="flex gap-x-2 px-2 py-1.25">
       <div className="py-0.5">
         <Block className="size-4 rounded-sm" />
       </div>
@@ -32,7 +32,7 @@ const Item = React.memo(({ firstLineWidth, secondLineWidth }: ItemProps) => {
         <div className="flex h-5 w-full items-center">
           <Block className={cn('h-2.5 rounded-xs', firstLineWidth)} />
         </div>
-        <div className="flex h-[18px] w-full items-center">
+        <div className="flex h-4.5 w-full items-center">
           <Block className={cn('h-1.5 rounded-xs', secondLineWidth)} />
         </div>
       </div>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/index.tsx
index 2a4d3996e1c..ac2e9ca9bc7 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/index.tsx
@@ -227,7 +227,7 @@ const CreateFormPipeline = () => {
   if (isLoadingWorkspacePermissionKeys || shouldRedirectToDocuments) return <Loading type="app" />
 
   return (
-    <div className="relative flex h-[calc(100vh-56px)] w-full min-w-[1024px] overflow-x-auto rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle">
+    <div className="relative flex h-[calc(100vh-56px)] w-full min-w-5xl overflow-x-auto rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle">
       <div className="h-full min-w-0 flex-1">
         <div className="flex h-full flex-col px-14">
           <LeftHeader
diff --git a/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx b/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
index 3a3238591e2..892d65f2ee7 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
@@ -36,7 +36,7 @@ const LeftHeader = ({ steps, title, currentStep }: LeftHeaderProps) => {
           </Button>
         </Link>
       )}
-      <Effect className="top-[-34px] left-8 opacity-20" />
+      <Effect className="-top-8.5 left-8 opacity-20" />
     </div>
   )
 }
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 074b7a5524d..44d9002f21a 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
@@ -240,7 +240,7 @@ const ChunkPreview = ({
               </SkeletonRow>
               <SkeletonRectangle className="w-full" />
               <SkeletonRectangle className="w-full" />
-              <SkeletonRectangle className="w-[422px]" />
+              <SkeletonRectangle className="w-105.5" />
             </SkeletonContainer>
           ))}
         </div>
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 03bfb4e8c23..a1b9a2edff4 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
@@ -54,7 +54,7 @@ const FilePreview = ({ file, hidePreview }: FilePreviewProps) => {
           className="flex size-8 shrink-0 items-center justify-center"
           onClick={hidePreview}
         >
-          <RiCloseLine className="size-[18px]" />
+          <RiCloseLine className="size-4.5" />
         </button>
       </div>
       {isFetching && (
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 1538dac7a3b..00575f72578 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
@@ -72,7 +72,7 @@ const OnlineDocumentPreview = ({
           className="flex size-8 shrink-0 items-center justify-center"
           onClick={hidePreview}
         >
-          <RiCloseLine className="size-[18px]" />
+          <RiCloseLine className="size-4.5" />
         </button>
       </div>
       {isPending && (
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 859fd401c94..447a9779141 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
@@ -36,7 +36,7 @@ const WebsitePreview = ({ currentWebsite, hidePreview }: WebsitePreviewProps) =>
           className="flex size-8 shrink-0 items-center justify-center"
           onClick={hidePreview}
         >
-          <RiCloseLine className="size-[18px]" />
+          <RiCloseLine className="size-4.5" />
         </button>
       </div>
       <div className="grow overflow-hidden px-6 py-5 body-md-regular text-text-secondary">
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
index fd4ce4abf7d..18a5eb3459e 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
@@ -156,7 +156,7 @@ const EmbeddingProcess = ({
           {isEmbeddingCompleted && t(($) => $['embedding.completed'], { ns: 'datasetDocuments' })}
         </div>
         {enableBilling && plan.type !== Plan.team && (
-          <div className="flex h-[52px] items-center gap-x-2 rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-2.5 pl-3 shadow-xs shadow-shadow-shadow-3">
+          <div className="flex h-13 items-center gap-x-2 rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-2.5 pl-3 shadow-xs shadow-shadow-shadow-3">
             <div className="flex shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 shadow-md shadow-shadow-shadow-5">
               <RiAedFill className="size-4 text-text-primary-on-surface" />
             </div>
@@ -171,7 +171,7 @@ const EmbeddingProcess = ({
             <div
               key={indexingStatusDetail.id}
               className={cn(
-                'relative h-[26px] overflow-hidden rounded-md bg-components-progress-bar-bg',
+                'relative h-6.5 overflow-hidden rounded-md bg-components-progress-bar-bg',
                 indexingStatusDetail.indexing_status === 'error' &&
                   'bg-state-destructive-hover-alt',
               )}
@@ -182,7 +182,7 @@ const EmbeddingProcess = ({
                   style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }}
                 />
               )}
-              <div className="z-1 flex h-full items-center gap-1 pr-2 pl-[6px]">
+              <div className="z-1 flex h-full items-center gap-1 pr-2 pl-1.5">
                 {getSourceType(indexingStatusDetail.id) === DatasourceType.localFile && (
                   <DocumentFileIcon
                     size="sm"
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 7fcf1039c3f..bdf55bfd869 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
@@ -24,7 +24,7 @@ const Processing = ({ batchId, documents }: ProcessingProps) => {
   return (
     <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]">
+        <div className="max-w-160">
           <EmbeddingProcess
             datasetId={datasetId!}
             batchId={batchId}
@@ -34,8 +34,8 @@ const Processing = ({ batchId, documents }: ProcessingProps) => {
           />
         </div>
       </div>
-      <div className="w-2/5 pt-[88px] pr-8">
-        <div className="flex w-[328px] flex-col gap-3 rounded-xl bg-background-section p-6">
+      <div className="w-2/5 pt-22 pr-8">
+        <div className="flex w-82 flex-col gap-3 rounded-xl bg-background-section p-6">
           <div className="flex size-10 items-center justify-center rounded-[10px] bg-components-card-bg shadow-lg shadow-shadow-shadow-5">
             <RiBookOpenLine className="size-5 text-text-accent" />
           </div>
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 ef4587c429b..4df347a6f52 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
@@ -40,7 +40,7 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
       <div className="text-sm font-medium text-text-primary">
         {t(($) => $['generation.csvStructureTitle'], { ns: 'share' })}
       </div>
-      <div className="mt-2 max-h-[500px] overflow-auto">
+      <div className="mt-2 max-h-125 overflow-auto">
         {docForm === ChunkingMode.qa && (
           <table className="w-full table-fixed border-separate border-spacing-0 rounded-lg border border-divider-subtle text-xs">
             <thead className="text-text-secondary">
@@ -104,7 +104,7 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
         bom={true}
         data={getTemplate()}
       >
-        <div className="flex h-[18px] items-center space-x-1 text-xs font-medium text-text-accent">
+        <div className="flex h-4.5 items-center space-x-1 text-xs font-medium text-text-accent">
           <DownloadIcon className="mr-1 size-3" />
           {t(($) => $['list.batchModal.template'], { ns: 'datasetDocuments' })}
         </div>
diff --git a/web/app/components/datasets/documents/detail/batch-modal/index.tsx b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
index 863a5745a3b..fa40bd0d590 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/index.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
@@ -30,8 +30,8 @@ const BatchModalContent: FC<BatchModalContentProps> = ({ docForm, onCancel, onCo
   }
 
   return (
-    <DialogContent className="w-[520px]! overflow-hidden! rounded-xl! border-0! px-8 py-6">
-      <DialogTitle className="relative pb-1 text-xl leading-[30px] font-medium text-text-primary">
+    <DialogContent className="w-130! overflow-hidden! rounded-xl! border-0! px-8 py-6">
+      <DialogTitle className="relative pb-1 text-xl leading-7.5 font-medium text-text-primary">
         {t(($) => $['list.batchModal.title'], { ns: 'datasetDocuments' })}
       </DialogTitle>
       <DialogCloseButton
@@ -40,7 +40,7 @@ const BatchModalContent: FC<BatchModalContentProps> = ({ docForm, onCancel, onCo
       />
       <CSVUploader file={currentCSV} updateFile={handleFile} />
       <CSVDownloader docForm={docForm} />
-      <div className="mt-[28px] flex justify-end pt-6">
+      <div className="mt-7 flex justify-end pt-6">
         <Button className="mr-2" onClick={onCancel}>
           {t(($) => $['list.batchModal.cancel'], { ns: 'datasetDocuments' })}
         </Button>
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 c2550fb2837..744b9fe75f9 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
@@ -226,7 +226,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
         <div className={cn('flex gap-x-0.5', isFullDocMode ? 'mb-6 grow' : 'items-center')}>
           {isParagraphMode && (
             <div className="self-stretch">
-              <Divider type="vertical" className="mx-[7px] w-[2px] bg-text-accent-secondary" />
+              <Divider type="vertical" className="mx-1.75 w-0.5 bg-text-accent-secondary" />
             </div>
           )}
           {renderContent()}
diff --git a/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx b/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
index 28a0d892621..aa412512598 100644
--- a/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
@@ -25,7 +25,7 @@ export function DocumentDetailDrawer({
       panelClassName={cn(
         fullScreen
           ? 'w-full data-[swipe-direction=left]:w-full data-[swipe-direction=right]:w-full'
-          : 'w-[568px] pt-16 pr-2 pb-2 data-[swipe-direction=left]:w-[568px] data-[swipe-direction=right]:w-[568px]',
+          : 'w-142 pt-16 pr-2 pb-2 data-[swipe-direction=left]:w-142 data-[swipe-direction=right]:w-142',
       )}
       panelContentClassName={cn(
         'bg-components-panel-bg',
diff --git a/web/app/components/datasets/documents/detail/completed/common/keywords.tsx b/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
index 4c5ff1511a4..6fca828e608 100644
--- a/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
@@ -28,7 +28,7 @@ const Keywords: FC<IKeywordsProps> = ({
       <div className="system-xs-medium-uppercase text-text-tertiary">
         {t(($) => $['segment.keywords'], { ns: 'datasetDocuments' })}
       </div>
-      <div className="flex max-h-[200px] w-full flex-wrap gap-1 overflow-auto text-text-tertiary">
+      <div className="flex max-h-50 w-full flex-wrap gap-1 overflow-auto text-text-tertiary">
         {!segInfo?.keywords?.length && actionType === 'view' ? (
           '-'
         ) : (
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 8bdcbaec1e9..afd75ee53ca 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
@@ -138,7 +138,7 @@ const RegenerationModal: FC<IRegenerationModalProps> = ({
 
   return (
     <AlertDialog open={isShow}>
-      <AlertDialogContent className="w-[calc(100vw-2rem)] max-w-[480px]! overflow-hidden! rounded-2xl! border-none p-6 text-left align-middle shadow-xl">
+      <AlertDialogContent className="w-[calc(100vw-2rem)] max-w-120! overflow-hidden! rounded-2xl! border-none p-6 text-left align-middle shadow-xl">
         {!loading && !updateSucceeded && (
           <DefaultContent onCancel={onCancel} onConfirm={onConfirm} />
         )}
diff --git a/web/app/components/datasets/documents/detail/completed/components/menu-bar.tsx b/web/app/components/datasets/documents/detail/completed/components/menu-bar.tsx
index d22ecd8d0d3..3cb72a6038e 100644
--- a/web/app/components/datasets/documents/detail/completed/components/menu-bar.tsx
+++ b/web/app/components/datasets/documents/detail/completed/components/menu-bar.tsx
@@ -69,7 +69,7 @@ function MenuBar({
           if (nextItem) onChangeStatus(nextItem)
         }}
       >
-        <SelectTrigger className="mr-2 w-[100px] shrink-0 shadow-none">
+        <SelectTrigger className="mr-2 w-25 shrink-0 shadow-none">
           {selectedStatus?.name ?? ''}
         </SelectTrigger>
         <SelectContent popupClassName="w-[160px]">
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
index c3edb5ed9eb..a1e53b2b47b 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
@@ -25,9 +25,7 @@ const ChunkContent: FC<ChunkContentProps> = ({ detail, isFullDocMode, className
     return (
       <div className={className}>
         <div className="flex gap-x-1">
-          <div className="w-4 shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">
-            Q
-          </div>
+          <div className="w-4 shrink-0 text-[13px] leading-5 font-medium text-text-tertiary">Q</div>
           <Markdown
             className={cn(
               'body-md-regular text-text-secondary',
@@ -38,9 +36,7 @@ const ChunkContent: FC<ChunkContentProps> = ({ detail, isFullDocMode, className
           />
         </div>
         <div className="flex gap-x-1">
-          <div className="w-4 shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">
-            A
-          </div>
+          <div className="w-4 shrink-0 text-[13px] leading-5 font-medium text-text-tertiary">A</div>
           <Markdown
             className={cn(
               'body-md-regular text-text-secondary',
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 41a42bc89a0..d51281ddb99 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
@@ -4,7 +4,7 @@ const Slice = React.memo(() => {
   return (
     <div className="flex flex-col gap-y-1">
       <div className="flex h-5 w-full items-center bg-state-base-hover">
-        <span className="h-5 w-[30px] bg-state-base-hover-alt" />
+        <span className="h-5 w-7.5 bg-state-base-hover-alt" />
       </div>
       <div className="h-5 w-2/3 bg-state-base-hover" />
     </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 06ba1f40423..26977ad332d 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
@@ -13,7 +13,7 @@ export const CardSkelton = React.memo(() => {
     <SkeletonContainer className="gap-y-0 p-1 pb-2">
       <SkeletonContainer className="gap-y-0.5 px-2 pt-1.5">
         <SkeletonRow className="py-0.5">
-          <SkeletonRectangle className="w-[72px] bg-text-quaternary" />
+          <SkeletonRectangle className="w-18 bg-text-quaternary" />
           <SkeletonPoint className="opacity-20" />
           <SkeletonRectangle className="w-24 bg-text-quaternary" />
           <SkeletonPoint className="opacity-20" />
@@ -36,7 +36,7 @@ export const CardSkelton = React.memo(() => {
       <SkeletonContainer className="px-2 py-1.5">
         <SkeletonRow>
           <SkeletonRectangle className="w-14 bg-text-quaternary" />
-          <SkeletonRectangle className="w-[88px] bg-text-quaternary" />
+          <SkeletonRectangle className="w-22 bg-text-quaternary" />
           <SkeletonRectangle className="w-14 bg-text-quaternary" />
         </SkeletonRow>
       </SkeletonContainer>
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 496ebcb6e6a..8b1bb9982b1 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
@@ -14,7 +14,7 @@ const CardSkelton = React.memo(() => {
     <SkeletonContainer className="gap-y-0 p-1 pb-2">
       <SkeletonContainer className="gap-y-0.5 px-2 pt-1.5">
         <SkeletonRow className="py-0.5">
-          <SkeletonRectangle className="w-[72px] bg-text-quaternary" />
+          <SkeletonRectangle className="w-18 bg-text-quaternary" />
           <SkeletonPoint className="opacity-20" />
           <SkeletonRectangle className="w-24 bg-text-quaternary" />
           <SkeletonPoint className="opacity-20" />
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
index ce6593bf600..494c9202a29 100644
--- a/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
@@ -14,7 +14,7 @@ const ParentChunkCardSkelton = () => {
       <SkeletonContainer className="gap-y-0 p-1 pb-0">
         <SkeletonContainer className="gap-y-0.5 px-2 pt-1.5">
           <SkeletonRow className="py-0.5">
-            <SkeletonRectangle className="w-[72px] bg-text-quaternary" />
+            <SkeletonRectangle className="w-18 bg-text-quaternary" />
             <SkeletonPoint className="opacity-20" />
             <SkeletonRectangle className="w-24 bg-text-quaternary" />
             <SkeletonPoint className="opacity-20" />
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 33194bb61a7..7bb3f9cce34 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
@@ -54,7 +54,7 @@ const StatusHeader: FC<StatusHeaderProps> = React.memo(
             disabled={isPauseLoading}
           >
             <RiPauseCircleLine className="size-3.5 text-components-button-secondary-text" />
-            <span className="pr-[3px] system-xs-medium text-components-button-secondary-text">
+            <span className="pr-0.75 system-xs-medium text-components-button-secondary-text">
               {t(($) => $['embedding.pause'], { ns: 'datasetDocuments' })}
             </span>
           </button>
@@ -67,7 +67,7 @@ const StatusHeader: FC<StatusHeaderProps> = React.memo(
             disabled={isResumeLoading}
           >
             <RiPlayCircleLine className="size-3.5 text-components-button-secondary-text" />
-            <span className="pr-[3px] system-xs-medium text-components-button-secondary-text">
+            <span className="pr-0.75 system-xs-medium text-components-button-secondary-text">
               {t(($) => $['embedding.resume'], { ns: 'datasetDocuments' })}
             </span>
           </button>
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 ca3a8a6e6bc..82c6d9b6bd6 100644
--- a/web/app/components/datasets/documents/detail/embedding/skeleton/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/skeleton/index.tsx
@@ -12,7 +12,7 @@ const CardSkelton = React.memo(() => {
     <SkeletonContainer className="gap-y-0 p-1 pb-2">
       <SkeletonContainer className="gap-y-0.5 px-2 pt-1.5">
         <SkeletonRow className="py-0.5">
-          <SkeletonRectangle className="w-[72px] bg-text-quaternary" />
+          <SkeletonRectangle className="w-18 bg-text-quaternary" />
           <SkeletonPoint className="opacity-20" />
           <SkeletonRectangle className="w-24 bg-text-quaternary" />
           <SkeletonPoint className="opacity-20" />
@@ -35,7 +35,7 @@ const CardSkelton = React.memo(() => {
       <SkeletonContainer className="px-2 py-1.5">
         <SkeletonRow>
           <SkeletonRectangle className="w-14 bg-text-quaternary" />
-          <SkeletonRectangle className="w-[88px] bg-text-quaternary" />
+          <SkeletonRectangle className="w-22 bg-text-quaternary" />
           <SkeletonRectangle className="w-14 bg-text-quaternary" />
         </SkeletonRow>
       </SkeletonContainer>
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index d8d7910c4e8..51f5c3996b9 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -292,7 +292,7 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
                     showBatchModal={showBatchModal}
                     embedding={embedding}
                   />
-                  <Divider type="vertical" className="mx-3! h-[14px]! bg-divider-regular!" />
+                  <Divider type="vertical" className="mx-3! h-3.5! bg-divider-regular!" />
                 </>
               )}
             {documentDetail && (
@@ -313,7 +313,7 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
               detail={operationsDetail}
               datasetId={datasetId}
               onUpdate={handleOperate}
-              className="w-[200px]!"
+              className="w-50!"
               canEdit={canEditDocument}
               canDownload={datasetACLCapabilities.canDocumentDownload}
               canDelete={datasetACLCapabilities.canDeleteFile}
diff --git a/web/app/components/datasets/documents/detail/metadata/components/field-info.tsx b/web/app/components/datasets/documents/detail/metadata/components/field-info.tsx
index bd0bfa1bfa2..9147b1f8561 100644
--- a/web/app/components/datasets/documents/detail/metadata/components/field-info.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/components/field-info.tsx
@@ -104,7 +104,7 @@ const FieldInfo: FC<FieldInfoProps> = ({
     >
       <div
         className={cn(
-          'w-[200px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap text-text-tertiary',
+          'w-50 shrink-0 overflow-hidden text-ellipsis whitespace-nowrap text-text-tertiary',
           editAlignTop && 'pt-1',
         )}
       >
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 dcb319fdb34..6eb85e42cb6 100644
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx
@@ -128,10 +128,7 @@ export function SegmentAdd({
       >
         <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,
-          )}
+          className={cn('ml-0.5 px-0.5 text-[13px] leading-4 font-medium capitalize', textColor)}
         >
           {t(($) => $['list.action.addButton'], { ns: 'datasetDocuments' })}
         </span>
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx
index c0b10a9742a..d2656c74ef0 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx
@@ -190,7 +190,7 @@ const PipelineSettings = ({ datasetId, documentId }: PipelineSettingsProps) => {
     )
 
   return (
-    <div className="relative flex h-[calc(100vh-56px)] min-w-[1024px] overflow-x-auto rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle">
+    <div className="relative flex h-[calc(100vh-56px)] min-w-5xl overflow-x-auto rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle">
       <div className="h-full min-w-0 flex-1">
         <div className="flex h-full flex-col px-14">
           <LeftHeader title={t(($) => $['documentSettings.title'], { ns: 'datasetPipeline' })} />
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
index 00ecf9ed8a4..1fbbb2162b3 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
@@ -34,7 +34,7 @@ const LeftHeader = ({ title }: LeftHeaderProps) => {
       >
         <RiArrowLeftLine className="size-5" />
       </Button>
-      <Effect className="top-[-34px] left-8 opacity-20" />
+      <Effect className="-top-8.5 left-8 opacity-20" />
     </div>
   )
 }
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 77065ccac87..7cad1fa90e6 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
@@ -129,7 +129,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({
         if (!open) onCancel()
       }}
     >
-      <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[480px]! max-w-none! flex-col overflow-hidden! rounded-2xl! border-[0.5px]! border-components-panel-border! bg-components-panel-bg! p-0! shadow-xl!">
+      <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-120! max-w-none! flex-col overflow-hidden! rounded-2xl! border-[0.5px]! border-components-panel-border! bg-components-panel-bg! p-0! shadow-xl!">
         <div className="relative flex min-h-0 w-full flex-1 flex-col items-start">
           <div className="flex shrink-0 flex-col items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
             <DialogTitle className="grow self-stretch title-2xl-semi-bold text-text-primary">
@@ -185,7 +185,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({
             )}
           </div>
           <ActionButton className="absolute top-5 right-5" onClick={onCancel}>
-            <RiCloseLine className="h-[18px] w-[18px] shrink-0 text-text-tertiary" />
+            <RiCloseLine className="h-4.5 w-4.5 shrink-0 text-text-tertiary" />
           </ActionButton>
           <Form
             value={formData}
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 71276a442e7..a5eca0b4c90 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
@@ -45,7 +45,7 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({
     <div tabIndex={-1} className={cn('absolute top-14 right-0 bottom-2 z-10 flex outline-hidden')}>
       <div
         className={cn(
-          'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
+          'relative flex h-full w-105 flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
         )}
       >
         <div className="flex items-start self-stretch p-4 pb-0">
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 83c03866c41..17d3fc85c5e 100644
--- a/web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx
@@ -7,8 +7,8 @@ const InfoPanel = () => {
   const docLink = useDocLink()
 
   return (
-    <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 w-90 flex-col items-start pt-27 pr-8 pb-2">
+      <div className="flex w-full min-w-60 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="size-5 text-text-accent" />
         </div>
diff --git a/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx b/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
index 8c0204d5269..32d03e83500 100644
--- a/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
@@ -36,10 +36,7 @@ const RetrievalSettings: FC<RetrievalSettingsProps> = ({
 
   return (
     <div
-      className={cn(
-        'flex flex-col gap-2 self-stretch',
-        isInRetrievalSetting && 'w-full max-w-[480px]',
-      )}
+      className={cn('flex flex-col gap-2 self-stretch', isInRetrievalSetting && 'w-full max-w-120')}
     >
       {!isInHitTesting && !isInRetrievalSetting && (
         <div className="flex h-7 flex-col gap-2 self-stretch pt-1">
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 9603cfe0641..0d29e6019c5 100644
--- a/web/app/components/datasets/external-knowledge-base/create/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/index.tsx
@@ -56,9 +56,9 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
   return (
     <div className="flex grow flex-col self-stretch rounded-t-2xl border-t border-effects-highlight bg-components-panel-bg">
       <div className="flex grow justify-center self-stretch">
-        <div className="flex w-full max-w-[960px] flex-col items-center px-14 py-0">
-          <div className="flex w-full max-w-[640px] grow flex-col items-center gap-4 pt-6 pb-8">
-            <div className="relative flex flex-col items-center gap-[2px] self-stretch py-2">
+        <div className="flex w-full max-w-240 flex-col items-center px-14 py-0">
+          <div className="flex w-full max-w-160 grow flex-col items-center gap-4 pt-6 pb-8">
+            <div className="relative flex flex-col items-center gap-0.5 self-stretch py-2">
               <div className="grow self-stretch system-xl-semibold text-text-primary">
                 {t(($) => $.connectDataset, { ns: 'dataset' })}
               </div>
@@ -79,7 +79,7 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
                 <span>{t(($) => $['connectHelper.helper5'], { ns: 'dataset' })} </span>
               </p>
               <Button
-                className="absolute top-1 left-[-44px] flex h-8 w-8 items-center justify-center rounded-full p-2"
+                className="absolute top-1 -left-11 flex h-8 w-8 items-center justify-center rounded-full p-2"
                 variant="tertiary"
                 onClick={navBackHandle}
               >
diff --git a/web/app/components/datasets/extra-info/api-access/card.tsx b/web/app/components/datasets/extra-info/api-access/card.tsx
index 0ba81c7125d..31e01ea348f 100644
--- a/web/app/components/datasets/extra-info/api-access/card.tsx
+++ b/web/app/components/datasets/extra-info/api-access/card.tsx
@@ -54,7 +54,7 @@ const Card = ({ apiEnabled }: CardProps) => {
   )
 
   return (
-    <div className="w-[208px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
+    <div className="w-52 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
       <div className="p-1">
         <div className="p-2">
           <div className="mb-1.5 flex justify-between">
@@ -88,7 +88,7 @@ const Card = ({ apiEnabled }: CardProps) => {
           href={apiReferenceUrl}
           target="_blank"
           rel="noopener noreferrer"
-          className="flex h-8 items-center space-x-[7px] rounded-lg px-2 text-text-tertiary hover:bg-state-base-hover"
+          className="flex h-8 items-center space-x-1.75 rounded-lg px-2 text-text-tertiary hover:bg-state-base-hover"
         >
           <span className="i-ri-book-open-line size-3.5 shrink-0" />
           <div className="grow truncate system-sm-regular">
diff --git a/web/app/components/datasets/extra-info/service-api/card.tsx b/web/app/components/datasets/extra-info/service-api/card.tsx
index 725efabeadc..afae034c147 100644
--- a/web/app/components/datasets/extra-info/service-api/card.tsx
+++ b/web/app/components/datasets/extra-info/service-api/card.tsx
@@ -19,7 +19,7 @@ const Card = ({ apiBaseUrl, onOpenSecretKeyModal, canManageSecretKey = false }:
   const apiReferenceUrl = useDatasetApiAccessUrl()
 
   return (
-    <div className="flex w-[360px] flex-col rounded-xl border border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-1">
+    <div className="flex w-90 flex-col rounded-xl border border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-1">
       <div className="flex flex-col gap-y-3 p-4">
         <div className="flex items-center gap-x-3">
           <div className="flex grow items-center gap-x-2">
@@ -61,7 +61,7 @@ const Card = ({ apiBaseUrl, onOpenSecretKeyModal, canManageSecretKey = false }:
               onClick={onOpenSecretKeyModal}
             >
               <span className="i-ri-key-2-line size-3.5 shrink-0" />
-              <span className="px-[3px] system-xs-medium">
+              <span className="px-0.75 system-xs-medium">
                 {t(($) => $['serviceApi.card.apiKey'], { ns: 'dataset' })}
               </span>
             </Button>
@@ -70,7 +70,7 @@ const Card = ({ apiBaseUrl, onOpenSecretKeyModal, canManageSecretKey = false }:
         <Link href={apiReferenceUrl} target="_blank" rel="noopener noreferrer">
           <Button variant="ghost" size="small" className="gap-x-px text-text-tertiary">
             <span className="i-ri-book-open-line size-3.5 shrink-0" />
-            <span className="px-[3px] system-xs-medium">
+            <span className="px-0.75 system-xs-medium">
               {t(($) => $['serviceApi.card.apiReference'], { ns: 'dataset' })}
             </span>
           </Button>
diff --git a/web/app/components/datasets/extra-info/statistics.tsx b/web/app/components/datasets/extra-info/statistics.tsx
index 63f640b51d3..97f1f266f7f 100644
--- a/web/app/components/datasets/extra-info/statistics.tsx
+++ b/web/app/components/datasets/extra-info/statistics.tsx
@@ -28,8 +28,8 @@ const Statistics = ({ expand, documentCount, relatedApps }: StatisticsProps) =>
           {t(($) => $['datasetMenus.documents'], { ns: 'common' })}
         </div>
       </div>
-      <div className="flex h-[42px] w-[15px] shrink-0 items-center justify-center">
-        <div className="h-7 w-px rotate-[15deg] bg-divider-subtle" />
+      <div className="flex h-10.5 w-3.75 shrink-0 items-center justify-center">
+        <div className="h-7 w-px rotate-15 bg-divider-subtle" />
       </div>
       <div className="flex min-w-0 flex-col rounded-lg px-2 pt-1 pb-1.5">
         <div className="system-md-semibold-uppercase text-text-secondary">
diff --git a/web/app/components/datasets/hit-testing/components/child-chunks-item.tsx b/web/app/components/datasets/hit-testing/components/child-chunks-item.tsx
index 2794eda62f8..41856ce071a 100644
--- a/web/app/components/datasets/hit-testing/components/child-chunks-item.tsx
+++ b/web/app/components/datasets/hit-testing/components/child-chunks-item.tsx
@@ -14,7 +14,7 @@ const ChildChunks: FC<Props> = ({ payload, isShowAll }) => {
   const { score, content, position } = payload
   return (
     <div className={!isShowAll ? 'line-clamp-2 break-all' : ''}>
-      <div className="relative top-[-2px] inline-flex items-center">
+      <div className="relative -top-0.5 inline-flex items-center">
         <div className="flex h-[20.5px] items-center bg-state-accent-solid px-1 system-2xs-semibold-uppercase text-text-primary-on-surface">
           C-
           {position}
diff --git a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
index 0560debf261..eb238661437 100644
--- a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
+++ b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
@@ -61,9 +61,7 @@ const ChunkDetailModal = ({ payload, onHide }: ChunkDetailModalProps) => {
       <DialogContent
         className={cn(
           'max-h-[calc(100dvh-2rem)] overflow-y-auto! border-none p-6 text-left align-middle',
-          isParentChildRetrieval
-            ? 'w-[1200px] max-w-none! min-w-[1200px]!'
-            : 'w-[800px] max-w-none! min-w-[800px]!',
+          isParentChildRetrieval ? 'w-300 max-w-none! min-w-300!' : 'w-200 max-w-none! min-w-200!',
         )}
       >
         <DialogCloseButton
@@ -108,7 +106,7 @@ const ChunkDetailModal = ({ payload, onHide }: ChunkDetailModalProps) => {
               {answer && (
                 <div className="break-all">
                   <div className="flex gap-x-1">
-                    <div className="w-4 shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">
+                    <div className="w-4 shrink-0 text-[13px] leading-5 font-medium text-text-tertiary">
                       Q
                     </div>
                     <div className={cn('line-clamp-20 body-md-regular text-text-secondary')}>
@@ -116,7 +114,7 @@ const ChunkDetailModal = ({ payload, onHide }: ChunkDetailModalProps) => {
                     </div>
                   </div>
                   <div className="flex gap-x-1">
-                    <div className="w-4 shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">
+                    <div className="w-4 shrink-0 text-[13px] leading-5 font-medium text-text-tertiary">
                       A
                     </div>
                     <div className={cn('line-clamp-20 body-md-regular text-text-secondary')}>
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 8202dc19cf0..d9b9dbc5c82 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
@@ -230,7 +230,7 @@ const QueryInput = ({
           text.length > 200 ||
           (images.length > 0 && !isAllUploaded)
         }
-        className="w-[88px]"
+        className="w-22"
       >
         <RiPlayCircleLine className="mr-1 size-4" />
         {t(($) => $['input.testing'], { ns: 'datasetHitTesting' })}
@@ -266,7 +266,7 @@ const QueryInput = ({
               onClick={() => setIsSettingsOpen(!isSettingsOpen)}
             >
               <RiEqualizer2Line className="size-3.5 text-components-button-secondary-text" />
-              <div className="flex items-center justify-center gap-1 px-[3px]">
+              <div className="flex items-center justify-center gap-1 px-0.75">
                 <span className="system-xs-medium text-components-button-secondary-text">
                   {t(($) => $.settingTitle, { ns: 'datasetHitTesting' })}
                 </span>
diff --git a/web/app/components/datasets/hit-testing/components/records.tsx b/web/app/components/datasets/hit-testing/components/records.tsx
index cb15fb754dd..79332acf1f5 100644
--- a/web/app/components/datasets/hit-testing/components/records.tsx
+++ b/web/app/components/datasets/hit-testing/components/records.tsx
@@ -50,7 +50,7 @@ const Records = ({ records, onClickRecord }: RecordsProps) => {
             <td className="rounded-l-lg bg-background-section-burn pl-3">
               {t(($) => $['table.header.queryContent'], { ns: 'datasetHitTesting' })}
             </td>
-            <td className="w-[128px] bg-background-section-burn pl-3">
+            <td className="w-32 bg-background-section-burn pl-3">
               {t(($) => $['table.header.source'], { ns: 'datasetHitTesting' })}
             </td>
             <td className="w-48 rounded-r-lg bg-background-section-burn pl-3">
@@ -84,7 +84,7 @@ const Records = ({ records, onClickRecord }: RecordsProps) => {
                     )}
                   </div>
                 </td>
-                <td className="w-[128px] p-3 pr-2">
+                <td className="w-32 p-3 pr-2">
                   <div className="flex items-center">
                     <SourceIcon className="mr-1 size-4 text-text-tertiary" />
                     <span className="capitalize">
diff --git a/web/app/components/datasets/hit-testing/components/result-item-external.tsx b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
index a8e46b50b43..68d7c60c0a4 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-external.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
@@ -55,7 +55,7 @@ const ResultItemExternal: FC<Props> = ({ payload, positionId }) => {
             if (!open) hideDetailModal()
           }}
         >
-          <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-full min-w-[800px]! flex-col overflow-hidden! border-none text-left align-middle">
+          <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-full min-w-200! flex-col overflow-hidden! border-none text-left align-middle">
             <DialogCloseButton />
             <DialogTitle className="shrink-0 title-2xl-semi-bold text-text-primary">
               {t(($) => $[`${i18nPrefix}chunkDetail`], { ns: 'datasetHitTesting' })}
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 3de7938d487..c917a9454bd 100644
--- a/web/app/components/datasets/hit-testing/components/result-item.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item.tsx
@@ -94,7 +94,7 @@ const ResultItem = ({ payload }: ResultItemProps) => {
                 {child_chunks.map((item) => (
                   <div
                     key={item.id}
-                    className="ml-[7px] border-l-2 border-text-accent-secondary pl-[7px]"
+                    className="ml-1.75 border-l-2 border-text-accent-secondary pl-1.75"
                   >
                     <ChildChunkItem payload={item} isShowAll={false} />
                   </div>
diff --git a/web/app/components/datasets/hit-testing/components/score.tsx b/web/app/components/datasets/hit-testing/components/score.tsx
index aff99e2e546..670fda868d1 100644
--- a/web/app/components/datasets/hit-testing/components/score.tsx
+++ b/web/app/components/datasets/hit-testing/components/score.tsx
@@ -13,8 +13,8 @@ const Score: FC<Props> = ({ value, besideChunkName }) => {
   return (
     <div
       className={cn(
-        'relative items-center overflow-hidden border border-components-progress-bar-border px-[5px]',
-        besideChunkName ? 'h-[20.5px] border-l-0' : 'h-[20px] rounded-md',
+        'relative items-center overflow-hidden border border-components-progress-bar-border px-1.25',
+        besideChunkName ? 'h-[20.5px] border-l-0' : 'h-5 rounded-md',
       )}
     >
       <div
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index c7cdb753eaf..e592492e8ea 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -242,7 +242,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
         <DrawerPortal>
           <DrawerBackdrop className={cn(!isMobile && 'bg-transparent')} />
           <DrawerViewport>
-            <DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[640px] data-[swipe-direction=right]:rounded-xl">
+            <DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-160 data-[swipe-direction=right]:rounded-xl">
               <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
                 <ModifyRetrievalModal
                   indexMethod={currentDataset?.indexing_technique || ''}
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 9a995547b5b..996b81d55e7 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
@@ -50,7 +50,7 @@ const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps>
   }
 
   return (
-    <div className="shadows-shadow-2xl absolute top-[36px] right-[14px] z-10 flex w-[320px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg">
+    <div className="shadows-shadow-2xl absolute top-9 right-3.5 z-10 flex w-[320px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg">
       <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' })}
@@ -69,10 +69,10 @@ const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps>
         />
       </div>
       <div className="flex w-full items-end justify-end gap-1 p-4 pt-2">
-        <Button className="min-w-[72px] shrink-0" onClick={onClose}>
+        <Button className="min-w-18 shrink-0" onClick={onClose}>
           {t(($) => $['operation.cancel'], { ns: 'common' })}
         </Button>
-        <Button variant="primary" className="min-w-[72px] shrink-0" onClick={handleSave}>
+        <Button variant="primary" className="min-w-18 shrink-0" onClick={handleSave}>
           {t(($) => $['operation.save'], { ns: 'common' })}
         </Button>
       </div>
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 378d955e47b..ce8d887defc 100644
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@@ -90,7 +90,7 @@ const ModifyRetrievalModal: FC<Props> = ({ indexMethod, value, isShow, onHide, o
       <div className="flex h-15 shrink-0 justify-between px-3 pt-3.5 pb-1">
         <div className="text-base font-semibold text-text-primary">
           <div>{t(($) => $['form.retrievalSetting.title'], { ns: 'datasetSettings' })}</div>
-          <div className="text-xs leading-[18px] font-normal text-text-tertiary">
+          <div className="text-xs leading-4.5 font-normal text-text-tertiary">
             <a
               target="_blank"
               rel="noopener noreferrer"
diff --git a/web/app/components/datasets/list/first-empty-state/index.tsx b/web/app/components/datasets/list/first-empty-state/index.tsx
index cb178f96853..4e9add253ad 100644
--- a/web/app/components/datasets/list/first-empty-state/index.tsx
+++ b/web/app/components/datasets/list/first-empty-state/index.tsx
@@ -69,7 +69,7 @@ function DatasetFirstEmptyState({
 
   return (
     <div className="flex grow flex-col overflow-hidden">
-      <div className="relative min-h-[520px] flex-1 overflow-hidden">
+      <div className="relative min-h-130 flex-1 overflow-hidden">
         <div className="pointer-events-none absolute inset-x-8 inset-y-2 grid grid-cols-[repeat(auto-fill,minmax(296px,1fr))] grid-rows-4 gap-3">
           {EMPTY_PLACEHOLDER_CARD_IDS.map((id) => (
             <div key={id} className="rounded-xl bg-background-default-lighter opacity-75" />
@@ -80,7 +80,7 @@ function DatasetFirstEmptyState({
           className="absolute inset-0 flex items-center justify-center overflow-hidden p-2"
           aria-labelledby="datasets-first-empty-title"
         >
-          <div className="flex w-full max-w-[520px] flex-col items-center gap-6">
+          <div className="flex w-full max-w-130 flex-col items-center gap-6">
             <div className="flex flex-col items-center gap-3">
               <div className="flex size-14 items-center justify-center overflow-hidden rounded-xl border border-dashed border-divider-regular bg-components-card-bg p-1 backdrop-blur-md">
                 <div className="flex size-full min-w-px items-center justify-center">
@@ -89,7 +89,7 @@ function DatasetFirstEmptyState({
               </div>
               <h2
                 id="datasets-first-empty-title"
-                className="max-w-[520px] text-center system-sm-regular whitespace-pre-line text-text-tertiary"
+                className="max-w-130 text-center system-sm-regular whitespace-pre-line text-text-tertiary"
               >
                 {t(($) => $[hasActions ? 'firstEmpty.title' : 'firstEmpty.noCreatePermission'], {
                   ns: 'dataset',
diff --git a/web/app/components/datasets/list/header.tsx b/web/app/components/datasets/list/header.tsx
index 2d4a89e4336..20918ca466a 100644
--- a/web/app/components/datasets/list/header.tsx
+++ b/web/app/components/datasets/list/header.tsx
@@ -70,7 +70,7 @@ const DatasetListHeader = ({
   })
 
   return (
-    <div className="sticky top-0 z-10 flex flex-col gap-[14px] bg-background-body px-8 pt-4 pb-2">
+    <div className="sticky top-0 z-10 flex flex-col gap-3.5 bg-background-body px-8 pt-4 pb-2">
       <div className="flex min-h-6 w-full flex-wrap items-center justify-between gap-2">
         <div className="flex min-w-0 flex-wrap items-center gap-2">
           <h1 className="min-w-0 text-[18px]/[21.6px] font-semibold text-text-primary">
@@ -107,7 +107,7 @@ const DatasetListHeader = ({
             onOpenTagManagement={onOpenTagManagement}
             showLeadingIcon={false}
           />
-          <SearchInput className="w-[200px]" value={keywords} onValueChange={onKeywordsChange} />
+          <SearchInput className="w-50" value={keywords} onValueChange={onKeywordsChange} />
           {isCurrentWorkspaceOwner && (
             <>
               <div className="h-3.5 w-px bg-divider-regular" />
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx
index bef82b83eae..2ee083b22a0 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx
@@ -29,7 +29,7 @@ const EditedBeacon: FC<Props> = ({ onReset }) => {
                 onClick={onReset}
               >
                 <RiResetLeftLine
-                  className="size-[10px] text-text-primary-on-surface"
+                  className="size-2.5 text-text-primary-on-surface"
                   aria-hidden="true"
                 />
               </button>
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
index 5c81e89caa1..da3142e69c1 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
@@ -13,7 +13,7 @@ const Label: FC<Props> = ({ isDeleted, className, text }) => {
   return (
     <div
       className={cn(
-        'w-[136px] shrink-0 truncate system-xs-medium text-text-tertiary',
+        'w-34 shrink-0 truncate system-xs-medium text-text-tertiary',
         isDeleted && 'text-text-quaternary line-through',
         className,
       )}
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 3de464ac2fa..996c25f1254 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
@@ -128,7 +128,7 @@ const EditMetadataBatchModal: FC<Props> = ({
         if (!open) onHide()
       }}
     >
-      <DialogContent className="w-full max-w-[640px]! overflow-hidden! border-none text-left align-middle">
+      <DialogContent className="w-full max-w-160! overflow-hidden! border-none text-left align-middle">
         <DialogCloseButton />
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {t(($) => $[`${i18nPrefix}.editMetadata`], { ns: 'dataset' })}
@@ -137,7 +137,7 @@ const EditMetadataBatchModal: FC<Props> = ({
         <div className="mt-1 system-xs-medium text-text-accent">
           {t(($) => $[`${i18nPrefix}.editDocumentsNum`], { ns: 'dataset', num: documentNum })}
         </div>
-        <div className="max-h-[305px] overflow-x-hidden overflow-y-auto">
+        <div className="max-h-76.25 overflow-x-hidden overflow-y-auto">
           <div className="mt-4 space-y-2">
             {templeList.map((item) => (
               <EditMetadataBatchItem
@@ -149,7 +149,7 @@ const EditMetadataBatchModal: FC<Props> = ({
               />
             ))}
           </div>
-          <div className="mt-4 pl-[18px]">
+          <div className="mt-4 pl-4.5">
             <div className="flex items-center">
               <div className="mr-2 shrink-0 system-xs-medium-uppercase text-text-tertiary">
                 {t(($) => $['metadata.createMetadata.title'], { ns: 'dataset' })}
diff --git a/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx b/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
index b4fa4875002..0f90d25a9f4 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
@@ -48,7 +48,7 @@ export function CreateContent({ onClose = noop, hasBack, onBack, onSave }: Props
       {hasBack && (
         <button
           type="button"
-          className="relative left-[-4px] mb-1 flex cursor-pointer items-center space-x-1 border-none bg-transparent px-0 py-1 text-left text-text-accent"
+          className="relative -left-1 mb-1 flex cursor-pointer items-center space-x-1 border-none bg-transparent px-0 py-1 text-left text-text-accent"
           onClick={onBack}
         >
           <span className="i-ri-arrow-left-line size-4" aria-hidden="true" />
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 fbe924d3e54..5fd1453c1ac 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
@@ -90,7 +90,7 @@ const Item: FC<ItemProps> = ({ readonly, disabled, payload, onRename, onDelete }
       >
         <div className="flex h-full items-center space-x-1 text-text-tertiary">
           <span className={cn(iconClassName, 'size-4 shrink-0')} aria-hidden="true" />
-          <div className="max-w-[250px] truncate system-sm-medium text-text-primary">
+          <div className="max-w-62.5 truncate system-sm-medium text-text-primary">
             {payload.name}
           </div>
           <div className="shrink-0 system-xs-regular">{payload.type}</div>
@@ -221,7 +221,7 @@ const DatasetMetadataDrawer: FC<Props> = ({
       <DrawerPortal>
         <DrawerBackdrop />
         <DrawerViewport>
-          <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]">
+          <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-105">
             <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/6 font-medium text-text-primary">
diff --git a/web/app/components/datasets/metadata/metadata-document/field.tsx b/web/app/components/datasets/metadata/metadata-document/field.tsx
index 16e2ad80aa7..25ed1dcff1a 100644
--- a/web/app/components/datasets/metadata/metadata-document/field.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/field.tsx
@@ -10,10 +10,10 @@ type Props = Readonly<{
 const Field: FC<Props> = ({ label, children }) => {
   return (
     <div className="flex items-start space-x-2">
-      <div className="w-[128px] shrink-0 items-center truncate py-1 system-xs-medium text-text-tertiary">
+      <div className="w-32 shrink-0 items-center truncate py-1 system-xs-medium text-text-tertiary">
         {label}
       </div>
-      <div className="w-[244px] shrink-0">{children}</div>
+      <div className="w-61 shrink-0">{children}</div>
     </div>
   )
 }
diff --git a/web/app/components/datasets/metadata/metadata-document/index.tsx b/web/app/components/datasets/metadata/metadata-document/index.tsx
index 26a606b7326..3c71c3ebf4b 100644
--- a/web/app/components/datasets/metadata/metadata-document/index.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/index.tsx
@@ -48,7 +48,7 @@ const MetadataDocument: FC<Props> = ({
   } = useMetadataDocument({ datasetId, documentId, docDetail })
 
   return (
-    <div className={cn('w-[388px] space-y-4', className)}>
+    <div className={cn('w-97 space-y-4', className)}>
       {hasData || isEdit ? (
         <div className="pl-2">
           <InfoGroup
diff --git a/web/app/components/datasets/no-linked-apps-panel.tsx b/web/app/components/datasets/no-linked-apps-panel.tsx
index 624493bd9e2..12cebaad2c8 100644
--- a/web/app/components/datasets/no-linked-apps-panel.tsx
+++ b/web/app/components/datasets/no-linked-apps-panel.tsx
@@ -8,7 +8,7 @@ const NoLinkedAppsPanel = () => {
   const docLink = useDocLink()
 
   return (
-    <div className="w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4">
+    <div className="w-60 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4">
       <div className="inline-flex rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle p-2">
         <RiApps2AddLine className="size-4 text-text-tertiary" />
       </div>
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index 5950ae1a65c..f5359fc1e26 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -97,9 +97,9 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
   ])
   return (
     <Dialog open={show}>
-      <DialogContent className="w-full max-w-[520px] overflow-hidden! rounded-xl border-none px-8 py-6 text-left align-middle">
+      <DialogContent className="w-full max-w-130 overflow-hidden! rounded-xl border-none px-8 py-6 text-left align-middle">
         <div className="flex items-center justify-between pb-2">
-          <div className="text-xl leading-[30px] font-medium text-text-primary">
+          <div className="text-xl leading-7.5 font-medium text-text-primary">
             {t(($) => $.title, { ns: 'datasetSettings' })}
           </div>
           <button
@@ -113,7 +113,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
         </div>
         <div>
           <div className={cn('flex flex-col py-4')}>
-            <div className="shrink-0 py-2 text-sm leading-[20px] font-medium text-text-primary">
+            <div className="shrink-0 py-2 text-sm leading-5 font-medium text-text-primary">
               {t(($) => $['form.name'], { ns: 'datasetSettings' })}
             </div>
             <div className="flex items-center gap-x-2">
@@ -136,7 +136,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
             </div>
           </div>
           <div className={cn('flex flex-col py-4')}>
-            <div className="shrink-0 py-2 text-sm leading-[20px] font-medium text-text-primary">
+            <div className="shrink-0 py-2 text-sm leading-5 font-medium text-text-primary">
               {t(($) => $['form.desc'], { ns: 'datasetSettings' })}
             </div>
             <div className="w-full">
diff --git a/web/app/components/datasets/settings/chunk-structure/hooks.tsx b/web/app/components/datasets/settings/chunk-structure/hooks.tsx
index 97ac2c98ca4..62c25e1db4c 100644
--- a/web/app/components/datasets/settings/chunk-structure/hooks.tsx
+++ b/web/app/components/datasets/settings/chunk-structure/hooks.tsx
@@ -13,7 +13,7 @@ export const useChunkStructure = () => {
 
   const GeneralOption: Option = {
     id: ChunkingMode.text,
-    icon: <GeneralChunk className="size-[18px]" />,
+    icon: <GeneralChunk className="size-4.5" />,
     iconActiveColor: 'text-util-colors-indigo-indigo-600',
     title: 'General',
     description: t(($) => $['stepTwo.generalTip'], { ns: 'datasetCreation' }),
@@ -22,7 +22,7 @@ export const useChunkStructure = () => {
   }
   const ParentChildOption: Option = {
     id: ChunkingMode.parentChild,
-    icon: <ParentChildChunk className="size-[18px]" />,
+    icon: <ParentChildChunk className="size-4.5" />,
     iconActiveColor: 'text-util-colors-blue-light-blue-light-500',
     title: 'Parent-Child',
     description: t(($) => $['stepTwo.parentChildTip'], { ns: 'datasetCreation' }),
@@ -31,7 +31,7 @@ export const useChunkStructure = () => {
   }
   const QuestionAnswerOption: Option = {
     id: ChunkingMode.qa,
-    icon: <QuestionAndAnswer className="size-[18px]" />,
+    icon: <QuestionAndAnswer className="size-4.5" />,
     title: 'Q&A',
     description: t(($) => $['stepTwo.qaTip'], { ns: 'datasetCreation' }),
   }
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 ddb9f601369..cada8c81ef7 100644
--- a/web/app/components/datasets/settings/form/components/indexing-section.tsx
+++ b/web/app/components/datasets/settings/form/components/indexing-section.tsx
@@ -87,7 +87,7 @@ const IndexingSection = ({
         <>
           <Divider type="horizontal" className="my-1 h-px bg-divider-subtle" />
           <div className={rowClass}>
-            <div className="flex w-[180px] shrink-0 flex-col">
+            <div className="flex w-45 shrink-0 flex-col">
               <div className="flex h-8 items-center system-sm-semibold text-text-secondary">
                 {t(($) => $['form.chunkStructure.title'], { ns: 'datasetSettings' })}
               </div>
@@ -184,7 +184,7 @@ const IndexingSection = ({
           <Divider type="horizontal" className="my-1 h-px bg-divider-subtle" />
           <div className={rowClass}>
             <div className={labelClass}>
-              <div className="flex w-[180px] shrink-0 flex-col">
+              <div className="flex w-45 shrink-0 flex-col">
                 <div className="flex h-7 items-center pt-1 system-sm-semibold text-text-secondary">
                   {t(($) => $['form.retrievalSetting.title'], { ns: 'datasetSettings' })}
                 </div>
diff --git a/web/app/components/datasets/settings/form/index.tsx b/web/app/components/datasets/settings/form/index.tsx
index a6353bb7e40..82410d540d2 100644
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@@ -69,7 +69,7 @@ const Form = () => {
   const readonly = !canEditSettings
 
   return (
-    <div className="flex w-full flex-col gap-y-4 px-20 py-8 sm:w-[960px]">
+    <div className="flex w-full flex-col gap-y-4 px-20 py-8 sm:w-240">
       <BasicInfoSection
         currentDataset={currentDataset}
         name={name}
@@ -121,7 +121,7 @@ const Form = () => {
 
       {/* Save Button */}
       <div className="flex gap-x-1">
-        <div className="flex h-7 w-[180px] shrink-0 items-center pt-1" />
+        <div className="flex h-7 w-45 shrink-0 items-center pt-1" />
         <div className="grow">
           <Button
             className="min-w-24"
diff --git a/web/app/components/datasets/settings/index-method/index.tsx b/web/app/components/datasets/settings/index-method/index.tsx
index d07056cf8db..998ab1d02d6 100644
--- a/web/app/components/datasets/settings/index-method/index.tsx
+++ b/web/app/components/datasets/settings/index-method/index.tsx
@@ -35,7 +35,7 @@ const IndexMethod = ({
         id={IndexingType.QUALIFIED}
         isActive={value === IndexingType.QUALIFIED}
         onClick={onChange}
-        icon={<HighQuality className="size-[18px]" />}
+        icon={<HighQuality className="size-4.5" />}
         iconActiveColor="text-util-colors-orange-orange-500"
         title={t(($) => $['stepTwo.qualified'], { ns: 'datasetCreation' })}
         description={t(($) => $['form.indexMethodHighQualityTip'], { ns: 'datasetSettings' })}
@@ -52,7 +52,7 @@ const IndexMethod = ({
             id={IndexingType.ECONOMICAL}
             isActive={value === IndexingType.ECONOMICAL}
             onClick={onChange}
-            icon={<Economic className="size-[18px]" />}
+            icon={<Economic className="size-4.5" />}
             iconActiveColor="text-util-colors-indigo-indigo-600"
             title={t(($) => $['form.indexMethodEconomy'], { ns: 'datasetSettings' })}
             description={t(($) => $['form.indexMethodEconomyTip'], {
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 87a7eab0370..035180bddcf 100644
--- a/web/app/components/datasets/settings/index-method/keyword-number.tsx
+++ b/web/app/components/datasets/settings/index-method/keyword-number.tsx
@@ -42,7 +42,7 @@ const KeyWordNumber = ({ keywordNumber, onKeywordNumberChange }: KeyWordNumberPr
         </Infotip>
       </div>
       <Slider
-        className="mr-3 w-[206px] shrink-0"
+        className="mr-3 w-51.5 shrink-0"
         value={keywordNumber}
         min={MIN_KEYWORD_NUMBER}
         max={MAX_KEYWORD_NUMBER}
@@ -50,7 +50,7 @@ const KeyWordNumber = ({ keywordNumber, onKeywordNumberChange }: KeyWordNumberPr
         aria-label={label}
       />
       <NumberField
-        className="w-[74px] shrink-0"
+        className="w-18.5 shrink-0"
         min={MIN_KEYWORD_NUMBER}
         max={MAX_KEYWORD_NUMBER}
         value={keywordNumber}
diff --git a/web/app/components/datasets/settings/option-card.tsx b/web/app/components/datasets/settings/option-card.tsx
index 9501227ebfd..086d9fe0fb1 100644
--- a/web/app/components/datasets/settings/option-card.tsx
+++ b/web/app/components/datasets/settings/option-card.tsx
@@ -66,7 +66,7 @@ const OptionCard = <T,>({
         {effectColor && showEffectColor && (
           <div
             className={cn(
-              'absolute top-[-2px] left-[-2px] h-14 w-14 rounded-full blur-[80px]',
+              'absolute -top-0.5 -left-0.5 h-14 w-14 rounded-full blur-[80px]',
               `${HEADER_EFFECT_MAP[effectColor]}`,
             )}
           />
@@ -85,7 +85,7 @@ const OptionCard = <T,>({
           <div className="flex items-center gap-x-1">
             <span className="system-sm-medium text-text-secondary">{title}</span>
             {isRecommended && (
-              <Badge className="h-[18px] border-text-accent-secondary text-text-accent-secondary">
+              <Badge className="h-4.5 border-text-accent-secondary text-text-accent-secondary">
                 {t(($) => $['stepTwo.recommend'], { ns: 'datasetCreation' })}
               </Badge>
             )}
@@ -95,7 +95,7 @@ const OptionCard = <T,>({
       </div>
       {!!(children && showChildren) && (
         <div className="relative rounded-b-xl bg-components-panel-bg p-4">
-          <ArrowShape className="absolute top-[-11px] left-[14px] size-4 text-components-panel-bg" />
+          <ArrowShape className="absolute -top-2.75 left-3.5 size-4 text-components-panel-bg" />
           {children}
         </div>
       )}
diff --git a/web/app/components/datasets/settings/permission-selector/index.tsx b/web/app/components/datasets/settings/permission-selector/index.tsx
index b2c302bc1db..eb8f4b6fd93 100644
--- a/web/app/components/datasets/settings/permission-selector/index.tsx
+++ b/web/app/components/datasets/settings/permission-selector/index.tsx
@@ -171,7 +171,7 @@ const PermissionSelector = ({
         popupClassName="border-none bg-transparent shadow-none"
       >
         <PopoverTitle className="sr-only">{permissionLabel}</PopoverTitle>
-        <div className="relative w-[480px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5">
+        <div className="relative w-120 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5">
           <RadioGroup<DatasetPermission>
             value={permission}
             onValueChange={(nextPermission) => {
@@ -225,7 +225,7 @@ const PermissionSelector = ({
             />
           </RadioGroup>
           {isPartialMembers && (
-            <div className="max-h-[360px] overflow-y-auto border-t border-divider-regular pr-1 pb-1 pl-1">
+            <div className="max-h-90 overflow-y-auto border-t border-divider-regular pr-1 pb-1 pl-1">
               <div className="sticky top-0 left-0 z-10 bg-components-panel-on-panel-item-bg p-2 pb-1">
                 <div className="relative w-full">
                   <span
@@ -236,7 +236,7 @@ const PermissionSelector = ({
                     aria-label={t(($) => $['operation.search'], { ns: 'common' })}
                     name="member-search"
                     autoComplete="off"
-                    className={cn('w-full pl-[26px]', keywords && 'pr-[26px]')}
+                    className={cn('w-full pl-6.5', keywords && 'pr-6.5')}
                     value={keywords}
                     placeholder={t(($) => $['operation.search'], { ns: 'common' }) || ''}
                     onChange={(event) => handleKeywordsChange(event.target.value)}
diff --git a/web/app/components/datasets/settings/permission-selector/member-item.tsx b/web/app/components/datasets/settings/permission-selector/member-item.tsx
index 2a2e4d2fa06..783f1139736 100644
--- a/web/app/components/datasets/settings/permission-selector/member-item.tsx
+++ b/web/app/components/datasets/settings/permission-selector/member-item.tsx
@@ -45,13 +45,13 @@ const MemberItem = ({
   )
 
   if (isMe) {
-    return <div className="flex items-center gap-2 rounded-lg py-1 pr-[10px] pl-2">{content}</div>
+    return <div className="flex items-center gap-2 rounded-lg py-1 pr-2.5 pl-2">{content}</div>
   }
 
   return (
     <button
       type="button"
-      className="flex w-full cursor-pointer touch-manipulation items-center gap-2 rounded-lg border-none bg-transparent py-1 pr-[10px] pl-2 text-left outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
+      className="flex w-full cursor-pointer touch-manipulation items-center gap-2 rounded-lg border-none bg-transparent py-1 pr-2.5 pl-2 text-left outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
       aria-pressed={isSelected}
       onClick={onClick}
     >
diff --git a/web/app/components/datasets/settings/summary-index-setting.tsx b/web/app/components/datasets/settings/summary-index-setting.tsx
index 44e44831ed4..c9f97dc8c36 100644
--- a/web/app/components/datasets/settings/summary-index-setting.tsx
+++ b/web/app/components/datasets/settings/summary-index-setting.tsx
@@ -120,7 +120,7 @@ const SummaryIndexSetting = ({
     return (
       <div className="space-y-4">
         <div className="flex gap-x-1">
-          <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
+          <div className="flex h-7 w-45 shrink-0 items-center pt-1">
             <div className="system-sm-semibold text-text-secondary">
               {t(($) => $['form.summaryAutoGen'], { ns: 'datasetSettings' })}
             </div>
@@ -149,7 +149,7 @@ const SummaryIndexSetting = ({
         {summaryIndexSetting?.enable && (
           <>
             <div className="flex gap-x-1">
-              <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
+              <div className="flex h-7 w-45 shrink-0 items-center pt-1">
                 <div className="system-sm-medium text-text-tertiary">
                   {t(($) => $['form.summaryModel'], { ns: 'datasetSettings' })}
                 </div>
@@ -171,7 +171,7 @@ const SummaryIndexSetting = ({
               </div>
             </div>
             <div className="flex">
-              <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
+              <div className="flex h-7 w-45 shrink-0 items-center pt-1">
                 <div className="system-sm-medium text-text-tertiary">
                   {t(($) => $['form.summaryInstructions'], { ns: 'datasetSettings' })}
                 </div>
diff --git a/web/app/components/develop/ApiServer.tsx b/web/app/components/develop/ApiServer.tsx
index 837015cb481..52b38232eca 100644
--- a/web/app/components/develop/ApiServer.tsx
+++ b/web/app/components/develop/ApiServer.tsx
@@ -19,10 +19,10 @@ const ApiServer: FC<ApiServerProps> = ({ apiBaseUrl, appId, canManageApiKey = fa
         <div className="mr-0.5 h-5 shrink-0 rounded-md border border-divider-subtle px-1.5 text-[11px] text-text-tertiary">
           {t(($) => $.apiServer, { ns: 'appApi' })}
         </div>
-        <div className="w-fit truncate px-1 text-[13px] font-medium text-text-secondary sm:w-[248px]">
+        <div className="w-fit truncate px-1 text-[13px] font-medium text-text-secondary sm:w-62">
           {apiBaseUrl}
         </div>
-        <div className="mx-1 h-[14px] w-px bg-divider-regular"></div>
+        <div className="mx-1 h-3.5 w-px bg-divider-regular"></div>
         <CopyFeedback content={apiBaseUrl} />
       </div>
       <div className="mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-[#D1FADF] bg-[#ECFDF3] px-3 text-xs font-semibold text-[#039855]">
diff --git a/web/app/components/develop/doc.tsx b/web/app/components/develop/doc.tsx
index c3f0ba3dce4..d6554611c9e 100644
--- a/web/app/components/develop/doc.tsx
+++ b/web/app/components/develop/doc.tsx
@@ -94,7 +94,7 @@ const Doc = ({ appDetail }: IDocProps) => {
   return (
     <div className="flex">
       <div
-        className={`fixed top-32 right-20 z-10 transition-all duration-150 ease-out ${isTocExpanded ? 'w-[280px]' : 'w-11'}`}
+        className={`fixed top-32 right-20 z-10 transition-all duration-150 ease-out ${isTocExpanded ? 'w-70' : 'w-11'}`}
       >
         <TocPanel
           toc={toc}
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 9f0d5b08b4a..beda47f493c 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
@@ -201,7 +201,7 @@ describe('SecretKeyButton', () => {
     it('should have horizontal padding', () => {
       render(<SecretKeyButton />)
       const text = screen.getByText('appApi.apiKey')
-      expect(text.className).toContain('px-[3px]')
+      expect(text.className).toContain('px-0.75')
     })
 
     it('should have tertiary text color', () => {
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 7826e12d6dc..f133b2f7b1e 100644
--- a/web/app/components/develop/secret-key/secret-key-button.tsx
+++ b/web/app/components/develop/secret-key/secret-key-button.tsx
@@ -32,7 +32,7 @@ const SecretKeyButton = ({
         <div className="flex size-3.5 items-center justify-center">
           <span className="i-ri-key-2-line size-3.5 text-text-tertiary" />
         </div>
-        <div className={`px-[3px] system-xs-medium text-text-tertiary ${textCls}`}>
+        <div className={`px-0.75 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 5b1224ad8f7..71fdc2121db 100644
--- a/web/app/components/develop/secret-key/secret-key-generate.tsx
+++ b/web/app/components/develop/secret-key/secret-key-generate.tsx
@@ -31,7 +31,7 @@ const SecretKeyGenerateModal = ({
     >
       <DialogContent
         className={cn(
-          'w-full max-w-[480px] overflow-hidden! border-none px-8 text-left align-middle',
+          'w-full max-w-120 overflow-hidden! border-none px-8 text-left align-middle',
           className,
         )}
       >
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 b39ed7a16a2..e25f3bb09bc 100644
--- a/web/app/components/develop/secret-key/secret-key-modal.tsx
+++ b/web/app/components/develop/secret-key/secret-key-modal.tsx
@@ -111,7 +111,7 @@ const SecretKeyModal = ({ isShow = false, appId, canManage, onClose }: ISecretKe
       >
         <DialogContent
           className={cn(
-            'max-h-[calc(100vh-80px)]! w-full max-w-[800px]! overflow-hidden! border-none text-left align-middle',
+            'max-h-[calc(100vh-80px)]! w-full max-w-200! overflow-hidden! border-none text-left align-middle',
             `${s.customModal} flex flex-col px-8`,
           )}
         >
@@ -146,10 +146,10 @@ const SecretKeyModal = ({ isShow = false, appId, canManage, onClose }: ISecretKe
                 <div className="w-64 shrink-0 px-3">
                   {t(($) => $['apiKeyModal.secretKey'], { ns: 'appApi' })}
                 </div>
-                <div className="w-[200px] shrink-0 px-3">
+                <div className="w-50 shrink-0 px-3">
                   {t(($) => $['apiKeyModal.created'], { ns: 'appApi' })}
                 </div>
-                <div className="w-[200px] shrink-0 px-3">
+                <div className="w-50 shrink-0 px-3">
                   {t(($) => $['apiKeyModal.lastUsed'], { ns: 'appApi' })}
                 </div>
                 <div className="grow px-3"></div>
@@ -163,13 +163,13 @@ const SecretKeyModal = ({ isShow = false, appId, canManage, onClose }: ISecretKe
                     <div className="w-64 shrink-0 truncate px-3 font-mono">
                       {generateToken(api.token)}
                     </div>
-                    <div className="w-[200px] shrink-0 truncate px-3">
+                    <div className="w-50 shrink-0 truncate px-3">
                       {formatTime(
                         Number(api.created_at),
                         t(($) => $.dateTimeFormat, { ns: 'appLog' }) as string,
                       )}
                     </div>
-                    <div className="w-[200px] shrink-0 truncate px-3">
+                    <div className="w-50 shrink-0 truncate px-3">
                       {api.last_used_at
                         ? formatTime(
                             Number(api.last_used_at),
diff --git a/web/app/components/develop/toc-panel.tsx b/web/app/components/develop/toc-panel.tsx
index 0953973b320..9fe94473244 100644
--- a/web/app/components/develop/toc-panel.tsx
+++ b/web/app/components/develop/toc-panel.tsx
@@ -43,8 +43,8 @@ const TocPanel = ({ toc, activeSection, isTocExpanded, onToggle, onItemClick }:
         </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="pointer-events-none absolute top-10.25 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-10.75 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 p-3 pt-1">
         {toc.length === 0 ? (
diff --git a/web/app/components/explore/app-list/loading-skeletons.tsx b/web/app/components/explore/app-list/loading-skeletons.tsx
index 727a80c0c43..a9e6c1801d9 100644
--- a/web/app/components/explore/app-list/loading-skeletons.tsx
+++ b/web/app/components/explore/app-list/loading-skeletons.tsx
@@ -5,7 +5,7 @@ import { SkeletonContainer, SkeletonRectangle, SkeletonRow } from '@/app/compone
 
 function ExploreAppCardSkeleton() {
   return (
-    <div className="col-span-1 flex h-[142px] flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-3 shadow-xs shadow-shadow-shadow-3">
+    <div className="col-span-1 flex h-35.5 flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-3 shadow-xs shadow-shadow-shadow-3">
       <div className="flex shrink-0 items-center gap-3 px-4 pt-4 pb-2">
         <div className="relative shrink-0">
           <SkeletonRectangle className="size-10 shrink-0 animate-pulse rounded-lg" />
@@ -21,7 +21,7 @@ function ExploreAppCardSkeleton() {
           <SkeletonRectangle className="my-0 h-3 w-4/5 animate-pulse" />
         </div>
       </div>
-      <div className="relative flex h-[26px] w-full shrink-0 flex-col gap-2 overflow-hidden px-3">
+      <div className="relative flex h-6.5 w-full shrink-0 flex-col gap-2 overflow-hidden px-3">
         <div className="flex w-full shrink-0 items-center gap-1 rounded-lg p-1">
           <SkeletonRectangle className="my-0 h-5 w-20 animate-pulse rounded-[5px]" />
         </div>
@@ -128,10 +128,10 @@ function BannerSkeletonBody() {
   return (
     <div className="relative flex w-full flex-col items-start gap-4 px-8 pt-6 pb-4">
       <div className="flex w-full flex-col gap-1">
-        <SkeletonRectangle className="my-0 h-6 w-[240px] max-w-full animate-pulse" />
+        <SkeletonRectangle className="my-0 h-6 w-60 max-w-full animate-pulse" />
         <SkeletonRectangle className="my-0 h-4 w-72 max-w-full animate-pulse" />
       </div>
-      <SkeletonRectangle className="h-[168px] w-full animate-pulse rounded-2xl" />
+      <SkeletonRectangle className="h-42 w-full animate-pulse rounded-2xl" />
     </div>
   )
 }
diff --git a/web/app/components/explore/banner/indicator-button.tsx b/web/app/components/explore/banner/indicator-button.tsx
index 0f3bffa6ead..4a641b98a1f 100644
--- a/web/app/components/explore/banner/indicator-button.tsx
+++ b/web/app/components/explore/banner/indicator-button.tsx
@@ -29,7 +29,7 @@ export function IndicatorButton({
       onClick={onClick}
       className="group relative size-6 shrink-0 rounded-lg p-0 hover:bg-transparent"
     >
-      <span className="relative flex h-5 w-[22px] items-center justify-center overflow-hidden rounded-[7px] p-px inset-ring-1 inset-ring-divider-subtle group-aria-[current=true]:bg-text-primary group-aria-[current=true]:inset-ring-text-primary">
+      <span className="relative flex h-5 w-5.5 items-center justify-center overflow-hidden rounded-[7px] p-px inset-ring-1 inset-ring-divider-subtle group-aria-current:bg-text-primary group-aria-current:inset-ring-text-primary">
         {isNextSlide && !isCurrent && !isPaused ? (
           <span
             data-progress-ring
@@ -38,7 +38,7 @@ export function IndicatorButton({
             style={{ animationDuration: `${autoplayDelay}ms` }}
           />
         ) : null}
-        <span className="relative z-10 flex h-4.5 w-5 items-center justify-center rounded-md bg-components-panel-on-panel-item-bg p-0.5 text-center system-2xs-semibold-uppercase text-text-tertiary transition-colors group-hover:text-text-secondary group-aria-[current=true]:bg-text-primary group-aria-[current=true]:text-components-panel-on-panel-item-bg">
+        <span className="relative z-10 flex h-4.5 w-5 items-center justify-center rounded-md bg-components-panel-on-panel-item-bg p-0.5 text-center system-2xs-semibold-uppercase text-text-tertiary transition-colors group-hover:text-text-secondary group-aria-current:bg-text-primary group-aria-current:text-components-panel-on-panel-item-bg">
           {String(index + 1).padStart(2, '0')}
         </span>
       </span>
diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
index 20628b3a15c..a0cdf998419 100644
--- a/web/app/components/explore/sidebar/index.tsx
+++ b/web/app/components/explore/sidebar/index.tsx
@@ -118,7 +118,7 @@ const SideBar = () => {
     <div
       data-folded={isFold ? 'true' : undefined}
       className={cn(
-        'group/sidebar flex h-full w-fit shrink-0 cursor-pointer flex-col px-3 pt-6 sm:w-[240px]',
+        'group/sidebar flex h-full w-fit shrink-0 cursor-pointer flex-col px-3 pt-6 sm:w-60',
         isFold && 'sm:w-14',
       )}
     >
diff --git a/web/app/components/explore/sidebar/no-apps/index.tsx b/web/app/components/explore/sidebar/no-apps/index.tsx
index 0319197522f..0d20cc49132 100644
--- a/web/app/components/explore/sidebar/no-apps/index.tsx
+++ b/web/app/components/explore/sidebar/no-apps/index.tsx
@@ -18,7 +18,7 @@ const NoApps: FC = () => {
     <div className="rounded-xl bg-background-default-subtle p-4">
       <div
         className={cn(
-          'h-[35px] w-[86px] bg-contain bg-center bg-no-repeat',
+          'h-8.75 w-21.5 bg-contain bg-center bg-no-repeat',
           theme === Theme.dark ? s.dark : s.light,
         )}
       ></div>
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 8e92f0cb433..ab58355a0a3 100644
--- a/web/app/components/explore/try-app/app-info/index.tsx
+++ b/web/app/components/explore/try-app/app-info/index.tsx
@@ -88,7 +88,7 @@ const AppInfo: FC<Props> = ({
               {appDetail.name}
             </div>
           </div>
-          <div className="flex items-center text-[10px] leading-[18px] font-medium text-text-tertiary">
+          <div className="flex items-center text-2xs leading-4.5 font-medium text-text-tertiary">
             {mode === 'advanced-chat' && (
               <div className="truncate">
                 {t(($) => $['types.advanced'], { ns: 'app' }).toUpperCase()}
@@ -118,7 +118,7 @@ const AppInfo: FC<Props> = ({
         </div>
       </div>
       {appDetail.description && (
-        <div className="mt-[14px] shrink-0 system-sm-regular text-text-secondary">
+        <div className="mt-3.5 shrink-0 system-sm-regular text-text-secondary">
           {appDetail.description}
         </div>
       )}
diff --git a/web/app/components/explore/try-app/app/chat.tsx b/web/app/components/explore/try-app/app/chat.tsx
index c45d9b131fd..5509559c51b 100644
--- a/web/app/components/explore/try-app/app/chat.tsx
+++ b/web/app/components/explore/try-app/app/chat.tsx
@@ -81,7 +81,7 @@ const TryApp: FC<Props> = ({ appId, appDetail, className }) => {
                       aria-label={t(($) => $['chat.resetChat'], { ns: 'share' })}
                       onClick={handleNewConversation}
                     >
-                      <RiResetLeftLine className="h-[18px] w-[18px]" aria-hidden="true" />
+                      <RiResetLeftLine className="h-4.5 w-4.5" aria-hidden="true" />
                     </ActionButton>
                   }
                 />
@@ -91,7 +91,7 @@ const TryApp: FC<Props> = ({ appId, appDetail, className }) => {
             {currentConversationId && inputsForms.length > 0 && <ViewFormDropdown />}
           </div>
         </div>
-        <div className="mx-auto mt-4 flex h-0 w-[769px] grow flex-col">
+        <div className="mx-auto mt-4 flex h-0 w-192.25 grow flex-col">
           {!isHideTryNotice && (
             <Alert
               className="mb-4 shrink-0"
diff --git a/web/app/components/explore/try-app/app/text-generation.tsx b/web/app/components/explore/try-app/app/text-generation.tsx
index 7a9eed7f0f5..5dcb4a38ae1 100644
--- a/web/app/components/explore/try-app/app/text-generation.tsx
+++ b/web/app/components/explore/try-app/app/text-generation.tsx
@@ -192,7 +192,7 @@ const TextGeneration: FC<Props> = ({ appId, className, isWorkflow, appData }) =>
       <div
         className={cn(
           'relative flex h-full shrink-0 flex-col',
-          isPC && 'w-[600px] max-w-[50%]',
+          isPC && 'w-150 max-w-[50%]',
           'rounded-l-2xl bg-components-panel-bg',
         )}
       >
@@ -215,7 +215,7 @@ const TextGeneration: FC<Props> = ({ appId, className, isWorkflow, appData }) =>
               <div
                 ref={handleDescRef}
                 className={cn(
-                  'relative system-xs-regular break-words whitespace-pre-wrap text-text-tertiary',
+                  'relative system-xs-regular wrap-break-word whitespace-pre-wrap text-text-tertiary',
                   !descExpanded && 'line-clamp-3',
                   descExpanded && 'max-h-32 overflow-y-auto',
                 )}
@@ -278,7 +278,7 @@ const TextGeneration: FC<Props> = ({ appId, className, isWorkflow, appData }) =>
             className={cn(
               isShowResultPanel
                 ? 'flex items-center justify-center p-2 pt-6'
-                : 'absolute top-0 left-0 z-10 flex w-full items-center justify-center px-2 pt-[3px] pb-[57px]',
+                : 'absolute top-0 left-0 z-10 flex w-full items-center justify-center px-2 pt-0.75 pb-14.25',
             )}
             onClick={() => {
               if (isShowResultPanel) hideResultPanel()
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index 294dbbf17e0..50d0088cc92 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -47,7 +47,7 @@ function TryApp({
         if (!open) onClose()
       }}
     >
-      <DialogContent className="h-[calc(100dvh-32px)] max-h-[calc(100dvh-32px)] w-full max-w-[calc(100vw-32px)] min-w-[1280px] overflow-hidden overflow-x-auto border-none p-2 text-left align-middle">
+      <DialogContent className="h-[calc(100dvh-32px)] max-h-[calc(100dvh-32px)] w-full max-w-[calc(100vw-32px)] min-w-7xl overflow-hidden overflow-x-auto border-none p-2 text-left align-middle">
         {isLoading ? (
           <div className="flex h-full items-center justify-center">
             <Loading type="area" />
@@ -109,7 +109,7 @@ function TryApp({
                 <Preview appId={appId} appDetail={appDetail} />
               </TabsPanel>
               <AppInfo
-                className="w-[360px] shrink-0"
+                className="w-90 shrink-0"
                 appDetail={appDetail}
                 appId={appId}
                 canCreate={canCreate}
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 01bdd2d6390..775125146b0 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
@@ -608,7 +608,7 @@ const BasicAppPreview: FC<Props> = ({ appId }) => {
     <ConfigContext.Provider value={value as any}>
       <FeaturesProvider features={featuresData}>
         <div className="flex size-full flex-col bg-components-panel-on-panel-item-bg">
-          <div className="relative flex h-[200px] grow">
+          <div className="relative flex h-50 grow">
             <div className="flex size-full shrink-0 flex-col sm:w-1/2">
               <Config />
             </div>
diff --git a/web/app/components/goto-anything/actions/knowledge.tsx b/web/app/components/goto-anything/actions/knowledge.tsx
index 69eb4b326a7..fcff4872ca3 100644
--- a/web/app/components/goto-anything/actions/knowledge.tsx
+++ b/web/app/components/goto-anything/actions/knowledge.tsx
@@ -21,11 +21,11 @@ function getKnowledgeResults(datasets: DatasetListItemResponse[]): KnowledgeSear
       icon: (
         <div
           className={cn(
-            'flex shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF] p-2.5',
+            'flex shrink-0 items-center justify-center rounded-md border-[0.5px] border-indigo-100 bg-[#F5F8FF] p-2.5',
             !dataset.embedding_available && 'opacity-50 hover:opacity-100',
           )}
         >
-          <Folder className="h-5 w-5 text-[#444CE7]" />
+          <Folder className="h-5 w-5 text-indigo-600" />
         </div>
       ),
       data: dataset,
diff --git a/web/app/components/goto-anything/components/footer.tsx b/web/app/components/goto-anything/components/footer.tsx
index 7de6a01672c..ac309fc36d9 100644
--- a/web/app/components/goto-anything/components/footer.tsx
+++ b/web/app/components/goto-anything/components/footer.tsx
@@ -81,7 +81,7 @@ export function Footer({
 
   return (
     <div className="border-t border-divider-subtle bg-components-panel-bg-blur px-4 py-2 text-xs text-text-tertiary">
-      <div className="flex min-h-[16px] items-center justify-between">
+      <div className="flex min-h-4 items-center justify-between">
         <span>{renderLeftContent()}</span>
         {renderRightContent()}
       </div>
diff --git a/web/app/components/goto-anything/index.tsx b/web/app/components/goto-anything/index.tsx
index 33096acd339..524555b99f3 100644
--- a/web/app/components/goto-anything/index.tsx
+++ b/web/app/components/goto-anything/index.tsx
@@ -397,7 +397,7 @@ function GotoAnythingDialog() {
           <DialogBackdrop />
           <DialogPopup
             initialFocus={inputRef}
-            className="fixed top-1/2 left-1/2 max-h-[80dvh] w-[480px]! max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden p-0!"
+            className="fixed top-1/2 left-1/2 max-h-[80dvh] w-120! max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden p-0!"
           >
             <DialogTitle className="sr-only">
               {t(($) => $['gotoAnything.searchTitle'], { ns: 'app' })}
@@ -429,7 +429,7 @@ function GotoAnythingDialog() {
                     className="px-0"
                   />
                   {searchMode !== 'general' && (
-                    <div className="flex items-center gap-1 rounded-sm bg-gray-100 px-2 py-[2px] text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                    <div className="flex items-center gap-1 rounded-sm bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300">
                       <span>{getSearchModeLabel(searchMode)}</span>
                     </div>
                   )}
@@ -445,7 +445,7 @@ function GotoAnythingDialog() {
 
               <ScrollAreaRoot
                 aria-busy={isLoading || undefined}
-                className="relative h-[240px] min-h-0 overflow-hidden"
+                className="relative h-60 min-h-0 overflow-hidden"
               >
                 <ScrollAreaViewport className="scroll-py-1 overscroll-contain">
                   <ScrollAreaContent
diff --git a/web/app/components/header/account-about/index.tsx b/web/app/components/header/account-about/index.tsx
index a9d326c5f89..51a922c15d5 100644
--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -30,7 +30,7 @@ export default function AccountAbout({ langGeniusVersionInfo, onCancel }: IAccou
         if (!open) onCancel()
       }}
     >
-      <DialogContent className="w-[calc(100vw-2rem)]! max-w-[480px]! overflow-hidden! border-none px-6! py-4! text-left align-middle">
+      <DialogContent className="w-[calc(100vw-2rem)]! max-w-120! overflow-hidden! border-none px-6! py-4! text-left align-middle">
         <div className="relative">
           <button
             type="button"
diff --git a/web/app/components/header/account-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index 7060417a591..ecf8dc65ae4 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -61,8 +61,8 @@ function ComplianceDocActionVisual({
         aria-hidden
         className="pointer-events-none flex items-center gap-px"
       >
-        <span className="i-ri-arrow-down-circle-line size-[14px] text-components-button-secondary-text-disabled" />
-        <span className="px-[3px] system-xs-medium text-components-button-secondary-text">
+        <span className="i-ri-arrow-down-circle-line size-3.5 text-components-button-secondary-text-disabled" />
+        <span className="px-0.75 system-xs-medium text-components-button-secondary-text">
           {downloadText}
         </span>
       </Button>
@@ -79,7 +79,7 @@ function ComplianceDocActionVisual({
           <PremiumBadge color="blue" allowHover={true}>
             <SparklesSoft
               aria-hidden="true"
-              className="flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0"
+              className="flex h-3.5 w-3.5 items-center py-px pl-0.75 text-components-premium-badge-indigo-text-stop-0"
             />
             <div className="px-1 system-xs-medium">{upgradeText}</div>
           </PremiumBadge>
diff --git a/web/app/components/header/account-dropdown/default-menu-content.tsx b/web/app/components/header/account-dropdown/default-menu-content.tsx
index 16536c6e9a4..10bd82acfa1 100644
--- a/web/app/components/header/account-dropdown/default-menu-content.tsx
+++ b/web/app/components/header/account-dropdown/default-menu-content.tsx
@@ -178,7 +178,7 @@ export function DefaultMenuContent({
               iconClassName="i-ri-github-line"
               label={t(($) => $['userProfile.github'], { ns: 'common' })}
               trailing={
-                <div className="flex items-center gap-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px]">
+                <div className="flex items-center gap-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1.25 py-0.75">
                   <span aria-hidden className="i-ri-star-line size-3 shrink-0 text-text-tertiary" />
                   <GithubStar className="system-2xs-medium-uppercase text-text-tertiary" />
                 </div>
diff --git a/web/app/components/header/account-dropdown/main-nav-menu-content.tsx b/web/app/components/header/account-dropdown/main-nav-menu-content.tsx
index 0dc44e430c7..0d354e34fb3 100644
--- a/web/app/components/header/account-dropdown/main-nav-menu-content.tsx
+++ b/web/app/components/header/account-dropdown/main-nav-menu-content.tsx
@@ -115,7 +115,7 @@ export function MainNavMenuContent({ onLogout }: MainNavMenuContentProps) {
   return (
     <>
       <DropdownMenuGroup className="p-1">
-        <div className="flex items-center gap-3 rounded-xl bg-gradient-to-b from-background-section-burn to-background-section p-3">
+        <div className="flex items-center gap-3 rounded-xl bg-linear-to-b from-background-section-burn to-background-section p-3">
           <div className="flex min-w-0 grow flex-col gap-1">
             <div className="flex min-w-0 items-center gap-1">
               <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 57816cb236b..f687e6150f1 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
@@ -103,7 +103,7 @@ export function ApiBasedExtensionPage({ layout }: ApiBasedExtensionPageProps = {
 
   const toolbar = (
     <div className="flex w-full items-center justify-between gap-2">
-      <SearchInput className="w-[200px]" value={keywords} onValueChange={setKeywords} />
+      <SearchInput className="w-50" value={keywords} onValueChange={setKeywords} />
       <Button variant="secondary" disabled={!canManage} onClick={handleOpenApiBasedExtensionModal}>
         <span className="mr-1 i-ri-add-line size-4" aria-hidden="true" />
         {t(($) => $['apiBasedExtension.add'], { ns: 'common' })}
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 d36bc90a6d4..925b6526b41 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
@@ -47,7 +47,7 @@ export function ApiBasedExtensionSelector({ value, onChange }: ApiBasedExtension
                 <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pr-2.5 pl-3">
                   <div className="text-sm text-text-primary">{currentItem.name}</div>
                   <div className="flex items-center">
-                    <div className="mr-1.5 w-[270px] truncate text-right text-xs text-text-quaternary">
+                    <div className="mr-1.5 w-67.5 truncate text-right text-xs text-text-quaternary">
                       {currentItem.api_endpoint}
                     </div>
                     <span
@@ -73,7 +73,7 @@ export function ApiBasedExtensionSelector({ value, onChange }: ApiBasedExtension
         <PopoverContent
           placement="bottom-start"
           sideOffset={4}
-          className="w-[calc(100%-32px)] max-w-[576px]"
+          className="w-[calc(100%-32px)] max-w-xl"
           popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
         >
           <div className="z-10 w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg">
@@ -97,7 +97,7 @@ export function ApiBasedExtensionSelector({ value, onChange }: ApiBasedExtension
                   />
                 </button>
               </div>
-              <div className="max-h-[250px] overflow-y-auto">
+              <div className="max-h-62.5 overflow-y-auto">
                 {apiBasedExtensions.map((item) => (
                   <button
                     type="button"
diff --git a/web/app/components/header/account-setting/collapse/index.tsx b/web/app/components/header/account-setting/collapse/index.tsx
index 130af858d17..1121bf48419 100644
--- a/web/app/components/header/account-setting/collapse/index.tsx
+++ b/web/app/components/header/account-setting/collapse/index.tsx
@@ -22,7 +22,7 @@ const Collapse = ({ title, items, renderItem, onSelect, wrapperClassName }: ICol
     <div className={cn('overflow-hidden rounded-xl bg-background-section-burn', wrapperClassName)}>
       <button
         type="button"
-        className="flex w-full cursor-pointer items-center justify-between border-none bg-transparent px-3 py-2 text-left text-xs leading-[18px] font-medium text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        className="flex w-full cursor-pointer items-center justify-between border-none bg-transparent px-3 py-2 text-left text-xs leading-4.5 font-medium text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
         onClick={toggle}
       >
         {title}
diff --git a/web/app/components/header/account-setting/data-source-page-new/__tests__/install-from-marketplace.spec.tsx b/web/app/components/header/account-setting/data-source-page-new/__tests__/install-from-marketplace.spec.tsx
index ef876a0500f..4e5b9d259f9 100644
--- a/web/app/components/header/account-setting/data-source-page-new/__tests__/install-from-marketplace.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/__tests__/install-from-marketplace.spec.tsx
@@ -135,7 +135,7 @@ describe('InstallFromMarketplace Component', () => {
       )
       expect(screen.getByTestId('mock-list')).toBeInTheDocument()
       expect(screen.getByTestId('mock-list')).toHaveClass('grid', 'grid-cols-3', 'gap-2')
-      expect(screen.getByTestId('mock-provider-card-plugin-1')).toHaveClass('h-[146px]')
+      expect(screen.getByTestId('mock-provider-card-plugin-1')).toHaveClass('h-36.5')
       expect(screen.queryByTestId('mock-provider-card-bundle-1')).not.toBeInTheDocument()
       expect(screen.queryByRole('status')).not.toBeInTheDocument()
     })
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 e5ff6dc0cbb..08c4ab59e55 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
@@ -59,7 +59,7 @@ const Configure = ({ item, pluginPayload, onUpdate, disabled }: ConfigureProps)
           alignOffset={-4}
           popupClassName="border-none bg-transparent shadow-none"
         >
-          <div className="w-[240px] space-y-1.5 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-lg">
+          <div className="w-60 space-y-1.5 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-lg">
             {!!canOAuth && (
               <AddOAuthButton
                 {...oAuthButtonProps}
diff --git a/web/app/components/header/account-setting/data-source-page-new/index.tsx b/web/app/components/header/account-setting/data-source-page-new/index.tsx
index cb02d4ee298..01a73a19ee0 100644
--- a/web/app/components/header/account-setting/data-source-page-new/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/index.tsx
@@ -109,7 +109,7 @@ const DataSourcePage = ({ layout, onOpenMarketplace, stickyToolbar }: DataSource
       }
     >
       <SearchInput
-        className="w-[200px]"
+        className="w-50"
         placeholder={t(($) => $['operation.search'], { ns: 'common' })}
         value={searchText}
         onValueChange={setSearchText}
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 31f8d105d70..84d181587e7 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
@@ -36,7 +36,7 @@ const InstallFromMarketplace = ({
   const cardRender = useCallback((plugin: Plugin) => {
     if (plugin.type === 'bundle') return null
 
-    return <ProviderCard key={plugin.plugin_id} className="h-[146px]" payload={plugin} />
+    return <ProviderCard key={plugin.plugin_id} className="h-36.5" payload={plugin} />
   }, [])
 
   return (
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index dbd1ec3bd83..14e7457aefe 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -178,9 +178,9 @@ export default function AccountSetting({
         </Button>
         <div className="mt-1 system-2xs-medium-uppercase text-text-tertiary">ESC</div>
       </div>
-      <div className="flex h-screen w-full max-w-full pl-0 sm:pl-[232px]">
-        <div className="flex w-[44px] shrink-0 flex-col pr-6 pl-4 sm:w-[224px]">
-          <div className="mt-6 mb-8 flex h-[38px] items-center px-3 title-2xl-semi-bold whitespace-nowrap text-text-primary">
+      <div className="flex h-screen w-full max-w-full pl-0 sm:pl-58">
+        <div className="flex w-11 shrink-0 flex-col pr-6 pl-4 sm:w-56">
+          <div className="mt-6 mb-8 flex h-9.5 items-center px-3 title-2xl-semi-bold whitespace-nowrap text-text-primary">
             {t(($) => $['settings.settings'], { ns: 'common' })}
           </div>
           <div className="w-full">
@@ -224,7 +224,7 @@ export default function AccountSetting({
             ))}
           </div>
         </div>
-        <div className="relative flex min-h-0 w-[824px] min-w-0">
+        <div className="relative flex min-h-0 w-206 min-w-0">
           <ScrollArea
             ref={scrollContainerRef}
             className="h-full min-h-0 min-w-0 flex-1 bg-components-panel-bg"
@@ -233,7 +233,7 @@ export default function AccountSetting({
               content: 'min-h-full min-w-0 w-full max-w-full pb-4',
             }}
           >
-            <div className="sticky top-0 z-20 mx-8 flex min-h-[60px] items-end bg-components-panel-bg pt-8 pb-2">
+            <div className="sticky top-0 z-20 mx-8 flex min-h-15 items-end bg-components-panel-bg pt-8 pb-2">
               <div className="min-w-0 flex-1 title-2xl-semi-bold text-text-primary">
                 {activeItem?.title ?? activeItem?.name}
                 {activeItem?.description && (
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 a7d5a956973..f4eae295363 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
@@ -50,11 +50,11 @@ const InvitedModal = ({ invitationResults, onCancel }: IInvitedModalProps) => {
         if (!open) onCancel()
       }}
     >
-      <DialogContent backdropProps={{ forceRender: true }} className="w-[480px] p-8">
+      <DialogContent backdropProps={{ forceRender: true }} className="w-120 p-8">
         <DialogCloseButton className="top-8 right-8" />
         <div className="mb-3 flex justify-between">
           <div className="flex h-12 w-12 items-center justify-center rounded-xl border-[0.5px] border-components-panel-border bg-background-section-burn shadow-xl">
-            <div className="i-heroicons-check-circle-solid h-[22px] w-[22px] text-[#039855]" />
+            <div className="i-heroicons-check-circle-solid h-5.5 w-5.5 text-[#039855]" />
           </div>
         </div>
         <DialogTitle className="mb-1 text-xl font-semibold text-text-primary">
@@ -134,7 +134,7 @@ const InvitedModal = ({ invitationResults, onCancel }: IInvitedModalProps) => {
           </>
         )}
         <div className="flex justify-end">
-          <Button className="w-[96px]" onClick={onCancel} variant="primary">
+          <Button className="w-24" onClick={onCancel} variant="primary">
             {t(($) => $['members.ok'], { ns: 'common' })}
           </Button>
         </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 934431780dd..03a6718a87a 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
@@ -62,7 +62,7 @@ const InvitationLink = ({ value }: IInvitationLinkProps) => {
                 <button
                   type="button"
                   aria-label={t(($) => $.copy, { ns: 'appApi' })}
-                  className={`box-border flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-lg border-none bg-transparent p-0 hover:bg-state-base-hover ${s.copyIcon} ${isCopied ? s.copied : ''}`}
+                  className={`box-border flex h-7.5 w-7.5 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent p-0 hover:bg-state-base-hover ${s.copyIcon} ${isCopied ? s.copied : ''}`}
                   onClick={copyHandle}
                 />
               </div>
diff --git a/web/app/components/header/account-setting/members-page/member-details-modal/permission-role-chip.tsx b/web/app/components/header/account-setting/members-page/member-details-modal/permission-role-chip.tsx
index 5d50da56e04..5173d464285 100644
--- a/web/app/components/header/account-setting/members-page/member-details-modal/permission-role-chip.tsx
+++ b/web/app/components/header/account-setting/members-page/member-details-modal/permission-role-chip.tsx
@@ -37,8 +37,8 @@ const PermissionRoleChip = ({
 
   const chipRootClassName = cn(
     'inline-flex h-6 max-w-full min-w-0 items-center gap-1 rounded-full border-[0.5px] border-components-panel-border-subtle bg-background-body px-1.5 py-0.5 system-xs-medium text-text-primary shadow-xs transition-colors',
-    'hover:bg-background-section-burn has-[[data-popup-open]]:bg-background-section-burn',
-    'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-state-accent-solid',
+    'hover:bg-background-section-burn has-data-popup-open:bg-background-section-burn',
+    'has-focus-visible:ring-2 has-focus-visible:ring-state-accent-solid',
     className,
   )
 
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 32566e522b4..c8ee7c96dcb 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
@@ -107,7 +107,7 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
   }
   return (
     <Dialog open={show}>
-      <DialogContent className="w-[420px]">
+      <DialogContent className="w-105">
         <button
           type="button"
           className="absolute top-5 right-5 cursor-pointer border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
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 c9df6afb9eb..8997b3784c9 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
@@ -73,7 +73,7 @@ const MemberSelector: FC<Props> = ({ value, onSelect, exclude = [] }) => {
         sideOffset={4}
         popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="min-w-[372px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
+        <div className="min-w-93 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
           <div className="p-2 pb-1">
             <Input
               showLeftIcon
diff --git a/web/app/components/header/account-setting/model-provider-page/__tests__/install-from-marketplace.spec.tsx b/web/app/components/header/account-setting/model-provider-page/__tests__/install-from-marketplace.spec.tsx
index c11eb29a0e0..1cf527fc9da 100644
--- a/web/app/components/header/account-setting/model-provider-page/__tests__/install-from-marketplace.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/__tests__/install-from-marketplace.spec.tsx
@@ -147,7 +147,7 @@ describe('InstallFromMarketplace', () => {
     )
     const target = document.querySelector<HTMLElement>(selector)
 
-    expect(target).toHaveClass('absolute', 'inset-x-0', 'top-0', 'h-[174px]')
+    expect(target).toHaveClass('absolute', 'inset-x-0', 'top-0', 'h-43.5')
     expect(target).toHaveAttribute('aria-hidden', 'true')
     expect(target?.parentElement).toContainElement(
       screen.getByRole('button', { name: /common\.modelProvider\.installProvider/ }),
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 042078b5b0b..e0c0717d806 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
@@ -220,7 +220,7 @@ const ModelProviderPage = ({
       <div className="flex shrink-0 items-center justify-end gap-2">
         {showWarning ? (
           <div className="relative inline-flex shrink-0 items-center gap-2 overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur py-1 pr-1 pl-2.5 shadow-xs backdrop-blur-[5px]">
-            <div className="pointer-events-none absolute inset-[-1px] bg-[linear-gradient(119deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0)_100%)] opacity-40" />
+            <div className="pointer-events-none absolute -inset-px bg-[linear-gradient(119deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0)_100%)] opacity-40" />
             <div className="relative flex shrink-0 items-center gap-1">
               <span
                 aria-hidden
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 6e5139af1b2..82f78121b5b 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
@@ -38,7 +38,7 @@ const InstallFromMarketplace = ({
   const cardRender = useCallback((plugin: Plugin) => {
     if (plugin.type === 'bundle') return null
 
-    return <ProviderCard key={plugin.plugin_id} className="h-[146px]" payload={plugin} />
+    return <ProviderCard key={plugin.plugin_id} className="h-36.5" payload={plugin} />
   }, [])
 
   return (
@@ -47,7 +47,7 @@ const InstallFromMarketplace = ({
       <div className="relative flex flex-col gap-2">
         <div
           aria-hidden
-          className="pointer-events-none absolute inset-x-0 top-0 h-[174px]"
+          className="pointer-events-none absolute inset-x-0 top-0 h-43.5"
           data-step-by-step-tour-target={stepByStepTourTarget}
         />
         <div className="flex h-5 items-center justify-between">
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 1e2c5fbf2c2..2faee238e33 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
@@ -106,7 +106,7 @@ const AddCustomModel = ({
         popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
       >
         <div className="w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
-          <div className="max-h-[304px] overflow-y-auto p-1">
+          <div className="max-h-76 overflow-y-auto p-1">
             {canAddedModels.map((model) => (
               <div
                 key={model.model}
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 343ed989c78..6a731210bdc 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
@@ -193,16 +193,16 @@ const Authorized = ({
         >
           <div
             className={cn(
-              'w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]',
+              'w-90 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]',
               popupClassName,
             )}
           >
             {popupTitle && (
-              <div className="px-3 pt-[10px] pb-0.5 system-xs-medium text-text-tertiary">
+              <div className="px-3 pt-2.5 pb-0.5 system-xs-medium text-text-tertiary">
                 {popupTitle}
               </div>
             )}
-            <div className="max-h-[304px] overflow-y-auto">
+            <div className="max-h-76 overflow-y-auto">
               {items.map((item) => (
                 <Fragment
                   key={
@@ -251,7 +251,7 @@ const Authorized = ({
                         : undefined,
                     )
                   }
-                  className="flex h-[40px] cursor-pointer items-center px-3 system-xs-medium text-text-accent-light-mode-only"
+                  className="flex h-10 cursor-pointer items-center px-3 system-xs-medium text-text-accent-light-mode-only"
                 >
                   <span className="mr-1 i-ri-add-line size-4" />
                   {t(($) => $['modelProvider.auth.addModelCredential'], { ns: 'common' })}
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 1dfab146223..9866f194c7f 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
@@ -22,7 +22,7 @@ const ConfigModel = ({
   if (loadBalancingInvalid) {
     return (
       <div
-        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"
+        className="relative flex h-4.5 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 size-3" />
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 fbeb1f59519..a85c6afbe61 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
@@ -71,7 +71,7 @@ const CredentialSelector = ({
         popupClassName="border-ccomponents-panel-border rounded-xl border-[0.5px] bg-components-panel-bg-blur p-0"
         popupProps={{ style: { width: 'var(--anchor-width, auto)' } }}
       >
-        <div className="max-h-[320px] overflow-y-auto p-1">
+        <div className="max-h-80 overflow-y-auto p-1">
           {credentials.map((credential) => (
             <CredentialItem
               key={credential.credential_id}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
index c6d663b9a85..df01108bf1c 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
@@ -9,7 +9,7 @@ const ModelBadge: FC<ModelBadgeProps> = ({ className, children }) => {
   return (
     <div
       className={cn(
-        'inline-flex h-[18px] shrink-0 items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] system-2xs-medium-uppercase whitespace-nowrap text-text-tertiary',
+        'inline-flex h-4.5 shrink-0 items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1.25 system-2xs-medium-uppercase whitespace-nowrap text-text-tertiary',
         className,
       )}
     >
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
index 5712a47a7ba..ba01076aa4b 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
@@ -41,7 +41,7 @@ const Input: FC<InputProps> = ({
       <input
         tabIndex={0}
         // Do not set autoComplete for security - prevents browser from storing sensitive API keys
-        className={`block h-8 w-full appearance-none rounded-lg border border-transparent bg-components-input-bg-normal px-3 text-sm text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-sm placeholder:text-text-tertiary hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs ${validated ? 'pr-[30px]' : ''} ${className || ''} `}
+        className={`block h-8 w-full appearance-none rounded-lg border border-transparent bg-components-input-bg-normal px-3 text-sm text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-sm placeholder:text-text-tertiary hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs ${validated ? 'pr-7.5' : ''} ${className || ''} `}
         placeholder={placeholder || ''}
         onChange={(e) => onChange(e.target.value)}
         onBlur={(e) => toLimit(e.target.value)}
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 e33977a3c3f..171a71b9620 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
@@ -307,7 +307,7 @@ const ModelModal: FC<ModelModalProps> = ({
     <Dialog open onOpenChange={handleOpenChange}>
       <DialogContent
         backdropProps={{ forceRender: true }}
-        className="flex w-[640px] max-w-[640px] flex-col overflow-hidden p-0"
+        className="flex w-160 max-w-160 flex-col overflow-hidden p-0"
       >
         <DialogCloseButton className="top-5 right-5 size-8" />
         <div className="shrink-0 p-6 pb-3">
@@ -389,7 +389,7 @@ const ModelModal: FC<ModelModalProps> = ({
                 provider.help.url[language] ||
                 provider.help.title?.en_US ||
                 provider.help.url.en_US}
-              <LinkExternal02 className="mt-[-2px] ml-1 inline-block h-3 w-3" />
+              <LinkExternal02 className="-mt-0.5 ml-1 inline-block h-3 w-3" />
             </a>
           ) : (
             <div />
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
index e3354a74ee6..f3cfb23b327 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
@@ -18,10 +18,10 @@ const ConfigurationButton = ({ modelProvider, handleOpenModal }: ConfigurationBu
         handleOpenModal(modelProvider, ConfigurationMethodEnum.predefinedModel, undefined)
       }}
     >
-      <div className="flex items-center justify-center gap-1 px-[3px]">
+      <div className="flex items-center justify-center gap-1 px-0.75">
         {t(($) => $['nodes.agent.notAuthorized'], { ns: 'workflow' })}
       </div>
-      <div className="flex h-[14px] w-[14px] items-center justify-center">
+      <div className="flex h-3.5 w-3.5 items-center justify-center">
         <StatusDot status="warning" />
       </div>
     </Button>
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 afa0bad04dc..e730f48a868 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
@@ -142,7 +142,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
           }
         />
       ) : (
-        <div className="flex h-8 min-w-[296px] items-center gap-px overflow-hidden rounded-lg">
+        <div className="flex h-8 min-w-74 items-center gap-px overflow-hidden rounded-lg">
           <div className="min-w-0 flex-1">
             <ModelSelector
               defaultModel={provider || modelId ? { provider, model: modelId } : undefined}
@@ -172,7 +172,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
       <PopoverContent
         placement={isInWorkflow ? 'left' : renderTrigger ? 'bottom-end' : 'left-start'}
         sideOffset={4}
-        popupClassName={cn(popupClassName, 'w-[400px] rounded-2xl')}
+        popupClassName={cn(popupClassName, 'w-100 rounded-2xl')}
       >
         <div className="relative px-3 pt-3.5 pb-1">
           <div className="pr-8 pl-1 system-xl-semibold text-text-primary">
@@ -182,7 +182,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
             <span className="i-ri-close-line size-4 text-text-tertiary" />
           </PopoverClose>
         </div>
-        <div className="max-h-[420px] overflow-y-auto">
+        <div className="max-h-105 overflow-y-auto">
           {renderTrigger && (
             <div className="px-4 pt-2 pb-4">
               <ModelSelector
@@ -243,7 +243,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
         </div>
         {!hideDebugWithMultipleModel && (
           <div
-            className="flex h-[50px] cursor-pointer items-center justify-between rounded-b-xl border-t border-t-divider-subtle px-4 system-sm-regular text-text-accent"
+            className="flex h-12.5 cursor-pointer items-center justify-between rounded-b-xl border-t border-t-divider-subtle px-4 system-sm-regular text-text-accent"
             onClick={() => onDebugWithMultipleModelChange?.()}
           >
             {debugWithMultipleModel
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.tsx
index 374d93ab6a2..2977f30c348 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.tsx
@@ -8,13 +8,13 @@ type ModelDisplayProps = {
 const ModelDisplay = ({ currentModel, modelId }: ModelDisplayProps) => {
   return currentModel ? (
     <ModelName
-      className="flex grow items-center gap-1 px-1 py-[3px]"
+      className="flex grow items-center gap-1 px-1 py-0.75"
       modelItem={currentModel}
       showMode
       showFeatures
     />
   ) : (
-    <div className="flex grow items-center gap-1 truncate px-1 py-[3px] opacity-50">
+    <div className="flex grow items-center gap-1 truncate px-1 py-0.75 opacity-50">
       <div className="overflow-hidden system-sm-regular text-ellipsis text-components-input-text-filled">
         {modelId}
       </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
index 993fa3f9141..5056f2561ca 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
@@ -197,7 +197,7 @@ function ParameterItem({
         <Fieldset className="flex items-center">
           <FieldsetLegend className="sr-only">{sliderLabel}</FieldsetLegend>
           <Slider
-            className="w-[120px]"
+            className="w-30"
             value={renderValue as number}
             min={parameterRule.min}
             max={parameterRule.max}
@@ -241,7 +241,7 @@ function ParameterItem({
         <Fieldset className="flex items-center">
           <FieldsetLegend className="sr-only">{sliderLabel}</FieldsetLegend>
           <Slider
-            className="w-[120px]"
+            className="w-30"
             value={renderValue as number}
             min={parameterRule.min}
             max={parameterRule.max}
@@ -273,7 +273,7 @@ function ParameterItem({
           <Fieldset
             render={
               <RadioGroup<boolean>
-                className="w-[150px] gap-3"
+                className="w-37.5 gap-3"
                 value={booleanValue}
                 onValueChange={handleRadioChange}
               />
@@ -281,13 +281,13 @@ function ParameterItem({
           >
             <FieldsetLegend className="sr-only">{translatedLabel}</FieldsetLegend>
             <FieldItem>
-              <FieldLabel className="flex w-[70px] items-center gap-1.5 system-sm-regular text-text-secondary">
+              <FieldLabel className="flex w-17.5 items-center gap-1.5 system-sm-regular text-text-secondary">
                 <Radio<boolean> value={true} />
                 True
               </FieldLabel>
             </FieldItem>
             <FieldItem>
-              <FieldLabel className="flex w-[70px] items-center gap-1.5 system-sm-regular text-text-secondary">
+              <FieldLabel className="flex w-17.5 items-center gap-1.5 system-sm-regular text-text-secondary">
                 <Radio<boolean> value={false} />
                 False
               </FieldLabel>
@@ -300,10 +300,10 @@ function ParameterItem({
     if (parameterRule.type === 'string' && !parameterRule.options?.length) {
       if (isInWorkflow && nodesOutputVars) {
         return (
-          <div className="ml-4 w-[200px] rounded-lg bg-components-input-bg-normal px-2 py-1">
+          <div className="ml-4 w-50 rounded-lg bg-components-input-bg-normal px-2 py-1">
             <PromptEditor
               compact
-              className="min-h-[22px] text-[13px]"
+              className="min-h-5.5 text-[13px]"
               value={renderValue as string}
               onChange={(text) => {
                 handleInputChange(text)
@@ -322,7 +322,7 @@ function ParameterItem({
       return (
         <input
           className={cn(
-            isInWorkflow ? 'w-[150px]' : 'w-full',
+            isInWorkflow ? 'w-37.5' : 'w-full',
             'ml-4 flex h-8 appearance-none items-center rounded-lg bg-components-input-bg-normal px-3 system-sm-regular text-components-input-text-filled outline-hidden',
           )}
           value={renderValue as string}
@@ -337,7 +337,7 @@ function ParameterItem({
           <div className="ml-4 w-full rounded-lg bg-components-input-bg-normal px-2 py-1">
             <PromptEditor
               compact
-              className="min-h-[56px] text-[13px]"
+              className="min-h-14 text-[13px]"
               value={renderValue as string}
               onChange={(text) => {
                 handleInputChange(text)
@@ -431,7 +431,7 @@ function ParameterItem({
           )}
         </div>
         {parameterRule.type === 'tag' && (
-          <div className={cn(!isInWorkflow && 'w-[150px]', 'system-xs-regular text-text-tertiary')}>
+          <div className={cn(!isInWorkflow && 'w-37.5', 'system-xs-regular text-text-tertiary')}>
             {parameterRule?.tagPlaceholder?.[language]}
           </div>
         )}
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 702c2303ac9..eb860525221 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
@@ -22,9 +22,9 @@ const toneI18nKeyMap = {
 } as const
 
 const TONE_ICONS: Record<number, ReactNode> = {
-  1: <Brush01 className="mr-2 h-[14px] w-[14px] text-[#6938EF]" />,
-  2: <Scales02 className="mr-2 h-[14px] w-[14px] text-indigo-600" />,
-  3: <Target04 className="mr-2 h-[14px] w-[14px] text-[#107569]" />,
+  1: <Brush01 className="mr-2 h-3.5 w-3.5 text-[#6938EF]" />,
+  2: <Scales02 className="mr-2 h-3.5 w-3.5 text-indigo-600" />,
+  3: <Target04 className="mr-2 h-3.5 w-3.5 text-[#107569]" />,
 }
 
 type PresetsParameterProps = {
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 d52fdfdd94c..cb5971b6f71 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
@@ -62,12 +62,12 @@ const StatusIndicators = ({
   ) => {
     return (
       <div
-        className="flex w-[240px] max-w-[240px] flex-col gap-1 px-1 py-1.5"
+        className="flex w-60 max-w-60 flex-col gap-1 px-1 py-1.5"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="title-xs-semi-bold text-text-primary">{title}</div>
         {description && (
-          <div className="min-w-[200px] body-xs-regular text-text-secondary">{description}</div>
+          <div className="min-w-50 body-xs-regular text-text-secondary">{description}</div>
         )}
         {linkText && linkHref && (
           <div className="cursor-pointer body-xs-regular text-text-accent">
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/index.spec.tsx
index 1c03fdd5a40..30090bc8685 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/index.spec.tsx
@@ -146,7 +146,7 @@ describe('ModelSelector', () => {
 
   it('should use the default model settings popup width when the trigger is narrow', () => {
     renderWithQueryClient(
-      <div className="w-[355px]">
+      <div className="w-88.75">
         <ModelSelector modelList={[makeModel()]} />
       </div>,
     )
@@ -155,8 +155,7 @@ describe('ModelSelector', () => {
 
     expect(
       Array.from(document.body.querySelectorAll('[class]')).some(
-        (element) =>
-          element.className.includes('w-[432px]') && element.className.includes('max-w-[432px]'),
+        (element) => element.className.includes('w-108') && element.className.includes('max-w-108'),
       ),
     ).toBe(true)
   })
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
index e9f47c559e8..f1694fe6119 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
@@ -165,7 +165,7 @@ function ModelSelector({
       <ComboboxContent
         placement="bottom-start"
         sideOffset={4}
-        popupClassName={cn('w-[432px] max-w-[432px] overflow-hidden rounded-xl', popupClassName)}
+        popupClassName={cn('w-108 max-w-108 overflow-hidden rounded-xl', popupClassName)}
       >
         <Popup
           defaultModel={defaultModel}
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 6a390a8d4b0..2b4d28a2336 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
@@ -21,7 +21,7 @@ function ModelSelectorEmptyState({ onConfigure }: ModelSelectorEmptyStateProps)
           {t(($) => $['modelProvider.selector.noProviderConfiguredDesc'], { ns: 'common' })}
         </p>
       </div>
-      <Button variant="primary" className="w-[108px]" onClick={onConfigure}>
+      <Button variant="primary" className="w-27" onClick={onConfigure}>
         {t(($) => $['modelProvider.selector.configure'], { ns: 'common' })}
         <span className="i-ri-arrow-right-line size-4" />
       </Button>
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 09279b5a971..3d17ea12902 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
@@ -123,7 +123,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
     return (
       <div
         className={cn(
-          'group relative mb-0 min-h-[120px] overflow-hidden rounded-xl border-[0.5px] border-divider-regular bg-components-panel-on-panel-item-bg shadow-xs',
+          'group relative mb-0 min-h-30 overflow-hidden rounded-xl border-[0.5px] border-divider-regular bg-components-panel-on-panel-item-bg shadow-xs',
           currentProviderName === 'langgenius/openai/openai' && 'bg-third-party-model-bg-openai',
           currentProviderName === 'langgenius/anthropic/anthropic' &&
             'bg-third-party-model-bg-anthropic',
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 2ac24462f10..c42317ba8c6 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
@@ -177,7 +177,7 @@ const ModelLoadBalancingConfigs = ({
         onClick={!withSwitch && !draftConfig.enabled ? () => toggleModalBalancing(true) : undefined}
         data-testid="load-balancing-main-panel"
       >
-        <div className="flex items-center gap-2 px-[15px] py-3 select-none">
+        <div className="flex items-center gap-2 px-3.75 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>
@@ -306,7 +306,7 @@ const ModelLoadBalancingConfigs = ({
           </div>
         )}
         {draftConfig.enabled && validDraftConfigList.length < 2 && (
-          <div className="flex h-[34px] items-center rounded-b-xl border-t border-t-divider-subtle bg-components-panel-bg px-6 text-xs text-text-secondary">
+          <div className="flex h-8.5 items-center rounded-b-xl border-t border-t-divider-subtle bg-components-panel-bg px-6 text-xs text-text-secondary">
             <div className="mr-1 i-custom-vender-solid-alertsAndFeedback-alert-triangle h-3 w-3 text-[#f79009]" />
             {t(($) => $['modelProvider.loadBalancingLeastKeyWarning'], { 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 87616f7098d..599d5bd8059 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
@@ -249,10 +249,10 @@ const ModelLoadBalancingModal = ({
           if (!open) onClose?.()
         }}
       >
-        <DialogContent className="w-[640px] max-w-none border-none px-8 pt-8 text-left align-middle">
+        <DialogContent className="w-160 max-w-none border-none px-8 pt-8 text-left align-middle">
           <DialogTitle className="title-2xl-semi-bold text-text-primary">
             <div className="pb-3 font-semibold">
-              <div className="h-[30px]">
+              <div className="h-7.5">
                 {draftConfig?.enabled
                   ? t(($) => $['modelProvider.auth.configLoadBalancing'], { ns: 'common' })
                   : t(($) => $['modelProvider.auth.configModel'], { ns: 'common' })}
@@ -290,7 +290,7 @@ const ModelLoadBalancingModal = ({
                   )}
                   onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}
                 >
-                  <div className="flex items-center gap-2 px-[15px] py-3 select-none">
+                  <div className="flex items-center gap-2 px-3.75 py-3 select-none">
                     <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
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 dd67eca4853..11433e2f64e 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
@@ -151,7 +151,7 @@ const QuotaPanel: FC<QuotaPanelProps> = ({ providers }) => {
   return (
     <div
       className={cn(
-        'relative h-16 min-w-[72px] shrink-0 overflow-hidden rounded-xl border-[0.5px] pt-3 pr-2.5 pb-2.5 pl-4 shadow-xs',
+        'relative h-16 min-w-18 shrink-0 overflow-hidden rounded-xl border-[0.5px] pt-3 pr-2.5 pb-2.5 pl-4 shadow-xs',
         isExhausted
           ? 'border-state-destructive-border hover:bg-state-destructive-hover'
           : 'border-components-panel-border bg-third-party-model-bg-default',
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.tsx
index fe501c3abf9..9ee3deda780 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.tsx
@@ -27,7 +27,7 @@ const SystemQuotaCard = ({ variant = 'default', children }: SystemQuotaCardProps
     <VariantContext.Provider value={variant}>
       <div
         className={cn(
-          'relative isolate ml-1 flex w-[128px] shrink-0 flex-col justify-between rounded-lg border-[0.5px] p-1 shadow-xs',
+          'relative isolate ml-1 flex w-32 shrink-0 flex-col justify-between rounded-lg border-[0.5px] p-1 shadow-xs',
           containerVariants[variant],
         )}
       >
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 f06797b4042..626f45b0f58 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
@@ -23,9 +23,9 @@ const ProviderIcon: FC<ProviderIconProps> = ({ provider, className }) => {
 
   if (provider.provider === 'langgenius/anthropic/anthropic') {
     return (
-      <div className={cn('py-[7px]', className)}>
-        {theme === Theme.dark && <AnthropicLight className="h-2.5 w-[90px]" />}
-        {theme === Theme.light && <AnthropicDark className="h-2.5 w-[90px]" />}
+      <div className={cn('py-1.75', className)}>
+        {theme === Theme.dark && <AnthropicLight className="h-2.5 w-22.5" />}
+        {theme === Theme.light && <AnthropicDark className="h-2.5 w-22.5" />}
       </div>
     )
   }
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 a7f835c1ca7..5ea78055894 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
@@ -175,7 +175,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent
           backdropProps={{ forceRender: true }}
-          className="flex max-h-[calc(100dvh-2rem)] w-[480px] max-w-[480px] flex-col overflow-hidden rounded-2xl p-0"
+          className="flex max-h-[calc(100dvh-2rem)] w-120 max-w-120 flex-col overflow-hidden rounded-2xl p-0"
         >
           <DialogCloseButton className="top-5 right-5" />
           <div className="shrink-0 px-6 pt-6 pr-14 pb-3">
@@ -273,12 +273,12 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
               </div>
             </div>
           </div>
-          <div className="flex h-[76px] shrink-0 items-center justify-end gap-2 px-6 pt-5 pb-6">
-            <Button className="min-w-[72px]" onClick={() => setOpen(false)}>
+          <div className="flex h-19 shrink-0 items-center justify-end gap-2 px-6 pt-5 pb-6">
+            <Button className="min-w-18" onClick={() => setOpen(false)}>
               {t(($) => $['operation.cancel'], { ns: 'common' })}
             </Button>
             <Button
-              className="min-w-[72px]"
+              className="min-w-18"
               variant="primary"
               onClick={handleSave}
               disabled={!canManageSystemDefaultModel}
diff --git a/web/app/components/header/account-setting/permissions-page/index.tsx b/web/app/components/header/account-setting/permissions-page/index.tsx
index 37dfb402823..97995601478 100644
--- a/web/app/components/header/account-setting/permissions-page/index.tsx
+++ b/web/app/components/header/account-setting/permissions-page/index.tsx
@@ -128,7 +128,7 @@ const PermissionsPage = ({ containerRef }: PermissionsPageProps) => {
   return (
     <>
       <div className="flex min-w-0 flex-col gap-y-6">
-        <div className="flex min-h-[67px] min-w-0 items-center gap-3 overflow-hidden rounded-xl border-t-[0.5px] border-l-[0.5px] border-divider-regular bg-linear-to-b from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 px-4 py-3">
+        <div className="flex min-h-16.75 min-w-0 items-center gap-3 overflow-hidden rounded-xl border-t-[0.5px] border-l-[0.5px] border-divider-regular bg-linear-to-b from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 px-4 py-3">
           <div className="flex min-w-0 grow flex-col gap-y-1 overflow-hidden">
             <div className="truncate system-md-semibold text-text-secondary">
               {t(($) => $['role.workspaceRoles.title'], { ns: 'permission' })}
diff --git a/web/app/components/header/account-setting/update-setting-dialog-form.tsx b/web/app/components/header/account-setting/update-setting-dialog-form.tsx
index fd207f93f5a..bc9aa90eca0 100644
--- a/web/app/components/header/account-setting/update-setting-dialog-form.tsx
+++ b/web/app/components/header/account-setting/update-setting-dialog-form.tsx
@@ -167,7 +167,7 @@ const UpdateSettingDialogForm = ({
             />
           </div>
           <div className="flex w-full flex-col items-start gap-2">
-            <div className="flex h-[60px] w-full flex-col items-start gap-1">
+            <div className="flex h-15 w-full flex-col items-start gap-1">
               <div className={updateSettingFormLabelClassName}>
                 {t(($) => $['autoUpdate.scope'], { ns: 'plugin' })}
               </div>
diff --git a/web/app/components/header/account-setting/update-setting-dialog.tsx b/web/app/components/header/account-setting/update-setting-dialog.tsx
index 83c625dd780..0e67bf06f0c 100644
--- a/web/app/components/header/account-setting/update-setting-dialog.tsx
+++ b/web/app/components/header/account-setting/update-setting-dialog.tsx
@@ -250,7 +250,7 @@ const UpdateSettingDialog = ({ category, disabled = false }: Props) => {
         }
       />
       {!disabled && (
-        <DialogContent className="flex w-[480px] max-w-[calc(100vw-32px)] flex-col overflow-hidden! rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0! text-left align-middle shadow-xl">
+        <DialogContent className="flex w-120 max-w-[calc(100vw-32px)] flex-col overflow-hidden! rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0! text-left align-middle shadow-xl">
           <div className="relative flex w-full items-start gap-2 px-6 pt-6 pr-14 pb-3">
             <DialogTitle className="min-w-0 flex-1 title-2xl-semi-bold text-text-primary">
               {t(($) => $['autoUpdate.autoUpdateSettings'], { ns: 'plugin' })}
@@ -260,7 +260,7 @@ const UpdateSettingDialog = ({ category, disabled = false }: Props) => {
           {isSettingsLoading && (
             <div
               role="status"
-              className="flex min-h-[260px] items-center justify-center gap-2 px-6 py-6 system-sm-regular text-text-tertiary"
+              className="flex min-h-65 items-center justify-center gap-2 px-6 py-6 system-sm-regular text-text-tertiary"
             >
               <span
                 aria-hidden
@@ -270,7 +270,7 @@ const UpdateSettingDialog = ({ category, disabled = false }: Props) => {
             </div>
           )}
           {!isSettingsLoading && !hasSettings && (
-            <div className="flex min-h-[260px] items-center justify-center px-6 py-6 text-center system-sm-regular text-text-tertiary">
+            <div className="flex min-h-65 items-center justify-center px-6 py-6 text-center system-sm-regular text-text-tertiary">
               {t(($) => $['api.actionFailed'], { ns: 'common' })}
             </div>
           )}
@@ -291,13 +291,13 @@ const UpdateSettingDialog = ({ category, disabled = false }: Props) => {
                 onUpdateTimeChange={handleUpdateTimeChange}
                 renderTimePickerTrigger={renderTimePickerTrigger}
               />
-              <div className="flex h-[76px] items-center justify-end gap-2 px-6 pt-5 pb-6">
-                <Button variant="secondary" className="min-w-[72px]" onClick={handleCancel}>
+              <div className="flex h-19 items-center justify-end gap-2 px-6 pt-5 pb-6">
+                <Button variant="secondary" className="min-w-18" onClick={handleCancel}>
                   {t(($) => $['operation.cancel'], { ns: 'common' })}
                 </Button>
                 <Button
                   variant="primary"
-                  className="min-w-[72px]"
+                  className="min-w-18"
                   onClick={handleSave}
                   disabled={isSavePending}
                 >
diff --git a/web/app/components/header/account-setting/workflow-log-archives-page/index.tsx b/web/app/components/header/account-setting/workflow-log-archives-page/index.tsx
index c8cf69a29cf..c08ae671289 100644
--- a/web/app/components/header/account-setting/workflow-log-archives-page/index.tsx
+++ b/web/app/components/header/account-setting/workflow-log-archives-page/index.tsx
@@ -145,7 +145,7 @@ export default function WorkflowLogArchivesPage() {
           {summaryItems.map((item) => (
             <div
               key={item.label}
-              className="flex min-h-[92px] flex-col gap-2 rounded-xl bg-components-panel-bg p-4"
+              className="flex min-h-23 flex-col gap-2 rounded-xl bg-components-panel-bg p-4"
             >
               <span className={cn(item.icon, 'size-4 text-text-tertiary')} aria-hidden="true" />
               <div className="system-xs-medium text-text-tertiary">{item.label}</div>
@@ -165,7 +165,7 @@ export default function WorkflowLogArchivesPage() {
 
       <div className="overflow-hidden rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg shadow-xs">
         <div className="overflow-x-auto">
-          <div className="min-w-[460px]">
+          <div className="min-w-115">
             <div
               className={cn(
                 'grid h-8 items-center gap-3 border-b border-divider-subtle bg-background-section-burn px-4 system-xs-medium-uppercase text-text-tertiary',
@@ -275,7 +275,7 @@ function ArchivedLogsUpgradeBanner() {
       </div>
       <button
         type="button"
-        className="flex h-10 w-[120px] shrink-0 cursor-pointer items-center justify-center rounded-3xl border-none bg-white p-0 system-md-semibold text-text-accent shadow-xs hover:opacity-95"
+        className="flex h-10 w-30 shrink-0 cursor-pointer items-center justify-center rounded-3xl border-none bg-white p-0 system-md-semibold text-text-accent shadow-xs hover:opacity-95"
         onClick={() => setShowPricingModal()}
       >
         {t(($) => $['upgradeBtn.encourageShort'], { ns: 'billing' })}
@@ -413,8 +413,8 @@ function WorkflowArchiveMonthRow({ archive }: { archive: WorkflowRunArchiveMonth
           <TooltipContent
             placement="top"
             className={cn(
-              'max-w-[260px] text-center text-text-tertiary',
-              isFailed && 'max-w-[300px] text-start [overflow-wrap:anywhere] whitespace-pre-wrap',
+              'max-w-65 text-center text-text-tertiary',
+              isFailed && 'max-w-75 text-start wrap-anywhere whitespace-pre-wrap',
             )}
           >
             {downloadHint}
diff --git a/web/app/components/header/env-nav/index.tsx b/web/app/components/header/env-nav/index.tsx
index 58b3c937ec7..cdc9f7d2b3c 100644
--- a/web/app/components/header/env-nav/index.tsx
+++ b/web/app/components/header/env-nav/index.tsx
@@ -22,7 +22,7 @@ const EnvNav = () => {
 
   return (
     <div
-      className={`mr-1 flex h-[22px] items-center rounded-md border px-2 text-xs font-medium ${headerEnvClassName[langGeniusVersionInfo.current_env]} `}
+      className={`mr-1 flex h-5.5 items-center rounded-md border px-2 text-xs font-medium ${headerEnvClassName[langGeniusVersionInfo.current_env]} `}
     >
       {langGeniusVersionInfo.current_env === 'TESTING' && (
         <>
diff --git a/web/app/components/header/header-wrapper.tsx b/web/app/components/header/header-wrapper.tsx
index 4c7df5f1a6c..f69796ef6da 100644
--- a/web/app/components/header/header-wrapper.tsx
+++ b/web/app/components/header/header-wrapper.tsx
@@ -34,7 +34,7 @@ const HeaderWrapper = ({ children }: HeaderWrapperProps) => {
   return (
     <div
       className={cn(
-        'sticky top-0 right-0 left-0 z-30 flex min-h-[56px] shrink-0 grow-0 basis-auto flex-col',
+        'sticky top-0 right-0 left-0 z-30 flex min-h-14 shrink-0 grow-0 basis-auto flex-col',
         s.header,
         isBordered ? 'border-b border-divider-regular' : '',
         hideHeader && (inWorkflowCanvas || isPipelineCanvas) && 'hidden',
diff --git a/web/app/components/header/maintenance-notice.tsx b/web/app/components/header/maintenance-notice.tsx
index ea12a93f5a4..6042e267765 100644
--- a/web/app/components/header/maintenance-notice.tsx
+++ b/web/app/components/header/maintenance-notice.tsx
@@ -37,8 +37,8 @@ function MaintenanceNoticeContent() {
   if (!showNotice) return null
 
   return (
-    <div className="z-20 flex h-[38px] shrink-0 items-center border-[0.5px] border-b border-b-[#FEF0C7] bg-[#FFFAEB] px-4">
-      <div className="mr-2 flex h-[22px] shrink-0 items-center rounded-xl bg-[#F79009] px-2 text-[11px] font-medium text-white">
+    <div className="z-20 flex h-9.5 shrink-0 items-center border-[0.5px] border-b border-b-[#FEF0C7] bg-[#FFFAEB] px-4">
+      <div className="mr-2 flex h-5.5 shrink-0 items-center rounded-xl bg-[#F79009] px-2 text-[11px] font-medium text-white">
         {titleByLocale[locale]}
       </div>
       {NOTICE_I18N.href && NOTICE_I18N.href !== '#' ? (
diff --git a/web/app/components/header/plan-badge/index.tsx b/web/app/components/header/plan-badge/index.tsx
index cee3851e1e8..34190305e07 100644
--- a/web/app/components/header/plan-badge/index.tsx
+++ b/web/app/components/header/plan-badge/index.tsx
@@ -61,7 +61,7 @@ export function PlanBadge({ plan, allowHover, sandboxAsUpgrade = false, onClick
       <PlanBadgeShell color="blue" allowHover={allowHover} onClick={onClick}>
         <SparklesSoft
           aria-hidden="true"
-          className="flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0"
+          className="flex h-3.5 w-3.5 items-center py-px pl-0.75 text-components-premium-badge-indigo-text-stop-0"
         />
         <div className="system-xs-medium">
           <span className="p-1 whitespace-nowrap">
diff --git a/web/app/components/integrations/page.tsx b/web/app/components/integrations/page.tsx
index f314590fc20..406eb1d8583 100644
--- a/web/app/components/integrations/page.tsx
+++ b/web/app/components/integrations/page.tsx
@@ -279,7 +279,7 @@ export default function IntegrationsPage({
               >
                 {toolsNavItemContent}
               </CollapsibleTrigger>
-              <CollapsiblePanel className="relative space-y-px before:absolute before:top-[-1px] before:bottom-0 before:left-[17.5px] before:w-px before:bg-divider-regular">
+              <CollapsiblePanel className="relative space-y-px before:absolute before:-top-px before:bottom-0 before:left-[17.5px] before:w-px before:bg-divider-regular">
                 {toolItems.map((item) => (
                   <IntegrationSidebarNavItem
                     key={item.label}
diff --git a/web/app/components/integrations/permission-quick-panel.tsx b/web/app/components/integrations/permission-quick-panel.tsx
index bca8e5603c0..2ea7380d81e 100644
--- a/web/app/components/integrations/permission-quick-panel.tsx
+++ b/web/app/components/integrations/permission-quick-panel.tsx
@@ -21,7 +21,7 @@ type PermissionQuickPanelProps = {
 }
 
 const permissionOptionCardClassName = cn(
-  'flex h-8 w-[104px] shrink-0 items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-center system-sm-regular text-text-secondary transition-colors',
+  'flex h-8 w-26 shrink-0 items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-center system-sm-regular text-text-secondary transition-colors',
   'hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover',
   'focus-visible:ring-2 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
   'data-checked:border-[1.5px] data-checked:border-components-option-card-option-selected-border data-checked:bg-components-option-card-option-selected-bg data-checked:font-medium data-checked:text-text-primary data-checked:shadow-xs data-checked:shadow-shadow-shadow-3',
diff --git a/web/app/components/integrations/tool-provider-card.tsx b/web/app/components/integrations/tool-provider-card.tsx
index f793eb71449..e791bf15dda 100644
--- a/web/app/components/integrations/tool-provider-card.tsx
+++ b/web/app/components/integrations/tool-provider-card.tsx
@@ -90,7 +90,7 @@ function IntegrationsToolProviderCard({
         <div className="flex h-6 w-full shrink-0 items-center px-4 py-1">
           <div className="flex h-4 min-w-0 flex-1 flex-wrap items-start gap-x-2 gap-y-1 overflow-hidden system-xs-regular whitespace-nowrap">
             {collection.labels?.map((label) => (
-              <div key={label} className="flex max-w-[120px] shrink-0 items-center gap-0.5">
+              <div key={label} className="flex max-w-30 shrink-0 items-center gap-0.5">
                 <span className="text-text-quaternary">#</span>
                 <span className="min-w-0 truncate text-text-tertiary" title={label}>
                   {label}
@@ -109,7 +109,7 @@ function IntegrationsToolProviderCard({
       data-from={collection.plugin_id ? 'marketplace' : 'package'}
       data-org={collection.plugin_id ? org : ''}
       className={cn(
-        'group/tool-provider relative flex min-w-[min(100%,496px)] flex-1 cursor-pointer flex-col overflow-hidden rounded-xl bg-background-section-burn p-[3px]',
+        'group/tool-provider relative flex min-w-[min(100%,496px)] flex-1 cursor-pointer flex-col overflow-hidden rounded-xl bg-background-section-burn p-0.75',
         current &&
           "after:pointer-events-none after:absolute after:inset-0 after:rounded-xl after:inset-ring-[1.5px] after:inset-ring-components-option-card-option-selected-border after:content-['']",
       )}
@@ -127,7 +127,7 @@ function IntegrationsToolProviderCard({
           </div>
         </div>
       </div>
-      <div className="flex h-[26px] w-full items-center gap-2 px-3 pt-1.5 pb-1">
+      <div className="flex h-6.5 w-full items-center gap-2 px-3 pt-1.5 pb-1">
         <div className="flex h-4 min-w-0 shrink-0 items-center gap-0.5 system-xs-regular">
           {!!org && (
             <>
diff --git a/web/app/components/integrations/tool-provider-list.tsx b/web/app/components/integrations/tool-provider-list.tsx
index a3c58a67cca..77dd3c049fb 100644
--- a/web/app/components/integrations/tool-provider-list.tsx
+++ b/web/app/components/integrations/tool-provider-list.tsx
@@ -233,11 +233,11 @@ const ProviderList = ({ category, contentInset = 'default', layout }: ProviderLi
                   <Empty
                     lightCard
                     text={t(($) => $.noTools, { ns: 'tools' })}
-                    className={cn('h-[224px] shrink-0', toolListFrameClassName)}
+                    className={cn('h-56 shrink-0', toolListFrameClassName)}
                   />
                 )}
               {isCollectionSearchEmpty && activeTab === 'builtin' && (
-                <div className={cn('h-[224px] shrink-0', toolListFrameClassName)} />
+                <div className={cn('h-56 shrink-0', toolListFrameClassName)} />
               )}
               {enable_marketplace && activeTab === 'builtin' && (
                 <BuiltinMarketplacePanel
diff --git a/web/app/components/integrations/tool-provider-toolbar.tsx b/web/app/components/integrations/tool-provider-toolbar.tsx
index e6671bd49af..c72ef4402c0 100644
--- a/web/app/components/integrations/tool-provider-toolbar.tsx
+++ b/web/app/components/integrations/tool-provider-toolbar.tsx
@@ -54,10 +54,10 @@ export function ToolProviderToolbar({
       {!isRouteCategory && (
         <TabSliderNew value={activeTab} onChange={onCategoryChange} options={options} />
       )}
-      <div className="flex min-w-[200px] flex-1 items-center justify-between gap-2">
+      <div className="flex min-w-50 flex-1 items-center justify-between gap-2">
         <div className="flex min-w-0 items-center gap-2">
           {showLabelFilter && <LabelFilter value={tagFilterValue} onChange={onTagsChange} />}
-          <SearchInput className="w-[200px]" value={keywords} onValueChange={onKeywordsChange} />
+          <SearchInput className="w-50" value={keywords} onValueChange={onKeywordsChange} />
         </div>
         {toolbarAction}
         {!toolbarAction && showToolsUpdateSetting && (
diff --git a/web/app/components/main-nav/__tests__/index.spec.tsx b/web/app/components/main-nav/__tests__/index.spec.tsx
index d0f8ccc1218..d3cac90f78c 100644
--- a/web/app/components/main-nav/__tests__/index.spec.tsx
+++ b/web/app/components/main-nav/__tests__/index.spec.tsx
@@ -737,7 +737,7 @@ describe('MainNav', () => {
 
     const accountButton = screen.getByRole('button', { name: 'common.account.account' })
     expect(accountButton).toHaveTextContent('Evan Z')
-    expect(accountButton).toHaveClass('max-w-[180px]', 'gap-3', 'py-1', 'pr-4', 'pl-1')
+    expect(accountButton).toHaveClass('max-w-45', 'gap-3', 'py-1', 'pr-4', 'pl-1')
     expect(accountButton).not.toHaveClass('justify-center', 'p-1')
   })
 
diff --git a/web/app/components/main-nav/components/account-section.tsx b/web/app/components/main-nav/components/account-section.tsx
index a39d741011c..b6932d81269 100644
--- a/web/app/components/main-nav/components/account-section.tsx
+++ b/web/app/components/main-nav/components/account-section.tsx
@@ -26,7 +26,7 @@ const AccountSection = ({ compact = false }: AccountSectionProps) => {
           title={userProfile.name}
           className={cn(
             'flex min-w-0 shrink items-center rounded-full text-left text-components-main-nav-text transition-colors hover:bg-state-base-hover focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid focus-visible:outline-hidden disabled:cursor-default disabled:hover:bg-transparent',
-            compact ? 'justify-center p-1' : 'max-w-[180px] gap-3 py-1 pr-4 pl-1',
+            compact ? 'justify-center p-1' : 'max-w-45 gap-3 py-1 pr-4 pl-1',
             isOpen && 'bg-state-base-hover',
           )}
         >
diff --git a/web/app/components/main-nav/components/help-menu.tsx b/web/app/components/main-nav/components/help-menu.tsx
index 992f302219f..8c72b1dae39 100644
--- a/web/app/components/main-nav/components/help-menu.tsx
+++ b/web/app/components/main-nav/components/help-menu.tsx
@@ -236,7 +236,7 @@ const HelpMenu = ({ triggerIcon = defaultTriggerIcon, triggerClassName }: HelpMe
                   iconClassName="i-ri-github-line"
                   label={t(($) => $['userProfile.github'], { ns: 'common' })}
                   trailing={
-                    <div className="flex items-center gap-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px]">
+                    <div className="flex items-center gap-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1.25 py-0.75">
                       <span
                         aria-hidden
                         className="i-ri-star-line size-3 shrink-0 text-text-tertiary"
diff --git a/web/app/components/main-nav/components/workspace-card.tsx b/web/app/components/main-nav/components/workspace-card.tsx
index 38e4ba88072..6b7e0145e3d 100644
--- a/web/app/components/main-nav/components/workspace-card.tsx
+++ b/web/app/components/main-nav/components/workspace-card.tsx
@@ -129,7 +129,7 @@ function WorkspaceCardTrigger({
         <div className="min-w-0 grow">
           <div className="flex min-w-0 items-center gap-1 pr-0.5">
             <span
-              className="max-w-[120px] min-w-0 shrink truncate system-sm-medium text-text-primary"
+              className="max-w-30 min-w-0 shrink truncate system-sm-medium text-text-primary"
               title={name}
             >
               {name}
diff --git a/web/app/components/main-nav/index.tsx b/web/app/components/main-nav/index.tsx
index 90932c841b6..f13e4473a7b 100644
--- a/web/app/components/main-nav/index.tsx
+++ b/web/app/components/main-nav/index.tsx
@@ -133,8 +133,8 @@ export function MainNav({ className }: MainNavProps) {
         )}
       </div>
       <div className="relative w-60 shrink-0">
-        <StepByStepTourMount className="absolute -top-7 left-2.5 h-8 w-[183px] overflow-visible" />
-        <div className="flex w-60 items-center justify-between bg-gradient-to-b from-background-body-transparent to-background-body to-50% py-3 pr-1 pl-3 backdrop-blur-[2px]">
+        <StepByStepTourMount className="absolute -top-7 left-2.5 h-8 w-45.75 overflow-visible" />
+        <div className="flex w-60 items-center justify-between bg-linear-to-b from-background-body-transparent to-background-body to-50% py-3 pr-1 pl-3 backdrop-blur-[2px]">
           <div className="flex min-w-0 items-center gap-1 overflow-hidden">
             <AccountSection />
           </div>
diff --git a/web/app/components/plugins/card/base/corner-mark.tsx b/web/app/components/plugins/card/base/corner-mark.tsx
index 0a78fff6f43..cd997c07d3a 100644
--- a/web/app/components/plugins/card/base/corner-mark.tsx
+++ b/web/app/components/plugins/card/base/corner-mark.tsx
@@ -3,7 +3,7 @@ import { LeftCorner } from '../../../base/icons/src/vender/plugin'
 
 const CornerMark = ({ className, text }: { className?: string; text: string }) => {
   return (
-    <div className={cn('absolute top-0 right-0 flex pl-[13px]', className)}>
+    <div className={cn('absolute top-0 right-0 flex pl-3.25', className)}>
       <LeftCorner className="text-background-section" />
       <div className="h-5 rounded-tr-xl bg-background-section pr-2 system-2xs-medium-uppercase leading-5 whitespace-nowrap text-text-tertiary">
         {text}
diff --git a/web/app/components/plugins/card/base/placeholder.tsx b/web/app/components/plugins/card/base/placeholder.tsx
index cb4db56b6c0..849631159c3 100644
--- a/web/app/components/plugins/card/base/placeholder.tsx
+++ b/web/app/components/plugins/card/base/placeholder.tsx
@@ -32,18 +32,18 @@ const Placeholder = ({ wrapClassName, loadingFileName }: Props) => {
               {loadingFileName ? (
                 <Title title={loadingFileName} />
               ) : (
-                <SkeletonRectangle className="w-[260px]" />
+                <SkeletonRectangle className="w-65" />
               )}
             </div>
             <SkeletonRow className="h-4">
-              <SkeletonRectangle className="w-[41px]" />
+              <SkeletonRectangle className="w-10.25" />
               <SkeletonPoint />
-              <SkeletonRectangle className="w-[180px]" />
+              <SkeletonRectangle className="w-45" />
             </SkeletonRow>
           </SkeletonContainer>
         </div>
       </SkeletonRow>
-      <SkeletonRectangle className="mt-3 w-[420px]" />
+      <SkeletonRectangle className="mt-3 w-105" />
     </div>
   )
 }
diff --git a/web/app/components/plugins/card/card-more-info.tsx b/web/app/components/plugins/card/card-more-info.tsx
index cb0d0581682..0587362b98c 100644
--- a/web/app/components/plugins/card/card-more-info.tsx
+++ b/web/app/components/plugins/card/card-more-info.tsx
@@ -17,8 +17,8 @@ const CardMoreInfoComponent = ({ downloadCount, tags, variant = 'default' }: Pro
             <div
               key={tag}
               className={cn(
-                'flex max-w-[120px] min-w-[18px] shrink-0 items-center justify-center gap-0.5 overflow-hidden rounded-[5px]',
-                'border border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px]',
+                'flex max-w-30 min-w-4.5 shrink-0 items-center justify-center gap-0.5 overflow-hidden rounded-[5px]',
+                'border border-divider-deep bg-components-badge-bg-dimm px-1.25 py-0.75',
                 'system-2xs-medium-uppercase text-text-tertiary',
               )}
             >
@@ -41,10 +41,7 @@ const CardMoreInfoComponent = ({ downloadCount, tags, variant = 'default' }: Pro
         <>
           <div className="flex h-4 flex-wrap space-x-2 overflow-hidden">
             {tags.map((tag) => (
-              <div
-                key={tag}
-                className="flex max-w-[120px] space-x-1 overflow-hidden system-xs-regular"
-              >
+              <div key={tag} className="flex max-w-30 space-x-1 overflow-hidden system-xs-regular">
                 <span className="text-text-quaternary">#</span>
                 <span className="truncate text-text-tertiary">{tag}</span>
               </div>
diff --git a/web/app/components/plugins/card/index.tsx b/web/app/components/plugins/card/index.tsx
index 21f9f6485b3..f5dc18cb55b 100644
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@@ -79,7 +79,7 @@ const Card = ({
   const wrapClassName = cn(
     'hover-bg-components-panel-on-panel-item-bg relative overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs',
     isMarketplaceVariant &&
-      'h-[148px] transition-all group-hover:bg-components-panel-on-panel-item-bg-hover group-hover:shadow-md',
+      'h-37 transition-all group-hover:bg-components-panel-on-panel-item-bg-hover group-hover:shadow-md',
     className,
   )
   if (isLoading) {
diff --git a/web/app/components/plugins/install-plugin/base/installed.tsx b/web/app/components/plugins/install-plugin/base/installed.tsx
index 9e607992247..13643aff7cf 100644
--- a/web/app/components/plugins/install-plugin/base/installed.tsx
+++ b/web/app/components/plugins/install-plugin/base/installed.tsx
@@ -127,7 +127,7 @@ const Installed: FC<Props> = ({
       <div className="flex items-center justify-end gap-2 self-stretch p-6 pt-5">
         <Button
           variant="primary"
-          className="min-w-[72px]"
+          className="min-w-18"
           render={categoryTarget ? <Link href={categoryTarget.path} /> : undefined}
           onClick={handleClose}
         >
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 d2a4669d333..71a250abd06 100644
--- a/web/app/components/plugins/install-plugin/base/loading-error.tsx
+++ b/web/app/components/plugins/install-plugin/base/loading-error.tsx
@@ -18,7 +18,7 @@ const LoadingError: FC = () => {
             <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">
+            <div className="absolute -right-1 -bottom-1 rounded-full border-2 border-components-panel-bg bg-state-destructive-solid">
               <RiCloseLine className="size-3 text-text-primary-on-surface" />
             </div>
           </div>
@@ -31,7 +31,7 @@ const LoadingError: FC = () => {
             </div>
           </div>
         </div>
-        <LoadingPlaceholder className="mt-3 w-[420px]" />
+        <LoadingPlaceholder className="mt-3 w-105" />
       </div>
     </div>
   )
diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
index b32670092d8..6f6587e37e6 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -59,10 +59,10 @@ const InstallBundle: FC<Props> = ({
       <DialogContent
         backdropProps={{ forceRender: true }}
         className={cn(
-          'w-full max-w-[480px] overflow-hidden! text-left align-middle',
+          'w-full max-w-120 overflow-hidden! text-left align-middle',
           cn(
             modalClassName,
-            'shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0',
+            'shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-140 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0',
           ),
         )}
       >
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 420f348ded5..39ebc7bbe43 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
@@ -251,13 +251,13 @@ const Install: FC<Props> = ({
           </div>
           <div className="flex items-center justify-end gap-2 self-stretch">
             {!canInstall && (
-              <Button variant="secondary" className="min-w-[72px]" onClick={handleCancel}>
+              <Button variant="secondary" className="min-w-18" onClick={handleCancel}>
                 {t(($) => $['operation.cancel'], { ns: 'common' })}
               </Button>
             )}
             <Button
               variant="primary"
-              className="flex min-w-[72px] space-x-0.5"
+              className="flex min-w-18 space-x-0.5"
               disabled={
                 !canInstall ||
                 isInstalling ||
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
index 4323f6c22ae..e121b0a84ad 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
@@ -65,7 +65,7 @@ const Installed: FC<Props> = ({ list, installStatus, versionInfo, onCancel, isHi
       {/* Action Buttons */}
       {!isHideButton && (
         <div className="flex items-center justify-end gap-2 self-stretch p-6 pt-5">
-          <Button variant="primary" className="min-w-[72px]" onClick={onCancel}>
+          <Button variant="primary" className="min-w-18" onClick={onCancel}>
             {t(($) => $['operation.close'], { ns: 'common' })}
           </Button>
         </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-github/index.tsx b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
index c4205829235..8ff6f3a12b3 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
@@ -179,10 +179,10 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({
       <DialogContent
         backdropProps={{ forceRender: true }}
         className={cn(
-          'w-[560px] max-w-none! overflow-hidden! text-left align-middle',
+          'w-140 max-w-none! overflow-hidden! text-left align-middle',
           cn(
             modalClassName,
-            `shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0`,
+            `shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-140 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0`,
           ),
         )}
       >
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 12dbb6c63d4..baeb90f82ec 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
@@ -158,13 +158,13 @@ const Loaded: React.FC<LoadedProps> = ({
       </div>
       <div className="mt-4 flex items-center justify-end gap-2 self-stretch">
         {!isInstalling && (
-          <Button variant="secondary" className="min-w-[72px]" onClick={onBack}>
+          <Button variant="secondary" className="min-w-18" onClick={onBack}>
             {t(($) => $['installModal.back'], { ns: 'plugin' })}
           </Button>
         )}
         <Button
           variant="primary"
-          className="flex min-w-[72px] space-x-0.5"
+          className="flex min-w-18 space-x-0.5"
           onClick={handleInstall}
           disabled={isInstalling || isLoading}
         >
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
index 3a50d1a4d7a..ff29c5c511c 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
@@ -157,18 +157,13 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
       </Field>
       <div className="mt-4 flex items-center justify-end gap-2 self-stretch">
         {!isEdit && (
-          <Button
-            variant="secondary"
-            className="min-w-[72px]"
-            onClick={onBack}
-            disabled={isUploading}
-          >
+          <Button variant="secondary" className="min-w-18" onClick={onBack} disabled={isUploading}>
             {t(($) => $['installModal.back'], { ns: 'plugin' })}
           </Button>
         )}
         <Button
           variant="primary"
-          className="min-w-[72px]"
+          className="min-w-18"
           onClick={handleUploadPackage}
           disabled={!selectedVersion || !selectedPackage || isUploading}
         >
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
index 3ee20e96152..b2e29278862 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
@@ -90,10 +90,10 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
       <DialogContent
         backdropProps={{ forceRender: true }}
         className={cn(
-          'w-[560px] max-w-none! overflow-hidden! text-left align-middle',
+          'w-140 max-w-none! overflow-hidden! text-left align-middle',
           cn(
             modalClassName,
-            'shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0',
+            'shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-140 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0',
           ),
         )}
       >
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 0f353066c2c..ae6c92956a3 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
@@ -148,13 +148,13 @@ const Installed: FC<Props> = ({
       {/* Action Buttons */}
       <div className="flex items-center justify-end gap-2 self-stretch p-6 pt-5">
         {!isInstalling && (
-          <Button variant="secondary" className="min-w-[72px]" onClick={handleCancel}>
+          <Button variant="secondary" className="min-w-18" onClick={handleCancel}>
             {t(($) => $['operation.cancel'], { ns: 'common' })}
           </Button>
         )}
         <Button
           variant="primary"
-          className="flex min-w-[72px] space-x-0.5"
+          className="flex min-w-18 space-x-0.5"
           disabled={isInstalling || isLoading}
           onClick={handleInstall}
         >
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 9b6a14355a9..f4a4462baa8 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
@@ -125,10 +125,10 @@ const Uploading: FC<Props> = ({
 
       {/* Action Buttons */}
       <div className="flex items-center justify-end gap-2 self-stretch p-6 pt-5">
-        <Button variant="secondary" className="min-w-[72px]" onClick={onCancel}>
+        <Button variant="secondary" className="min-w-18" onClick={onCancel}>
           {t(($) => $['operation.cancel'], { ns: 'common' })}
         </Button>
-        <Button variant="primary" className="min-w-[72px]" disabled>
+        <Button variant="primary" className="min-w-18" disabled>
           {t(($) => $[`${i18nPrefix}.install`], { ns: 'plugin' })}
         </Button>
       </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
index cee68e8d7ff..04f03e44a93 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@@ -86,10 +86,10 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
       <DialogContent
         backdropProps={{ forceRender: true }}
         className={cn(
-          'w-[560px] max-w-none! overflow-hidden! text-left align-middle',
+          'w-140 max-w-none! overflow-hidden! text-left align-middle',
           cn(
             modalClassName,
-            'shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0',
+            'shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-140 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0',
           ),
         )}
       >
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 986e9179f87..c5e900ceaed 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
@@ -174,13 +174,13 @@ const Installed: FC<Props> = ({
       {/* Action Buttons */}
       <div className="flex items-center justify-end gap-2 self-stretch p-6 pt-5">
         {!isInstalling && (
-          <Button variant="secondary" className="min-w-[72px]" onClick={handleCancel}>
+          <Button variant="secondary" className="min-w-18" onClick={handleCancel}>
             {t(($) => $['operation.cancel'], { ns: 'common' })}
           </Button>
         )}
         <Button
           variant="primary"
-          className="flex min-w-[72px] space-x-0.5"
+          className="flex min-w-18 space-x-0.5"
           disabled={isInstalling || isLoading || !canInstall}
           onClick={handleInstall}
         >
diff --git a/web/app/components/plugins/marketplace/description/index.tsx b/web/app/components/plugins/marketplace/description/index.tsx
index 05fb6b16dad..d4dc268ab93 100644
--- a/web/app/components/plugins/marketplace/description/index.tsx
+++ b/web/app/components/plugins/marketplace/description/index.tsx
@@ -228,11 +228,11 @@ const Description = ({
 
   const defaultMarketplaceNav = (
     <div className="relative z-20 flex w-full flex-col items-start">
-      <div className="flex h-[60px] w-full items-center rounded-lg border-[0.5px] border-white/50 bg-components-panel-bg-blur backdrop-blur-[6px]">
+      <div className="flex h-15 w-full items-center rounded-lg border-[0.5px] border-white/50 bg-components-panel-bg-blur backdrop-blur-[6px]">
         <div className="flex h-full min-w-0 flex-1 items-center px-5 py-2">
           <div className="flex shrink-0 items-center gap-1.5">
-            <DifyLogo alt="Dify" className="h-6 w-[52px]" />
-            <span className="max-w-0 overflow-hidden title-3xl-semi-bold whitespace-nowrap text-text-primary opacity-0 transition-all duration-200 md:max-w-[150px] md:opacity-100">
+            <DifyLogo alt="Dify" className="h-6 w-13" />
+            <span className="max-w-0 overflow-hidden title-3xl-semi-bold whitespace-nowrap text-text-primary opacity-0 transition-all duration-200 md:max-w-37.5 md:opacity-100">
               {tCommon(($) => $['mainNav.marketplace'])}
             </span>
           </div>
diff --git a/web/app/components/plugins/marketplace/empty/index.tsx b/web/app/components/plugins/marketplace/empty/index.tsx
index 359ec18eec4..581b7332e1b 100644
--- a/web/app/components/plugins/marketplace/empty/index.tsx
+++ b/web/app/components/plugins/marketplace/empty/index.tsx
@@ -19,7 +19,7 @@ const Empty = ({ text, lightCard, className }: Props) => {
         <div
           key={index}
           className={cn(
-            'mr-3 mb-3 h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
+            'mr-3 mb-3 h-36 w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
             index % 4 === 3 && 'mr-0',
             index > 11 && 'mb-0',
             lightCard && 'bg-background-default-lighter opacity-75',
diff --git a/web/app/components/plugins/marketplace/list/__tests__/list-with-collection.spec.tsx b/web/app/components/plugins/marketplace/list/__tests__/list-with-collection.spec.tsx
index c291ca61927..1b38816afcc 100644
--- a/web/app/components/plugins/marketplace/list/__tests__/list-with-collection.spec.tsx
+++ b/web/app/components/plugins/marketplace/list/__tests__/list-with-collection.spec.tsx
@@ -206,7 +206,7 @@ describe('ListWithCollection', () => {
     const carouselViewport = carousel.querySelector('.overflow-hidden')
     const carouselContent = carouselViewport?.firstElementChild
     expect(carousel).not.toHaveClass('overflow-hidden')
-    expect(carouselViewport).toHaveClass('overflow-hidden', '[border-radius:inherit]')
+    expect(carouselViewport).toHaveClass('overflow-hidden', 'rounded-[inherit]')
     expect(carouselContent).toHaveStyle({ columnGap: '12px' })
   })
 })
diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
index 081e6d9c0c8..c052938e82b 100644
--- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
@@ -74,7 +74,7 @@ const CardWrapperComponent = ({
             />
           }
         />
-        <div className="pointer-events-none absolute right-[-0.5px] bottom-[-0.5px] left-[-0.5px] z-10 flex items-center gap-2 rounded-b-xl bg-linear-to-t from-components-panel-on-panel-item-bg-hover from-[60%] to-background-gradient-mask-transparent px-4 pt-8 pb-4 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+        <div className="pointer-events-none absolute right-[-0.5px] bottom-[-0.5px] left-[-0.5px] z-10 flex items-center gap-2 rounded-b-xl bg-linear-to-t from-components-panel-on-panel-item-bg-hover from-60% to-background-gradient-mask-transparent px-4 pt-8 pb-4 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
           <Button
             variant={isInstalled ? 'secondary' : 'primary'}
             className="min-w-0 flex-1 shadow-md"
diff --git a/web/app/components/plugins/marketplace/list/carousel.tsx b/web/app/components/plugins/marketplace/list/carousel.tsx
index ef90d9dcea5..3b94c907295 100644
--- a/web/app/components/plugins/marketplace/list/carousel.tsx
+++ b/web/app/components/plugins/marketplace/list/carousel.tsx
@@ -74,7 +74,7 @@ const CarouselControls = ({
             <button
               key={item.id}
               className={cn(
-                'h-[5px] w-[5px] rounded-full transition-all',
+                'h-1.25 w-1.25 rounded-full transition-all',
                 selectedIndex === index
                   ? 'w-4 bg-components-button-primary-bg'
                   : 'bg-components-button-secondary-border hover:bg-components-button-secondary-border-hover',
@@ -165,7 +165,7 @@ const Carousel = ({
           scrollSnaps={scrollSnaps}
         />
       )}
-      <div ref={carouselRef} className="overflow-hidden [border-radius:inherit]">
+      <div ref={carouselRef} className="overflow-hidden rounded-[inherit]">
         <div className="flex" style={{ columnGap: '12px' }}>
           {children}
         </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 42c03c9f6c5..13fbcc9c98f 100644
--- a/web/app/components/plugins/marketplace/list/list-with-collection.tsx
+++ b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
@@ -157,7 +157,7 @@ const ListWithCollection = ({
                     >
                       <div className={cn(GRID_CLASS, cardContainerClassName)}>
                         {pageItems.map((plugin) => (
-                          <div key={plugin.plugin_id} className="min-w-0 [&>*]:w-full">
+                          <div key={plugin.plugin_id} className="min-w-0 *:w-full">
                             <PluginCard
                               plugin={plugin}
                               showInstallButton={showInstallButton}
diff --git a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
index e3d2ee97574..c4dda63b266 100644
--- a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
+++ b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
@@ -51,7 +51,7 @@ function TagsFilter({ tags, onTagsChange, usedInMarketplace = false }: TagsFilte
         alignOffset={-6}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
+        <div className="w-60 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
           <div className="p-2 pb-1">
             <div className="relative">
               <span
@@ -74,7 +74,7 @@ function TagsFilter({ tags, onTagsChange, usedInMarketplace = false }: TagsFilte
             aria-label={t(($) => $.allTags, { ns: 'pluginTags' })}
             value={tags}
             onValueChange={(nextTags) => onTagsChange(nextTags)}
-            className="max-h-[448px] overflow-y-auto p-1"
+            className="max-h-112 overflow-y-auto p-1"
           >
             {filteredOptions.map((option) => (
               <label
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 8350da2f88a..e03cfcf54c6 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
@@ -151,7 +151,7 @@ const ApiKeyModal = ({
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent
         backdropProps={{ forceRender: true }}
-        className="w-[640px]! max-w-[calc(100vw-2rem)]! p-0!"
+        className="w-160! max-w-[calc(100vw-2rem)]! p-0!"
       >
         <div data-testid="modal" className="flex max-h-[80dvh] flex-col">
           <div className="relative shrink-0 p-6 pr-14 pb-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 4eae67fcdf1..acbd5a83995 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
@@ -137,7 +137,7 @@ const OAuthClientSettings = ({
     <Dialog open={open} disablePointerDismissal onOpenChange={handleOpenChange}>
       <DialogContent
         backdropProps={{ forceRender: true }}
-        className="w-[480px]! max-w-[calc(100vw-2rem)]! p-0!"
+        className="w-120! max-w-[calc(100vw-2rem)]! p-0!"
       >
         <div data-testid="modal" className="flex max-h-[80dvh] flex-col">
           <div className="relative shrink-0 p-6 pr-14 pb-3">
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index 2a1257bc264..8ecc69b7421 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -244,7 +244,7 @@ const Authorized = ({
         >
           <div
             className={cn(
-              'max-h-[360px] overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg',
+              'max-h-90 overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg',
               popupClassName,
             )}
           >
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-modal.spec.tsx
index 9daea053542..297dabb210d 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-modal.spec.tsx
@@ -119,7 +119,7 @@ describe('EndpointModal', () => {
         '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-[400px]',
+        'data-[swipe-direction=right]:w-100',
         'data-[swipe-direction=right]:max-w-[calc(100vw-1rem)]',
       )
     })
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/strategy-detail.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/strategy-detail.spec.tsx
index a4c96d40c90..bb09749495d 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/strategy-detail.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/strategy-detail.spec.tsx
@@ -76,7 +76,7 @@ describe('StrategyDetail', () => {
         '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-[400px]',
+        'data-[swipe-direction=right]:w-100',
         'data-[swipe-direction=right]:max-w-[calc(100vw-1rem)]',
       )
     })
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
index 9b38323423c..fca414d9295 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
@@ -30,11 +30,7 @@ const AppInputsPanel = ({ value, appDetail, onFormChange }: Props) => {
   const hasInputs = inputFormSchema.length > 0
 
   return (
-    <div
-      className={cn(
-        'flex max-h-[240px] flex-col rounded-b-2xl border-t border-divider-subtle pb-4',
-      )}
-    >
+    <div className={cn('flex max-h-60 flex-col rounded-b-2xl border-t border-divider-subtle pb-4')}>
       {isLoading && (
         <div className="pt-3">
           <Loading type="app" />
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
index 2907690b20d..f36b68c8064 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
@@ -137,7 +137,7 @@ export function AppSelector({
         sideOffset={offset}
         popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="relative min-h-20 w-[389px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
+        <div className="relative min-h-20 w-97.25 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
           <div className="flex flex-col gap-1 px-4 py-3">
             <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
               {t(($) => $['appSelector.label'], { ns: 'app' })}
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 e52b4164cbc..2980507164d 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -95,7 +95,7 @@ const EndpointModal: FC<Props> = ({
         <DrawerViewport>
           <DrawerPopup
             className={cn(
-              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-[400px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
+              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-100 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
             )}
           >
             <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 3fc325dbace..22f5a212cab 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -79,7 +79,7 @@ const PluginDetailPanel: FC<Props> = ({
         <DrawerViewport>
           <DrawerPopup
             className={cn(
-              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-[400px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
+              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-100 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
             )}
           >
             <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
index 3c084bf0903..5929f4a455d 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
@@ -191,7 +191,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
     >
       <div className="relative">
         {isSplitTrigger ? (
-          <div className="flex h-8 min-w-[296px] items-center gap-px overflow-hidden rounded-lg">
+          <div className="flex h-8 min-w-74 items-center gap-px overflow-hidden rounded-lg">
             <div className="min-w-0 flex-1">
               <ModelSelector
                 defaultModel={
@@ -255,9 +255,9 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
         <PopoverContent
           placement={isInWorkflow ? 'left' : 'bottom-end'}
           sideOffset={4}
-          popupClassName={cn(popupClassName, 'w-[389px] rounded-2xl')}
+          popupClassName={cn(popupClassName, 'w-97.25 rounded-2xl')}
         >
-          <div className="max-h-[420px] overflow-y-auto p-4 pt-3">
+          <div className="max-h-105 overflow-y-auto p-4 pt-3">
             {!isSplitTrigger && (
               <div className="relative">
                 <div className="mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">
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 21c12763076..c4b736443ff 100644
--- a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
@@ -83,7 +83,7 @@ export function OperationDropdown({
         placement={placement}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        popupClassName={cn('w-[192px] py-1', popupClassName)}
+        popupClassName={cn('w-48 py-1', popupClassName)}
       >
         {showInfo && (
           <DropdownMenuItem
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 8048b0a7645..5cad6304d11 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
@@ -80,7 +80,7 @@ const StrategyDetail: FC<Props> = ({ provider, detail, onHide }) => {
         <DrawerViewport>
           <DrawerPopup
             className={cn(
-              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-[400px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
+              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-100 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
             )}
           >
             <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
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 88bcd3d23cc..0e9b151b680 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
@@ -26,10 +26,10 @@ export const CommonCreateModal = ({ open = true, onClose, createType, builder }:
       <DialogContent
         backdropProps={{ forceRender: true }}
         className={cn(
-          'flex max-h-[80%] min-h-[360px] flex-col overflow-hidden p-0 shadow-xs',
+          'flex max-h-[80%] min-h-90 flex-col overflow-hidden p-0 shadow-xs',
           createType === SupportedCreationMethods.MANUAL
-            ? 'w-[640px] max-w-[calc(100vw-2rem)]'
-            : 'w-[480px] max-w-[calc(100vw-2rem)]',
+            ? 'w-160 max-w-[calc(100vw-2rem)]'
+            : 'w-120 max-w-[calc(100vw-2rem)]',
         )}
       >
         <CommonCreateModalContent createType={createType} builder={builder} onClose={onClose} />
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 efcb7e052d6..c447fe87a37 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
@@ -111,10 +111,7 @@ export const OAuthClientSettingsModal = ({
                     {oauthConfig?.redirect_uri}
                   </div>
                   <Button variant="secondary" size="small" onClick={handleCopyRedirectUri}>
-                    <span
-                      aria-hidden="true"
-                      className="mr-1 i-ri-clipboard-line h-[14px] w-[14px]"
-                    />
+                    <span aria-hidden="true" className="mr-1 i-ri-clipboard-line h-3.5 w-3.5" />
                     {t(($) => $['operation.copy'], { ns: 'common' })}
                   </Button>
                 </div>
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 7e35a401cf9..fa07129742a 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
@@ -122,7 +122,7 @@ const LogViewer = ({ logs, className }: Props) => {
             )}
           >
             {isError && (
-              <div className="pointer-events-none absolute top-0 left-0 h-7 w-[179px]">
+              <div className="pointer-events-none absolute top-0 left-0 h-7 w-44.75">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="179"
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 4b2797d6753..6783032dfa2 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
@@ -44,7 +44,7 @@ export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
           <CreateSubscriptionButton buttonType={CreateButtonType.ICON_BUTTON} shape="circle" />
         </div>
       )}
-      <div className="max-h-[320px] overflow-y-auto">
+      <div className="max-h-80 overflow-y-auto">
         {subscriptions?.map((subscription) => (
           <div
             key={subscription.id}
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 32ece243fc5..42176c55db0 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
@@ -173,7 +173,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
       <div key={variable} className="space-y-0.5">
         <div className="flex items-center justify-between py-2 system-sm-semibold text-text-secondary">
           <div className="flex items-center">
-            <span className={cn('max-w-[140px] truncate code-sm-semibold text-text-secondary')}>
+            <span className={cn('max-w-35 truncate code-sm-semibold text-text-secondary')}>
               {fieldTitle}
             </span>
             {required && <span className="ml-1 text-red-500">*</span>}
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 5b520755e89..adca9d2f3bb 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
@@ -19,7 +19,7 @@ export function SchemaModal({ isShow, schema, rootName, onClose }: Props) {
   const { t } = useTranslation()
   return (
     <Dialog open={isShow} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="w-full max-w-[960px] p-0">
+      <DialogContent className="w-full max-w-240 p-0">
         <div className="pb-6">
           {/* Header */}
           <div className="relative flex p-6 pr-14 pb-3">
@@ -32,11 +32,11 @@ export function SchemaModal({ isShow, schema, rootName, onClose }: Props) {
               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" />
+              <span className="i-ri-close-line h-4.5 w-4.5 text-text-tertiary" />
             </button>
           </div>
           {/* Content */}
-          <div className="flex max-h-[700px] overflow-y-auto px-6 py-2">
+          <div className="flex max-h-175 overflow-y-auto px-6 py-2">
             <MittProvider>
               <VisualEditorContextProvider>
                 <VisualEditor
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index c8dda9bfc08..51d6b3cb90c 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -109,7 +109,7 @@ function ToolSelector({
   }
 
   const renderErrorTip = () => (
-    <div className="max-w-[240px] space-y-1 text-xs">
+    <div className="max-w-60 space-y-1 text-xs">
       <h3 className="font-semibold text-text-primary">
         {currentTool
           ? t(($) => $['detailPanel.toolSelector.uninstalledTitle'], { ns: 'plugin' })
@@ -177,7 +177,7 @@ function ToolSelector({
       >
         <div
           className={cn(
-            'relative max-h-[642px] min-h-20 w-[361px] rounded-xl',
+            'relative max-h-160.5 min-h-20 w-90.25 rounded-xl',
             'border-[0.5px] border-components-panel-border bg-components-panel-bg-blur',
             'overflow-y-auto pb-4 shadow-lg backdrop-blur-xs',
           )}
diff --git a/web/app/components/plugins/plugin-detail-panel/trigger/__tests__/event-detail-drawer.spec.tsx b/web/app/components/plugins/plugin-detail-panel/trigger/__tests__/event-detail-drawer.spec.tsx
index 3a59df83b7a..901449290f4 100644
--- a/web/app/components/plugins/plugin-detail-panel/trigger/__tests__/event-detail-drawer.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/__tests__/event-detail-drawer.spec.tsx
@@ -107,7 +107,7 @@ describe('EventDetailDrawer', () => {
         '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-[400px]',
+        'data-[swipe-direction=right]:w-100',
         'data-[swipe-direction=right]:max-w-[calc(100vw-1rem)]',
       )
     })
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 5a15aaf7a8f..9bf60c6747e 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
@@ -93,7 +93,7 @@ export const EventDetailDrawer: FC<EventDetailDrawerProps> = (props) => {
         <DrawerViewport>
           <DrawerPopup
             className={cn(
-              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-[400px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
+              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-100 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
             )}
           >
             <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
@@ -164,7 +164,7 @@ export const EventDetailDrawer: FC<EventDetailDrawerProps> = (props) => {
                   <div className="system-sm-semibold-uppercase text-text-secondary">
                     {t(($) => $['events.output'], { ns: 'pluginTrigger' })}
                   </div>
-                  <div className="relative left-[-7px]">
+                  <div className="relative -left-1.75">
                     {outputFields.map((item) => (
                       <Field
                         key={item.name}
diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index 7bf563e2244..40bd028bf8b 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -291,7 +291,7 @@ const PluginItem: FC<Props> = ({
       </div>
       {/* BG Effect for Deprecated Plugin */}
       {source === PluginSource.marketplace && enable_marketplace && isDeprecated && (
-        <div className="absolute right-[-45px] bottom-[-71px] z-0 size-40 bg-components-badge-status-light-warning-halo opacity-60 blur-[120px]" />
+        <div className="absolute -right-11.25 -bottom-17.75 z-0 size-40 bg-components-badge-status-light-warning-halo opacity-60 blur-[120px]" />
       )}
     </div>
   )
diff --git a/web/app/components/plugins/plugin-mutation-model/index.tsx b/web/app/components/plugins/plugin-mutation-model/index.tsx
index 4d7441423ee..4d5597b3630 100644
--- a/web/app/components/plugins/plugin-mutation-model/index.tsx
+++ b/web/app/components/plugins/plugin-mutation-model/index.tsx
@@ -39,7 +39,7 @@ const PluginMutationModal: FC<Props> = ({
         if (!open) onCancel()
       }}
     >
-      <DialogContent className="w-full min-w-[560px] overflow-hidden! border-none text-left align-middle">
+      <DialogContent className="w-full min-w-140 overflow-hidden! border-none text-left align-middle">
         <DialogCloseButton />
         <DialogTitle className="title-2xl-semi-bold text-text-primary">{modelTitle}</DialogTitle>
 
diff --git a/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx
index 177b63909bf..12dbb4430bb 100644
--- a/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx
@@ -72,7 +72,7 @@ describe('DebugInfo', () => {
     await user.click(trigger)
 
     expect(screen.getByText('plugin.debugInfo.title')).toBeInTheDocument()
-    expect(screen.getByText('plugin.debugInfo.title').closest('.w-\\[360px\\]')).toHaveClass(
+    expect(screen.getByText('plugin.debugInfo.title').closest('.w-90')).toHaveClass(
       'rounded-2xl',
       'shadow-2xl',
     )
diff --git a/web/app/components/plugins/plugin-page/empty/index.tsx b/web/app/components/plugins/plugin-page/empty/index.tsx
index 1c5b0f6f647..8001a55cbe0 100644
--- a/web/app/components/plugins/plugin-page/empty/index.tsx
+++ b/web/app/components/plugins/plugin-page/empty/index.tsx
@@ -256,7 +256,7 @@ const Empty = ({
                 {emptyText}
               </div>
             </div>
-            <div className="flex w-[236px] flex-col">
+            <div className="flex w-59 flex-col">
               <input
                 type="file"
                 ref={fileInputRef}
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 2b92c3b5d22..17bd1c929c2 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
@@ -67,7 +67,7 @@ const CategoriesFilter = ({ value, onChange }: CategoriesFilterProps) => {
         sideOffset={4}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
+        <div className="w-60 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
           <div className="p-2 pb-1">
             <Input
               showLeftIcon
@@ -80,7 +80,7 @@ const CategoriesFilter = ({ value, onChange }: CategoriesFilterProps) => {
             aria-label={t(($) => $.allCategories, { ns: 'plugin' })}
             value={value}
             onValueChange={(nextValue) => onChange(nextValue)}
-            className="max-h-[448px] overflow-y-auto p-1"
+            className="max-h-112 overflow-y-auto p-1"
           >
             {filteredOptions.map((option) => (
               <label
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 18849483bd7..4e2393633e9 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
@@ -67,7 +67,7 @@ const TagsFilter = ({ value, onChange }: TagsFilterProps) => {
         sideOffset={4}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
+        <div className="w-60 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
           <div className="p-2 pb-1">
             <SearchInput
               value={searchText}
@@ -79,7 +79,7 @@ const TagsFilter = ({ value, onChange }: TagsFilterProps) => {
             aria-label={t(($) => $.allTags, { ns: 'pluginTags' })}
             value={value}
             onValueChange={(nextValue) => onChange(nextValue)}
-            className="max-h-[448px] overflow-y-auto p-1"
+            className="max-h-112 overflow-y-auto p-1"
           >
             {filteredOptions.map((option) => (
               <label
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index e8f42c38b3e..1ab339e5c82 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -175,7 +175,7 @@ const PluginPage = ({ plugins, marketplace }: PluginPageProps) => {
     >
       <div
         className={cn(
-          'sticky top-0 z-10 flex min-h-[60px] items-center gap-1 self-stretch bg-components-panel-bg px-12 pt-4 pb-2',
+          'sticky top-0 z-10 flex min-h-15 items-center gap-1 self-stretch bg-components-panel-bg px-12 pt-4 pb-2',
           isExploringMarketplace && 'bg-background-body',
         )}
       >
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 028c6a4aa14..7373efed4b5 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -185,7 +185,7 @@ const InstallPluginDropdown = ({
         <DropdownMenuContent
           placement="bottom-start"
           sideOffset={4}
-          popupClassName={cn('w-[200px] pb-2', popupClassName)}
+          popupClassName={cn('w-50 pb-2', popupClassName)}
         >
           <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' })}
diff --git a/web/app/components/plugins/plugin-page/plugin-info.tsx b/web/app/components/plugins/plugin-page/plugin-info.tsx
index 1629d5b2b84..eac6bd74953 100644
--- a/web/app/components/plugins/plugin-page/plugin-info.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-info.tsx
@@ -24,7 +24,7 @@ const PlugInfo: FC<Props> = ({ repository, release, packageName, onHide }) => {
         if (!open) onHide()
       }}
     >
-      <DialogContent className="w-full max-w-[480px]! overflow-hidden! border-none text-left align-middle">
+      <DialogContent className="w-full max-w-120! overflow-hidden! border-none text-left align-middle">
         <DialogCloseButton />
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {t(($) => $[`${i18nPrefix}.title`], { ns: 'plugin' })}
diff --git a/web/app/components/plugins/plugin-page/plugin-sidecar-panel.tsx b/web/app/components/plugins/plugin-page/plugin-sidecar-panel.tsx
index 83fd3c87a14..b165e73252f 100644
--- a/web/app/components/plugins/plugin-page/plugin-sidecar-panel.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-sidecar-panel.tsx
@@ -15,7 +15,7 @@ export function PluginSidecarPanel({ children, footer, title }: PluginSidecarPan
   const { t } = useTranslation()
 
   return (
-    <div className="flex w-[360px] flex-col items-start overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
+    <div className="flex w-90 flex-col items-start overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
       <div className="relative flex w-full shrink-0 flex-col gap-0.5 px-3 pt-3.5 pb-1">
         <div className="flex w-full shrink-0 items-start">
           <div className="flex min-w-0 flex-1 flex-col items-start pr-8 pl-1">
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 d7d1efc59f4..3458b24975b 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
@@ -120,7 +120,7 @@ const ErrorPluginItem: FC<ErrorPluginItemProps> = ({ plugin, getIconUrl, languag
           </span>
         }
         statusText={
-          <span className="block max-w-full min-w-0 [overflow-wrap:anywhere] break-words whitespace-pre-wrap">
+          <span className="block max-w-full min-w-0 wrap-anywhere wrap-break-word whitespace-pre-wrap">
             {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 d303977a70f..ab4284d890a 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,12 +39,12 @@ const PluginItem: FC<PluginItemProps> = ({
         )}
         <div className="absolute -right-0.5 -bottom-0.5 z-10">{statusIcon}</div>
       </div>
-      <div className="flex min-w-0 flex-1 flex-col gap-0.5 px-1 [overflow-wrap:anywhere]">
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5 px-1 wrap-anywhere">
         <div className="truncate system-sm-medium text-text-secondary">
           {plugin.labels[language]}
         </div>
         <div
-          className={`max-w-full min-w-0 system-xs-regular [overflow-wrap:anywhere] wrap-break-word ${statusClassName || 'text-text-tertiary'}`}
+          className={`max-w-full min-w-0 system-xs-regular wrap-anywhere wrap-break-word ${statusClassName || 'text-text-tertiary'}`}
         >
           {statusText}
         </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 f2fb7ba83ef..11640e8de0c 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
@@ -33,11 +33,11 @@ function PluginTaskList({
 
   return (
     <div
-      className="w-[360px] max-w-[calc(100vw-32px)] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg"
+      className="w-90 max-w-[calc(100vw-32px)] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg"
       data-testid="plugin-task-list"
     >
       <ScrollArea
-        className="max-h-[420px] overflow-hidden"
+        className="max-h-105 overflow-hidden"
         label={t(($) => $['task.installing'], { ns: 'plugin' })}
         slotClassNames={{
           viewport: 'max-h-[420px] overscroll-contain',
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 6197cbd320c..acac3d89dda 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
@@ -143,7 +143,7 @@ const AutoUpdateSetting: FC<Props> = ({ payload, onChange }) => {
       return (
         <button
           type="button"
-          className="group flex h-8 w-[160px] cursor-pointer items-center justify-between rounded-lg border-none bg-components-input-bg-normal px-2 text-left hover:bg-state-base-hover-alt focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          className="group flex h-8 w-40 cursor-pointer items-center justify-between rounded-lg border-none bg-components-input-bg-normal px-2 text-left hover:bg-state-base-hover-alt focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
           onClick={onClick}
         >
           <div className="flex w-0 grow items-center gap-x-1">
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 05b8b0443f6..acb29a472db 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
@@ -28,7 +28,7 @@ const StrategyPicker = ({ value, onChange }: Props) => {
   return (
     <SegmentedControl<AUTO_UPDATE_STRATEGY>
       aria-label={t(($) => $['autoUpdate.automaticUpdates'], { ns: 'plugin' })}
-      className="w-[326px]"
+      className="w-81.5"
       value={[value]}
       onValueChange={(nextValue) => {
         const selectedValue = nextValue[0]
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
index 686a4740d12..23c0718df11 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
@@ -84,7 +84,7 @@ const ToolPicker: FC<Props> = ({
   }
 
   const listContent = (
-    <div className="max-h-[396px] overflow-y-auto p-1">
+    <div className="max-h-99 overflow-y-auto p-1">
       {filteredList.map((item) => (
         <ToolItem
           key={item.plugin_id}
@@ -97,12 +97,12 @@ const ToolPicker: FC<Props> = ({
   )
 
   const loadingContent = (
-    <div className="flex h-[396px] items-center justify-center">
+    <div className="flex h-99 items-center justify-center">
       <Loading />
     </div>
   )
 
-  const noData = <NoDataPlaceholder className="h-[396px]" noPlugins={!query} />
+  const noData = <NoDataPlaceholder className="h-99" noPlugins={!query} />
 
   const resolvedTrigger = React.isValidElement(trigger) ? trigger : <div>{trigger}</div>
 
@@ -114,7 +114,7 @@ const ToolPicker: FC<Props> = ({
         sideOffset={4}
         popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="relative min-h-20 w-[432px] max-w-[calc(100vw-32px)] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-xs">
+        <div className="relative min-h-20 w-108 max-w-[calc(100vw-32px)] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-xs">
           <div className="flex flex-col overflow-hidden rounded-t-lg border-b border-divider-subtle bg-background-section-burn">
             <div className="bg-components-panel-bg p-2">
               <SearchBox
diff --git a/web/app/components/plugins/update-plugin/from-market-place.tsx b/web/app/components/plugins/update-plugin/from-market-place.tsx
index cce8196f46a..698b8afc9b5 100644
--- a/web/app/components/plugins/update-plugin/from-market-place.tsx
+++ b/web/app/components/plugins/update-plugin/from-market-place.tsx
@@ -148,7 +148,7 @@ const UpdatePluginModal = ({
     <Dialog open onOpenChange={() => onCancel()}>
       <DialogContent
         backdropProps={{ forceRender: true }}
-        className={cn('min-w-[560px]', doShowDowngradeWarningModal && 'min-w-[640px]')}
+        className={cn('min-w-140', doShowDowngradeWarningModal && 'min-w-160')}
       >
         <DialogCloseButton />
         {doShowDowngradeWarningModal && (
diff --git a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
index ff2a28a7bc8..9afad71cce1 100644
--- a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
+++ b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
@@ -90,7 +90,7 @@ const PluginVersionPicker: FC<Props> = ({
         <div className="px-3 pt-1 pb-0.5 system-xs-medium-uppercase text-text-tertiary">
           {t(($) => $['detailPanel.switchVersion'], { ns: 'plugin' })}
         </div>
-        <div className="relative max-h-[224px] overflow-y-auto">
+        <div className="relative max-h-56 overflow-y-auto">
           {res?.data.versions.map((version) => (
             <div
               key={version.unique_identifier}
diff --git a/web/app/components/rag-pipeline/components/__tests__/publish-toast.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/publish-toast.spec.tsx
index 375a0dafee1..e76d7b50c71 100644
--- a/web/app/components/rag-pipeline/components/__tests__/publish-toast.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/publish-toast.spec.tsx
@@ -96,9 +96,7 @@ describe('PublishToast', () => {
     it('should have correct toast width', () => {
       render(<PublishToast />)
 
-      const toastContainer = screen
-        .getByText('pipeline.publishToast.title')
-        .closest('.w-\\[420px\\]')
+      const toastContainer = screen.getByText('pipeline.publishToast.title').closest('.w-105')
       expect(toastContainer).toBeInTheDocument()
     })
 
diff --git a/web/app/components/rag-pipeline/components/conversion.tsx b/web/app/components/rag-pipeline/components/conversion.tsx
index 40f9b6d48bf..b29a77dac9d 100644
--- a/web/app/components/rag-pipeline/components/conversion.tsx
+++ b/web/app/components/rag-pipeline/components/conversion.tsx
@@ -73,7 +73,7 @@ const Conversion = () => {
   return (
     <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 max-w-120 flex-col justify-between p-10">
           <div className="flex flex-col gap-y-2.5">
             <div className="title-4xl-semi-bold text-text-primary">
               {t(($) => $['conversion.title'], { ns: 'datasetPipeline' })}
@@ -101,7 +101,7 @@ const Conversion = () => {
             </span>
           </div>
         </div>
-        <div className="pt-6 pr-0 pb-8 pl-[25px]">
+        <div className="pt-6 pr-0 pb-8 pl-6.25">
           <div className="rounded-l-xl border border-effects-highlight bg-background-default p-1 shadow-md shadow-shadow-shadow-5 backdrop-blur-[5px]">
             <div className="overflow-hidden rounded-l-lg">
               <PipelineScreenShot />
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
index e8c5d889144..8456b314b2d 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
@@ -35,7 +35,7 @@ const InputFieldEditorPanel = ({ onClose, onSubmit, initialData }: InputFieldEdi
   return (
     <div
       className={cn(
-        'relative mr-1 flex h-fit max-h-full w-[400px] flex-col overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9',
+        'relative mr-1 flex h-fit max-h-full w-100 flex-col overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9',
         'transition-all duration-300 ease-in-out',
         floatingRight && 'absolute right-0 z-100',
       )}
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 ab8c2b6b397..d1a326c6053 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
@@ -62,7 +62,7 @@ const FieldItem = ({ readonly, payload, index, onClickEdit, onRemove }: FieldIte
         )}
         <div
           title={payload.variable}
-          className="max-w-[130px] shrink-0 truncate system-sm-medium text-text-secondary"
+          className="max-w-32.5 shrink-0 truncate system-sm-medium text-text-secondary"
         >
           {payload.variable}
         </div>
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
index a1544fbb702..9e0007f827f 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
@@ -99,7 +99,7 @@ const InputFieldPanel = () => {
   }, [ragPipelineVariables])
 
   return (
-    <div className="mr-1 flex h-full w-[400px] flex-col rounded-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg-alt shadow-xl shadow-shadow-shadow-5">
+    <div className="mr-1 flex h-full w-100 flex-col rounded-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg-alt shadow-xl shadow-shadow-shadow-5">
       <div className="flex shrink-0 items-center p-4 pb-0">
         <div className="grow system-xl-semibold text-text-primary">
           {t(($) => $['inputFieldPanel.title'], { ns: 'datasetPipeline' })}
@@ -115,7 +115,7 @@ const InputFieldPanel = () => {
           disabled={isEditing}
         >
           <RiEyeLine className="size-3.5" />
-          <span className="px-[3px]">
+          <span className="px-0.75">
             {t(($) => $['operations.preview'], { ns: 'datasetPipeline' })}
           </span>
         </Button>
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/index.tsx b/web/app/components/rag-pipeline/components/panel/test-run/index.tsx
index 122199c95aa..ff8a37d6f7c 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/index.tsx
@@ -8,7 +8,7 @@ const TestRunPanel = () => {
   const isPreparingDataSource = useStore((state) => state.isPreparingDataSource)
 
   return (
-    <div className="relative flex h-full w-[480px] flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-1">
+    <div className="relative flex h-full w-120 flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-1">
       <Header />
       {isPreparingDataSource ? (
         <DataSourceProvider>
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 a3928739a4f..b93b00a8090 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
@@ -58,7 +58,7 @@ const PublishAsKnowledgePipelineModal = ({
   return (
     <>
       <Dialog open>
-        <DialogContent className="w-full max-w-[480px]! overflow-hidden! border-none p-0! text-left align-middle">
+        <DialogContent className="w-full max-w-120! overflow-hidden! border-none p-0! text-left align-middle">
           <div className="relative flex items-center p-6 pr-14 pb-3 title-2xl-semi-bold text-text-primary">
             {t(($) => $['common.publishAs'], { ns: 'pipeline' })}
             <button
diff --git a/web/app/components/rag-pipeline/components/publish-toast.tsx b/web/app/components/rag-pipeline/components/publish-toast.tsx
index e22818d28a3..da73f927a0b 100644
--- a/web/app/components/rag-pipeline/components/publish-toast.tsx
+++ b/web/app/components/rag-pipeline/components/publish-toast.tsx
@@ -11,8 +11,8 @@ const PublishToast = () => {
   if (publishedAt || hideToast) return null
 
   return (
-    <div className="pointer-events-none absolute right-0 bottom-[45px] left-0 z-10 flex justify-center">
-      <div className="relative flex w-[420px] space-x-1 overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg">
+    <div className="pointer-events-none absolute right-0 bottom-11.25 left-0 z-10 flex justify-center">
+      <div className="relative flex w-105 space-x-1 overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg">
         <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 size-6 items-center justify-center">
           <RiInformation2Fill className="text-text-accent" />
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
index 1f424db1a38..dfe95376db3 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
@@ -933,7 +933,7 @@ describe('publisher', () => {
         const { container } = renderWithQueryClient(<Popup />)
 
         const popupDiv = container.firstChild as HTMLElement
-        expect(popupDiv.className).toContain('w-[360px]')
+        expect(popupDiv.className).toContain('w-90')
       })
 
       it('should display correct width when permission is not allowed', () => {
@@ -941,7 +941,7 @@ describe('publisher', () => {
         const { container } = renderWithQueryClient(<Popup />)
 
         const popupDiv = container.firstChild as HTMLElement
-        expect(popupDiv.className).toContain('w-[400px]')
+        expect(popupDiv.className).toContain('w-100')
       })
 
       it('should display draft updated time when not published', () => {
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 b414e3eb394..b79f675fcb0 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
@@ -215,7 +215,7 @@ export function Popup({
     <div
       className={cn(
         'rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5',
-        isAllowPublishAsCustomKnowledgePipelineTemplate ? 'w-[360px]' : 'w-[400px]',
+        isAllowPublishAsCustomKnowledgePipelineTemplate ? 'w-90' : 'w-100',
       )}
     >
       <div className="p-4 pt-3">
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 96b18647af1..7acdcccd8d2 100644
--- a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
+++ b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
@@ -37,18 +37,18 @@ const UpdateDSLModal = ({ onCancel, onBackup, onImport }: UpdateDSLModalProps) =
           if (!open) onCancel()
         }}
       >
-        <DialogContent className="w-full max-w-[480px]! overflow-hidden! rounded-2xl border-none p-6 text-left align-middle">
+        <DialogContent className="w-full max-w-120! overflow-hidden! rounded-2xl border-none p-6 text-left align-middle">
           <div className="mb-3 flex items-center justify-between">
             <div className="title-2xl-semi-bold text-text-primary">
               {t(($) => $['common.importDSL'], { ns: 'workflow' })}
             </div>
             <button
               type="button"
-              className="flex h-[22px] w-[22px] 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 h-5.5 w-5.5 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-[18px] w-[18px] text-text-tertiary" aria-hidden="true" />
+              <RiCloseLine className="h-4.5 w-4.5 text-text-tertiary" aria-hidden="true" />
             </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">
@@ -63,7 +63,7 @@ const UpdateDSLModal = ({ onCancel, onBackup, onImport }: UpdateDSLModalProps) =
               <div className="flex items-start gap-1 self-stretch pt-1 pb-0.5">
                 <Button size="small" variant="secondary" className="relative" onClick={onBackup}>
                   <RiFileDownloadLine className="size-3.5 text-components-button-secondary-text" />
-                  <div className="flex items-center justify-center gap-1 px-[3px]">
+                  <div className="flex items-center justify-center gap-1 px-0.75">
                     {t(($) => $['common.backupCurrentDraft'], { ns: 'workflow' })}
                   </div>
                 </Button>
diff --git a/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx b/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
index 7ac001cdb2c..aa30f516017 100644
--- a/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
+++ b/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
@@ -35,7 +35,7 @@ const VersionMismatchModal = ({
         if (!open) onClose()
       }}
     >
-      <AlertDialogContent className="w-[480px] max-w-none! overflow-hidden! border-none p-6 text-left align-middle shadow-xl">
+      <AlertDialogContent className="w-120 max-w-none! overflow-hidden! border-none p-6 text-left align-middle shadow-xl">
         <div className="flex flex-col items-start gap-2 self-stretch pb-4">
           <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
             {t(($) => $['newApp.appCreateDSLErrorTitle'], { ns: 'app' })}
diff --git a/web/app/components/share/text-generation/menu-dropdown.tsx b/web/app/components/share/text-generation/menu-dropdown.tsx
index 48c865b2c00..0b539e1efdd 100644
--- a/web/app/components/share/text-generation/menu-dropdown.tsx
+++ b/web/app/components/share/text-generation/menu-dropdown.tsx
@@ -52,7 +52,7 @@ const MenuDropdown: FC<Props> = ({ data, placement, hideLogout }) => {
         <DropdownMenuTrigger
           render={
             <ActionButton size="l" className="data-popup-open:bg-state-base-hover">
-              <span aria-hidden className="i-ri-equalizer-2-line h-[18px] w-[18px]" />
+              <span aria-hidden className="i-ri-equalizer-2-line h-4.5 w-4.5" />
             </ActionButton>
           }
           aria-label={t(($) => $['operation.more'], { ns: 'common' })}
diff --git a/web/app/components/share/text-generation/result/index.tsx b/web/app/components/share/text-generation/result/index.tsx
index d5b578ed0a1..5ceff69876e 100644
--- a/web/app/components/share/text-generation/result/index.tsx
+++ b/web/app/components/share/text-generation/result/index.tsx
@@ -119,9 +119,9 @@ const Result: FC<IResultProps> = ({
         <div className={`mb-3 flex ${isPC ? 'justify-end' : 'justify-center'}`}>
           <Button variant="secondary" disabled={runState.isStopping} onClick={runState.handleStop}>
             {runState.isStopping ? (
-              <span aria-hidden className="mr-[5px] i-ri-loader-2-line h-3.5 w-3.5 animate-spin" />
+              <span aria-hidden className="mr-1.25 i-ri-loader-2-line h-3.5 w-3.5 animate-spin" />
             ) : (
-              <span aria-hidden className="mr-[5px] i-ri-stop-circle-fill h-3.5 w-3.5" />
+              <span aria-hidden className="mr-1.25 i-ri-stop-circle-fill h-3.5 w-3.5" />
             )}
             <span className="text-xs font-normal">
               {t(($) => $['operation.stopResponding'], { ns: 'appDebug' })}
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 6eed9d6dfc7..5947d76dc31 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
@@ -26,7 +26,7 @@ const CSVDownload: FC<ICSVDownloadProps> = ({ vars }) => {
       <div className="system-sm-medium text-text-primary">
         {t(($) => $['generation.csvStructureTitle'], { ns: 'share' })}
       </div>
-      <div className="mt-2 max-h-[500px] overflow-auto">
+      <div className="mt-2 max-h-125 overflow-auto">
         <table className="w-full table-fixed border-separate border-spacing-0 rounded-lg border border-divider-regular text-xs">
           <thead className="text-text-tertiary">
             <tr>
@@ -58,7 +58,7 @@ const CSVDownload: FC<ICSVDownloadProps> = ({ vars }) => {
         }}
         data={[template]}
       >
-        <div className="flex h-[18px] items-center space-x-1 system-xs-medium text-text-accent">
+        <div className="flex h-4.5 items-center space-x-1 system-xs-medium text-text-accent">
           <DownloadIcon className="size-3" />
           <span>{t(($) => $['generation.downloadTemplate'], { ns: 'share' })}</span>
         </div>
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 1166f34d8b6..5223fbe9324 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -181,7 +181,7 @@ const RunOnce: FC<IRunOnceProps> = ({
                         {item.type === 'paragraph' && (
                           <Textarea
                             aria-label={item.name}
-                            className="h-[104px] sm:text-xs"
+                            className="h-26 sm:text-xs"
                             placeholder={item.name}
                             value={inputs[item.key] as string}
                             onValueChange={(value) => {
@@ -255,7 +255,7 @@ const RunOnce: FC<IRunOnceProps> = ({
                               handleInputsChange({ ...inputsRef.current, [item.key]: value })
                             }}
                             noWrapper
-                            className="bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
+                            className="bg h-20 overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
                             placeholder={
                               <div className="whitespace-pre">
                                 {typeof item.json_schema === 'string'
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 a5ca4443f74..226cea1a341 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
@@ -125,7 +125,7 @@ const TextGenerationResultPanel: FC<TextGenerationResultPanelProps> = ({
           className={cn(
             isShowResultPanel
               ? 'flex items-center justify-center p-2 pt-6'
-              : 'absolute top-0 left-0 z-10 flex w-full items-center justify-center px-2 pt-[3px] pb-[57px]',
+              : 'absolute top-0 left-0 z-10 flex w-full items-center justify-center px-2 pt-0.75 pb-14.25',
           )}
           onClick={() => {
             if (isShowResultPanel) onHideResultPanel()
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 d5fa0831f8d..d343a327ed4 100644
--- a/web/app/components/share/text-generation/text-generation-sidebar.tsx
+++ b/web/app/components/share/text-generation/text-generation-sidebar.tsx
@@ -83,7 +83,7 @@ const TextGenerationSidebar: FC<TextGenerationSidebarProps> = ({
       onValueChange={onTabChange}
       className={cn(
         'relative flex h-full shrink-0 flex-col',
-        isPC ? 'w-[600px] max-w-[50%]' : resultExisted ? 'h-[calc(100%-64px)]' : '',
+        isPC ? 'w-150 max-w-[50%]' : resultExisted ? 'h-[calc(100%-64px)]' : '',
         isInstalledApp && 'rounded-l-2xl',
       )}
     >
@@ -114,7 +114,7 @@ const TextGenerationSidebar: FC<TextGenerationSidebarProps> = ({
             <div
               ref={handleDescRef}
               className={cn(
-                'relative system-xs-regular break-words whitespace-pre-wrap text-text-tertiary',
+                'relative system-xs-regular wrap-break-word whitespace-pre-wrap text-text-tertiary',
                 !descExpanded && 'line-clamp-3',
                 descExpanded && 'max-h-32 overflow-y-auto',
               )}
diff --git a/web/app/components/snippets/components/snippet-run-panel.tsx b/web/app/components/snippets/components/snippet-run-panel.tsx
index 718a4e6c28c..f79bbb0b785 100644
--- a/web/app/components/snippets/components/snippet-run-panel.tsx
+++ b/web/app/components/snippets/components/snippet-run-panel.tsx
@@ -148,7 +148,7 @@ const SnippetRunPanel = ({ fields }: SnippetRunPanelProps) => {
       style={{ width: `${panelWidth}px` }}
     >
       <div
-        className="absolute top-1/2 bottom-0 left-[3px] z-50 h-6 w-[3px] cursor-col-resize rounded bg-gray-300"
+        className="absolute top-1/2 bottom-0 left-0.75 z-50 h-6 w-0.75 cursor-col-resize rounded bg-gray-300"
         onMouseDown={startResizing}
       />
       <div className="flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
@@ -161,33 +161,33 @@ const SnippetRunPanel = ({ fields }: SnippetRunPanelProps) => {
         <div className="flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4">
           {hasInputTab && (
             <div
-              className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] leading-[18px] font-semibold ${currentTab === 'INPUT' ? '!border-[rgb(21,94,239)] text-text-secondary' : 'border-transparent text-text-tertiary'}`}
+              className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] leading-4.5 font-semibold ${currentTab === 'INPUT' ? 'border-[rgb(21,94,239)]! text-text-secondary' : 'border-transparent text-text-tertiary'}`}
               onClick={() => setSelectedTab('INPUT')}
             >
               {t(($) => $.input, { ns: 'runLog' })}
             </div>
           )}
           <div
-            className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] leading-[18px] font-semibold ${currentTab === 'RESULT' ? '!border-[rgb(21,94,239)] text-text-secondary' : 'border-transparent text-text-tertiary'} ${!workflowRunningData ? '!cursor-not-allowed opacity-30' : ''}`}
+            className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] leading-4.5 font-semibold ${currentTab === 'RESULT' ? 'border-[rgb(21,94,239)]! text-text-secondary' : 'border-transparent text-text-tertiary'} ${!workflowRunningData ? 'cursor-not-allowed! opacity-30' : ''}`}
             onClick={() => workflowRunningData && setSelectedTab('RESULT')}
           >
             {t(($) => $.result, { ns: 'runLog' })}
           </div>
           <div
-            className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] leading-[18px] font-semibold ${currentTab === 'DETAIL' ? '!border-[rgb(21,94,239)] text-text-secondary' : 'border-transparent text-text-tertiary'} ${!workflowRunningData ? '!cursor-not-allowed opacity-30' : ''}`}
+            className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] leading-4.5 font-semibold ${currentTab === 'DETAIL' ? 'border-[rgb(21,94,239)]! text-text-secondary' : 'border-transparent text-text-tertiary'} ${!workflowRunningData ? 'cursor-not-allowed! opacity-30' : ''}`}
             onClick={() => workflowRunningData && setSelectedTab('DETAIL')}
           >
             {t(($) => $.detail, { ns: 'runLog' })}
           </div>
           <div
-            className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] leading-[18px] font-semibold ${currentTab === 'TRACING' ? '!border-[rgb(21,94,239)] text-text-secondary' : 'border-transparent text-text-tertiary'} ${!workflowRunningData ? '!cursor-not-allowed opacity-30' : ''}`}
+            className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] leading-4.5 font-semibold ${currentTab === 'TRACING' ? 'border-[rgb(21,94,239)]! text-text-secondary' : 'border-transparent text-text-tertiary'} ${!workflowRunningData ? 'cursor-not-allowed! opacity-30' : ''}`}
             onClick={() => workflowRunningData && setSelectedTab('TRACING')}
           >
             {t(($) => $.tracing, { ns: 'runLog' })}
           </div>
         </div>
         <div
-          className={`h-0 grow overflow-y-auto rounded-b-2xl ${currentTab === 'RESULT' || currentTab === 'TRACING' ? '!bg-background-section-burn' : 'bg-components-panel-bg'}`}
+          className={`h-0 grow overflow-y-auto rounded-b-2xl ${currentTab === 'RESULT' || currentTab === 'TRACING' ? 'bg-background-section-burn!' : 'bg-components-panel-bg'}`}
         >
           {currentTab === 'INPUT' && hasInputTab && (
             <>
@@ -196,7 +196,7 @@ const SnippetRunPanel = ({ fields }: SnippetRunPanelProps) => {
                   <div key={field.variable} className="mb-2 last-of-type:mb-0">
                     <FormItem
                       autoFocus={index === 0}
-                      className="!block"
+                      className="block!"
                       payload={field}
                       value={inputs[field.variable]}
                       onChange={(value) => handleValueChange(field.variable, value)}
@@ -277,7 +277,7 @@ const SnippetRunPanel = ({ fields }: SnippetRunPanelProps) => {
             />
           )}
           {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
-            <div className="flex h-full items-center justify-center !bg-background-section-burn">
+            <div className="flex h-full items-center justify-center bg-background-section-burn!">
               <Loading />
             </div>
           )}
diff --git a/web/app/components/step-by-step-tour/coachmark.tsx b/web/app/components/step-by-step-tour/coachmark.tsx
index cbcd84ef20a..69a411b585d 100644
--- a/web/app/components/step-by-step-tour/coachmark.tsx
+++ b/web/app/components/step-by-step-tour/coachmark.tsx
@@ -278,7 +278,7 @@ export function StepByStepTourCoachmark({
           />
           <div
             ref={coachmarkRef}
-            className="fixed z-50 w-[352px] max-w-[calc(100vw-16px)]"
+            className="fixed z-50 w-88 max-w-[calc(100vw-16px)]"
             data-step-by-step-tour-coachmark=""
             style={stableOverlay.coachmarkPosition.bubbleStyle}
           >
@@ -313,7 +313,7 @@ export function StepByStepTourCoachmark({
               }
               className={cn(
                 'relative flex w-full flex-col rounded-2xl border-[0.5px] border-state-accent-hover-alt bg-state-accent-hover p-4 shadow-[0_20px_24px_-4px_var(--color-shadow-shadow-5),0_8px_8px_-4px_var(--color-shadow-shadow-1)] backdrop-blur-[5px]',
-                isActionGuide ? 'min-h-[118px]' : 'min-h-[158px]',
+                isActionGuide ? 'min-h-29.5' : 'min-h-39.5',
               )}
             >
               {isActionGuide ? (
diff --git a/web/app/components/step-by-step-tour/floating-widget.tsx b/web/app/components/step-by-step-tour/floating-widget.tsx
index 7d050b65227..142ef3b1837 100644
--- a/web/app/components/step-by-step-tour/floating-widget.tsx
+++ b/web/app/components/step-by-step-tour/floating-widget.tsx
@@ -186,13 +186,13 @@ function MinimizedTourPill({
       type="button"
       aria-label={restoreLabel}
       className={cn(
-        'inline-flex h-8 w-[183px] max-w-[calc(100vw-16px)] items-center gap-2 overflow-hidden rounded-full border-[0.5px] border-components-panel-border bg-background-section px-3 py-2 text-saas-dify-blue-inverted outline-hidden transition-colors hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid',
+        'inline-flex h-8 w-45.75 max-w-[calc(100vw-16px)] items-center gap-2 overflow-hidden rounded-full border-[0.5px] border-components-panel-border bg-background-section px-3 py-2 text-saas-dify-blue-inverted outline-hidden transition-colors hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid',
         className,
       )}
       onClick={onRestore}
     >
       <span aria-hidden className="i-custom-vender-line-education-lesson-open-01 size-4 shrink-0" />
-      <span className="w-[104px] shrink-0 truncate system-sm-medium">{title}</span>
+      <span className="w-26 shrink-0 truncate system-sm-medium">{title}</span>
       <span className="flex min-w-4 shrink-0 items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 system-2xs-medium-uppercase text-text-tertiary tabular-nums">
         {`${progress.completed}/${progress.total}`}
       </span>
@@ -292,7 +292,7 @@ function TourTaskRow({
                 <Button
                   variant="secondary"
                   size="small"
-                  className="min-w-[83px]"
+                  className="min-w-20.75"
                   disabled={disabled}
                   onClick={() => onStartTask(task.id)}
                 >
@@ -303,7 +303,7 @@ function TourTaskRow({
                     href={task.learnMoreHref}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex h-6 min-w-[98px] items-center justify-center gap-1 rounded-md px-2 system-xs-medium text-text-tertiary outline-hidden hover:bg-components-button-ghost-bg-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
+                    className="inline-flex h-6 min-w-24.5 items-center justify-center gap-1 rounded-md px-2 system-xs-medium text-text-tertiary outline-hidden hover:bg-components-button-ghost-bg-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
                   >
                     {task.learnMoreLabel}
                     <span aria-hidden className="i-ri-arrow-right-up-line size-3.5" />
@@ -347,7 +347,7 @@ function TaskStatusIndicator({
         type="button"
         aria-label={incompleteLabel}
         disabled={disabled}
-        className="flex size-[18px] shrink-0 items-center justify-center rounded-full bg-saas-dify-blue-accessible text-text-primary-on-surface outline-hidden hover:bg-saas-dify-blue-inverted focus-visible:ring-2 focus-visible:ring-state-accent-solid disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-saas-dify-blue-accessible"
+        className="flex size-4.5 shrink-0 items-center justify-center rounded-full bg-saas-dify-blue-accessible text-text-primary-on-surface outline-hidden hover:bg-saas-dify-blue-inverted focus-visible:ring-2 focus-visible:ring-state-accent-solid disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-saas-dify-blue-accessible"
         onClick={onUncomplete}
       >
         <span aria-hidden className="i-ri-check-line size-3" />
@@ -360,7 +360,7 @@ function TaskStatusIndicator({
       type="button"
       aria-label={completeLabel}
       disabled={disabled}
-      className="flex size-[18px] shrink-0 items-center justify-center rounded-full border border-components-checkbox-border bg-components-checkbox-bg-unchecked outline-hidden hover:border-state-accent-solid focus-visible:ring-2 focus-visible:ring-state-accent-solid disabled:cursor-not-allowed disabled:hover:border-components-checkbox-border"
+      className="flex size-4.5 shrink-0 items-center justify-center rounded-full border border-components-checkbox-border bg-components-checkbox-bg-unchecked outline-hidden hover:border-state-accent-solid focus-visible:ring-2 focus-visible:ring-state-accent-solid disabled:cursor-not-allowed disabled:hover:border-components-checkbox-border"
       onClick={onComplete}
     />
   )
diff --git a/web/app/components/step-by-step-tour/mount.tsx b/web/app/components/step-by-step-tour/mount.tsx
index e173c1e7997..097a0a53101 100644
--- a/web/app/components/step-by-step-tour/mount.tsx
+++ b/web/app/components/step-by-step-tour/mount.tsx
@@ -789,7 +789,7 @@ function SkipRecoveryPrompt({
   return (
     <section
       aria-label={label}
-      className="fixed bottom-[76px] left-1.5 z-50 flex w-[260px] max-w-[calc(100vw-12px)] flex-col gap-1 rounded-2xl border-[0.5px] border-state-accent-hover-alt bg-state-accent-hover p-4 shadow-[0_20px_24px_-4px_var(--color-shadow-shadow-5),0_8px_8px_-4px_var(--color-shadow-shadow-1)] backdrop-blur-[10px]"
+      className="fixed bottom-19 left-1.5 z-50 flex w-65 max-w-[calc(100vw-12px)] flex-col gap-1 rounded-2xl border-[0.5px] border-state-accent-hover-alt bg-state-accent-hover p-4 shadow-[0_20px_24px_-4px_var(--color-shadow-shadow-5),0_8px_8px_-4px_var(--color-shadow-shadow-1)] backdrop-blur-[10px]"
     >
       <p className="system-sm-regular text-text-secondary">{message}</p>
       <div className="flex h-12 items-end justify-end pt-4">
@@ -805,11 +805,11 @@ function SkipRecoveryPrompt({
       </div>
       <span
         aria-hidden
-        className="absolute top-full left-[214px] h-7 w-0.5 bg-state-accent-hover-alt"
+        className="absolute top-full left-53.5 h-7 w-0.5 bg-state-accent-hover-alt"
       />
       <span
         aria-hidden
-        className="absolute top-[calc(100%+22px)] left-[209px] size-3 rounded-full border-2 border-state-accent-hover bg-state-accent-solid shadow-xs"
+        className="absolute top-[calc(100%+22px)] left-52.25 size-3 rounded-full border-2 border-state-accent-hover bg-state-accent-solid shadow-xs"
       />
     </section>
   )
diff --git a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
index d2e906f939b..9fcc1d0458a 100644
--- a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
@@ -43,7 +43,7 @@ const GetSchema: FC<Props> = ({ onChange }) => {
   const [showExamples, setShowExamples] = useState(false)
 
   return (
-    <div className="flex w-[224px] justify-end gap-1">
+    <div className="flex w-56 justify-end gap-1">
       <DropdownMenu open={showImportFromUrl} onOpenChange={setShowImportFromUrl}>
         <DropdownMenuTrigger render={<Button size="small" className="gap-1" />}>
           <span className="i-ri-add-line size-3" aria-hidden />
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 7332420849a..6008defc427 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -283,7 +283,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                               href="https://swagger.io/specification/"
                               target="_blank"
                               rel="noopener noreferrer"
-                              className="flex h-[18px] items-center space-x-1 text-text-accent"
+                              className="flex h-4.5 items-center space-x-1 text-text-accent"
                             >
                               <div className="text-xs font-normal">
                                 {t(($) => $['createTool.viewSchemaSpec'], { ns: 'tools' })}
@@ -295,7 +295,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                         </div>
                         <Textarea
                           aria-label={t(($) => $['createTool.schema'], { ns: 'tools' })}
-                          className="h-[240px] resize-none"
+                          className="h-60 resize-none"
                           value={schema}
                           onValueChange={(value) => setSchema(value)}
                           placeholder={t(($) => $['createTool.schemaPlaceHolder'], {
@@ -321,7 +321,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                                 <th className="p-2 pl-3 font-medium">
                                   {t(($) => $['createTool.availableTools.name'], { ns: 'tools' })}
                                 </th>
-                                <th className="w-[236px] p-2 pl-3 font-medium">
+                                <th className="w-59 p-2 pl-3 font-medium">
                                   {t(($) => $['createTool.availableTools.description'], {
                                     ns: 'tools',
                                   })}
@@ -332,7 +332,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                                 <th className="p-2 pl-3 font-medium">
                                   {t(($) => $['createTool.availableTools.path'], { ns: 'tools' })}
                                 </th>
-                                <th className="w-[54px] p-2 pl-3 font-medium">
+                                <th className="w-13.5 p-2 pl-3 font-medium">
                                   {t(($) => $['createTool.availableTools.action'], { ns: 'tools' })}
                                 </th>
                               </tr>
@@ -344,10 +344,10 @@ const EditCustomCollectionModal: FC<Props> = ({
                                   className="border-b border-divider-regular last:border-0"
                                 >
                                   <td className="p-2 pl-3">{item.operation_id}</td>
-                                  <td className="w-[236px] p-2 pl-3">{item.summary}</td>
+                                  <td className="w-59 p-2 pl-3">{item.summary}</td>
                                   <td className="p-2 pl-3">{item.method}</td>
                                   <td className="p-2 pl-3">{getPath(item.server_url)}</td>
-                                  <td className="w-[62px] p-2 pl-3">
+                                  <td className="w-15.5 p-2 pl-3">
                                     <Button
                                       size="small"
                                       onClick={() => {
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 169bc02a403..260c84671c4 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
@@ -182,7 +182,7 @@ const TestApi: FC<Props> = ({ positionCenter, customCollection, tool, onHide })
                       </div>
                       <div className="bg-[rgb(243, 244, 246)] h-px w-0 grow"></div>
                     </div>
-                    <div className="mt-2 h-[200px] overflow-x-hidden overflow-y-auto rounded-lg bg-components-input-bg-normal px-3 py-2 system-xs-regular text-text-secondary">
+                    <div className="mt-2 h-50 overflow-x-hidden overflow-y-auto rounded-lg bg-components-input-bg-normal px-3 py-2 system-xs-regular text-text-secondary">
                       {result || (
                         <span className="text-text-quaternary">
                           {t(($) => $['test.testResultPlaceholder'], { ns: 'tools' })}
diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx
index 17fcb9b99b0..6b55a9727c1 100644
--- a/web/app/components/tools/labels/filter.tsx
+++ b/web/app/components/tools/labels/filter.tsx
@@ -89,7 +89,7 @@ const LabelFilter: FC<LabelFilterProps> = ({ value, onChange }) => {
                 <button
                   key={label.name}
                   type="button"
-                  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"
+                  className="flex w-full items-center gap-2 rounded-lg border-none bg-transparent py-1.5 pr-2 pl-3 text-left select-none hover:bg-state-base-hover"
                   onClick={() => selectLabel(label)}
                 >
                   <div className="grow truncate text-sm/5 text-text-secondary">{label.label}</div>
@@ -101,7 +101,7 @@ const LabelFilter: FC<LabelFilterProps> = ({ value, onChange }) => {
               {!filteredLabelList.length && (
                 <div className="flex flex-col items-center gap-1 p-3">
                   <Tag03 className="size-6 text-text-quaternary" />
-                  <div className="text-xs leading-[14px] text-text-tertiary">
+                  <div className="text-xs leading-3.5 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 258a7fd202a..5f910f1aac5 100644
--- a/web/app/components/tools/labels/selector.tsx
+++ b/web/app/components/tools/labels/selector.tsx
@@ -64,7 +64,7 @@ function LabelSelector({ value, onChange }: LabelSelectorProps) {
           sideOffset={4}
           popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
         >
-          <div className="relative w-[591px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
+          <div className="relative w-147.75 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
             <div className="border-b-[0.5px] border-divider-regular p-2">
               <Input
                 showLeftIcon
@@ -78,12 +78,12 @@ function LabelSelector({ value, onChange }: LabelSelectorProps) {
               aria-label={t(($) => $['createTool.toolInput.labelPlaceholder'], { ns: 'tools' })}
               value={value}
               onValueChange={(nextValue) => onChange(nextValue)}
-              className="max-h-[264px] overflow-y-auto p-1"
+              className="max-h-66 overflow-y-auto p-1"
             >
               {filteredLabelList.map((label) => (
                 <label
                   key={label.name}
-                  className="flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pr-2 pl-3 hover:bg-components-panel-on-panel-item-bg-hover"
+                  className="flex cursor-pointer items-center gap-2 rounded-lg py-1.5 pr-2 pl-3 hover:bg-components-panel-on-panel-item-bg-hover"
                 >
                   <Checkbox className="shrink-0" value={label.name} />
                   <div className="grow truncate text-sm/5 text-text-secondary">{label.label}</div>
@@ -92,7 +92,7 @@ function LabelSelector({ value, onChange }: LabelSelectorProps) {
               {!filteredLabelList.length && (
                 <div className="flex flex-col items-center gap-1 p-3">
                   <Tag03 className="size-6 text-text-quaternary" />
-                  <div className="text-xs leading-[14px] text-text-tertiary">
+                  <div className="text-xs leading-3.5 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 586ef208c63..19629089e66 100644
--- a/web/app/components/tools/marketplace/index.tsx
+++ b/web/app/components/tools/marketplace/index.tsx
@@ -51,7 +51,7 @@ const Marketplace = ({
 
   return (
     <>
-      <div className="sticky bottom-0 flex shrink-0 flex-col bg-background-default-subtle pt-2 pb-[14px]">
+      <div className="sticky bottom-0 flex shrink-0 flex-col bg-background-default-subtle pt-2 pb-3.5">
         {isMarketplaceArrowVisible && (
           <RiArrowUpDoubleLine
             className="absolute top-2 left-1/2 z-10 size-4 -translate-x-1/2 cursor-pointer text-text-quaternary"
@@ -108,7 +108,7 @@ const Marketplace = ({
           </div>
         </div>
       </div>
-      <div className="mt-[-14px] shrink-0 grow bg-background-default-subtle pb-2">
+      <div className="-mt-3.5 shrink-0 grow bg-background-default-subtle pb-2">
         {isLoading && page === 1 && (
           <div className="absolute top-1/2 left-1/2 -translate-1/2">
             <Loading />
diff --git a/web/app/components/tools/mcp/detail/list-loading.tsx b/web/app/components/tools/mcp/detail/list-loading.tsx
index 841846326d9..4ea1e58e340 100644
--- a/web/app/components/tools/mcp/detail/list-loading.tsx
+++ b/web/app/components/tools/mcp/detail/list-loading.tsx
@@ -6,27 +6,27 @@ const ListLoading = () => {
   return (
     <div className={cn('space-y-2')}>
       <div className="space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4">
-        <div className="h-2 w-[180px] rounded-xs bg-text-quaternary opacity-20"></div>
+        <div className="h-2 w-45 rounded-xs bg-text-quaternary opacity-20"></div>
         <div className="h-2 rounded-xs bg-text-quaternary opacity-10"></div>
         <div className="mr-10 h-2 rounded-xs bg-text-quaternary opacity-10"></div>
       </div>
       <div className="space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4">
-        <div className="h-2 w-[148px] rounded-xs bg-text-quaternary opacity-20"></div>
+        <div className="h-2 w-37 rounded-xs bg-text-quaternary opacity-20"></div>
         <div className="h-2 rounded-xs bg-text-quaternary opacity-10"></div>
         <div className="mr-10 h-2 rounded-xs bg-text-quaternary opacity-10"></div>
       </div>
       <div className="space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4">
-        <div className="h-2 w-[196px] rounded-xs bg-text-quaternary opacity-20"></div>
+        <div className="h-2 w-49 rounded-xs bg-text-quaternary opacity-20"></div>
         <div className="h-2 rounded-xs bg-text-quaternary opacity-10"></div>
         <div className="mr-10 h-2 rounded-xs bg-text-quaternary opacity-10"></div>
       </div>
       <div className="space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4">
-        <div className="h-2 w-[148px] rounded-xs bg-text-quaternary opacity-20"></div>
+        <div className="h-2 w-37 rounded-xs bg-text-quaternary opacity-20"></div>
         <div className="h-2 rounded-xs bg-text-quaternary opacity-10"></div>
         <div className="mr-10 h-2 rounded-xs bg-text-quaternary opacity-10"></div>
       </div>
       <div className="space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4">
-        <div className="h-2 w-[180px] rounded-xs bg-text-quaternary opacity-20"></div>
+        <div className="h-2 w-45 rounded-xs bg-text-quaternary opacity-20"></div>
         <div className="h-2 rounded-xs bg-text-quaternary opacity-10"></div>
         <div className="mr-10 h-2 rounded-xs bg-text-quaternary opacity-10"></div>
       </div>
diff --git a/web/app/components/tools/mcp/detail/provider-detail.tsx b/web/app/components/tools/mcp/detail/provider-detail.tsx
index d9c15e80b6c..9e0ba7c6eab 100644
--- a/web/app/components/tools/mcp/detail/provider-detail.tsx
+++ b/web/app/components/tools/mcp/detail/provider-detail.tsx
@@ -49,7 +49,7 @@ const MCPDetailPanel: FC<Props> = ({
         <DrawerViewport>
           <DrawerPopup
             className={cn(
-              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-[400px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
+              'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-100 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
             )}
           >
             <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx
index 74fc666337a..cc9b71e6fc3 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -119,7 +119,7 @@ const MCPServerModal = ({ appID, latestParams = [], data, show, onHide, appInfo
         if (!open) onHide()
       }}
     >
-      <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] max-w-[520px]! flex-col overflow-hidden! border-none p-0! text-left align-middle transition-all duration-100 ease-in">
+      <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] max-w-130! flex-col overflow-hidden! border-none p-0! text-left align-middle transition-all duration-100 ease-in">
         <button
           type="button"
           aria-label={t(($) => $['operation.close'], { ns: 'common' })}
@@ -144,7 +144,7 @@ const MCPServerModal = ({ appID, latestParams = [], data, show, onHide, appInfo
               </div>
               <Textarea
                 aria-label={t(($) => $['mcp.server.modal.description'], { ns: 'tools' })}
-                className="h-[96px] resize-none"
+                className="h-24 resize-none"
                 value={description}
                 placeholder={t(($) => $['mcp.server.modal.descriptionPlaceholder'], {
                   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 8e33d0f423b..52299de9aad 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -418,7 +418,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
               >
                 <div className="flex items-center justify-center gap-px">
                   <span className="i-ri-edit-line size-3.5" />
-                  <div className="px-[3px] system-xs-medium text-text-tertiary">
+                  <div className="px-0.75 system-xs-medium text-text-tertiary">
                     {serverPublished
                       ? t(($) => $['mcp.server.edit'], { ns: 'tools' })
                       : t(($) => $['mcp.server.addDescription'], { ns: 'tools' })}
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 9ee1cffe801..4e48f90918d 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -356,7 +356,7 @@ const MCPModal: FC<DuplicateAppModalProps> = ({ data, show, onConfirm, onHide })
 
   return (
     <Dialog open={show}>
-      <DialogContent className="w-full max-w-[520px]! border-none p-6 text-left align-middle">
+      <DialogContent className="w-full max-w-130! border-none p-6 text-left align-middle">
         <MCPModalContent key={formKey} data={data} onConfirm={onConfirm} onHide={onHide} />
       </DialogContent>
     </Dialog>
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 98b319224b0..9bad35fb320 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
@@ -130,7 +130,7 @@ describe('CustomCreateCard', () => {
       const card = screen.getByText('tools.createSwaggerAPIAsTool').closest('.col-span-1')
       expect(card).toBeInTheDocument()
       expect(card).toHaveClass(
-        'h-[120px]',
+        'h-30',
         'border-[0.5px]',
         'border-components-panel-border',
         'shadow-md',
diff --git a/web/app/components/tools/provider/__tests__/detail.spec.tsx b/web/app/components/tools/provider/__tests__/detail.spec.tsx
index d0a06a985ac..b558a7d3ffc 100644
--- a/web/app/components/tools/provider/__tests__/detail.spec.tsx
+++ b/web/app/components/tools/provider/__tests__/detail.spec.tsx
@@ -274,7 +274,7 @@ describe('ProviderDetail', () => {
         'data-[swipe-direction=right]:right-2',
         'data-[swipe-direction=right]:bottom-2',
         'data-[swipe-direction=right]:h-[calc(100dvh-16px)]',
-        'data-[swipe-direction=right]:w-[400px]',
+        'data-[swipe-direction=right]:w-100',
         'data-[swipe-direction=right]:max-w-[calc(100vw-1rem)]',
       )
       expect(dialog).not.toHaveClass(
diff --git a/web/app/components/tools/provider/create-entry-card.tsx b/web/app/components/tools/provider/create-entry-card.tsx
index 8892acd4fc0..07c879ba077 100644
--- a/web/app/components/tools/provider/create-entry-card.tsx
+++ b/web/app/components/tools/provider/create-entry-card.tsx
@@ -23,7 +23,7 @@ const CreateEntryCard = ({
     <div
       data-step-by-step-tour-target={stepByStepTourTarget}
       className={cn(
-        'col-span-1 flex h-[120px] flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-md',
+        'col-span-1 flex h-30 flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-md',
         className,
       )}
     >
@@ -31,7 +31,7 @@ const CreateEntryCard = ({
         type="button"
         aria-label={title}
         title={title}
-        className="group flex h-[84px] w-full cursor-pointer items-center gap-3 p-4 text-left outline-hidden hover:bg-components-panel-on-panel-item-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
+        className="group flex h-21 w-full cursor-pointer items-center gap-3 p-4 text-left outline-hidden hover:bg-components-panel-on-panel-item-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
         onClick={onCreate}
       >
         <div className="flex size-10 shrink-0 items-center justify-center">
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index 6d0e0914f88..28303b58124 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -265,7 +265,7 @@ const ProviderDetail = ({ collection, onHide, onRefreshData }: Props) => {
         <DrawerViewport className="pointer-events-none">
           <DrawerPopup
             className={cn(
-              'pointer-events-auto touch-auto justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-[400px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
+              'pointer-events-auto touch-auto justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-100 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
             )}
           >
             <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
@@ -366,7 +366,7 @@ const ProviderDetail = ({ collection, onHide, onRefreshData }: Props) => {
                 </div>
                 <div className="flex min-h-0 flex-1 flex-col pt-3">
                   {isDetailLoading && (
-                    <div className="flex h-[200px]">
+                    <div className="flex h-50">
                       <Loading type="app" />
                     </div>
                   )}
diff --git a/web/app/components/tools/provider/empty.tsx b/web/app/components/tools/provider/empty.tsx
index 502be93d011..9cb4b76d367 100644
--- a/web/app/components/tools/provider/empty.tsx
+++ b/web/app/components/tools/provider/empty.tsx
@@ -42,7 +42,7 @@ const Empty = ({ type, isAgent }: Props) => {
     t(($) => $[`addToolModal.${renderType}.title`], { ns: 'tools' }) !==
       `addToolModal.${renderType}.title`
   const tipClassName = cn(
-    'flex items-center text-[13px] leading-[18px] text-text-tertiary',
+    'flex items-center text-[13px] leading-4.5 text-text-tertiary',
     hasLink && 'cursor-pointer hover:text-text-accent',
   )
   const tipContent = renderType && (
@@ -54,8 +54,8 @@ const Empty = ({ type, isAgent }: Props) => {
 
   if (!isAgent && type === ToolType.Workflow) {
     return (
-      <div className="flex w-full max-w-[1060px] flex-col items-center gap-8 text-center">
-        <div className="flex w-full max-w-[739px] flex-col items-center gap-1">
+      <div className="flex w-full max-w-265 flex-col items-center gap-8 text-center">
+        <div className="flex w-full max-w-184.75 flex-col items-center gap-1">
           <div className="text-[24px] font-semibold text-text-primary">
             {t(($) => $['workflowToolEmpty.title'], { ns: 'tools' })}
           </div>
@@ -68,7 +68,7 @@ const Empty = ({ type, isAgent }: Props) => {
             {workflowToolStepKeys.map((stepKey, index) => (
               <div
                 key={stepKey}
-                className="grid min-h-[140px] grid-rows-[24px_1fr] gap-3 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg px-8 py-6 shadow-xs"
+                className="grid min-h-35 grid-rows-[24px_1fr] gap-3 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg px-8 py-6 shadow-xs"
               >
                 <div className="flex items-center gap-3">
                   <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-state-base-hover text-[15px] font-semibold text-text-secondary">
@@ -96,7 +96,7 @@ const Empty = ({ type, isAgent }: Props) => {
           href={docLink('/use-dify/workspace/tools#workflow')}
           target="_blank"
           rel="noreferrer"
-          className="rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px] system-2xs-medium-uppercase text-text-tertiary hover:text-text-accent"
+          className="rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1.25 py-0.75 system-2xs-medium-uppercase text-text-tertiary hover:text-text-accent"
         >
           {t(($) => $['workflowToolEmpty.learnMore'], { ns: 'tools' })}
         </Link>
@@ -107,7 +107,7 @@ const Empty = ({ type, isAgent }: Props) => {
   return (
     <div className="flex flex-col items-center justify-center">
       <NoToolPlaceholder className={theme === 'dark' ? 'invert' : ''} />
-      <div className="mt-2 mb-1 text-[13px] leading-[18px] font-medium text-text-primary">
+      <div className="mt-2 mb-1 text-[13px] leading-4.5 font-medium text-text-primary">
         {hasTitle && renderType
           ? t(($) => $[`addToolModal.${renderType}.title`], { ns: 'tools' })
           : 'No tools available'}
diff --git a/web/app/components/tools/provider/tool-card-skeleton.tsx b/web/app/components/tools/provider/tool-card-skeleton.tsx
index ce78dd42456..56b7cb1c302 100644
--- a/web/app/components/tools/provider/tool-card-skeleton.tsx
+++ b/web/app/components/tools/provider/tool-card-skeleton.tsx
@@ -24,7 +24,7 @@ const ToolCardSkeleton = () => (
             <SkeletonRectangle className="h-4 w-2/3 animate-pulse" />
           </div>
           <SkeletonRow className="mt-0.5 h-4">
-            <SkeletonRectangle className="w-[41px] animate-pulse" />
+            <SkeletonRectangle className="w-10.25 animate-pulse" />
             <SkeletonPoint />
             <SkeletonRectangle className="w-1/3 animate-pulse" />
           </SkeletonRow>
@@ -43,7 +43,7 @@ const ToolCardSkeleton = () => (
 )
 
 const IntegrationsDefaultToolCardSkeleton = () => (
-  <div className="group/tool-provider relative flex min-w-[min(100%,496px)] flex-1 cursor-pointer flex-col overflow-hidden rounded-xl bg-background-section-burn p-[3px]">
+  <div className="group/tool-provider relative flex min-w-[min(100%,496px)] flex-1 cursor-pointer flex-col overflow-hidden rounded-xl bg-background-section-burn p-0.75">
     <div className="relative flex w-full items-center gap-3 overflow-hidden rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-3">
       <SkeletonRectangle className="size-10 shrink-0 animate-pulse rounded-lg" />
       <div className="flex min-w-0 flex-1 flex-col gap-1 py-px">
@@ -51,7 +51,7 @@ const IntegrationsDefaultToolCardSkeleton = () => (
         <SkeletonRectangle className="h-3 w-3/5 animate-pulse" />
       </div>
     </div>
-    <div className="flex h-[26px] w-full items-center gap-2 px-3 pt-1.5 pb-1">
+    <div className="flex h-6.5 w-full items-center gap-2 px-3 pt-1.5 pb-1">
       <SkeletonRectangle className="h-3 w-20 animate-pulse" />
       <SkeletonPoint />
       <SkeletonRectangle className="h-3 w-24 animate-pulse" />
diff --git a/web/app/components/tools/tool-provider-grid.tsx b/web/app/components/tools/tool-provider-grid.tsx
index 3a3be3229d3..2c5009e787d 100644
--- a/web/app/components/tools/tool-provider-grid.tsx
+++ b/web/app/components/tools/tool-provider-grid.tsx
@@ -178,7 +178,7 @@ export function ToolProviderGrid({
           ))}
           {showWorkflowEmptyState && (
             <div
-              className="absolute top-1/2 left-1/2 w-full max-w-[1060px] -translate-x-1/2 -translate-y-1/2 px-6"
+              className="absolute top-1/2 left-1/2 w-full max-w-265 -translate-x-1/2 -translate-y-1/2 px-6"
               data-step-by-step-tour-target={stepByStepTourTarget}
             >
               <WorkflowToolEmpty type={getToolType(activeTab)} />
diff --git a/web/app/components/tools/workflow-tool/configure-button.tsx b/web/app/components/tools/workflow-tool/configure-button.tsx
index bb6cc4ae72d..924142d4768 100644
--- a/web/app/components/tools/workflow-tool/configure-button.tsx
+++ b/web/app/components/tools/workflow-tool/configure-button.tsx
@@ -67,25 +67,20 @@ const WorkflowToolConfigureButton = ({
             )}
           </div>
           {disabledReason && (
-            <div className="mt-1 px-2.5 pb-2 text-xs leading-[18px] text-text-tertiary">
+            <div className="mt-1 px-2.5 pb-2 text-xs leading-4.5 text-text-tertiary">
               {disabledReason}
             </div>
           )}
           {published && (
             <div className="border-t-[0.5px] border-divider-regular px-2.5 py-2">
               <div className="flex justify-between gap-x-2">
-                <Button
-                  size="small"
-                  className="w-[140px]"
-                  onClick={onConfigure}
-                  disabled={disabled}
-                >
+                <Button size="small" className="w-35" onClick={onConfigure} disabled={disabled}>
                   {t(($) => $['common.configure'], { ns: 'workflow' })}
                   {outdated && <StatusDot className="ml-1" status="warning" />}
                 </Button>
                 <Button
                   size="small"
-                  className="w-[140px]"
+                  className="w-35"
                   onClick={() => router.push(buildIntegrationPath('workflow-tool'))}
                   disabled={disabled}
                 >
@@ -94,7 +89,7 @@ const WorkflowToolConfigureButton = ({
                 </Button>
               </div>
               {outdated && (
-                <div className="mt-1 text-xs leading-[18px] text-text-warning">
+                <div className="mt-1 text-xs leading-4.5 text-text-warning">
                   {t(($) => $['common.workflowAsToolTip'], { ns: 'workflow' })}
                 </div>
               )}
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 68b6303dcfa..0c3d1157910 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -17,10 +17,7 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
 
   return (
     <Dialog open={show} disablePointerDismissal>
-      <DialogContent
-        backdropProps={{ forceRender: true }}
-        className={cn('w-[600px]! max-w-[600px]! p-8!')}
-      >
+      <DialogContent backdropProps={{ forceRender: true }} className={cn('w-150! max-w-150! p-8!')}>
         <button
           type="button"
           aria-label={t(($) => $['operation.close'], { ns: 'common' })}
@@ -32,7 +29,7 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
         <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">
+        <DialogTitle className="relative mt-3 text-xl leading-7.5 font-semibold text-text-primary">
           {t(($) => $['createTool.confirmTitle'], { ns: 'tools' })}
         </DialogTitle>
         <div className="my-1 text-sm/5 text-text-tertiary">
diff --git a/web/app/components/tools/workflow-tool/index.tsx b/web/app/components/tools/workflow-tool/index.tsx
index 49e2c3ff649..c2da9f97a29 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -269,7 +269,7 @@ export function WorkflowToolDrawer({
                 onChange={(e) => setName(e.target.value)}
               />
               {!isWorkflowToolNameValid(name) && (
-                <div className="text-xs leading-[18px] text-red-500">
+                <div className="text-xs leading-4.5 text-red-500">
                   {t(($) => $['createTool.nameForToolCallTip'], { ns: 'tools' })}
                 </div>
               )}
@@ -294,13 +294,13 @@ export function WorkflowToolDrawer({
                 {t(($) => $['createTool.toolInput.title'], { ns: 'tools' })}
               </div>
               <div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
-                <table className="w-full text-xs leading-[18px] font-normal text-text-secondary">
+                <table className="w-full text-xs leading-4.5 font-normal text-text-secondary">
                   <thead className="text-text-tertiary uppercase">
                     <tr className="border-b border-divider-regular">
-                      <th className="w-[156px] p-2 pl-3 font-medium">
+                      <th className="w-39 p-2 pl-3 font-medium">
                         {t(($) => $['createTool.toolInput.name'], { ns: 'tools' })}
                       </th>
-                      <th className="w-[102px] p-2 pl-3 font-medium">
+                      <th className="w-25.5 p-2 pl-3 font-medium">
                         {t(($) => $['createTool.toolInput.method'], { ns: 'tools' })}
                       </th>
                       <th className="p-2 pl-3 font-medium">
@@ -311,13 +311,13 @@ export function WorkflowToolDrawer({
                   <tbody>
                     {parameters.map((item, index) => (
                       <tr key={index} className="border-b border-divider-regular last:border-0">
-                        <td className="max-w-[156px] p-2 pl-3">
-                          <div className="text-[13px] leading-[18px]">
+                        <td className="max-w-39 p-2 pl-3">
+                          <div className="text-[13px] leading-4.5">
                             <div className="flex">
                               <span className="truncate font-medium text-text-primary">
                                 {item.name}
                               </span>
-                              <span className="shrink-0 pl-1 text-xs leading-[18px] text-[#ec4a0a]">
+                              <span className="shrink-0 pl-1 text-xs leading-4.5 text-[#ec4a0a]">
                                 {item.required
                                   ? t(($) => $['createTool.toolInput.required'], { ns: 'tools' })
                                   : ''}
@@ -330,12 +330,12 @@ export function WorkflowToolDrawer({
                           {item.name === '__image' && (
                             <div
                               className={cn(
-                                'flex h-9 min-h-[56px] cursor-default items-center gap-1 bg-transparent px-3 py-2',
+                                'flex h-9 min-h-14 cursor-default items-center gap-1 bg-transparent px-3 py-2',
                               )}
                             >
                               <div
                                 className={cn(
-                                  'grow truncate text-[13px] leading-[18px] text-text-secondary',
+                                  'grow truncate text-[13px] leading-4.5 text-text-secondary',
                                 )}
                               >
                                 {t(($) => $['createTool.toolInput.methodParameter'], {
@@ -351,10 +351,10 @@ export function WorkflowToolDrawer({
                             />
                           )}
                         </td>
-                        <td className="w-[236px] p-2 pl-3 text-text-tertiary">
+                        <td className="w-59 p-2 pl-3 text-text-tertiary">
                           <input
                             type="text"
-                            className="w-full appearance-none bg-transparent text-[13px] leading-[18px] font-normal text-text-secondary caret-primary-600 outline-hidden placeholder:text-text-quaternary"
+                            className="w-full appearance-none bg-transparent text-[13px] leading-4.5 font-normal text-text-secondary caret-primary-600 outline-hidden placeholder:text-text-quaternary"
                             placeholder={t(
                               ($) => $['createTool.toolInput.descriptionPlaceholder'],
                               {
@@ -379,10 +379,10 @@ export function WorkflowToolDrawer({
                 {t(($) => $['createTool.toolOutput.title'], { ns: 'tools' })}
               </div>
               <div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
-                <table className="w-full text-xs leading-[18px] font-normal text-text-secondary">
+                <table className="w-full text-xs leading-4.5 font-normal text-text-secondary">
                   <thead className="text-text-tertiary uppercase">
                     <tr className="border-b border-divider-regular">
-                      <th className="w-[156px] p-2 pl-3 font-medium">
+                      <th className="w-39 p-2 pl-3 font-medium">
                         {t(($) => $['createTool.name'], { ns: 'tools' })}
                       </th>
                       <th className="p-2 pl-3 font-medium">
@@ -393,13 +393,13 @@ export function WorkflowToolDrawer({
                   <tbody>
                     {[...reservedOutputParameters, ...outputParameters].map((item, index) => (
                       <tr key={index} className="border-b border-divider-regular last:border-0">
-                        <td className="max-w-[156px] p-2 pl-3">
-                          <div className="text-[13px] leading-[18px]">
+                        <td className="max-w-39 p-2 pl-3">
+                          <div className="text-[13px] leading-4.5">
                             <div className="flex items-center">
                               <span className="truncate font-medium text-text-primary">
                                 {item.name}
                               </span>
-                              <span className="shrink-0 pl-1 text-xs leading-[18px] text-[#ec4a0a]">
+                              <span className="shrink-0 pl-1 text-xs leading-4.5 text-[#ec4a0a]">
                                 {item.reserved
                                   ? t(($) => $['createTool.toolOutput.reserved'], { ns: 'tools' })
                                   : ''}
@@ -419,7 +419,7 @@ export function WorkflowToolDrawer({
                                     }
                                   />
                                   <TooltipContent>
-                                    <div className="w-[180px]">
+                                    <div className="w-45">
                                       {t(
                                         ($) =>
                                           $['createTool.toolOutput.reservedParameterDuplicateTip'],
@@ -433,8 +433,8 @@ export function WorkflowToolDrawer({
                             <div className="text-text-tertiary">{item.type}</div>
                           </div>
                         </td>
-                        <td className="w-[236px] p-2 pl-3 text-text-tertiary">
-                          <span className="text-[13px] leading-[18px] font-normal text-text-secondary">
+                        <td className="w-59 p-2 pl-3 text-text-tertiary">
+                          <span className="text-[13px] leading-4.5 font-normal text-text-secondary">
                             {item.description}
                           </span>
                         </td>
diff --git a/web/app/components/tools/workflow-tool/method-selector.tsx b/web/app/components/tools/workflow-tool/method-selector.tsx
index ca860f231e7..6b9366970e4 100644
--- a/web/app/components/tools/workflow-tool/method-selector.tsx
+++ b/web/app/components/tools/workflow-tool/method-selector.tsx
@@ -26,11 +26,11 @@ const MethodSelector: FC<MethodSelectorProps> = ({ value, onChange }) => {
           render={
             <div
               className={cn(
-                'flex h-9 min-h-[56px] cursor-pointer items-center gap-1 bg-transparent px-3 py-2 hover:bg-background-section-burn',
+                'flex h-9 min-h-14 cursor-pointer items-center gap-1 bg-transparent px-3 py-2 hover:bg-background-section-burn',
                 'data-popup-open:bg-background-section-burn! data-popup-open:hover:bg-background-section-burn',
               )}
             >
-              <div className={cn('grow truncate text-[13px] leading-[18px] text-text-secondary')}>
+              <div className={cn('grow truncate text-[13px] leading-4.5 text-text-secondary')}>
                 {value === 'llm'
                   ? t(($) => $['createTool.toolInput.methodParameter'], { ns: 'tools' })
                   : t(($) => $['createTool.toolInput.methodSetting'], { ns: 'tools' })}
@@ -55,11 +55,11 @@ const MethodSelector: FC<MethodSelectorProps> = ({ value, onChange }) => {
                       <Check className="size-4 shrink-0 text-text-accent" aria-hidden />
                     )}
                   </div>
-                  <div className="text-[13px] leading-[18px] font-medium text-text-secondary">
+                  <div className="text-[13px] leading-4.5 font-medium text-text-secondary">
                     {t(($) => $['createTool.toolInput.methodParameter'], { ns: 'tools' })}
                   </div>
                 </div>
-                <div className="pl-5 text-[13px] leading-[18px] text-text-tertiary">
+                <div className="pl-5 text-[13px] leading-4.5 text-text-tertiary">
                   {t(($) => $['createTool.toolInput.methodParameterTip'], { ns: 'tools' })}
                 </div>
               </button>
@@ -74,11 +74,11 @@ const MethodSelector: FC<MethodSelectorProps> = ({ value, onChange }) => {
                       <Check className="size-4 shrink-0 text-text-accent" aria-hidden />
                     )}
                   </div>
-                  <div className="text-[13px] leading-[18px] font-medium text-text-secondary">
+                  <div className="text-[13px] leading-4.5 font-medium text-text-secondary">
                     {t(($) => $['createTool.toolInput.methodSetting'], { ns: 'tools' })}
                   </div>
                 </div>
-                <div className="pl-5 text-[13px] leading-[18px] text-text-tertiary">
+                <div className="pl-5 text-[13px] leading-4.5 text-text-tertiary">
                   {t(($) => $['createTool.toolInput.methodSettingTip'], { ns: 'tools' })}
                 </div>
               </button>
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx
index 81bd5724822..ce4d8b265b2 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx
@@ -28,7 +28,7 @@ const WorkflowOnboardingModal: FC<WorkflowOnboardingModalProps> = ({
   return (
     <Dialog open={isShow} onOpenChange={onClose} disablePointerDismissal>
       <DialogContent
-        className="w-[618px] max-w-[618px] rounded-2xl border border-effects-highlight bg-background-default-subtle shadow-lg"
+        className="w-154.5 max-w-154.5 rounded-2xl border border-effects-highlight bg-background-default-subtle shadow-lg"
         backdropClassName="bg-workflow-canvas-canvas-overlay"
       >
         <DialogCloseButton />
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx
index 18137820869..f665eda1ec4 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx
@@ -21,14 +21,14 @@ function StartNodeOption({
     <button
       type="button"
       className={cn(
-        'flex h-40 w-[280px] cursor-pointer flex-col gap-2 rounded-xl border-[0.5px] border-components-option-card-option-border bg-components-panel-on-panel-item-bg p-4 text-left shadow-sm transition-shadow hover:shadow-md focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
+        'flex h-40 w-70 cursor-pointer flex-col gap-2 rounded-xl border-[0.5px] border-components-option-card-option-border bg-components-panel-on-panel-item-bg p-4 text-left shadow-sm transition-shadow hover:shadow-md focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
         className,
       )}
       {...buttonProps}
     >
       <div className="shrink-0">{icon}</div>
 
-      <div className="flex h-[74px] flex-col gap-1 py-0.5">
+      <div className="flex h-18.5 flex-col gap-1 py-0.5">
         <div className="h-5 leading-5">
           <h3 className="text-text-primary">
             {title}
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 c83ef8ee61c..7c6589a8d0a 100644
--- a/web/app/components/workflow/block-selector/all-start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/all-start-blocks.tsx
@@ -156,14 +156,12 @@ function AllStartBlocks({
   return (
     <div
       className={cn(
-        'max-w-[500px] min-w-[400px]',
+        'max-w-125 min-w-100',
         variant === 'panel' && 'h-full max-w-none min-w-0',
         className,
       )}
     >
-      <div
-        className={cn('flex max-h-[640px] flex-col', variant === 'panel' && 'h-full max-h-none')}
-      >
+      <div className={cn('flex max-h-160 flex-col', variant === 'panel' && 'h-full max-h-none')}>
         <div
           ref={wrapElemRef}
           className="flex-1 overflow-y-auto"
diff --git a/web/app/components/workflow/block-selector/blocks.tsx b/web/app/components/workflow/block-selector/blocks.tsx
index bb83790cec1..91f43087b19 100644
--- a/web/app/components/workflow/block-selector/blocks.tsx
+++ b/web/app/components/workflow/block-selector/blocks.tsx
@@ -107,7 +107,7 @@ const Blocks = ({
       return (
         <div key={classification} className="mb-1 last-of-type:mb-0">
           {classification !== '-' && !!filteredList.length && (
-            <div className="flex h-[22px] items-start px-3 text-xs font-medium text-text-tertiary">
+            <div className="flex h-5.5 items-start px-3 text-xs font-medium text-text-tertiary">
               {t(($) => $[`tabs.${classification}`], { ns: 'workflow' })}
             </div>
           )}
@@ -186,9 +186,9 @@ const Blocks = ({
   )
 
   return (
-    <div className="max-h-[480px] max-w-[500px] overflow-y-auto p-1">
+    <div className="max-h-120 max-w-125 overflow-y-auto p-1">
       {isEmpty && (
-        <div className="flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary">
+        <div className="flex h-5.5 items-center px-3 text-xs font-medium text-text-tertiary">
           {t(($) => $['tabs.noResult'], { ns: 'workflow' })}
         </div>
       )}
diff --git a/web/app/components/workflow/block-selector/data-sources.tsx b/web/app/components/workflow/block-selector/data-sources.tsx
index a7ebcba5f17..f37268d040e 100644
--- a/web/app/components/workflow/block-selector/data-sources.tsx
+++ b/web/app/components/workflow/block-selector/data-sources.tsx
@@ -112,10 +112,10 @@ function DataSources({
   )
 
   return (
-    <div className={cn('w-[400px] max-w-full min-w-0', className)}>
+    <div className={cn('w-100 max-w-full min-w-0', className)}>
       <div
         ref={wrapElemRef}
-        className="max-h-[464px] overflow-x-hidden overflow-y-auto"
+        className="max-h-116 overflow-x-hidden overflow-y-auto"
         onScroll={() => pluginRef.current?.handleScroll()}
       >
         <Tools
diff --git a/web/app/components/workflow/block-selector/featured-tools.tsx b/web/app/components/workflow/block-selector/featured-tools.tsx
index 81ae6c7f29d..1a402a550c7 100644
--- a/web/app/components/workflow/block-selector/featured-tools.tsx
+++ b/web/app/components/workflow/block-selector/featured-tools.tsx
@@ -374,7 +374,7 @@ function FeaturedToolPreviewCard({ payload }: FeaturedToolPreviewCardProps) {
     <BlockSelectorPreviewCardContent>
       <BlockIcon size="md" className="mb-2" type={BlockEnum.Tool} toolIcon={payload.plugin.icon} />
       <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">
+      <div className="text-xs leading-4.5 wrap-break-word text-text-secondary">
         {payload.description}
       </div>
     </BlockSelectorPreviewCardContent>
diff --git a/web/app/components/workflow/block-selector/featured-triggers.tsx b/web/app/components/workflow/block-selector/featured-triggers.tsx
index 19dea3e0c08..cc66aad9368 100644
--- a/web/app/components/workflow/block-selector/featured-triggers.tsx
+++ b/web/app/components/workflow/block-selector/featured-triggers.tsx
@@ -393,7 +393,7 @@ function FeaturedTriggerPreviewCard({ payload }: FeaturedTriggerPreviewCardProps
         toolIcon={payload.plugin.icon}
       />
       <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">
+      <div className="text-xs leading-4.5 wrap-break-word text-text-secondary">
         {payload.description}
       </div>
     </BlockSelectorPreviewCardContent>
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 d87e45dc420..2a2dd09aa1c 100644
--- a/web/app/components/workflow/block-selector/tool/action-item.tsx
+++ b/web/app/components/workflow/block-selector/tool/action-item.tsx
@@ -80,7 +80,7 @@ const ToolItem: FC<Props> = ({
       size="medium"
       aria-describedby={previewDescription ? previewDescriptionId : undefined}
       disabled={disabled}
-      className="w-full justify-between pr-1 pl-[21px] text-left focus-visible:ring-inset disabled:cursor-default"
+      className="w-full justify-between pr-1 pl-5.25 text-left focus-visible:ring-inset disabled:cursor-default"
       onClick={() => {
         if (disabled) return
         const params: Record<string, string> = {}
@@ -159,7 +159,7 @@ export function ToolActionPreviewCard({ payload }: ToolActionPreviewCardProps) {
       <div className="mb-1 text-sm/5 wrap-break-word text-text-primary">
         {payload.payload.label[payload.language]}
       </div>
-      <div className="text-xs leading-[18px] wrap-break-word text-text-secondary">
+      <div className="text-xs leading-4.5 wrap-break-word text-text-secondary">
         {payload.payload.description[payload.language]}
       </div>
     </BlockSelectorPreviewCardContent>
diff --git a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
index 0a716335c4e..3e9a132355a 100644
--- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
@@ -30,7 +30,7 @@ const Item: FC<Props> = ({
 }) => {
   return (
     <div>
-      <div className="flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary">
+      <div className="flex h-5.5 items-center px-3 text-xs font-medium text-text-tertiary">
         {groupName}
       </div>
       <div>
diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx
index a1f788ea0cb..30df41f9315 100644
--- a/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -120,7 +120,7 @@ function Tool({
     >
       <BlockIcon className="shrink-0" type={BlockEnum.Tool} toolIcon={providerIcon} />
       <div className="ml-2 flex w-0 grow items-center text-sm text-text-primary">
-        <span className="max-w-[250px] truncate">
+        <span className="max-w-62.5 truncate">
           {notShowProvider ? actions[0]?.label[language] : payload.label[language]}
         </span>
         {isFlatView && groupName && (
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 7d70a2b95e4..f9306c1c960 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
@@ -48,7 +48,7 @@ const TriggerPluginActionItem: FC<Props> = ({
       aria-describedby={previewDescription ? previewDescriptionId : undefined}
       disabled={disabled}
       className={cn(
-        'flex w-full items-center justify-between rounded-lg border-0 bg-transparent pr-1 pl-[21px] text-left focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid focus-visible:outline-hidden',
+        'flex w-full items-center justify-between rounded-lg border-0 bg-transparent pr-1 pl-5.25 text-left focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid focus-visible:outline-hidden',
         disabled ? 'cursor-default' : 'cursor-pointer hover:bg-state-base-hover',
       )}
       onClick={() => {
@@ -124,7 +124,7 @@ export function TriggerPluginActionPreviewCard({ payload }: TriggerPluginActionP
       <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">
+      <div className="text-xs leading-4.5 wrap-break-word text-text-secondary">
         {payload.payload.description[payload.language]}
       </div>
     </BlockSelectorPreviewCardContent>
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 9c157de7329..765baba6098 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
@@ -149,7 +149,7 @@ const TriggerPluginItem: FC<Props> = ({
               toolIcon={providerIcon}
             />
             <div className="flex min-w-0 flex-1 items-center text-sm text-text-primary">
-              <span className="max-w-[200px] truncate">
+              <span className="max-w-50 truncate">
                 {notShowProvider ? actions[0]?.label[language] : payload.label[language]}
               </span>
               <span className="ml-2 truncate system-xs-regular text-text-quaternary">
@@ -171,10 +171,10 @@ const TriggerPluginItem: FC<Props> = ({
         </BlockSelectorRow>
 
         {!notShowProvider && hasAction && !isFold && (
-          <ScrollAreaRoot className="relative max-h-[240px] overflow-hidden overscroll-contain">
+          <ScrollAreaRoot className="relative max-h-60 overflow-hidden overscroll-contain">
             <ScrollAreaViewport
               aria-label={t(($) => $['tabs.allTriggers'], { ns: 'workflow' })}
-              className="max-h-[240px] overscroll-contain"
+              className="max-h-60 overscroll-contain"
               role="region"
             >
               <ScrollAreaContent>
diff --git a/web/app/components/workflow/collaboration/components/user-cursors.tsx b/web/app/components/workflow/collaboration/components/user-cursors.tsx
index 049f016b62b..8afd9bc20c6 100644
--- a/web/app/components/workflow/collaboration/components/user-cursors.tsx
+++ b/web/app/components/workflow/collaboration/components/user-cursors.tsx
@@ -59,7 +59,7 @@ const UserCursors: FC<UserCursorsProps> = ({ cursors, myUserId, onlineUsers }) =
             </svg>
 
             <div
-              className="absolute top-4 left-4 max-w-[120px] overflow-hidden rounded px-1.5 py-0.5 text-[11px] font-medium text-ellipsis whitespace-nowrap text-white shadow-sm"
+              className="absolute top-4 left-4 max-w-30 overflow-hidden rounded px-1.5 py-0.5 text-[11px] font-medium text-ellipsis whitespace-nowrap text-white shadow-sm"
               style={{
                 backgroundColor: userColor,
               }}
diff --git a/web/app/components/workflow/comment/comment-icon.tsx b/web/app/components/workflow/comment/comment-icon.tsx
index 187ca5159e5..42c9e82af6f 100644
--- a/web/app/components/workflow/comment/comment-icon.tsx
+++ b/web/app/components/workflow/comment/comment-icon.tsx
@@ -243,7 +243,7 @@ export const CommentIcon: FC<CommentIconProps> = memo(
               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 ${
+                className={`absolute inset-1.5 overflow-hidden rounded-tl-full rounded-tr-full rounded-br-full border bg-components-panel-bg transition-shadow ${
                   isActive
                     ? 'border-primary-500 ring-1 ring-primary-500'
                     : 'border-components-panel-border'
diff --git a/web/app/components/workflow/comment/comment-input.tsx b/web/app/components/workflow/comment/comment-input.tsx
index 38545e99f23..4f98189b461 100644
--- a/web/app/components/workflow/comment/comment-input.tsx
+++ b/web/app/components/workflow/comment/comment-input.tsx
@@ -149,8 +149,8 @@ export const CommentInput: FC<CommentInputProps> = memo(
       >
         <div className="flex items-center gap-3">
           <div className="relative shrink-0 cursor-move" onPointerDown={handleDragPointerDown}>
-            <div className="relative aspect-square h-8 w-8 shrink-0 rounded-tl-full rounded-tr-full rounded-br-full bg-primary-500 p-[2px]">
-              <div className="flex size-full items-center justify-center overflow-hidden rounded-tl-full rounded-tr-full rounded-br-full bg-components-panel-bg-blur p-[2px]">
+            <div className="relative aspect-square h-8 w-8 shrink-0 rounded-tl-full rounded-tr-full rounded-br-full bg-primary-500 p-0.5">
+              <div className="flex size-full items-center justify-center overflow-hidden rounded-tl-full rounded-tr-full rounded-br-full bg-components-panel-bg-blur p-0.5">
                 <Avatar
                   avatar={userProfile.avatar_url}
                   name={userProfile.name}
@@ -162,10 +162,10 @@ export const CommentInput: FC<CommentInputProps> = memo(
           </div>
           <div
             className={cn(
-              'relative z-10 flex-1 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-[4px] shadow-md',
+              'relative z-10 flex-1 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-1 shadow-md',
             )}
           >
-            <div className="relative pt-[4px] pl-[9px]">
+            <div className="relative pt-1 pl-2.25">
               <MentionInput
                 value={content}
                 onChange={setContent}
diff --git a/web/app/components/workflow/comment/mention-input.tsx b/web/app/components/workflow/comment/mention-input.tsx
index 2aeaa764737..c1cb61b2606 100644
--- a/web/app/components/workflow/comment/mention-input.tsx
+++ b/web/app/components/workflow/comment/mention-input.tsx
@@ -635,7 +635,7 @@ const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(
           typeof document !== 'undefined' &&
           createPortal(
             <div
-              className="fixed z-50 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-50 max-h-62 w-70 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']:
diff --git a/web/app/components/workflow/comment/thread.tsx b/web/app/components/workflow/comment/thread.tsx
index 68fc760a9d1..08a4feb2c85 100644
--- a/web/app/components/workflow/comment/thread.tsx
+++ b/web/app/components/workflow/comment/thread.tsx
@@ -431,7 +431,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(
 
     return (
       <div
-        className="absolute z-30 w-[360px] max-w-[360px]"
+        className="absolute z-30 w-90 max-w-90"
         style={{
           left: canvasPosition.x + 40,
           top: canvasPosition.y,
@@ -442,7 +442,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(
       >
         <div
           ref={threadRef}
-          className="relative flex h-[360px] flex-col overflow-hidden rounded-2xl border border-components-panel-border bg-components-panel-bg shadow-xl"
+          className="relative flex h-90 flex-col overflow-hidden rounded-2xl border border-components-panel-border bg-components-panel-bg shadow-xl"
           role="dialog"
           aria-modal="true"
           aria-labelledby="comment-thread-title"
@@ -789,7 +789,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(
                   size="sm"
                   className="size-8"
                 />
-                <div className="flex-1 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-[2px] shadow-sm">
+                <div className="flex-1 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-0.5 shadow-sm">
                   <MentionInput
                     ref={replyInputRef}
                     value={replyContent}
diff --git a/web/app/components/workflow/header/checklist/index.tsx b/web/app/components/workflow/header/checklist/index.tsx
index da1e1b4ee80..76a9b85bc84 100644
--- a/web/app/components/workflow/header/checklist/index.tsx
+++ b/web/app/components/workflow/header/checklist/index.tsx
@@ -71,7 +71,7 @@ const WorkflowChecklist = ({ disabled, showGoTo = true, onItemClick }: WorkflowC
               />
             </span>
             {!!needWarningNodes.length && (
-              <span className="absolute -top-1.5 -right-1.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full border border-gray-100 bg-text-warning-secondary text-[11px] font-semibold text-white">
+              <span className="absolute -top-1.5 -right-1.5 flex h-4.5 min-w-4.5 items-center justify-center rounded-full border border-gray-100 bg-text-warning-secondary text-[11px] font-semibold text-white">
                 {needWarningNodes.length}
               </span>
             )}
@@ -121,7 +121,7 @@ const WorkflowChecklist = ({ disabled, showGoTo = true, onItemClick }: WorkflowC
             </div>
           ) : (
             <div className="mx-4 mb-3 rounded-lg py-4 text-center text-xs text-text-tertiary">
-              <span className="mx-auto mb-[5px] i-custom-vender-line-general-checklist-square block h-8 w-8 text-text-quaternary" />
+              <span className="mx-auto mb-1.25 i-custom-vender-line-general-checklist-square block h-8 w-8 text-text-quaternary" />
               {t(($) => $['panel.checklistResolved'], { ns: 'workflow' })}
             </div>
           )}
diff --git a/web/app/components/workflow/header/editing-title.tsx b/web/app/components/workflow/header/editing-title.tsx
index 45a2d9642fb..389f1ffeb6d 100644
--- a/web/app/components/workflow/header/editing-title.tsx
+++ b/web/app/components/workflow/header/editing-title.tsx
@@ -16,7 +16,7 @@ function EditingTitle() {
     <div
       role="status"
       aria-label={t(($) => $['common.workflowSaveStatus'], { ns: 'workflow' })}
-      className="flex h-[18px] min-w-[300px] items-center system-xs-regular whitespace-nowrap text-text-tertiary"
+      className="flex h-4.5 min-w-75 items-center system-xs-regular whitespace-nowrap text-text-tertiary"
     >
       {!!draftUpdatedAt && (
         <span className="flex items-center gap-1">
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
index a8d893ae554..5721b16b5d3 100644
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -105,7 +105,7 @@ const OnlineUsers = () => {
       className={cn(
         'flex h-8 items-center rounded-full border-[0.5px] border-components-panel-border',
         'bg-components-panel-bg py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[10px]',
-        hasCounter ? 'min-w-[87px] gap-px pr-1.5 pl-1' : 'gap-1 px-1.5',
+        hasCounter ? 'min-w-21.75 gap-px pr-1.5 pl-1' : 'gap-1 px-1.5',
       )}
     >
       <div className="flex h-6 items-center">
@@ -141,7 +141,7 @@ const OnlineUsers = () => {
                 <TooltipContent
                   placement="bottom"
                   sideOffset={4}
-                  className="flex h-[28px] max-w-[220px] min-w-0 items-center justify-center rounded-md border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-3 py-[6px] shadow-lg shadow-shadow-shadow-5 backdrop-blur-[10px]"
+                  className="flex h-7 max-w-55 min-w-0 items-center justify-center rounded-md border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-3 py-1.5 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[10px]"
                 >
                   {renderDisplayName(
                     user,
@@ -159,7 +159,7 @@ const OnlineUsers = () => {
                   <div className="flex items-center gap-1">
                     <div
                       className={cn(
-                        'flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-components-icon-bg-midnight-solid text-[10px] leading-[12px] font-semibold text-white uppercase ring-1 ring-components-panel-bg select-none',
+                        'flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-components-icon-bg-midnight-solid text-2xs leading-3 font-semibold text-white uppercase ring-1 ring-components-panel-bg select-none',
                         visibleUsers.length > 0 && '-ml-1',
                       )}
                     >
@@ -174,7 +174,7 @@ const OnlineUsers = () => {
                 sideOffset={8}
                 alignOffset={-48}
                 popupClassName={cn(
-                  'mt-1.5 flex max-h-[200px] w-[240px] flex-col overflow-y-auto',
+                  'mt-1.5 flex max-h-50 w-60 flex-col overflow-y-auto',
                   'rounded-xl border-[0.5px] border-components-panel-border',
                   'bg-components-panel-bg-blur p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[10px]',
                 )}
diff --git a/web/app/components/workflow/header/running-title.tsx b/web/app/components/workflow/header/running-title.tsx
index 2a663b4f89e..370dfa9ff55 100644
--- a/web/app/components/workflow/header/running-title.tsx
+++ b/web/app/components/workflow/header/running-title.tsx
@@ -11,7 +11,7 @@ const RunningTitle = () => {
   const historyWorkflowData = useStore((s) => s.historyWorkflowData)
 
   return (
-    <div className="flex h-[18px] items-center text-xs text-gray-500">
+    <div className="flex h-4.5 items-center text-xs text-gray-500">
       <ClockPlay className="mr-1 size-3 text-gray-500" />
       <span>
         {isChatMode
@@ -19,7 +19,7 @@ const RunningTitle = () => {
           : `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">
+      <span className="ml-1 flex h-4.5 items-center rounded-[5px] border border-indigo-300 bg-white/48 px-1 text-2xs font-semibold text-indigo-600 uppercase">
         {t(($) => $['common.viewOnly'], { ns: 'workflow' })}
       </span>
     </div>
diff --git a/web/app/components/workflow/header/view-history.tsx b/web/app/components/workflow/header/view-history.tsx
index 98f1ac8dccb..50d63cd355f 100644
--- a/web/app/components/workflow/header/view-history.tsx
+++ b/web/app/components/workflow/header/view-history.tsx
@@ -85,7 +85,7 @@ const ViewHistory = ({ withText, onClearLogAndMessageModal, historyUrl }: ViewHi
         popupClassName="border-none bg-transparent shadow-none"
       >
         <div
-          className="ml-2 flex w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl"
+          className="ml-2 flex w-60 flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl"
           style={{
             maxHeight: 'calc(2 / 3 * 100vh)',
           }}
@@ -123,7 +123,7 @@ const ViewHistory = ({ withText, onClearLogAndMessageModal, historyUrl }: ViewHi
                 <div
                   key={item.id}
                   className={cn(
-                    'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] hover:bg-state-base-hover',
+                    'mb-0.5 flex cursor-pointer rounded-lg px-2 py-1.75 hover:bg-state-base-hover',
                     item.id === historyWorkflowData?.id &&
                       'bg-state-accent-hover hover:bg-state-accent-hover',
                   )}
@@ -156,13 +156,13 @@ const ViewHistory = ({ withText, onClearLogAndMessageModal, historyUrl }: ViewHi
                   <div>
                     <div
                       className={cn(
-                        'flex items-center text-[13px] leading-[18px] font-medium text-text-primary',
+                        'flex items-center text-[13px] leading-4.5 font-medium text-text-primary',
                         item.id === historyWorkflowData?.id && 'text-text-accent',
                       )}
                     >
                       {`Test ${isChatMode ? 'Chat' : 'Run'}${formatWorkflowRunIdentifier(item.finished_at, item.status)}`}
                     </div>
-                    <div className="flex items-center text-xs leading-[18px] text-text-tertiary">
+                    <div className="flex items-center text-xs leading-4.5 text-text-tertiary">
                       {item.created_by_account?.name} ·
                       {formatTimeFromNow((item.finished_at || item.created_at) * 1000)}
                     </div>
diff --git a/web/app/components/workflow/header/view-workflow-history.tsx b/web/app/components/workflow/header/view-workflow-history.tsx
index fbf27def6fd..0b242ae6f52 100644
--- a/web/app/components/workflow/header/view-workflow-history.tsx
+++ b/web/app/components/workflow/header/view-workflow-history.tsx
@@ -182,7 +182,7 @@ const ViewWorkflowHistory = () => {
         placement="bottom-end"
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="flex max-w-90 min-w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]">
+        <div className="flex max-w-90 min-w-60 flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]">
           <div className="sticky top-0 flex items-center justify-between px-4 pt-3">
             <div className="system-mg-regular grow text-text-secondary">
               {t(($) => $['changeHistory.title'], { ns: 'workflow' })}
@@ -227,7 +227,7 @@ const ViewWorkflowHistory = () => {
                   type="button"
                   key={item?.index}
                   className={cn(
-                    'mb-0.5 flex w-full cursor-pointer rounded-lg px-2 py-[7px] text-left text-text-secondary hover:bg-state-base-hover',
+                    'mb-0.5 flex w-full cursor-pointer rounded-lg px-2 py-1.75 text-left text-text-secondary hover:bg-state-base-hover',
                     item?.index === currentHistoryStateIndex && 'bg-state-base-hover',
                   )}
                   onClick={() => {
@@ -238,7 +238,7 @@ const ViewWorkflowHistory = () => {
                   <div>
                     <div
                       className={cn(
-                        'flex items-center text-[13px] leading-[18px] font-medium text-text-secondary',
+                        'flex items-center text-[13px] leading-4.5 font-medium text-text-secondary',
                       )}
                     >
                       {composeHistoryItemLabel(
@@ -259,7 +259,7 @@ const ViewWorkflowHistory = () => {
                   type="button"
                   key={item?.index}
                   className={cn(
-                    'mb-0.5 flex w-full cursor-pointer rounded-lg px-2 py-[7px] text-left hover:bg-state-base-hover',
+                    'mb-0.5 flex w-full cursor-pointer rounded-lg px-2 py-1.75 text-left hover:bg-state-base-hover',
                     item?.index === calculateChangeList.statesCount - 1 && 'bg-state-base-hover',
                   )}
                   onClick={() => {
@@ -270,7 +270,7 @@ const ViewWorkflowHistory = () => {
                   <div>
                     <div
                       className={cn(
-                        'flex items-center text-[13px] leading-[18px] font-medium text-text-secondary',
+                        'flex items-center text-[13px] leading-4.5 font-medium text-text-secondary',
                       )}
                     >
                       {composeHistoryItemLabel(
@@ -291,7 +291,7 @@ const ViewWorkflowHistory = () => {
               <button
                 type="button"
                 className={cn(
-                  'my-0.5 flex w-full cursor-pointer rounded-lg px-2 py-[7px] text-left text-text-secondary',
+                  'my-0.5 flex w-full cursor-pointer rounded-lg px-2 py-1.75 text-left text-text-secondary',
                   'hover:bg-state-base-hover',
                 )}
                 onClick={() => {
@@ -300,18 +300,18 @@ const ViewWorkflowHistory = () => {
                 }}
               >
                 <div>
-                  <div className={cn('flex items-center text-[13px] leading-[18px] font-medium')}>
+                  <div className={cn('flex items-center text-[13px] leading-4.5 font-medium')}>
                     {t(($) => $['changeHistory.clearHistory'], { ns: 'workflow' })}
                   </div>
                 </div>
               </button>
             </div>
           )}
-          <div className="w-[240px] px-3 py-2 text-xs text-text-tertiary">
-            <div className="mb-1 flex h-[22px] items-center font-medium uppercase">
+          <div className="w-60 px-3 py-2 text-xs text-text-tertiary">
+            <div className="mb-1 flex h-5.5 items-center font-medium uppercase">
               {t(($) => $['changeHistory.hint'], { ns: 'workflow' })}
             </div>
-            <div className="mb-1 leading-[18px] text-text-tertiary">
+            <div className="mb-1 leading-4.5 text-text-tertiary">
               {t(($) => $['changeHistory.hintText'], { ns: 'workflow' })}
             </div>
           </div>
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 7c325a8237f..889376c58b5 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -647,7 +647,7 @@ export const Workflow: FC<WorkflowProps> = memo(
       <div
         id="workflow-container"
         className={cn(
-          'relative isolate h-full w-full min-w-[960px] overflow-hidden',
+          'relative isolate h-full w-full min-w-240 overflow-hidden',
           workflowReadOnly && 'workflow-panel-animation',
           nodeAnimation && 'workflow-node-animation',
         )}
diff --git a/web/app/components/workflow/node-actions-menu/shared.tsx b/web/app/components/workflow/node-actions-menu/shared.tsx
index b4689deb517..b057b0abdfb 100644
--- a/web/app/components/workflow/node-actions-menu/shared.tsx
+++ b/web/app/components/workflow/node-actions-menu/shared.tsx
@@ -32,9 +32,9 @@ export function NodeActionsMenuAbout({
 }) {
   return (
     <div className="px-3 py-2 text-xs text-text-tertiary">
-      <div className="mb-1 flex h-[22px] items-center font-medium">{title.toLocaleUpperCase()}</div>
-      <div className="mb-1 leading-[18px] text-text-secondary">{description}</div>
-      <div className="leading-[18px]">{author}</div>
+      <div className="mb-1 flex h-5.5 items-center font-medium">{title.toLocaleUpperCase()}</div>
+      <div className="mb-1 leading-4.5 text-text-secondary">{description}</div>
+      <div className="leading-4.5">{author}</div>
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/add-variable-popup.tsx b/web/app/components/workflow/nodes/_base/components/add-variable-popup.tsx
index 31fa858f097..27670efd15b 100644
--- a/web/app/components/workflow/nodes/_base/components/add-variable-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-variable-popup.tsx
@@ -11,8 +11,8 @@ const AddVariablePopup = ({ availableVars, onSelect }: AddVariablePopupProps) =>
   const { t } = useTranslation()
 
   return (
-    <div className="w-[240px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg">
-      <div className="flex h-[34px] items-center border-b-[0.5px] border-b-divider-regular px-4 text-[13px] font-semibold text-text-secondary">
+    <div className="w-60 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg">
+      <div className="flex h-8.5 items-center border-b-[0.5px] border-b-divider-regular px-4 text-[13px] font-semibold text-text-secondary">
         {t(($) => $['nodes.variableAssigner.setAssignVariable'], { ns: 'workflow' })}
       </div>
       <div className="p-1">
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 4454dace755..ae02d297098 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@@ -157,7 +157,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
               tooltip={def.tooltip && renderI18nObject(def.tooltip)}
               inline
             >
-              <Fieldset className="flex w-[200px] items-center gap-3">
+              <Fieldset className="flex w-50 items-center gap-3">
                 <FieldsetLegend className="sr-only">{label}</FieldsetLegend>
                 <Slider
                   value={value}
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 10df6c6197f..2be11440421 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
@@ -93,7 +93,7 @@ const FormItem: FC<Props> = ({
                 <VarBlockIcon type={nodeType || BlockEnum.Start} />
               </div>
               <div
-                className="mx-0.5 max-w-[150px] truncate text-xs font-medium text-text-secondary"
+                className="mx-0.5 max-w-37.5 truncate text-xs font-medium text-text-secondary"
                 title={nodeName}
               >
                 {nodeName}
@@ -106,7 +106,7 @@ const FormItem: FC<Props> = ({
             {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',
+                'ml-0.5 max-w-37.5 truncate text-xs font-medium',
                 isChatVar && 'text-text-secondary',
               )}
               title={variable}
@@ -236,7 +236,7 @@ const FormItem: FC<Props> = ({
             language={CodeLanguage.json}
             onChange={onChange}
             noWrapper
-            className="bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
+            className="bg h-20 overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
             placeholder={<div className="whitespace-pre">{jsonSchemaPlaceholder}</div>}
           />
         )}
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
index 4606e7f4cbd..5df460f25d0 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
@@ -150,7 +150,7 @@ const CodeEditor: FC<Props> = ({ availableVars, varList, onAddVar, ...editorProp
         createPortal(
           <div
             ref={popupRef}
-            className="fixed z-50 w-[228px] space-y-1 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg"
+            className="fixed z-50 w-57 space-y-1 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg"
             style={{
               top: popupPosition.y,
               left: popupPosition.x,
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index 4b51ab97b42..2fb7fe4ae58 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -162,7 +162,7 @@ const CodeEditor: FC<Props> = ({
         onMount={handleEditorDidMount}
       />
       {!outPutValue && !isFocus && (
-        <div className="pointer-events-none absolute top-0 left-[36px] text-[13px] leading-[18px] font-normal text-components-input-text-placeholder">
+        <div className="pointer-events-none absolute top-0 left-9 text-[13px] leading-4.5 font-normal text-components-input-text-placeholder">
           {placeholder}
         </div>
       )}
diff --git a/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx b/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
index 5735603346a..0b3c84a88df 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
@@ -50,7 +50,7 @@ const TextEditor: FC<Props> = ({
           onChange={(e) => onChange(e.target.value)}
           onFocus={setIsFocus}
           onBlur={handleBlur}
-          className="h-full w-full resize-none border-none bg-transparent px-3 text-[13px] leading-[18px] font-normal text-gray-900 placeholder:text-gray-300 focus:outline-hidden"
+          className="h-full w-full resize-none border-none bg-transparent px-3 text-[13px] leading-4.5 font-normal text-gray-900 placeholder:text-gray-300 focus:outline-hidden"
           placeholder={placeholder}
           readOnly={readonly}
         />
diff --git a/web/app/components/workflow/nodes/_base/components/entry-node-container.tsx b/web/app/components/workflow/nodes/_base/components/entry-node-container.tsx
index b8ef6fc88ce..53528b65ef9 100644
--- a/web/app/components/workflow/nodes/_base/components/entry-node-container.tsx
+++ b/web/app/components/workflow/nodes/_base/components/entry-node-container.tsx
@@ -27,7 +27,7 @@ const EntryNodeContainer: FC<EntryNodeContainerProps> = ({
   }, [customLabel, nodeType, t])
 
   return (
-    <div className="w-fit min-w-[242px] rounded-2xl bg-workflow-block-wrapper-bg-1 px-0 pt-0.5 pb-0">
+    <div className="w-fit min-w-60.5 rounded-2xl bg-workflow-block-wrapper-bg-1 px-0 pt-0.5 pb-0">
       <div className="mb-0.5 flex items-center px-2.5 pt-0.5">
         <span className="text-2xs font-semibold text-text-tertiary uppercase">{label}</span>
       </div>
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
index 51b88c933fb..833ef3a6900 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
@@ -23,7 +23,7 @@ const ErrorHandleOnNode = ({ id, data }: ErrorHandleOnNodeProps) => {
     <div className="relative px-3 pt-1 pb-2">
       <div
         className={cn(
-          'relative flex h-6 items-center justify-between rounded-md bg-workflow-block-parma-bg px-[5px]',
+          'relative flex h-6 items-center justify-between rounded-md bg-workflow-block-parma-bg px-1.25',
           data._runningStatus === NodeRunningStatus.Exception &&
             'border-[0.5px] border-components-badge-status-light-warning-halo bg-state-warning-hover',
         )}
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 d088c2f7124..bcaf2922cb4 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
@@ -20,7 +20,7 @@ const ErrorHandleTip = ({ type }: ErrorHandleTipProps) => {
   if (!type) return null
 
   return (
-    <div className="relative flex rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 pr-[52px] shadow-xs">
+    <div className="relative flex rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 pr-13 shadow-xs">
       <div
         className="absolute inset-0 rounded-lg opacity-40"
         style={{
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index 7c399b6ccaf..8e966628c62 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -61,7 +61,7 @@ const Field: FC<Props> = ({
             )}
           >
             {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-2.25 size-1.25 -translate-y-1/2 rounded-full bg-text-warning-secondary" />
             )}
             {title} {required && <span className="text-text-destructive">*</span>}
           </div>
diff --git a/web/app/components/workflow/nodes/_base/components/info-panel.tsx b/web/app/components/workflow/nodes/_base/components/info-panel.tsx
index 92fa859028a..6ba77c2c697 100644
--- a/web/app/components/workflow/nodes/_base/components/info-panel.tsx
+++ b/web/app/components/workflow/nodes/_base/components/info-panel.tsx
@@ -10,7 +10,7 @@ type Props = Readonly<{
 const InfoPanel: FC<Props> = ({ title, content }) => {
   return (
     <div>
-      <div className="flex flex-col gap-y-0.5 rounded-md bg-workflow-block-parma-bg px-[5px] py-[3px]">
+      <div className="flex flex-col gap-y-0.5 rounded-md bg-workflow-block-parma-bg px-1.25 py-0.75">
         <div className="system-2xs-semibold-uppercase text-text-secondary uppercase">{title}</div>
         <div className="system-xs-regular wrap-break-word text-text-tertiary">{content}</div>
       </div>
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 7e93eb0dd33..2cfc861f7fa 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
@@ -59,7 +59,7 @@ const Editor: FC<Props> = ({
       <>
         <PromptEditor
           instanceId={instanceId}
-          className={cn(promptMinHeightClassName, 'leading-[18px]')}
+          className={cn(promptMinHeightClassName, 'leading-4.5')}
           placeholder={placeholder}
           placeholderClassName={placeholderClassName}
           value={value}
@@ -115,7 +115,7 @@ const Editor: FC<Props> = ({
           <div
             className={cn(
               'absolute z-10',
-              insertVarTipToLeft ? 'top-1.5 left-[-12px]' : 'top-[-9px] right-1',
+              insertVarTipToLeft ? 'top-1.5 -left-3' : '-top-2.25 right-1',
             )}
           >
             <Tooltip>
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 8555c952c98..6aa4b5a1c4b 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
@@ -43,7 +43,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-2.25 size-1.25 -translate-y-1/2 rounded-full bg-text-warning-secondary" />
               )}
               {title}
             </span>
diff --git a/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx b/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
index baa72d2765c..661b4c37cd6 100644
--- a/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
+++ b/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
@@ -8,7 +8,7 @@ type Props = Readonly<{
 
 const ListNoDataPlaceholder: FC<Props> = ({ children }) => {
   return (
-    <div className="flex min-h-[42px] w-full items-center justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary">
+    <div className="flex min-h-10.5 w-full items-center justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary">
       {children}
     </div>
   )
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 eda5e45cb4d..6266a5fb9c9 100644
--- a/web/app/components/workflow/nodes/_base/components/memory-config.tsx
+++ b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
@@ -37,7 +37,7 @@ const RoleItem: FC<RoleItemProps> = ({ readonly, title, value, onChange }) => {
         readOnly={readonly}
         value={value}
         onChange={handleChange}
-        className="h-8 w-[200px]"
+        className="h-8 w-50"
         type="text"
       />
     </div>
@@ -168,7 +168,7 @@ const MemoryConfig: FC<Props> = ({
               <Fieldset className="flex h-8 items-center space-x-2">
                 <FieldsetLegend className="sr-only">{windowSizeLabel}</FieldsetLegend>
                 <Slider
-                  className="w-[144px]"
+                  className="w-36"
                   value={(payload.window?.size || WINDOW_SIZE_DEFAULT) as number}
                   min={WINDOW_SIZE_MIN}
                   max={WINDOW_SIZE_MAX}
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 2d3bdfc939f..2b1da42a8f8 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
@@ -87,7 +87,7 @@ const Operator = ({ open, onOpenChange, data, nodeId, sourceHandle }: OperatorPr
         alignOffset={-4}
         popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur system-md-regular text-text-secondary shadow-lg">
+        <div className="min-w-30 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur system-md-regular text-text-secondary shadow-lg">
           <div className="p-1">
             <ChangeItem data={data} nodeId={nodeId} sourceHandle={sourceHandle} />
             <div
diff --git a/web/app/components/workflow/nodes/_base/components/output-vars.tsx b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
index 2c09fb3726c..a08d6d6a458 100644
--- a/web/app/components/workflow/nodes/_base/components/output-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
@@ -42,11 +42,11 @@ type VarItemProps = {
 
 export const VarItem: FC<VarItemProps> = ({ name, type, description, subItems, isIndent }) => {
   return (
-    <div className={cn('flex', isIndent && 'relative left-[-7px]')}>
+    <div className={cn('flex', isIndent && 'relative -left-1.75')}>
       {isIndent && <TreeIndentLine depth={1} />}
       <div className="py-1">
         <div className="flex">
-          <div className="flex items-center leading-[18px]">
+          <div className="flex items-center leading-4.5">
             <div className="code-sm-semibold text-text-secondary">{name}</div>
             <div className="ml-2 system-xs-regular text-text-tertiary">{type}</div>
           </div>
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 08c8dd127b9..65acbb1f868 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -200,14 +200,14 @@ const Editor: FC<Props> = ({
               )}
             </div>
             <div className="flex items-center">
-              <div className="text-xs leading-[18px] font-medium text-text-tertiary">
+              <div className="text-xs leading-4.5 font-medium text-text-tertiary">
                 {value?.length || 0}
               </div>
               {isSupportPromptGenerator && (
                 <PromptGeneratorBtn
                   nodeId={nodeId!}
                   editorId={editorId}
-                  className="ml-[5px]"
+                  className="ml-1.25"
                   onGenerated={onGenerated}
                   modelConfig={modelConfig}
                   currentPrompt={value}
@@ -216,13 +216,13 @@ const Editor: FC<Props> = ({
 
               <div className="mx-2 h-3 w-px bg-divider-regular"></div>
               {/* Operations */}
-              <div className="flex items-center space-x-[2px]">
+              <div className="flex items-center space-x-0.5">
                 {isSupportJinja && (
                   <div
                     className={cn(
                       editionType === EditionType.jinja2 &&
                         'border-components-button-ghost-bg-hover bg-components-button-ghost-bg-hover',
-                      'flex h-[22px] items-center space-x-0.5 rounded-[5px] border border-transparent px-1.5 hover:border-components-button-ghost-bg-hover',
+                      'flex h-5.5 items-center space-x-0.5 rounded-[5px] border border-transparent px-1.5 hover:border-components-button-ghost-bg-hover',
                     )}
                   >
                     <Popover>
@@ -299,8 +299,8 @@ const Editor: FC<Props> = ({
             {!(isSupportJinja && editionType === EditionType.jinja2) ? (
               <div
                 className={cn(
-                  isExpand ? 'grow' : 'max-h-[536px]',
-                  'relative min-h-[56px] overflow-y-auto px-3',
+                  isExpand ? 'grow' : 'max-h-134',
+                  'relative min-h-14 overflow-y-auto px-3',
                   editorContainerClassName,
                 )}
               >
@@ -310,7 +310,7 @@ const Editor: FC<Props> = ({
                   placeholderClassName={placeholderClassName}
                   instanceId={instanceId}
                   compact
-                  className={cn('min-h-[56px]', inputClassName)}
+                  className={cn('min-h-14', inputClassName)}
                   style={isExpand ? { height: editorExpandHeight - 5 } : {}}
                   value={value}
                   contextBlock={{
@@ -368,8 +368,8 @@ const Editor: FC<Props> = ({
             ) : (
               <div
                 className={cn(
-                  isExpand ? 'grow' : 'max-h-[536px]',
-                  'relative min-h-[56px] overflow-y-auto px-3',
+                  isExpand ? 'grow' : 'max-h-134',
+                  'relative min-h-14 overflow-y-auto px-3',
                   editorContainerClassName,
                 )}
               >
diff --git a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
index e0827e93085..5dbc051f480 100644
--- a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
@@ -34,7 +34,7 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({ nodeId, value, className }) =>
       .map((str, index) => {
         if (!vars[index])
           return (
-            <span className="relative top-[-3px] leading-[16px]" key={index}>
+            <span className="relative -top-0.75 leading-4" key={index}>
               {str}
             </span>
           )
@@ -46,7 +46,7 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({ nodeId, value, className }) =>
 
         return (
           <span key={index}>
-            <span className="relative top-[-3px] leading-[16px]">{str}</span>
+            <span className="relative -top-0.75 leading-4">{str}</span>
             <VariableLabelInText
               nodeTitle={node?.title}
               nodeType={node?.type}
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 cf45216ba9a..5b83883562f 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
@@ -28,7 +28,7 @@ const RetryOnNode = ({ data }: RetryOnNodeProps) => {
     <div className="mb-1 px-3">
       <div
         className={cn(
-          'flex items-center justify-between rounded-md border-[0.5px] border-transparent bg-workflow-block-parma-bg px-[5px] py-1 system-xs-medium-uppercase text-text-tertiary',
+          'flex items-center justify-between rounded-md border-[0.5px] border-transparent bg-workflow-block-parma-bg px-1.25 py-1 system-xs-medium-uppercase text-text-tertiary',
           isRunning && 'border-state-accent-active bg-state-accent-hover text-text-accent',
           isSuccessful && 'border-state-success-active bg-state-success-hover text-text-success',
           (isException || isFailed) &&
diff --git a/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx b/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
index abfd95b59c0..fed42d63719 100644
--- a/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
+++ b/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
@@ -66,7 +66,7 @@ const RetryOnPanel = ({ id, data }: RetryOnPanelProps) => {
                 {maxRetriesLabel}
               </div>
               <Slider
-                className="mr-3 w-[108px]"
+                className="mr-3 w-27"
                 value={retry_config?.max_retries || 3}
                 onValueChange={handleMaxRetriesChange}
                 min={1}
@@ -93,7 +93,7 @@ const RetryOnPanel = ({ id, data }: RetryOnPanelProps) => {
                 {retryIntervalLabel}
               </div>
               <Slider
-                className="mr-3 w-[108px]"
+                className="mr-3 w-27"
                 value={retry_config?.retry_interval || 1000}
                 onValueChange={handleRetryIntervalChange}
                 min={100}
diff --git a/web/app/components/workflow/nodes/_base/components/selector.tsx b/web/app/components/workflow/nodes/_base/components/selector.tsx
index c762462cb0f..5f8dc5ec6cd 100644
--- a/web/app/components/workflow/nodes/_base/components/selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/selector.tsx
@@ -57,7 +57,7 @@ const TypeSelector: FC<Props> = ({
   }, ref)
   return (
     <div
-      className={cn(!trigger && !noLeft && 'left-[-8px]', 'relative select-none', className)}
+      className={cn(!trigger && !noLeft && '-left-2', 'relative select-none', className)}
       ref={ref}
     >
       {trigger ? (
@@ -92,7 +92,7 @@ const TypeSelector: FC<Props> = ({
       {showOption && !readonly && (
         <div
           className={cn(
-            'absolute top-[24px] z-10 w-[120px] rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg select-none',
+            'absolute top-6 z-10 w-30 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg select-none',
             popupClassName,
           )}
         >
@@ -106,7 +106,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',
+                'flex h-7.5 min-w-11 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>
diff --git a/web/app/components/workflow/nodes/_base/components/setting-item.tsx b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
index f31ed73672e..872c2c1a4bf 100644
--- a/web/app/components/workflow/nodes/_base/components/setting-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
@@ -20,7 +20,7 @@ export const SettingItem = memo(({ label, children, status, tooltip }: SettingIt
       <div
         className={cn(
           'max-w-full shrink-0 truncate system-xs-medium-uppercase text-text-tertiary',
-          !!children && 'max-w-[100px]',
+          !!children && 'max-w-25',
         )}
       >
         {label}
diff --git a/web/app/components/workflow/nodes/_base/components/title-description-input.tsx b/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
index 31a51c9679d..6dba43c4c86 100644
--- a/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
+++ b/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
@@ -68,7 +68,7 @@ export const DescriptionInput = memo(({ value, onChange }: DescriptionInputProps
 
   return (
     <div
-      className={`group flex max-h-[60px] overflow-y-auto rounded-lg bg-components-panel-bg px-2 py-[5px] leading-0 ${focus && 'shadow-xs!'} `}
+      className={`group flex max-h-15 overflow-y-auto rounded-lg bg-components-panel-bg px-2 py-1.25 leading-0 ${focus && 'shadow-xs!'} `}
     >
       <Textarea
         value={value}
@@ -76,7 +76,7 @@ export const DescriptionInput = memo(({ value, onChange }: DescriptionInputProps
         minRows={1}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        className={`w-full resize-none appearance-none bg-transparent text-xs leading-[18px] text-text-primary caret-[#295EFF] outline-hidden placeholder:text-text-quaternary`}
+        className={`w-full resize-none appearance-none bg-transparent text-xs leading-4.5 text-text-primary caret-[#295EFF] outline-hidden placeholder:text-text-quaternary`}
         placeholder={t(($) => $['common.addDescription'], { ns: 'workflow' }) || ''}
       />
     </div>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
index 9800310bda2..832e2b3d3e1 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
@@ -46,7 +46,7 @@ export const PickerPanelMain: FC<Props> = ({
         <div className="flex">
           {root.nodeName && (
             <>
-              <div className="max-w-[100px] truncate system-sm-medium text-text-tertiary">
+              <div className="max-w-25 truncate system-sm-medium text-text-tertiary">
                 {root.nodeName}
               </div>
               <div className="system-sm-medium text-text-tertiary">.</div>
@@ -79,7 +79,7 @@ const PickerPanel: FC<Props> = ({ className, ...props }) => {
   return (
     <div
       className={cn(
-        'w-[296px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]',
+        'w-74 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]',
         className,
       )}
     >
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
index 854d4245953..1067332de42 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
@@ -33,7 +33,7 @@ const Field: FC<Props> = ({ name, payload, depth = 1, required, rootClassName })
             {hasChildren && (
               <RiArrowDropDownLine
                 className={cn(
-                  'absolute top-[50%] left-[-18px] h-4 w-4 translate-y-[-50%] cursor-pointer bg-components-panel-bg text-text-tertiary',
+                  'absolute top-[50%] -left-4.5 h-4 w-4 translate-y-[-50%] cursor-pointer bg-components-panel-bg text-text-tertiary',
                   fold && 'rotate-270 text-text-accent',
                 )}
                 onClick={() => setFold((isFolded) => !isFolded)}
@@ -41,7 +41,7 @@ const Field: FC<Props> = ({ name, payload, depth = 1, required, rootClassName })
             )}
             <div
               className={cn(
-                'ml-[7px] h-6 truncate system-sm-medium leading-6 text-text-secondary',
+                'ml-1.75 h-6 truncate system-sm-medium leading-6 text-text-secondary',
                 isRoot && rootClassName,
               )}
             >
@@ -58,14 +58,14 @@ const Field: FC<Props> = ({ name, payload, depth = 1, required, rootClassName })
             )}
           </div>
           {payload.description && (
-            <div className="ml-[7px] flex">
+            <div className="ml-1.75 flex">
               <div className="w-0 grow truncate system-xs-regular text-text-tertiary">
                 {payload.description}
               </div>
             </div>
           )}
           {hasEnum && (
-            <div className="ml-[7px] flex">
+            <div className="ml-1.75 flex">
               <div className="w-0 grow system-xs-regular text-text-quaternary">
                 {payload.enum!.map((value, index) => (
                   <span key={index}>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx
index d6a655dabb1..63ab619f3d4 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx
@@ -20,7 +20,7 @@ const ShowPanel: FC<Props> = ({ payload, rootClassName }) => {
     },
   }
   return (
-    <div className="relative left-[-7px]">
+    <div className="relative -left-1.75">
       {Object.keys(schema.schema.properties!).map((name) => (
         <Field
           key={name}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx
index 4f981672142..2320db9f588 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx
@@ -42,7 +42,7 @@ const VarFullPathPanel: FC<Props> = ({ nodeName, path, varType, nodeType = Block
     }
   })()
   return (
-    <div className="w-[280px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-0 shadow-lg backdrop-blur-[5px]">
+    <div className="w-70 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-0 shadow-lg backdrop-blur-[5px]">
       <div className="flex space-x-1 border-b-[0.5px] border-divider-subtle p-3 pb-2">
         <BlockIcon size="xs" type={nodeType} />
         <div className="w-0 grow truncate system-xs-medium text-text-secondary">{nodeName}</div>
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 210533d3793..fb17b035d92 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
@@ -214,7 +214,7 @@ const Item: FC<ItemProps> = ({
     <div
       ref={itemRef}
       className={cn(
-        isObj || isStructureOutput ? 'pr-1' : 'pr-[18px]',
+        isObj || isStructureOutput ? 'pr-1' : 'pr-4.5',
         (isHovering || isSelected) &&
           (isObj || isStructureOutput
             ? 'bg-components-panel-on-panel-item-bg-hover'
@@ -490,7 +490,7 @@ const VarReferenceVars: FC<Props> = ({
             />
           </div>
           <div
-            className="relative left-[-4px] h-[0.5px] bg-black/5"
+            className="relative -left-1 h-[0.5px] bg-black/5"
             style={{
               width: 'calc(100% + 8px)',
             }}
@@ -510,7 +510,7 @@ const VarReferenceVars: FC<Props> = ({
             >
               {!item.isFlat && (
                 <div
-                  className="truncate px-3 system-xs-medium-uppercase leading-[22px] text-text-tertiary"
+                  className="truncate px-3 system-xs-medium-uppercase leading-5.5 text-text-tertiary"
                   title={item.title}
                 >
                   {item.title}
@@ -538,7 +538,7 @@ const VarReferenceVars: FC<Props> = ({
               {item.isFlat &&
                 !indexedFilteredVars[i + 1]?.isFlat &&
                 !!indexedFilteredVars.find((item) => !item.isFlat) && (
-                  <div className="relative mt-[14px] flex items-center space-x-1">
+                  <div className="relative mt-3.5 flex items-center space-x-1">
                     <div className="h-0 w-3 shrink-0 border border-divider-subtle"></div>
                     <div className="system-2xs-semibold-uppercase text-text-tertiary">
                       {t(($) => $['debug.lastOutput'], { ns: 'workflow' })}
@@ -550,7 +550,7 @@ const VarReferenceVars: FC<Props> = ({
           ))}
         </div>
       ) : (
-        <div className="mt-2 pl-3 text-xs leading-[18px] font-medium text-gray-500 uppercase">
+        <div className="mt-2 pl-3 text-xs leading-4.5 font-medium text-gray-500 uppercase">
           {t(($) => $['common.noVar'], { ns: 'workflow' })}
         </div>
       )}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
index 9980e4febc0..26cff721527 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
@@ -40,7 +40,7 @@ const VarReferencePicker: FC<Props> = ({ readonly, className, value, onChange })
         }}
       >
         <SelectTrigger
-          className="h-8 w-[120px] cursor-pointer rounded-lg px-2.5 text-[13px] text-text-primary"
+          className="h-8 w-30 cursor-pointer rounded-lg px-2.5 text-[13px] text-text-primary"
           title={value}
         >
           <span className="capitalize">{value}</span>
@@ -54,7 +54,7 @@ const VarReferencePicker: FC<Props> = ({ readonly, className, value, onChange })
             <SelectItem
               key={type}
               value={type}
-              className="h-[30px] rounded-lg pr-2 pl-3 text-[13px] text-text-primary"
+              className="h-7.5 rounded-lg pr-2 pl-3 text-[13px] text-text-primary"
             >
               <SelectItemText className="px-0 capitalize">{type}</SelectItemText>
               <SelectItemIndicator />
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-node-label.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-node-label.tsx
index b3338cf2e7e..1d64904377d 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-node-label.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-node-label.tsx
@@ -13,10 +13,7 @@ const VariableNodeLabel = ({ nodeType, nodeTitle }: VariableNodeLabelProps) => {
     <>
       <VarBlockIcon type={nodeType} className="shrink-0 text-text-secondary" />
       {nodeTitle && (
-        <div
-          className="max-w-[60px] truncate system-xs-medium text-text-secondary"
-          title={nodeTitle}
-        >
+        <div className="max-w-15 truncate system-xs-medium text-text-secondary" title={nodeTitle}>
           {nodeTitle}
         </div>
       )}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
index 1b831ec85ef..5b4a9395dd1 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
@@ -19,7 +19,7 @@ const VariableLabelInEditor = ({
   return (
     <VariableLabel
       className={cn(
-        'h-[18px] space-x-px rounded-[5px] px-1 shadow-xs',
+        'h-4.5 space-x-px rounded-[5px] px-1 shadow-xs',
         !isSelected && hoverBgColor,
         !isSelected && hoverBorderColor,
         isSelected && 'border',
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
index 783ed4929cf..1651ba44599 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
@@ -6,7 +6,7 @@ import VariableLabel from './base/variable-label'
 const VariableLabelInText = (variablePayload: VariablePayload) => {
   return (
     <VariableLabel
-      className={cn('h-[18px] space-x-px rounded-[5px] px-1 shadow-xs')}
+      className={cn('h-4.5 space-x-px rounded-[5px] px-1 shadow-xs')}
       {...variablePayload}
     />
   )
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 a412af20c76..9a401905759 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
@@ -540,7 +540,7 @@ const BasePanel: FC<BasePanelProps> = ({ id, data, children }) => {
       className={cn(
         'relative mr-1 h-full',
         showMessageLogModal &&
-          'absolute z-0 mr-2 w-[400px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border shadow-lg transition-all',
+          'absolute z-0 mr-2 w-100 overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border shadow-lg transition-all',
       )}
       style={
         {
diff --git a/web/app/components/workflow/nodes/_base/node-sections.tsx b/web/app/components/workflow/nodes/_base/node-sections.tsx
index 1b782543904..28f05b27dc5 100644
--- a/web/app/components/workflow/nodes/_base/node-sections.tsx
+++ b/web/app/components/workflow/nodes/_base/node-sections.tsx
@@ -24,11 +24,11 @@ export const NodeHeaderMeta = ({ data, hasVarValue, isLoading, loopIndex, t }: H
       {data.type === BlockEnum.Iteration && (data as IterationNodeType).is_parallel && (
         <Tooltip>
           <TooltipTrigger>
-            <div className="ml-1 flex items-center justify-center rounded-[5px] border border-text-warning px-[5px] py-[3px] system-2xs-medium-uppercase text-text-warning">
+            <div className="ml-1 flex items-center justify-center rounded-[5px] border border-text-warning px-1.25 py-0.75 system-2xs-medium-uppercase text-text-warning">
               {t(($) => $['nodes.iteration.parallelModeUpper'], { ns: 'workflow' })}
             </div>
           </TooltipTrigger>
-          <TooltipContent className="w-[180px]">
+          <TooltipContent className="w-45">
             <div className="font-extrabold">
               {t(($) => $['nodes.iteration.parallelModeEnableTitle'], { ns: 'workflow' })}
             </div>
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index 7f129e531c3..90cd79a78d6 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -183,7 +183,7 @@ const BaseNode: FC<BaseNodeProps> = ({ id, data, children }) => {
         />
       )}
       {data.type === BlockEnum.DataSource && (
-        <div className="absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]">
+        <div className="absolute -inset-0.5 -top-5.5 z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]">
           <div className="flex h-5 items-center px-2.5 system-2xs-semibold-uppercase text-text-tertiary">
             {t(($) => $['blocks.datasource'], { ns: 'workflow' })}
           </div>
@@ -194,7 +194,7 @@ const BaseNode: FC<BaseNodeProps> = ({ id, data, children }) => {
           'group relative pb-1 shadow-xs',
           'rounded-[15px] border border-transparent',
           controlMode === ControlMode.Comment && 'hover:cursor-none',
-          !isContainerNode(data.type) && 'w-[240px] bg-workflow-block-bg',
+          !isContainerNode(data.type) && 'w-60 bg-workflow-block-bg',
           isContainerNode(data.type) &&
             'flex size-full flex-col border-workflow-block-border bg-workflow-block-bg-transparent',
           !data._runningStatus && 'hover:shadow-lg',
diff --git a/web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx b/web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx
index 09c2470fe1b..e2f312c4885 100644
--- a/web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx
+++ b/web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx
@@ -158,7 +158,7 @@ function AgentRosterDrawer({
                   isSetup
                     ? 'h-16 px-4 py-3'
                     : showDetailActions
-                      ? 'h-[108px] gap-3 py-3 pr-4 pl-3'
+                      ? 'h-27 gap-3 py-3 pr-4 pl-3'
                       : 'py-3 pr-4 pl-3',
                 )}
               >
diff --git a/web/app/components/workflow/nodes/agent-v2/panel.tsx b/web/app/components/workflow/nodes/agent-v2/panel.tsx
index 893b1abf1b7..2632c30eac9 100644
--- a/web/app/components/workflow/nodes/agent-v2/panel.tsx
+++ b/web/app/components/workflow/nodes/agent-v2/panel.tsx
@@ -72,7 +72,7 @@ function FloatingOutputEditor({
 
   return createPortal(
     <div
-      className="fixed z-50 w-[400px]"
+      className="fixed z-50 w-100"
       style={{
         left: position.left,
         top: position.top,
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 a573f77aaac..5cc1a55800b 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -85,7 +85,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
       <DropdownMenuContent
         placement="bottom-start"
         sideOffset={4}
-        popupClassName={cn('w-[140px]', popupClassName)}
+        popupClassName={cn('w-35', popupClassName)}
       >
         <DropdownMenuGroup>
           <DropdownMenuLabel>
diff --git a/web/app/components/workflow/nodes/assigner/node.tsx b/web/app/components/workflow/nodes/assigner/node.tsx
index 1fbea81b887..a725f830bb1 100644
--- a/web/app/components/workflow/nodes/assigner/node.tsx
+++ b/web/app/components/workflow/nodes/assigner/node.tsx
@@ -26,7 +26,7 @@ const NodeComponent: FC<NodeProps<AssignerNodeType>> = ({ data }) => {
       return (
         <div className="relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1">
           <div className="flex flex-col items-start gap-1 self-stretch">
-            <div className="flex items-center gap-1 self-stretch rounded-md bg-workflow-block-parma-bg px-[5px] py-1">
+            <div className="flex items-center gap-1 self-stretch rounded-md bg-workflow-block-parma-bg px-1.25 py-1">
               <div className="flex-1 system-xs-medium text-text-tertiary">
                 {t(($) => $[`${i18nPrefix}.varNotSet`], { ns: 'workflow' })}
               </div>
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 31cfee79a20..3e2b6261d0e 100644
--- a/web/app/components/workflow/nodes/data-source-empty/index.tsx
+++ b/web/app/components/workflow/nodes/data-source-empty/index.tsx
@@ -28,7 +28,7 @@ const DataSourceEmptyNode = ({ id, data }: NodeProps) => {
         height: data.height,
       }}
     >
-      <div className="absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]">
+      <div className="absolute -inset-0.5 -top-5.5 z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]">
         <div className="flex h-5 items-center px-2.5 system-2xs-semibold-uppercase text-text-tertiary">
           {t(($) => $['blocks.datasource'], { ns: 'workflow' })}
         </div>
@@ -37,7 +37,7 @@ const DataSourceEmptyNode = ({ id, data }: NodeProps) => {
         className={cn(
           'group relative shadow-xs',
           'rounded-[15px] border border-transparent',
-          'w-[240px] bg-workflow-block-bg',
+          'w-60 bg-workflow-block-bg',
         )}
       >
         <div className={cn('flex items-center rounded-t-2xl p-3')}>
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 043a2c54f2c..7546476441d 100644
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -53,7 +53,7 @@ const ApiInput: FC<Props> = ({ nodeId, readonly, method, onMethodChange, url, on
               '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">
+            <div className="w-12 pl-0.5 text-xs leading-4.5 font-medium text-text-primary uppercase">
               {method}
             </div>
             {!readonly && <RiArrowDownSLine className="ml-1 size-3.5 text-text-secondary" />}
@@ -70,7 +70,7 @@ const ApiInput: FC<Props> = ({ nodeId, readonly, method, onMethodChange, url, on
           isFocus
             ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs'
             : 'border-components-input-border-hover bg-components-input-bg-normal',
-          'w-0 grow rounded-lg border px-3 py-[6px]',
+          'w-0 grow rounded-lg border px-3 py-1.5',
         )}
         value={url}
         onChange={onUrlChange}
diff --git a/web/app/components/workflow/nodes/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index aeb099f694a..5d8cc329677 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -201,7 +201,7 @@ const Authorization: FC<Props> = ({ nodeId, payload, onChange, isShow, onHide })
                         isFocus
                           ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs'
                           : 'border-components-input-border-hover bg-components-input-bg-normal',
-                        'w-0 grow rounded-lg border px-3 py-[6px]',
+                        'w-0 grow rounded-lg border px-3 py-1.5',
                       )}
                       value={tempPayload.config?.api_key || ''}
                       onChange={handleAPIKeyChange}
diff --git a/web/app/components/workflow/nodes/http/components/curl-panel.tsx b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
index d1740095147..58dfe54d9d8 100644
--- a/web/app/components/workflow/nodes/http/components/curl-panel.tsx
+++ b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
@@ -47,7 +47,7 @@ const CurlPanel: FC<Props> = ({ nodeId, isShow, onHide, handleCurlImport }) => {
         if (!open) onHide()
       }}
     >
-      <DialogContent className="w-[400px]! max-w-[400px]! overflow-hidden! border-none p-4! text-left align-middle">
+      <DialogContent className="w-100! max-w-100! overflow-hidden! border-none p-4! text-left align-middle">
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {t(($) => $['nodes.http.curl.title'], { ns: 'workflow' })}
         </DialogTitle>
@@ -62,10 +62,10 @@ const CurlPanel: FC<Props> = ({ nodeId, isShow, onHide, handleCurlImport }) => {
           />
         </div>
         <div className="mt-4 flex justify-end space-x-2">
-          <Button className="w-[95px]!" onClick={onHide}>
+          <Button className="w-23.75!" onClick={onHide}>
             {t(($) => $['operation.cancel'], { ns: 'common' })}
           </Button>
-          <Button className="w-[95px]!" variant="primary" onClick={handleSave}>
+          <Button className="w-23.75!" variant="primary" onClick={handleSave}>
             {' '}
             {t(($) => $['operation.save'], { ns: 'common' })}
           </Button>
diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index 61de251c131..d346080d92a 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -160,7 +160,7 @@ const EditBody: FC<Props> = ({ readonly, nodeId, payload, onChange }) => {
               onChange={handleTypeChange}
               disabled={readonly}
             />
-            <div className="text-[13px] leading-[18px] font-normal text-text-secondary">
+            <div className="text-[13px] leading-4.5 font-normal text-text-secondary">
               {bodyTextMap[t]}
             </div>
           </label>
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
index 068ebe7e039..6d7d2663afd 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
@@ -71,13 +71,13 @@ const KeyValueList: FC<Props> = ({
         <div
           className={cn(
             'flex h-full items-center border-r border-divider-regular pl-3',
-            isSupportFile ? 'w-[140px]' : 'w-1/2',
+            isSupportFile ? 'w-35' : 'w-1/2',
           )}
         >
           {t(($) => $[`${i18nPrefix}.key`], { ns: 'workflow' })}
         </div>
         {isSupportFile && (
-          <div className="flex h-full w-[70px] shrink-0 items-center border-r border-divider-regular pl-3">
+          <div className="flex h-full w-17.5 shrink-0 items-center border-r border-divider-regular pl-3">
             {t(($) => $[`${i18nPrefix}.type`], { ns: 'workflow' })}
           </div>
         )}
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
index 8ce5d182ba4..17ecc747be4 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
@@ -80,7 +80,7 @@ const InputItem: FC<Props> = ({
           insertVarTipToLeft={insertVarTipToLeft}
         />
       ) : (
-        <div className="h-full w-full pl-0.5 leading-[18px]">
+        <div className="h-full w-full pl-0.5 leading-4.5">
           {!hasValue && (
             <div className="text-xs font-normal text-text-quaternary">{placeholder}</div>
           )}
@@ -91,7 +91,7 @@ const InputItem: FC<Props> = ({
                 isFocus
                   ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs'
                   : 'border-components-input-border-hover bg-components-input-bg-normal',
-                'clamp group h-full w-0 grow rounded-lg border px-3 py-[6px]',
+                'clamp group h-full w-0 grow rounded-lg border px-3 py-1.5',
               )}
               value={value}
               onChange={onChange}
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
index f2cfe7b4d83..a1465d1abf4 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
@@ -91,10 +91,7 @@ const KeyValueItem: FC<Props> = ({
     // group class name is for hover row show remove button
     <div className={cn(className, 'group flex min-h-7 border-t border-divider-regular')}>
       <div
-        className={cn(
-          'shrink-0 border-r border-divider-regular',
-          isSupportFile ? 'w-[140px]' : 'w-1/2',
-        )}
+        className={cn('shrink-0 border-r border-divider-regular', isSupportFile ? 'w-35' : 'w-1/2')}
       >
         {!keyNotSupportVar ? (
           <InputItem
@@ -116,7 +113,7 @@ const KeyValueItem: FC<Props> = ({
         )}
       </div>
       {isSupportFile && (
-        <div className="w-[70px] shrink-0 border-r border-divider-regular">
+        <div className="w-17.5 shrink-0 border-r border-divider-regular">
           <Select
             value={payload.type ?? 'text'}
             onValueChange={(value) => value && handleChange('type')(value)}
diff --git a/web/app/components/workflow/nodes/http/components/timeout/index.tsx b/web/app/components/workflow/nodes/http/components/timeout/index.tsx
index a1a2e22d438..88cb805aeb5 100644
--- a/web/app/components/workflow/nodes/http/components/timeout/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/timeout/index.tsx
@@ -29,7 +29,7 @@ const InputField: FC<{
 }> = ({ title, description, placeholder, value, onChange, readOnly, min, max }) => {
   return (
     <div className="space-y-1">
-      <div className="flex h-[18px] items-center space-x-2">
+      <div className="flex h-4.5 items-center space-x-2">
         <span className="text-[13px] font-medium text-text-primary">{title}</span>
         <span className="text-xs font-normal text-text-tertiary">{description}</span>
       </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 8bb080d1b83..9b7dae37836 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
@@ -65,10 +65,10 @@ const ButtonStyleDropdown: FC<Props> = ({ text = 'Button Text', data, onChange,
           <div className="system-md-medium text-text-primary">
             {t(($) => $[`${i18nPrefix}.userActions.chooseStyle`], { ns: 'workflow' })}
           </div>
-          <div className="mt-2 flex w-[324px] flex-wrap gap-1">
+          <div className="mt-2 flex w-81 flex-wrap gap-1">
             <div
               className={cn(
-                'box-border flex h-[80px] w-[160px] cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section hover:bg-background-section-burn',
+                'box-border flex h-20 w-40 cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section hover:bg-background-section-burn',
                 data === UserActionButtonType.Primary &&
                   'border-components-option-card-option-selected-border',
               )}
@@ -80,7 +80,7 @@ const ButtonStyleDropdown: FC<Props> = ({ text = 'Button Text', data, onChange,
             </div>
             <div
               className={cn(
-                'box-border flex h-[80px] w-[160px] cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section hover:bg-background-section-burn',
+                'box-border flex h-20 w-40 cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section hover:bg-background-section-burn',
                 data === UserActionButtonType.Default &&
                   'border-components-option-card-option-selected-border',
               )}
@@ -92,7 +92,7 @@ const ButtonStyleDropdown: FC<Props> = ({ text = 'Button Text', data, onChange,
             </div>
             <div
               className={cn(
-                'box-border flex h-[80px] w-[160px] cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section hover:bg-background-section-burn',
+                'box-border flex h-20 w-40 cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section hover:bg-background-section-burn',
                 data === UserActionButtonType.Accent &&
                   'border-components-option-card-option-selected-border',
               )}
@@ -104,7 +104,7 @@ const ButtonStyleDropdown: FC<Props> = ({ text = 'Button Text', data, onChange,
             </div>
             <div
               className={cn(
-                'box-border flex h-[80px] w-[160px] cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section hover:bg-background-section-burn',
+                'box-border flex h-20 w-40 cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section hover:bg-background-section-burn',
                 data === UserActionButtonType.Ghost &&
                   'border-components-option-card-option-selected-border',
               )}
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 195775e196f..03257cfd725 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
@@ -88,7 +88,7 @@ const EmailConfigureModal = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[calc(100dvh-64px)]! w-[720px]!">
+      <DialogContent className="max-h-[calc(100dvh-64px)]! w-180!">
         <DialogCloseButton />
         <div className="space-y-1 pr-8">
           <DialogTitle className="title-2xl-semi-bold text-text-primary">
@@ -166,10 +166,10 @@ const EmailConfigureModal = ({
           </div>
         </div>
         <div className="mt-6 flex flex-row-reverse gap-2">
-          <Button variant="primary" className="w-[72px]" onClick={handleConfirm}>
+          <Button variant="primary" className="w-18" onClick={handleConfirm}>
             {t(($) => $['operation.save'], { ns: 'common' })}
           </Button>
-          <Button className="w-[72px]" onClick={() => onOpenChange(false)}>
+          <Button className="w-18" onClick={() => onOpenChange(false)}>
             {t(($) => $['operation.cancel'], { ns: 'common' })}
           </Button>
         </div>
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/mail-body-input.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/mail-body-input.tsx
index f1fafbe0c43..80c956c5bb7 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/mail-body-input.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/mail-body-input.tsx
@@ -29,7 +29,7 @@ const MailBodyInput = ({
         'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
         'focus-within:border-components-input-border-active focus-within:bg-components-input-bg-active focus-within:shadow-xs',
       )}
-      className="caret:text-text-accent min-h-[128px]"
+      className="caret:text-text-accent min-h-32"
       editable={!readOnly}
       value={value}
       requestURLBlock={{
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 13b8db2e098..7df98ab9ff7 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
@@ -76,7 +76,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({ data, onAdd, onShowUpgradeTip
         sideOffset={4}
         popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
+        <div className="w-90 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
           <div className="p-1">
             <div
               className={cn(
@@ -114,12 +114,12 @@ const MethodSelector: FC<MethodSelectorProps> = ({ data, onAdd, onShowUpgradeTip
                 </div>
               </div>
               {webAppDeliveryInfo.added && (
-                <div className="absolute top-[13px] right-[12px] system-xs-regular text-text-tertiary">
+                <div className="absolute top-3.25 right-3 system-xs-regular text-text-tertiary">
                   {t(($) => $[`${i18nPrefix}.deliveryMethod.added`], { ns: 'workflow' })}
                 </div>
               )}
               {webAppDeliveryInfo.isTriggerMode && !webAppDeliveryInfo.added && (
-                <div className="absolute top-[13px] right-[12px] system-xs-regular text-text-tertiary">
+                <div className="absolute top-3.25 right-3 system-xs-regular text-text-tertiary">
                   {t(($) => $[`${i18nPrefix}.deliveryMethod.notAvailableInTriggerMode`], {
                     ns: 'workflow',
                   })}
@@ -165,7 +165,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({ data, onAdd, onShowUpgradeTip
                 </div>
               </div>
               {emailDeliveryInfo.added && (
-                <div className="absolute top-[13px] right-[12px] system-xs-regular text-text-tertiary">
+                <div className="absolute top-3.25 right-3 system-xs-regular text-text-tertiary">
                   {t(($) => $[`${i18nPrefix}.deliveryMethod.added`], { ns: 'workflow' })}
                 </div>
               )}
@@ -197,7 +197,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({ data, onAdd, onShowUpgradeTip
                   })}
                 </div>
               </div>
-              <div className="absolute top-[8px] right-[8px]">
+              <div className="absolute top-2 right-2">
                 <Badge className="h-4">COMING SOON</Badge>
               </div>
             </div>
@@ -228,7 +228,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({ data, onAdd, onShowUpgradeTip
                   })}
                 </div>
               </div>
-              <div className="absolute top-[8px] right-[8px]">
+              <div className="absolute top-2 right-2">
                 <Badge className="h-4">COMING SOON</Badge>
               </div>
             </div>
@@ -259,7 +259,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({ data, onAdd, onShowUpgradeTip
                   })}
                 </div>
               </div>
-              <div className="absolute top-[8px] right-[8px]">
+              <div className="absolute top-2 right-2">
                 <Badge className="h-4">COMING SOON</Badge>
               </div>
             </div>
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
index 035003326a1..eaddb91b244 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
@@ -136,7 +136,7 @@ const EmailInput = ({ email, value, list, onDelete, onSelect, onAdd, disabled =
           <Popover open={open} onOpenChange={setOpen}>
             <input
               ref={inputRef}
-              className="h-6 min-w-[166px] appearance-none bg-transparent p-1 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder"
+              className="h-6 min-w-41.5 appearance-none bg-transparent p-1 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder"
               placeholder={placeholder}
               onFocus={() => setIsFocus(true)}
               onBlur={handleInputBlur}
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 c78baa34ad0..faaf49fa340 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
@@ -27,10 +27,7 @@ const EmailItem = ({ email, data, onDelete, disabled = false, isError }: Props)
     >
       {isError && <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"
-      >
+      <div title={data.email} className="max-w-125 truncate system-xs-regular text-text-primary">
         {email === data.email ? data.name : data.email}
         {email === data.email && (
           <span className="system-xs-regular text-text-tertiary">
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 4a445389596..f7231689624 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
@@ -71,7 +71,7 @@ const Recipient = ({ data, onChange }: Props) => {
               })}
             </div>
           </div>
-          <div className="w-[86px]">
+          <div className="w-21.5">
             <MemberSelector
               value={data.items}
               email={userProfileEmail}
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
index 6afc457b9b7..bd25945a818 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
@@ -58,7 +58,7 @@ const MemberList: FC<Props> = ({
         </div>
       )}
       {filteredList.length > 0 && (
-        <div className="max-h-[248px] overflow-y-auto p-1">
+        <div className="max-h-62 overflow-y-auto p-1">
           {filteredList.map((account) => (
             <div
               key={account.id}
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 00f228e0286..f34004de0a7 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
@@ -317,7 +317,7 @@ const EmailSenderModal = ({
             </div>
           )}
           <div className="mt-6 flex flex-row-reverse gap-2">
-            <Button variant="primary" className="w-[72px]" onClick={() => onOpenChange(false)}>
+            <Button variant="primary" className="w-18" onClick={() => onOpenChange(false)}>
               {t(($) => $['operation.ok'], { ns: 'common' })}
             </Button>
           </div>
@@ -470,7 +470,7 @@ const EmailSenderModal = ({
           >
             {t(($) => $[`${i18nPrefix}.deliveryMethod.emailSender.send`], { ns: 'workflow' })}
           </Button>
-          <Button className="w-[72px]" onClick={() => onOpenChange(false)}>
+          <Button className="w-18" onClick={() => onOpenChange(false)}>
             {t(($) => $['operation.cancel'], { ns: 'common' })}
           </Button>
         </div>
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
index af50a6bfcd2..d1a1c6a2b1e 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
@@ -38,19 +38,19 @@ export function UpgradeModal({ open, onOpenChange }: UpgradeModalProps) {
       }}
       footer={
         <>
-          <Button className="w-[72px]" onClick={() => onOpenChange(false)}>
+          <Button className="w-18" onClick={() => onOpenChange(false)}>
             {t(($) => $['nodes.humanInput.deliveryMethod.upgradeTipHide'], { ns: 'workflow' })}
           </Button>
           {deploymentEdition === 'CLOUD' && (
             <PremiumBadgeButton
               size="custom"
               color="blue"
-              className="h-8 w-[93px]"
+              className="h-8 w-23.25"
               onClick={handleUpgrade}
             >
               <SparklesSoft
                 aria-hidden="true"
-                className="flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0"
+                className="flex h-3.5 w-3.5 items-center py-px pl-0.75 text-components-premium-badge-indigo-text-stop-0"
               />
               <div className="system-sm-medium">
                 <span className="p-1">
diff --git a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
index 8218430a00e..df73d661e62 100644
--- a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
@@ -61,12 +61,12 @@ const FormContentPreview: FC<FormContentPreviewProps> = ({
 
   return (
     <div
-      className="fixed top-[112px] z-10 max-h-[calc(100vh-116px)] w-[600px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg py-3 shadow-xl"
+      className="fixed top-28 z-10 max-h-[calc(100vh-116px)] w-150 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg py-3 shadow-xl"
       style={{
         right: panelWidth + 8,
       }}
     >
-      <div className="flex h-[26px] items-center justify-between px-4">
+      <div className="flex h-6.5 items-center justify-between px-4">
         <Badge uppercase className="border-text-accent-secondary text-text-accent-secondary">
           {t(($) => $[`${i18nPrefix}.formContent.preview`], { ns: 'workflow' })}
         </Badge>
diff --git a/web/app/components/workflow/nodes/human-input/components/form-content.tsx b/web/app/components/workflow/nodes/human-input/components/form-content.tsx
index 1b9e92b7b93..7fcd701dde9 100644
--- a/web/app/components/workflow/nodes/human-input/components/form-content.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/form-content.tsx
@@ -155,16 +155,16 @@ const FormContent: FC<FormContentProps> = ({
       className={cn(
         'flex grow flex-col rounded-[10px] border border-components-input-bg-normal bg-components-input-bg-normal pt-1',
         isFocus && 'border-components-input-border-active bg-components-input-bg-active',
-        !isFocus && 'pb-[32px]',
+        !isFocus && 'pb-8',
         readonly && 'pointer-events-none',
       )}
     >
-      <div className={cn('max-h-[300px] overflow-y-auto px-3', isExpand && 'h-0 max-h-full grow')}>
+      <div className={cn('max-h-75 overflow-y-auto px-3', isExpand && 'h-0 max-h-full grow')}>
         <PromptEditor
           key={editorKey}
           value={value}
           onChange={onChange}
-          className={cn('min-h-[80px]', isExpand && 'h-full')}
+          className={cn('min-h-20', isExpand && 'h-full')}
           onFocus={setFocus}
           onBlur={setBlur}
           placeholder={t(($) => $['nodes.humanInput.formContent.placeholder'], { ns: 'workflow' })}
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index d1565d004a6..04f3e53e92d 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -104,7 +104,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({ id, data }) => {
         className={cn(
           'px-4 py-2',
           isExpandFormContent &&
-            'fixed top-[244px] right-[4px] bottom-[8px] z-10 flex flex-col rounded-b-2xl bg-components-panel-bg',
+            'fixed top-61 right-1 bottom-2 z-10 flex flex-col rounded-b-2xl bg-components-panel-bg',
         )}
         style={{
           width: isExpandFormContent ? nodePanelWidth : '100%',
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 f4cee942794..62af2a074cd 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
@@ -51,7 +51,7 @@ const ConditionAdd = ({
         sideOffset={4}
         popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
+        <div className="w-74 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
           <VarReferenceVars vars={variables} isSupportFileVar onChange={handleSelectVariable} />
         </div>
       </PopoverContent>
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx b/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx
index 31e65ca79d6..ad954bf8092 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx
@@ -78,7 +78,7 @@ const ConditionValue = ({ condition }: ConditionValueProps) => {
           {operatorName}
         </div>
       </div>
-      <div className="ml-[10px] border-l border-divider-regular pl-[10px]">
+      <div className="ml-2.5 border-l border-divider-regular pl-2.5">
         {sub_variable_condition?.conditions.map((c: Condition, index) => {
           const comparisonOperator = c.comparison_operator
           const comparisonOperatorName =
@@ -97,7 +97,7 @@ const ConditionValue = ({ condition }: ConditionValueProps) => {
                 </div>
               )}
               {index !== sub_variable_condition.conditions.length - 1 && (
-                <div className="absolute right-1 bottom-[-10px] z-10 text-[10px] leading-4 font-medium text-text-accent uppercase">
+                <div className="absolute right-1 -bottom-2.5 z-10 text-2xs leading-4 font-medium text-text-accent uppercase">
                   {t(($) => $[`nodes.ifElse.${sub_variable_condition.logical_operator}`], {
                     ns: 'workflow',
                   })}
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 99dd1c3d559..85bdf8f8756 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
@@ -348,7 +348,7 @@ const ConditionItem = ({
                     >
                       <div className="flex h-6 items-center justify-between">
                         <div className="flex h-full items-center">
-                          <Variable02 className="mr-[5px] h-3.5 w-3.5 text-text-accent" />
+                          <Variable02 className="mr-1.25 h-3.5 w-3.5 text-text-accent" />
                           <SelectItemText className="mr-0 px-0 system-sm-medium text-text-secondary">
                             {option.name}
                           </SelectItemText>
@@ -383,7 +383,7 @@ const ConditionItem = ({
           !isNotInput &&
           condition.varType !== VarType.number &&
           !showBooleanInput && (
-            <div className="max-h-[100px] overflow-y-auto border-t border-t-divider-subtle px-2 py-1">
+            <div className="max-h-25 overflow-y-auto border-t border-t-divider-subtle px-2 py-1">
               <ConditionInput
                 disabled={disabled}
                 value={condition.value as string}
@@ -403,7 +403,7 @@ const ConditionItem = ({
         {!comparisonOperatorNotRequireValue(condition.comparison_operator) &&
           !isNotInput &&
           condition.varType === VarType.number && (
-            <div className="border-t border-t-divider-subtle px-2 py-1 pt-[3px]">
+            <div className="border-t border-t-divider-subtle px-2 py-1 pt-0.75">
               <ConditionNumberInput
                 numberVarType={condition.numberVarType}
                 onNumberVarTypeChange={handleUpdateConditionNumberVarType}
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-var-selector.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-var-selector.tsx
index 4cc11f7bc7f..30567ee50ae 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-var-selector.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-var-selector.tsx
@@ -47,7 +47,7 @@ const ConditionVarSelector = ({
         sideOffset={4}
         popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
+        <div className="w-74 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
           <VarReferenceVars vars={nodesOutputVars} isSupportFileVar onChange={onChange} />
         </div>
       </PopoverContent>
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 ecedd9aa447..e4c9a00d752 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
@@ -80,19 +80,19 @@ const ConditionList = ({
   }, [conditions.length, isSubVariable, logical_operator])
 
   return (
-    <div className={cn('relative', !isSubVariable && 'pl-[60px]')}>
+    <div className={cn('relative', !isSubVariable && 'pl-15')}>
       {conditions.length > 1 && (
         <div
           className={cn(
-            'absolute top-0 bottom-0 left-0 w-[60px]',
-            isSubVariable && logical_operator === LogicalOperator.and && 'left-[-10px]',
-            isSubVariable && logical_operator === LogicalOperator.or && 'left-[-18px]',
+            'absolute top-0 bottom-0 left-0 w-15',
+            isSubVariable && logical_operator === LogicalOperator.and && '-left-2.5',
+            isSubVariable && logical_operator === LogicalOperator.or && '-left-4.5',
           )}
         >
-          <div className="absolute top-4 bottom-4 left-[46px] w-2.5 rounded-l-[8px] border border-r-0 border-divider-deep"></div>
-          <div className="absolute top-1/2 right-0 h-[29px] w-4 -translate-y-1/2 bg-components-panel-bg"></div>
+          <div className="absolute top-4 bottom-4 left-11.5 w-2.5 rounded-l-lg border border-r-0 border-divider-deep"></div>
+          <div className="absolute top-1/2 right-0 h-7.25 w-4 -translate-y-1/2 bg-components-panel-bg"></div>
           <div
-            className="absolute top-1/2 right-1 flex h-[21px] -translate-y-1/2 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-[10px] font-semibold text-text-accent-secondary shadow-xs select-none"
+            className="absolute top-1/2 right-1 flex h-5.25 -translate-y-1/2 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-2xs font-semibold text-text-accent-secondary shadow-xs select-none"
             onClick={doToggleConditionLogicalOperator}
           >
             {logical_operator.toUpperCase()}
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 c961a590997..05024434fc3 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
@@ -112,8 +112,8 @@ const ConditionNumberInput = ({
             >
               <div
                 className={cn(
-                  'w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-1 shadow-lg',
-                  isShort && 'w-[200px]',
+                  'w-74 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-1 shadow-lg',
+                  isShort && 'w-50',
                 )}
               >
                 <VarReferenceVars vars={variables} onChange={handleSelectVariable} />
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 9543ae1850a..6b7d256d3f6 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
@@ -110,7 +110,7 @@ const ConditionWrap: FC<Props> = ({
               className={cn(
                 'group relative rounded-[10px] bg-components-panel-bg',
                 willDeleteCaseId === item.case_id && 'bg-state-destructive-hover',
-                !isSubVariable && 'min-h-[40px] px-3 py-1',
+                !isSubVariable && 'min-h-10 px-3 py-1',
                 isSubVariable && 'px-1 py-2',
               )}
             >
@@ -130,7 +130,7 @@ const ConditionWrap: FC<Props> = ({
                   >
                     {index === 0 ? 'IF' : 'ELIF'}
                     {casesLength > 1 && (
-                      <div className="text-[10px] font-medium text-text-tertiary">
+                      <div className="text-2xs font-medium text-text-tertiary">
                         CASE
                         {index + 1}
                       </div>
@@ -168,10 +168,10 @@ const ConditionWrap: FC<Props> = ({
 
               <div
                 className={cn(
-                  'flex items-center justify-between pr-[30px]',
+                  'flex items-center justify-between pr-7.5',
                   !item.conditions.length && !isSubVariable && 'mt-1',
                   !item.conditions.length && isSubVariable && 'mt-2',
-                  !isSubVariable && 'pl-[60px]',
+                  !isSubVariable && 'pl-15',
                 )}
               >
                 {isSubVariable ? (
diff --git a/web/app/components/workflow/nodes/if-else/node.tsx b/web/app/components/workflow/nodes/if-else/node.tsx
index a8419368c3c..e03fa6d2b2e 100644
--- a/web/app/components/workflow/nodes/if-else/node.tsx
+++ b/web/app/components/workflow/nodes/if-else/node.tsx
@@ -48,7 +48,7 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
         <div key={caseItem.case_id}>
           <div className="relative flex h-6 items-center px-1">
             <div className="flex w-full items-center justify-between">
-              <div className="text-[10px] font-semibold text-text-tertiary">
+              <div className="text-2xs font-semibold text-text-tertiary">
                 {casesLength > 1 && `CASE ${index + 1}`}
               </div>
               <div className="text-[12px] font-semibold text-text-secondary">
@@ -85,7 +85,7 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
                   conditionNotSet
                 )}
                 {i !== caseItem.conditions.length - 1 && (
-                  <div className="absolute right-1 bottom-[-10px] z-10 text-[10px] leading-4 font-medium text-text-accent uppercase">
+                  <div className="absolute right-1 -bottom-2.5 z-10 text-2xs leading-4 font-medium text-text-accent uppercase">
                     {t(($) => $[`${i18nPrefix}.${caseItem.logical_operator}`], { ns: 'workflow' })}
                   </div>
                 )}
diff --git a/web/app/components/workflow/nodes/if-else/panel.tsx b/web/app/components/workflow/nodes/if-else/panel.tsx
index cc5db31bc61..dde2ccc1197 100644
--- a/web/app/components/workflow/nodes/if-else/panel.tsx
+++ b/web/app/components/workflow/nodes/if-else/panel.tsx
@@ -70,7 +70,7 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({ id, data }) => {
       </div>
       <div className="mx-3 my-2 h-px bg-divider-subtle"></div>
       <Field title={t(($) => $[`${i18nPrefix}.else`], { ns: 'workflow' })} className="px-4 py-2">
-        <div className="text-xs leading-[18px] font-normal text-text-tertiary">
+        <div className="text-xs leading-4.5 font-normal text-text-tertiary">
           {t(($) => $[`${i18nPrefix}.elseDescription`], { ns: 'workflow' })}
         </div>
       </Field>
diff --git a/web/app/components/workflow/nodes/iteration-start/index.tsx b/web/app/components/workflow/nodes/iteration-start/index.tsx
index 9675f3757c3..67e1c90e679 100644
--- a/web/app/components/workflow/nodes/iteration-start/index.tsx
+++ b/web/app/components/workflow/nodes/iteration-start/index.tsx
@@ -33,7 +33,7 @@ export const IterationStartNodeDumb = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="nodrag relative top-[21px] left-[17px] z-11 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg">
+    <div className="nodrag relative top-5.25 left-4.25 z-11 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg">
       <Tooltip>
         <TooltipTrigger
           aria-label={t(($) => $['blocks.iteration-start'], { ns: 'workflow' })}
diff --git a/web/app/components/workflow/nodes/iteration/node.tsx b/web/app/components/workflow/nodes/iteration/node.tsx
index 8e4b2302521..2d0b1de10d4 100644
--- a/web/app/components/workflow/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/nodes/iteration/node.tsx
@@ -30,7 +30,7 @@ const Node: FC<NodeProps<IterationNodeType>> = ({ id, data }) => {
   return (
     <div
       className={cn(
-        'relative h-full min-h-[90px] w-full min-w-[240px] rounded-2xl bg-workflow-canvas-workflow-bg',
+        'relative h-full min-h-22.5 w-full min-w-60 rounded-2xl bg-workflow-canvas-workflow-bg',
       )}
     >
       <Background
diff --git a/web/app/components/workflow/nodes/iteration/panel.tsx b/web/app/components/workflow/nodes/iteration/panel.tsx
index 216423a62a7..57d976a6cf1 100644
--- a/web/app/components/workflow/nodes/iteration/panel.tsx
+++ b/web/app/components/workflow/nodes/iteration/panel.tsx
@@ -70,7 +70,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({ id, data }) => {
           title={t(($) => $[`${i18nPrefix}.input`], { ns: 'workflow' })}
           required
           operations={
-            <div className="flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary capitalize">
+            <div className="flex h-4.5 items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary capitalize">
               Array
             </div>
           }
@@ -91,7 +91,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({ id, data }) => {
           title={t(($) => $[`${i18nPrefix}.output`], { ns: 'workflow' })}
           required
           operations={
-            <div className="flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary capitalize">
+            <div className="flex h-4.5 items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary capitalize">
               Array
             </div>
           }
@@ -111,7 +111,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({ id, data }) => {
         <Field
           title={t(($) => $[`${i18nPrefix}.parallelMode`], { ns: 'workflow' })}
           tooltip={
-            <div className="w-[230px]">
+            <div className="w-57.5">
               {t(($) => $[`${i18nPrefix}.parallelPanelDesc`], { ns: 'workflow' })}
             </div>
           }
@@ -126,7 +126,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({ id, data }) => {
             title={maxParallelismLabel}
             isSubTitle
             tooltip={
-              <div className="w-[230px]">
+              <div className="w-57.5">
                 {t(($) => $[`${i18nPrefix}.MaxParallelismDesc`], { ns: 'workflow' })}
               </div>
             }
@@ -190,7 +190,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({ id, data }) => {
         <Field
           title={t(($) => $[`${i18nPrefix}.flattenOutput`], { ns: 'workflow' })}
           tooltip={
-            <div className="w-[230px]">
+            <div className="w-57.5">
               {t(($) => $[`${i18nPrefix}.flattenOutputDesc`], { ns: 'workflow' })}
             </div>
           }
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
index 99a8f33067b..4112bf75754 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
@@ -15,7 +15,7 @@ export const useChunkStructure = () => {
     icon: (isActive: boolean) => (
       <GeneralChunk
         className={cn(
-          'h-[18px] w-[18px] text-text-tertiary group-hover:text-util-colors-indigo-indigo-600',
+          'h-4.5 w-4.5 text-text-tertiary group-hover:text-util-colors-indigo-indigo-600',
           isActive && 'text-util-colors-indigo-indigo-600',
         )}
       />
@@ -29,7 +29,7 @@ export const useChunkStructure = () => {
     icon: (isActive: boolean) => (
       <ParentChildChunk
         className={cn(
-          'h-[18px] w-[18px] text-text-tertiary group-hover:text-util-colors-blue-light-blue-light-500',
+          'h-4.5 w-4.5 text-text-tertiary group-hover:text-util-colors-blue-light-blue-light-500',
           isActive && 'text-util-colors-blue-light-blue-light-500',
         )}
       />
@@ -43,7 +43,7 @@ export const useChunkStructure = () => {
     icon: (isActive: boolean) => (
       <QuestionAndAnswer
         className={cn(
-          'h-[18px] w-[18px] text-text-tertiary group-hover:text-util-colors-teal-teal-600',
+          'h-4.5 w-4.5 text-text-tertiary group-hover:text-util-colors-teal-teal-600',
           isActive && 'text-util-colors-teal-teal-600',
         )}
       />
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx
index 98ba7888035..879aaeec727 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx
@@ -22,10 +22,10 @@ const Instruction = ({ className }: InstructionProps) => {
     >
       <div className="relative flex size-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-[5px]">
         <AddChunks className="size-5 text-text-accent" />
-        <Line className="absolute bottom-[-76px] -left-px" type="vertical" />
-        <Line className="absolute -right-px bottom-[-76px]" type="vertical" />
-        <Line className="absolute -top-px right-[-184px]" type="horizontal" />
-        <Line className="absolute right-[-184px] -bottom-px" type="horizontal" />
+        <Line className="absolute -bottom-19 -left-px" type="vertical" />
+        <Line className="absolute -right-px -bottom-19" type="vertical" />
+        <Line className="absolute -top-px -right-46" type="horizontal" />
+        <Line className="absolute -right-46 -bottom-px" type="horizontal" />
       </div>
       <div className="flex flex-col gap-y-1">
         <div className="system-sm-medium text-text-secondary">
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx
index bd06067e418..cc514a87637 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx
@@ -50,7 +50,7 @@ const Selector = ({ options, value, onChange, readonly, trigger }: SelectorProps
         alignOffset={-8}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="w-[404px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]">
+        <div className="w-101 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]">
           <div className="px-3 pt-3.5 system-sm-semibold text-text-primary">
             {t(($) => $['nodes.knowledgeBase.changeChunkStructure'], { ns: 'workflow' })}
           </div>
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 33e79e18e34..20573064879 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
@@ -59,7 +59,7 @@ const IndexMethod = ({
           icon={
             <HighQuality
               className={cn(
-                'h-[15px] w-[15px] text-text-tertiary group-hover:text-util-colors-orange-orange-500',
+                'h-3.75 w-3.75 text-text-tertiary group-hover:text-util-colors-orange-orange-500',
                 isHighQuality && 'text-util-colors-orange-orange-500',
               )}
             />
@@ -77,7 +77,7 @@ const IndexMethod = ({
             icon={
               <Economic
                 className={cn(
-                  'h-[15px] w-[15px] text-text-tertiary group-hover:text-util-colors-indigo-indigo-500',
+                  'h-3.75 w-3.75 text-text-tertiary group-hover:text-util-colors-indigo-indigo-500',
                   isEconomy && 'text-util-colors-indigo-indigo-500',
                 )}
               />
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 4d03e7b98a9..a66028da05d 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
@@ -64,7 +64,7 @@ const OptionCard = memo(
         return (
           <div
             className={cn(
-              'absolute top-[-2px] left-[-2px] hidden h-14 w-14 rounded-full',
+              'absolute -top-0.5 -left-0.5 hidden h-14 w-14 rounded-full',
               'group-hover:block',
               isActive && 'block',
             )}
@@ -104,7 +104,7 @@ const OptionCard = memo(
         >
           {effectElement}
           {!!icon && (
-            <div className="mr-1 flex h-[18px] w-[18px] shrink-0 items-center justify-center">
+            <div className="mr-1 flex h-4.5 w-4.5 shrink-0 items-center justify-center">
               {typeof icon === 'function' ? icon(isActive) : icon}
             </div>
           )}
@@ -134,7 +134,7 @@ const OptionCard = memo(
         </div>
         {!!(children && isActive) && (
           <div className="relative rounded-b-xl bg-components-panel-bg p-3">
-            <ArrowShape className="absolute top-[-11px] left-[14px] h-4 w-4 text-components-panel-bg" />
+            <ArrowShape className="absolute -top-2.75 left-3.5 h-4 w-4 text-components-panel-bg" />
             {children}
           </div>
         )}
diff --git a/web/app/components/workflow/nodes/knowledge-base/node.tsx b/web/app/components/workflow/nodes/knowledge-base/node.tsx
index 369ad627770..6c1a39da19e 100644
--- a/web/app/components/workflow/nodes/knowledge-base/node.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/node.tsx
@@ -181,7 +181,7 @@ const Node: FC<NodeProps<KnowledgeBaseNodeType>> = ({ data }) => {
     return (
       <div className="mb-1 space-y-0.5 px-3 py-1">
         <div className="flex h-6 items-center rounded-md border-[0.5px] border-state-warning-active bg-state-warning-hover px-1.5">
-          <span className="mr-1 size-[4px] shrink-0 rounded-xs bg-text-warning-secondary" />
+          <span className="mr-1 size-1 shrink-0 rounded-xs bg-text-warning-secondary" />
           <div
             className="grow truncate system-xs-medium text-text-warning"
             title={validationIssueMessage}
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 adfea0433b7..550a59518c0 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
@@ -162,7 +162,7 @@ const DatasetItem: FC<Props> = ({
             <DrawerViewport>
               <DrawerPopup
                 className={cn(
-                  'p-0! data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[640px] data-[swipe-direction=right]:rounded-xl',
+                  'p-0! data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-160 data-[swipe-direction=right]:rounded-xl',
                   settingsDrawerPopupClassName ??
                     'data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:bottom-3',
                 )}
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 e656cecaf22..709112ca033 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
@@ -35,7 +35,7 @@ const ConditionCommonVariableSelector = ({
         render={
           <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">
+              <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-1.25 system-xs-medium text-text-secondary shadow-xs">
                 <Variable02 className="mr-1 size-3.5 text-text-accent" />
                 {selected.value}
               </div>
@@ -48,7 +48,7 @@ const ConditionCommonVariableSelector = ({
                     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">
+                <div className="flex h-5 shrink-0 items-center rounded-[5px] border border-divider-deep px-1.25 system-2xs-medium text-text-tertiary">
                   {varType}
                 </div>
               </>
@@ -64,7 +64,7 @@ const ConditionCommonVariableSelector = ({
         sideOffset={4}
         popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="w-[200px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
+        <div className="w-50 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
           {variables.map((v) => (
             <div
               key={v.value}
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 6748afe49f7..ff0de22dd0a 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
@@ -31,7 +31,7 @@ const ConditionValueMethod = ({
         sideOffset={4}
         popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
+        <div className="w-28 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
           {options.map((option) => (
             <div
               key={option}
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 b0d4b51785a..0849fa77a42 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
@@ -54,7 +54,7 @@ const ConditionVariableSelector = ({
                     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">
+                <div className="flex h-5 shrink-0 items-center rounded-[5px] border border-divider-deep px-1.25 system-2xs-medium text-text-tertiary">
                   {varType}
                 </div>
               </>
@@ -67,7 +67,7 @@ const ConditionVariableSelector = ({
         sideOffset={4}
         popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
+        <div className="w-74 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
           <VarReferenceVars vars={nodesOutputVars} isSupportFileVar onChange={handleChange} />
         </div>
       </PopoverContent>
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 f19a75eb540..1179d8bd5a7 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
@@ -31,11 +31,11 @@ const ConditionList = ({
   return (
     <div className={cn('relative')}>
       {conditions.length > 1 && (
-        <div className={cn('absolute top-0 bottom-0 left-0 w-[44px]')}>
-          <div className="absolute top-4 right-1 bottom-4 w-2.5 rounded-l-[8px] border border-r-0 border-divider-deep"></div>
-          <div className="absolute top-1/2 right-0 h-[29px] w-4 -translate-y-1/2 bg-components-panel-bg"></div>
+        <div className={cn('absolute top-0 bottom-0 left-0 w-11')}>
+          <div className="absolute top-4 right-1 bottom-4 w-2.5 rounded-l-lg border border-r-0 border-divider-deep"></div>
+          <div className="absolute top-1/2 right-0 h-7.25 w-4 -translate-y-1/2 bg-components-panel-bg"></div>
           <div
-            className="absolute top-1/2 right-1 flex h-[21px] -translate-y-1/2 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-[10px] font-semibold text-text-accent-secondary shadow-xs select-none"
+            className="absolute top-1/2 right-1 flex h-5.25 -translate-y-1/2 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-2xs font-semibold text-text-accent-secondary shadow-xs select-none"
             onClick={() => handleToggleConditionLogicalOperator()}
           >
             {logical_operator.toUpperCase()}
@@ -43,7 +43,7 @@ const ConditionList = ({
           </div>
         </div>
       )}
-      <div className={cn(conditions.length > 1 && 'pl-[44px]')}>
+      <div className={cn(conditions.length > 1 && 'pl-11')}>
         {conditions.map((condition) => (
           <ConditionItem
             key={`${condition.id}`}
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 f6c2e7acaf5..4fb3cde3889 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
@@ -17,7 +17,7 @@ const MetadataPanel = ({
   const { t } = useTranslation()
 
   return (
-    <div className="w-[420px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl">
+    <div className="w-105 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl">
       <div className="relative px-3 pt-3.5">
         <div className="system-xl-semibold text-text-primary">
           {t(($) => $['nodes.knowledgeRetrieval.metadata.panel.title'], { ns: 'workflow' })}
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 93f4f664580..2cf67518df9 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
@@ -142,7 +142,7 @@ const RetrievalConfig: FC<Props> = ({
         alignOffset={-2}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="w-[404px] rounded-2xl border border-components-panel-border bg-components-panel-bg px-4 pt-3 pb-4 shadow-xl">
+        <div className="w-101 rounded-2xl border border-components-panel-border bg-components-panel-bg px-4 pt-3 pb-4 shadow-xl">
           <ConfigRetrievalContent
             datasetConfigs={datasetConfigs}
             onChange={handleChange}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
index edb37315318..a4b66c2f305 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
@@ -38,7 +38,7 @@ const Node: FC<NodeProps<KnowledgeRetrievalNodeType>> = ({ data }) => {
           return (
             <div
               key={id}
-              className="flex h-[26px] items-center gap-x-1 rounded-md bg-workflow-block-parma-bg px-1"
+              className="flex h-6.5 items-center gap-x-1 rounded-md bg-workflow-block-parma-bg px-1"
             >
               <AppIcon
                 size="xs"
diff --git a/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx b/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
index 6f8c6d421cf..6e0b15482bc 100644
--- a/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
@@ -35,7 +35,7 @@ const ExtractInput: FC<Props> = ({ nodeId, readOnly, value, onChange }) => {
           isFocus
             ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs'
             : 'border-components-input-border-hover bg-components-input-bg-normal',
-          'w-0 grow rounded-lg border px-3 py-[6px]',
+          'w-0 grow rounded-lg border px-3 py-1.5',
         )}
         value={value}
         onChange={onChange}
diff --git a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
index 5d43dd3f1e3..8ea87d00fe2 100644
--- a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
@@ -170,7 +170,7 @@ const ValueInput = ({
           isFocus
             ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs'
             : 'border-components-input-border-hover bg-components-input-bg-normal',
-          'w-0 grow rounded-lg border px-3 py-[6px]',
+          'w-0 grow rounded-lg border px-3 py-1.5',
         )}
         value={getConditionValueAsString(condition)}
         onChange={onChange}
@@ -189,7 +189,7 @@ const ValueInput = ({
   return (
     <input
       type={getFallbackInputType({ hasSubVariable, condition, varType })}
-      className="grow rounded-lg border border-components-input-border-hover bg-components-input-bg-normal px-3 py-[6px]"
+      className="grow rounded-lg border border-components-input-border-hover bg-components-input-bg-normal px-3 py-1.5"
       value={getConditionValueAsString(condition)}
       onChange={(e) => onChange(e.target.value)}
       readOnly={readOnly}
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 27b40eba50d..7f402a5019a 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
@@ -67,7 +67,7 @@ const SubVariablePicker: FC<Props> = ({ value, onChange, className }) => {
             <SelectItem key={option.value} value={option.value} className="h-8 py-0 pr-5 pl-1">
               <div className="flex h-6 items-center justify-between">
                 <div className="flex h-full items-center">
-                  <Variable02 className="mr-[5px] h-3.5 w-3.5 text-text-accent" />
+                  <Variable02 className="mr-1.25 h-3.5 w-3.5 text-text-accent" />
                   <SelectItemText className="mr-0 px-0 system-sm-medium text-text-secondary">
                     {option.name}
                   </SelectItemText>
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
index 67e159f152e..b1305f9677c 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
@@ -112,7 +112,7 @@ const ConfigPromptItem: FC<Props> = ({
       title={
         <div className="relative left-1 flex items-center">
           {payload.role === PromptRole.system ? (
-            <div className="relative left-[-4px] text-xs font-semibold text-text-secondary uppercase">
+            <div className="relative -left-1 text-xs font-semibold text-text-secondary uppercase">
               SYSTEM
             </div>
           ) : (
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
index 17fc6a69d8d..df4fbfaabfe 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -205,7 +205,7 @@ const ConfigPrompt: FC<Props> = ({
                 return (
                   <div key={item.id || index} className="group relative">
                     {canDrag && (
-                      <DragHandle className="absolute top-2 left-[-14px] hidden h-3.5 w-3.5 text-text-quaternary group-hover:block" />
+                      <DragHandle className="absolute top-2 -left-3.5 hidden h-3.5 w-3.5 text-text-quaternary group-hover:block" />
                     )}
                     <ConfigPromptItem
                       instanceId={
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
index de2401d4147..f559f7c022f 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
@@ -22,7 +22,7 @@ export function JsonSchemaConfigModal({
         if (!open) onClose()
       }}
     >
-      <DialogContent className="h-[calc(100dvh-32px)] max-h-[800px] w-full max-w-[960px] overflow-hidden! border-none p-0 text-left align-middle">
+      <DialogContent className="h-[calc(100dvh-32px)] max-h-200 w-full max-w-240 overflow-hidden! border-none p-0 text-left align-middle">
         <JsonSchemaConfig defaultSchema={defaultSchema} onSave={onSave} onClose={onClose} />
       </DialogContent>
     </Dialog>
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 60f09d067aa..63f9ea18cf1 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
@@ -91,7 +91,7 @@ const JsonImporter: FC<JsonImporterProps> = ({ onSubmit, updateBtnWidth }) => {
         alignOffset={16}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="flex w-[400px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
+        <div className="flex w-100 flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
           {/* Title */}
           <div className="relative px-3 pt-3.5 pb-1">
             <button
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 90c04ebec60..4ac41e0e08e 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
@@ -208,7 +208,7 @@ function JsonSchemaConfigContent({ defaultSchema, onSave, onClose }: JsonSchemaC
           aria-label={t(($) => $['operation.close'], { ns: 'common' })}
           onClick={onClose}
         >
-          <span className="i-ri-close-line h-[18px] w-[18px] text-text-tertiary" />
+          <span className="i-ri-close-line h-4.5 w-4.5 text-text-tertiary" />
         </button>
       </div>
       <div className="flex items-center justify-between px-6 py-2">
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 3b68e952a85..049774652ed 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
@@ -56,9 +56,9 @@ const GeneratedResult: FC<GeneratedResultProps> = ({
   }, [schema, onApply])
 
   return (
-    <div className="flex w-[480px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
+    <div className="flex w-120 flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
       {isGenerating ? (
-        <div className="flex h-[600px] flex-col items-center justify-center gap-y-3">
+        <div className="flex h-150 flex-col items-center justify-center gap-y-3">
           <Loading type="area" />
           <div className="system-xs-regular text-text-tertiary">
             {t(($) => $['nodes.llm.jsonSchema.generating'], { ns: 'workflow' })}
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 6a0db343da9..17783abcd4e 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
@@ -46,7 +46,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
   )
 
   return (
-    <div className="relative flex w-[480px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
+    <div className="relative flex w-120 flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
       <button
         type="button"
         aria-label={t(($) => $['operation.close'], { ns: 'common' })}
@@ -93,7 +93,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
         <div className="flex items-center">
           <Textarea
             aria-label={t(($) => $['nodes.llm.jsonSchema.instruction'], { ns: 'workflow' })}
-            className="h-[364px] resize-none px-2 py-1"
+            className="h-91 resize-none px-2 py-1"
             value={instruction}
             placeholder={t(($) => $['nodes.llm.jsonSchema.promptPlaceholder'], { ns: 'workflow' })}
             onValueChange={handleInstructionChange}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
index 88585570eb7..9f21fcd4d06 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
@@ -35,7 +35,7 @@ const SchemaEditor: FC<SchemaEditorProps> = ({
       hideTopMenu={hideTopMenu}
       onFocus={onFocus}
       onBlur={onBlur}
-      topContent={isTruncated && <LargeDataAlert className="mx-1 mt-[-4px] mb-3" />}
+      topContent={isTruncated && <LargeDataAlert className="mx-1 -mt-1 mb-3" />}
     />
   )
 }
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 4339255061a..c94d2b131bc 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
@@ -28,7 +28,7 @@ const AddField = () => {
         onClick={handleAddField}
       >
         <RiAddCircleFill className="size-3.5" />
-        <span className="px-[3px]">
+        <span className="px-0.75">
           {t(($) => $['nodes.llm.jsonSchema.addField'], { ns: 'workflow' })}
         </span>
       </Button>
diff --git a/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx b/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx
index b50f0b80cc7..55e10dbc942 100644
--- a/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx
+++ b/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx
@@ -75,7 +75,7 @@ const PanelMemorySection: FC<Props> = ({
                 {t(($) => $['nodes.common.memories.tip'], { ns: 'workflow' })}
               </Infotip>
             </div>
-            <div className="flex h-[18px] items-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 text-xs font-semibold text-text-tertiary uppercase">
+            <div className="flex h-4.5 items-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 text-xs font-semibold text-text-tertiary uppercase">
               {t(($) => $['nodes.common.memories.builtIn'], { ns: 'workflow' })}
             </div>
           </div>
@@ -107,7 +107,7 @@ const PanelMemorySection: FC<Props> = ({
             {shouldCheckSysQuery &&
               inputs.memory.query_prompt_template &&
               !inputs.memory.query_prompt_template.includes('{{#sys.query#}}') && (
-                <div className="text-xs leading-[18px] font-normal text-[#DC6803]">
+                <div className="text-xs leading-4.5 font-normal text-[#DC6803]">
                   {t(($) => $[`${i18nPrefix}.sysQueryInUser`], { ns: 'workflow' })}
                 </div>
               )}
diff --git a/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx b/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
index 38c365898d4..40871e2e266 100644
--- a/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
+++ b/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
@@ -49,7 +49,7 @@ const PanelOutputSection: FC<Props> = ({
                     </div>
                   }
                 />
-                <TooltipContent className="w-[232px] rounded-xl border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-4 py-3.5 shadow-lg backdrop-blur-[5px]">
+                <TooltipContent className="w-58 rounded-xl border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-4 py-3.5 shadow-lg backdrop-blur-[5px]">
                   <div className="title-xs-semi-bold text-text-primary">
                     {t(($) => $['structOutput.modelNotSupported'], { ns: 'app' })}
                   </div>
diff --git a/web/app/components/workflow/nodes/llm/components/structure-output.tsx b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
index 62b5f543bb8..7a59532fdce 100644
--- a/web/app/components/workflow/nodes/llm/components/structure-output.tsx
+++ b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
@@ -27,7 +27,7 @@ export function StructureOutput({ className, value, onChange }: Props) {
   return (
     <div className={cn(className)}>
       <div className="flex justify-between">
-        <div className="flex items-center leading-[18px]">
+        <div className="flex items-center leading-4.5">
           <div className="code-sm-semibold text-text-secondary">structured_output</div>
           <div className="ml-2 system-xs-regular text-text-tertiary">object</div>
         </div>
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 528bd928694..22fa7b3828e 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -145,7 +145,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({ id, data }) => {
               filterVar={filterVar}
             />
             {shouldShowContextTip && (
-              <div className="text-xs leading-[18px] font-normal text-[#DC6803]">
+              <div className="text-xs leading-4.5 font-normal text-[#DC6803]">
                 {t(($) => $[`${i18nPrefix}.notSetContextInPromptTip`], { ns: 'workflow' })}
               </div>
             )}
diff --git a/web/app/components/workflow/nodes/loop-start/index.tsx b/web/app/components/workflow/nodes/loop-start/index.tsx
index 6546e358b42..ba5e2f055c3 100644
--- a/web/app/components/workflow/nodes/loop-start/index.tsx
+++ b/web/app/components/workflow/nodes/loop-start/index.tsx
@@ -33,7 +33,7 @@ export const LoopStartNodeDumb = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="nodrag relative top-[21px] left-[17px] z-11 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg">
+    <div className="nodrag relative top-5.25 left-4.25 z-11 flex h-11 w-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' })}
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 e5041ca3607..448863086b4 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-add.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-add.tsx
@@ -44,7 +44,7 @@ const ConditionAdd = ({ className, variables, onSelectVariable, disabled }: Cond
         sideOffset={4}
         popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
+        <div className="w-74 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
           <VarReferenceVars vars={variables} isSupportFileVar onChange={handleSelectVariable} />
         </div>
       </PopoverContent>
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 99de05f7e02..cbcdffbdbe7 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
@@ -269,7 +269,7 @@ const ConditionItem = ({
                     >
                       <div className="flex h-6 items-center justify-between">
                         <div className="flex h-full items-center">
-                          <Variable02 className="mr-[5px] h-3.5 w-3.5 text-text-accent" />
+                          <Variable02 className="mr-1.25 h-3.5 w-3.5 text-text-accent" />
                           <SelectItemText className="mr-0 px-0 system-sm-medium text-text-secondary">
                             {option.name}
                           </SelectItemText>
@@ -304,7 +304,7 @@ const ConditionItem = ({
           !isNotInput &&
           condition.varType !== VarType.number &&
           condition.varType !== VarType.boolean && (
-            <div className="max-h-[100px] overflow-y-auto border-t border-t-divider-subtle px-2 py-1">
+            <div className="max-h-25 overflow-y-auto border-t border-t-divider-subtle px-2 py-1">
               <ConditionInput
                 disabled={disabled}
                 value={condition.value as string}
@@ -322,7 +322,7 @@ const ConditionItem = ({
         {!comparisonOperatorNotRequireValue(condition.comparison_operator) &&
           !isNotInput &&
           condition.varType === VarType.number && (
-            <div className="border-t border-t-divider-subtle px-2 py-1 pt-[3px]">
+            <div className="border-t border-t-divider-subtle px-2 py-1 pt-0.75">
               <ConditionNumberInput
                 numberVarType={condition.numberVarType}
                 onNumberVarTypeChange={handleUpdateConditionNumberVarType}
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-var-selector.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-var-selector.tsx
index 8dc4cbddccb..66e94d656c3 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-var-selector.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-var-selector.tsx
@@ -47,7 +47,7 @@ const ConditionVarSelector = ({
         sideOffset={4}
         popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
+        <div className="w-74 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
           <VarReferenceVars vars={nodesOutputVars} isSupportFileVar onChange={onChange} />
         </div>
       </PopoverContent>
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 33b189b6e77..e7f001a14b5 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
@@ -71,19 +71,19 @@ const ConditionList = ({
   }, [conditions.length, isSubVariable, logicalOperator])
 
   return (
-    <div className={cn('relative', conditions.length > 1 && !isSubVariable && 'pl-[60px]')}>
+    <div className={cn('relative', conditions.length > 1 && !isSubVariable && 'pl-15')}>
       {conditions.length > 1 && (
         <div
           className={cn(
-            'absolute top-0 bottom-0 left-0 w-[60px]',
-            isSubVariable && logicalOperator === LogicalOperator.and && 'left-[-10px]',
-            isSubVariable && logicalOperator === LogicalOperator.or && 'left-[-18px]',
+            'absolute top-0 bottom-0 left-0 w-15',
+            isSubVariable && logicalOperator === LogicalOperator.and && '-left-2.5',
+            isSubVariable && logicalOperator === LogicalOperator.or && '-left-4.5',
           )}
         >
-          <div className="absolute top-4 bottom-4 left-[46px] w-2.5 rounded-l-[8px] border border-r-0 border-divider-deep"></div>
-          <div className="absolute top-1/2 right-0 h-[29px] w-4 -translate-y-1/2 bg-components-panel-bg"></div>
+          <div className="absolute top-4 bottom-4 left-11.5 w-2.5 rounded-l-lg border border-r-0 border-divider-deep"></div>
+          <div className="absolute top-1/2 right-0 h-7.25 w-4 -translate-y-1/2 bg-components-panel-bg"></div>
           <div
-            className="absolute top-1/2 right-1 flex h-[21px] -translate-y-1/2 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-[10px] font-semibold text-text-accent-secondary shadow-xs select-none"
+            className="absolute top-1/2 right-1 flex h-5.25 -translate-y-1/2 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-2xs font-semibold text-text-accent-secondary shadow-xs select-none"
             onClick={() => doToggleConditionLogicalOperator(conditionId)}
           >
             {!!logicalOperator && logicalOperator.toUpperCase()}
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 c961a590997..05024434fc3 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
@@ -112,8 +112,8 @@ const ConditionNumberInput = ({
             >
               <div
                 className={cn(
-                  'w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-1 shadow-lg',
-                  isShort && 'w-[200px]',
+                  'w-74 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-1 shadow-lg',
+                  isShort && 'w-50',
                 )}
               >
                 <VarReferenceVars vars={variables} onChange={handleSelectVariable} />
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 1b374775d98..a501ccf8b94 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
@@ -90,7 +90,7 @@ const ConditionWrap: FC<Props> = ({
         <div
           className={cn(
             'group relative rounded-[10px] bg-components-panel-bg',
-            !isSubVariable && 'min-h-[40px] px-3 py-1',
+            !isSubVariable && 'min-h-10 px-3 py-1',
             isSubVariable && 'px-1 py-2',
           )}
         >
@@ -121,10 +121,10 @@ const ConditionWrap: FC<Props> = ({
 
           <div
             className={cn(
-              'flex items-center justify-between pr-[30px]',
+              'flex items-center justify-between pr-7.5',
               !conditions.length && !isSubVariable && 'mt-1',
               !conditions.length && isSubVariable && 'mt-2',
-              conditions.length > 1 && !isSubVariable && 'ml-[60px]',
+              conditions.length > 1 && !isSubVariable && 'ml-15',
             )}
           >
             {isSubVariable ? (
diff --git a/web/app/components/workflow/nodes/loop/node.tsx b/web/app/components/workflow/nodes/loop/node.tsx
index 5a19ed9ec6a..8a73d9a673b 100644
--- a/web/app/components/workflow/nodes/loop/node.tsx
+++ b/web/app/components/workflow/nodes/loop/node.tsx
@@ -20,7 +20,7 @@ const Node: FC<NodeProps<LoopNodeType>> = ({ id, data }) => {
   return (
     <div
       className={cn(
-        'relative h-full min-h-[90px] w-full min-w-[240px] rounded-2xl bg-workflow-canvas-workflow-bg',
+        'relative h-full min-h-22.5 w-full min-w-60 rounded-2xl bg-workflow-canvas-workflow-bg',
       )}
     >
       <Background
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 cf3de7b0810..34a6fb50b1c 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
@@ -33,10 +33,10 @@ const Item: FC<Props> = ({ payload, onEdit, onDelete }) => {
           </div>
         )}
       </div>
-      <div className="mt-0.5 text-xs leading-[18px] font-normal text-text-tertiary">
+      <div className="mt-0.5 text-xs leading-4.5 font-normal text-text-tertiary">
         {payload.description}
       </div>
-      <div className="absolute top-0 right-0 hidden h-full w-[119px] items-center justify-end space-x-1 rounded-lg bg-linear-to-l from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent pr-1 group-hover:flex">
+      <div className="absolute top-0 right-0 hidden h-full w-29.75 items-center justify-end space-x-1 rounded-lg bg-linear-to-l from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent pr-1 group-hover:flex">
         <div className="cursor-pointer rounded-md p-1 hover:bg-state-base-hover" onClick={onEdit}>
           <RiEditLine className="size-4 text-text-tertiary" />
         </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 482bdd53747..deccf49a7d3 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
@@ -161,7 +161,7 @@ const AddExtractParameter: FC<Props> = ({ type, payload, onSave, onCancel }) =>
             if (!open) hideModal()
           }}
         >
-          <DialogContent className="w-[400px]! max-w-[400px]! overflow-hidden! border-none p-4! text-left align-middle">
+          <DialogContent className="w-100! max-w-100! overflow-hidden! border-none p-4! text-left align-middle">
             <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t(($) => $[`${i18nPrefix}.addExtractParameter`], { ns: 'workflow' })}
             </DialogTitle>
@@ -236,7 +236,7 @@ const AddExtractParameter: FC<Props> = ({ type, payload, onSave, onCancel }) =>
                   })}
                 >
                   <>
-                    <div className="mb-1.5 text-xs leading-[18px] font-normal text-text-tertiary">
+                    <div className="mb-1.5 text-xs leading-4.5 font-normal text-text-tertiary">
                       {t(($) => $[`${i18nPrefix}.addExtractParameterContent.requiredContent`], {
                         ns: 'workflow',
                       })}
@@ -250,10 +250,10 @@ const AddExtractParameter: FC<Props> = ({ type, payload, onSave, onCancel }) =>
                 </Field>
               </div>
               <div className="mt-4 flex justify-end space-x-2">
-                <Button className="w-[95px]!" onClick={hideModal}>
+                <Button className="w-23.75!" onClick={hideModal}>
                   {t(($) => $['operation.cancel'], { ns: 'common' })}
                 </Button>
-                <Button className="w-[95px]!" variant="primary" onClick={handleSave}>
+                <Button className="w-23.75!" variant="primary" onClick={handleSave}>
                   {isAdd
                     ? t(($) => $['operation.add'], { ns: 'common' })
                     : t(($) => $['operation.save'], { ns: 'common' })}
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 151e946b671..fa448d04187 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
@@ -150,7 +150,7 @@ const ClassList: FC<Props> = ({
                 <div
                   key={item.id}
                   className={cn(
-                    'group relative -ml-3 min-h-[40px] rounded-[10px] bg-components-panel-bg px-0 py-0',
+                    'group relative -ml-3 min-h-10 rounded-[10px] bg-components-panel-bg px-0 py-0',
                   )}
                   style={{
                     // Performance hint for browser
diff --git a/web/app/components/workflow/nodes/question-classifier/node.tsx b/web/app/components/workflow/nodes/question-classifier/node.tsx
index 79b279aca83..17471b7d5d1 100644
--- a/web/app/components/workflow/nodes/question-classifier/node.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/node.tsx
@@ -36,7 +36,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="flex flex-col gap-y-0.5 rounded-md bg-workflow-block-parma-bg px-1.25 py-0.75">
       <div className="text-xs/4 font-semibold text-text-secondary">{displayLabel}</div>
       {shouldShowTooltip ? (
         <Popover>
diff --git a/web/app/components/workflow/nodes/start-placeholder/node.tsx b/web/app/components/workflow/nodes/start-placeholder/node.tsx
index a7ddb8df69b..a01ad7fb9be 100644
--- a/web/app/components/workflow/nodes/start-placeholder/node.tsx
+++ b/web/app/components/workflow/nodes/start-placeholder/node.tsx
@@ -11,7 +11,7 @@ const Node: FC<NodeProps> = ({ data }) => {
 
   return (
     <div className="px-2.5 py-1">
-      <div className="rounded-md bg-workflow-block-parma-bg px-1.5 py-[5px]">
+      <div className="rounded-md bg-workflow-block-parma-bg px-1.5 py-1.25">
         <div className="system-xs-regular wrap-break-word text-text-tertiary">
           {t(($) => $[`${i18nPrefix}.${descriptionKey}`], { ns: 'workflow' })}
         </div>
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 25e9beb4a2b..9de5123f1f5 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -65,7 +65,7 @@ const VarItem: FC<Props> = ({
         />
         <div
           title={payload.variable}
-          className="max-w-[130px] shrink-0 truncate text-[13px] font-medium text-text-secondary"
+          className="max-w-32.5 shrink-0 truncate text-[13px] font-medium text-text-secondary"
         >
           {payload.variable}
         </div>
@@ -74,7 +74,7 @@ const VarItem: FC<Props> = ({
             <div className="shrink-0 text-xs font-medium text-text-quaternary">·</div>
             <div
               title={payload.label as string}
-              className="max-w-[130px] truncate text-[13px] font-medium text-text-tertiary"
+              className="max-w-32.5 truncate text-[13px] font-medium text-text-tertiary"
             >
               {payload.label as string}
             </div>
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 844a76de146..e1a54363ebf 100644
--- a/web/app/components/workflow/nodes/start/components/var-list.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-list.tsx
@@ -89,7 +89,7 @@ const VarList: FC<Props> = ({ readonly, list, onChange }) => {
 
   if (list.length === 0) {
     return (
-      <div className="flex h-[42px] items-center justify-center rounded-md bg-components-panel-bg text-xs leading-[18px] font-normal text-text-tertiary">
+      <div className="flex h-10.5 items-center justify-center rounded-md bg-components-panel-bg text-xs leading-4.5 font-normal text-text-tertiary">
         {t(($) => $['nodes.start.noVarTip'], { ns: 'workflow' })}
       </div>
     )
diff --git a/web/app/components/workflow/nodes/template-transform/panel.tsx b/web/app/components/workflow/nodes/template-transform/panel.tsx
index e1b70a85051..b150c10306d 100644
--- a/web/app/components/workflow/nodes/template-transform/panel.tsx
+++ b/web/app/components/workflow/nodes/template-transform/panel.tsx
@@ -71,7 +71,7 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({ id, data }) => {
           headerRight={
             <div className="flex items-center">
               <a
-                className="flex h-[18px] items-center space-x-0.5 text-xs font-normal text-text-tertiary"
+                className="flex h-4.5 items-center space-x-0.5 text-xs font-normal text-text-tertiary"
                 href="https://jinja.palletsprojects.com/en/3.1.x/templates/"
                 target="_blank"
                 rel="noopener noreferrer"
diff --git a/web/app/components/workflow/nodes/tool/node.tsx b/web/app/components/workflow/nodes/tool/node.tsx
index 3d006020213..f5dc719143e 100644
--- a/web/app/components/workflow/nodes/tool/node.tsx
+++ b/web/app/components/workflow/nodes/tool/node.tsx
@@ -48,7 +48,7 @@ const Node: FC<NodeProps<ToolNodeType>> = ({ data }) => {
               >
                 <div
                   title={key}
-                  className="max-w-[100px] shrink-0 truncate text-xs font-medium text-text-tertiary uppercase"
+                  className="max-w-25 shrink-0 truncate text-xs font-medium text-text-tertiary uppercase"
                 >
                   {key}
                 </div>
@@ -97,7 +97,7 @@ const Node: FC<NodeProps<ToolNodeType>> = ({ data }) => {
             ))}
           {showAuthorizationWarning && (
             <div className="flex h-6 items-center rounded-md border-[0.5px] border-state-warning-active bg-state-warning-hover px-1.5">
-              <span className="mr-1 size-[4px] shrink-0 rounded-xs bg-text-warning-secondary" />
+              <span className="mr-1 size-1 shrink-0 rounded-xs bg-text-warning-secondary" />
               <div
                 className="grow truncate system-xs-medium text-text-warning"
                 title={t(($) => $['nodes.tool.authorizationRequired'], { ns: 'workflow' })}
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
index 6f4c00d6d74..1f0be3c97a6 100644
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -43,7 +43,7 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({ id, data }) => {
 
   if (isLoading) {
     return (
-      <div className="flex h-[200px] items-center justify-center">
+      <div className="flex h-50 items-center justify-center">
         <Loading />
       </div>
     )
diff --git a/web/app/components/workflow/nodes/trigger-schedule/components/next-execution-times.tsx b/web/app/components/workflow/nodes/trigger-schedule/components/next-execution-times.tsx
index 5e592a21249..05aae1a1dc6 100644
--- a/web/app/components/workflow/nodes/trigger-schedule/components/next-execution-times.tsx
+++ b/web/app/components/workflow/nodes/trigger-schedule/components/next-execution-times.tsx
@@ -21,7 +21,7 @@ const NextExecutionTimes = ({ data }: NextExecutionTimesProps) => {
       <label className="block text-xs font-medium text-gray-500">
         {t(($) => $['nodes.triggerSchedule.nextExecutionTimes'], { ns: 'workflow' })}
       </label>
-      <div className="flex min-h-[80px] flex-col rounded-xl bg-components-input-bg-normal py-2">
+      <div className="flex min-h-20 flex-col rounded-xl bg-components-input-bg-normal py-2">
         {executionTimes.map((time, index) => (
           <div key={index} className="flex items-baseline text-xs">
             <span className="w-6 text-right font-mono leading-[150%] font-normal tracking-wider text-text-quaternary select-none">
diff --git a/web/app/components/workflow/nodes/trigger-schedule/node.tsx b/web/app/components/workflow/nodes/trigger-schedule/node.tsx
index 133b6d57758..32cca190b0c 100644
--- a/web/app/components/workflow/nodes/trigger-schedule/node.tsx
+++ b/web/app/components/workflow/nodes/trigger-schedule/node.tsx
@@ -12,10 +12,10 @@ const Node: FC<NodeProps<ScheduleTriggerNodeType>> = ({ data }) => {
 
   return (
     <div className="mb-1 px-3 py-1">
-      <div className="mb-1 text-[10px] font-medium tracking-wide text-text-tertiary uppercase">
+      <div className="mb-1 text-2xs font-medium tracking-wide text-text-tertiary uppercase">
         {t(($) => $[`${i18nPrefix}.nextExecutionTime`], { ns: 'workflow' })}
       </div>
-      <div className="flex h-[26px] items-center rounded-md bg-workflow-block-parma-bg px-2 text-xs text-text-secondary">
+      <div className="flex h-6.5 items-center rounded-md bg-workflow-block-parma-bg px-2 text-xs text-text-secondary">
         <div className="w-0 grow">
           <div className="truncate" title={getNextExecutionTime(data)}>
             {getNextExecutionTime(data)}
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 e9a428f5220..a33add66a9b 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
@@ -348,7 +348,7 @@ const GenericTable: FC<GenericTableProps> = ({
       </div>
 
       {showPlaceholder ? (
-        <div className="flex h-7 items-center justify-center rounded-lg border border-divider-regular bg-components-panel-bg text-xs leading-[18px] font-normal text-text-quaternary">
+        <div className="flex h-7 items-center justify-center rounded-lg border border-divider-regular bg-components-panel-bg text-xs leading-4.5 font-normal text-text-quaternary">
           {placeholder}
         </div>
       ) : (
diff --git a/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx b/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx
index 0c808b13826..9da177eac32 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx
@@ -31,7 +31,7 @@ const ParagraphInput: FC<ParagraphInputProps> = ({
           {Array.from({ length: lineCount }, (_, index) => (
             <span
               key={index}
-              className="flex h-[20px] items-center font-mono text-xs leading-[20px] text-text-quaternary select-none"
+              className="flex h-5 items-center font-mono text-xs leading-5 text-text-quaternary select-none"
             >
               {String(index + 1).padStart(2, '0')}
             </span>
@@ -43,7 +43,7 @@ const ParagraphInput: FC<ParagraphInputProps> = ({
           onChange={(e) => onChange(e.target.value)}
           placeholder={placeholder}
           disabled={disabled}
-          className="w-full resize-none border-0 bg-transparent pl-6 font-mono text-xs leading-[20px] text-text-secondary outline-hidden placeholder:text-text-quaternary"
+          className="w-full resize-none border-0 bg-transparent pl-6 font-mono text-xs leading-5 text-text-secondary outline-hidden placeholder:text-text-quaternary"
           style={{
             minHeight: `${Math.max(3, lineCount) * 20}px`,
             lineHeight: '20px',
diff --git a/web/app/components/workflow/nodes/trigger-webhook/node.tsx b/web/app/components/workflow/nodes/trigger-webhook/node.tsx
index 6a69361e7d3..b73855e84b2 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/node.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/node.tsx
@@ -6,10 +6,10 @@ import * as React from 'react'
 const Node: FC<NodeProps<WebhookTriggerNodeType>> = ({ data }) => {
   return (
     <div className="mb-1 px-3 py-1">
-      <div className="mb-1 text-[10px] font-medium tracking-wide text-text-tertiary uppercase">
+      <div className="mb-1 text-2xs font-medium tracking-wide text-text-tertiary uppercase">
         URL
       </div>
-      <div className="flex h-[26px] items-center rounded-md bg-workflow-block-parma-bg px-2 text-xs text-text-secondary">
+      <div className="flex h-6.5 items-center rounded-md bg-workflow-block-parma-bg px-2 text-xs text-text-secondary">
         <div className="w-0 grow">
           <div className="truncate" title={data.webhook_url || '--'}>
             {data.webhook_url || '--'}
diff --git a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
index edeff700f23..280805bd195 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
@@ -197,7 +197,7 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({ id, data }) => {
                   </TooltipContent>
                 </Tooltip>
                 {isPrivateOrLocalAddress(inputs.webhook_debug_url) && (
-                  <div className="mt-1 px-0 py-[2px] system-xs-regular text-text-warning">
+                  <div className="mt-1 px-0 py-0.5 system-xs-regular text-text-warning">
                     {t(($) => $[`${i18nPrefix}.debugUrlPrivateAddressWarning`], { ns: 'workflow' })}
                   </div>
                 )}
@@ -208,7 +208,7 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({ id, data }) => {
 
         {/* Content Type */}
         <Field title={t(($) => $[`${i18nPrefix}.contentType`], { ns: 'workflow' })}>
-          <div className="w-full max-w-[392px]">
+          <div className="w-full max-w-98">
             <Select
               key={`${id}-content-type-${inputs.content_type}`}
               value={selectedContentType?.value ?? null}
@@ -265,7 +265,7 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({ id, data }) => {
                 {t(($) => $[`${i18nPrefix}.statusCode`], { ns: 'workflow' })}
               </label>
               <NumberField
-                className="w-[120px]"
+                className="w-30"
                 min={DEFAULT_STATUS_CODE}
                 max={MAX_STATUS_CODE}
                 value={inputs.status_code ?? DEFAULT_STATUS_CODE}
diff --git a/web/app/components/workflow/nodes/trigger-webhook/utils/render-output-vars.tsx b/web/app/components/workflow/nodes/trigger-webhook/utils/render-output-vars.tsx
index 2103e544c36..112b6b1cd2f 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/utils/render-output-vars.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/utils/render-output-vars.tsx
@@ -28,7 +28,7 @@ type VarItemProps = {
 const VarItem: FC<VarItemProps> = ({ prefix, name, type }) => {
   return (
     <div className="py-1">
-      <div className="flex items-center leading-[18px]">
+      <div className="flex items-center leading-4.5">
         <span className="code-sm-regular text-text-tertiary">{prefix}.</span>
         <span className="code-sm-semibold text-text-secondary">{name}</span>
         <span className="ml-2 system-xs-regular text-text-tertiary">{type}</span>
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 f50ebb07bd8..869625f7365 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
@@ -97,7 +97,7 @@ const NodeGroupItem = ({ item }: NodeGroupItemProps) => {
       onMouseEnter={() => groupEnabled && handleGroupItemMouseEnter(item.targetHandleId)}
       onMouseLeave={handleGroupItemMouseLeave}
     >
-      <div className="flex h-4 items-center justify-between text-[10px] font-medium text-text-tertiary">
+      <div className="flex h-4 items-center justify-between text-2xs font-medium text-text-tertiary">
         <span
           className={cn('grow truncate uppercase', showSelectedBorder && 'text-text-accent')}
           title={item.title}
@@ -118,7 +118,7 @@ const NodeGroupItem = ({ item }: NodeGroupItemProps) => {
       {!item.variables.length && (
         <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',
+            'relative flex h-5.5 items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-2xs font-normal text-text-tertiary uppercase',
             (showSelectedBorder || showSelectionBorder) && 'bg-black/2!',
           )}
         >
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 bdf9498693f..becc5948849 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
@@ -156,7 +156,7 @@ const VarGroupItem: FC<Props> = ({
       operations={
         <div className="flex h-6 items-center space-x-2">
           {payload.variables.length > 0 && (
-            <div className="flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary">
+            <div className="flex h-4.5 items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary">
               {payload.output_type}
             </div>
           )}
diff --git a/web/app/components/workflow/note-node/index.tsx b/web/app/components/workflow/note-node/index.tsx
index 31a8c2b3d22..03d7542c5fd 100644
--- a/web/app/components/workflow/note-node/index.tsx
+++ b/web/app/components/workflow/note-node/index.tsx
@@ -72,7 +72,7 @@ const NoteNode = ({ id, data }: NodeProps<NoteNodeType>) => {
             className={cn('h-2 shrink-0 rounded-t-md opacity-50', THEME_MAP[theme]!.title)}
           ></div>
           {data.selected && !data._isTempNode && (
-            <div className="pointer-events-auto absolute top-[-41px] left-1/2 z-40 -translate-x-1/2">
+            <div className="pointer-events-auto absolute -top-10.25 left-1/2 z-40 -translate-x-1/2">
               <NoteEditorToolbar
                 theme={theme}
                 onThemeChange={handleThemeChange}
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 8aa4ceaea97..9ebffbfd586 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
@@ -68,7 +68,7 @@ const LinkEditorComponent = ({ containerElement }: LinkEditorComponentProps) =>
             {!linkOperatorShow && (
               <>
                 <input
-                  className="mr-0.5 h-6 w-[196px] appearance-none rounded-xs bg-transparent p-1 text-[13px] text-components-input-text-filled outline-hidden"
+                  className="mr-0.5 h-6 w-49 appearance-none rounded-xs bg-transparent p-1 text-[13px] text-components-input-text-filled outline-hidden"
                   value={url}
                   onChange={(e) => setUrl(e.target.value)}
                   onKeyDown={(e) => {
@@ -110,7 +110,7 @@ const LinkEditorComponent = ({ containerElement }: LinkEditorComponentProps) =>
                   <div className="mr-1">
                     {t(($) => $['nodes.note.editor.openLink'], { ns: 'workflow' })}
                   </div>
-                  <div title={escape(url)} className="max-w-[140px] truncate text-text-accent">
+                  <div title={escape(url)} className="max-w-35 truncate text-text-accent">
                     {escape(url)}
                   </div>
                 </a>
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 ec2ddd05524..efc0785a47a 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 = () => {
         sideOffset={2}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="w-[120px] rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 text-text-secondary shadow-xl">
+        <div className="w-30 rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 text-text-secondary shadow-xl">
           {FONT_SIZE_LIST.map((font) => (
             <div
               key={font.key}
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 9b88ac604ce..fb4243e3931 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
@@ -51,7 +51,7 @@ const Operator = ({
         sideOffset={4}
         popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
       >
-        <div className="min-w-[192px] rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl">
+        <div className="min-w-48 rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl">
           <div className="p-1">
             <DropdownMenuItem
               className="justify-between rounded-md px-3 text-sm text-text-secondary"
diff --git a/web/app/components/workflow/operator/__tests__/zoom-in-out.spec.tsx b/web/app/components/workflow/operator/__tests__/zoom-in-out.spec.tsx
index 5c77e7e091b..25a70d32c10 100644
--- a/web/app/components/workflow/operator/__tests__/zoom-in-out.spec.tsx
+++ b/web/app/components/workflow/operator/__tests__/zoom-in-out.spec.tsx
@@ -71,7 +71,7 @@ const renderZoomInOut = (ui: React.ReactElement = <ZoomInOut />) =>
 
 const getZoomControls = () => {
   const label = Array.from(document.querySelectorAll('button')).find((element) => {
-    return /^\d+%$/.test(element.textContent ?? '') && element.className.includes('w-[34px]')
+    return /^\d+%$/.test(element.textContent ?? '') && element.className.includes('w-8.5')
   })
   const zoomOutIcon = document.querySelector('.i-ri-zoom-out-line')
   const zoomInIcon = document.querySelector('.i-ri-zoom-in-line')
diff --git a/web/app/components/workflow/operator/index.tsx b/web/app/components/workflow/operator/index.tsx
index 53b1404925f..70be60620ed 100644
--- a/web/app/components/workflow/operator/index.tsx
+++ b/web/app/components/workflow/operator/index.tsx
@@ -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]! border-divider-subtle! bg-background-default-subtle! shadow-md! shadow-shadow-shadow-5!"
+              className="absolute! bottom-10! z-9 m-0! h-18.25! w-25.75! rounded-lg! border-[0.5px]! border-divider-subtle! bg-background-default-subtle! shadow-md! shadow-shadow-shadow-5!"
             />
           )}
           <ZoomInOut
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index c07427714d5..da65adaabdd 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -147,7 +147,7 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
     <div
       className={`h-9 cursor-pointer rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 text-[13px] shadow-lg backdrop-blur-[5px] hover:bg-state-base-hover ${workflowReadOnly && 'cursor-not-allowed! opacity-50'} `}
     >
-      <div className="flex h-8 w-[98px] items-center justify-between rounded-lg">
+      <div className="flex h-8 w-24.5 items-center justify-between rounded-lg">
         <TipPopup
           title={t(($) => $['operator.zoomOut'], { ns: 'workflow' })}
           shortcut="workflow.zoom-out"
@@ -173,7 +173,7 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
         <DropdownMenu>
           <DropdownMenuTrigger
             disabled={getWorkflowReadOnly()}
-            className="flex h-8 w-[34px] items-center justify-center rounded-lg system-sm-medium text-text-tertiary hover:bg-black/5 hover:text-text-secondary data-popup-open:bg-black/5 data-popup-open:text-text-secondary"
+            className="flex h-8 w-8.5 items-center justify-center rounded-lg system-sm-medium text-text-tertiary hover:bg-black/5 hover:text-text-secondary data-popup-open:bg-black/5 data-popup-open:text-text-secondary"
           >
             {Number.parseFloat(`${zoom * 100}`).toFixed(0)}%
           </DropdownMenuTrigger>
@@ -183,7 +183,7 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
             alignOffset={-2}
             popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
           >
-            <div className="w-[192px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
+            <div className="w-48 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
               {zoomOptions.map((options, groupIndex) => (
                 <Fragment key={options[0]!.key}>
                   {groupIndex !== 0 && <DropdownMenuSeparator className="my-0" />}
diff --git a/web/app/components/workflow/panel/chat-record/index.tsx b/web/app/components/workflow/panel/chat-record/index.tsx
index 0d1d92fc371..4966c720a55 100644
--- a/web/app/components/workflow/panel/chat-record/index.tsx
+++ b/web/app/components/workflow/panel/chat-record/index.tsx
@@ -88,7 +88,7 @@ const ChatRecord = () => {
 
   return (
     <div
-      className="flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-chatbot-bg shadow-xl"
+      className="flex h-full w-105 flex-col rounded-l-2xl border border-components-panel-border bg-chatbot-bg shadow-xl"
       // style={{
       //   background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)',
       // }}
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 12e7df0d2f9..ef237fb4827 100644
--- a/web/app/components/workflow/panel/chat-record/user-input.tsx
+++ b/web/app/components/workflow/panel/chat-record/user-input.tsx
@@ -22,7 +22,7 @@ const UserInput = ({ variables = [], initialExpanded = true }: UserInputProps) =
       className={`rounded-xl border ${!expanded ? 'border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-none' : 'border-transparent bg-white shadow-xs'} `}
     >
       <div
-        className={`flex h-[18px] cursor-pointer items-center px-2 pt-4 text-[13px] font-semibold ${!expanded ? 'text-text-accent-secondary' : 'text-text-secondary'} `}
+        className={`flex h-4.5 cursor-pointer items-center px-2 pt-4 text-[13px] font-semibold ${!expanded ? 'text-text-accent-secondary' : 'text-text-secondary'} `}
         onClick={() => setExpanded(!expanded)}
       >
         <RiArrowDownSLine
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 2595397bd0f..b0c44eee922 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
@@ -105,7 +105,7 @@ const ObjectValueItem: FC<Props> = ({ index, list, onChange }) => {
   return (
     <div className="group flex border-t border-gray-200">
       {/* Key */}
-      <div className="w-[120px] border-r border-gray-200">
+      <div className="w-30 border-r border-gray-200">
         <input
           className="block h-7 w-full appearance-none px-2 system-xs-regular text-text-secondary caret-primary-600 outline-hidden placeholder:system-xs-regular placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active"
           placeholder={t(($) => $['chatVariable.modal.objectKey'], { ns: 'workflow' }) || ''}
@@ -114,7 +114,7 @@ const ObjectValueItem: FC<Props> = ({ index, list, onChange }) => {
         />
       </div>
       {/* Type */}
-      <div className="w-[96px] border-r border-gray-200">
+      <div className="w-24 border-r border-gray-200">
         <VariableTypeSelector
           inCell
           value={list[index].type}
@@ -124,7 +124,7 @@ const ObjectValueItem: FC<Props> = ({ index, list, onChange }) => {
         />
       </div>
       {/* Value */}
-      <div className="relative w-[230px]">
+      <div className="relative w-57.5">
         <input
           className="block h-7 w-full appearance-none px-2 pr-9 system-xs-regular text-text-secondary caret-primary-600 outline-hidden placeholder:system-xs-regular placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active"
           placeholder={t(($) => $['chatVariable.modal.objectValue'], { ns: 'workflow' }) || ''}
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 64659da2882..982023c7f28 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
@@ -15,13 +15,13 @@ const ObjectValueList: FC<Props> = ({ list, onChange }) => {
   return (
     <div className="w-full overflow-hidden rounded-lg border border-gray-200">
       <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">
+        <div className="flex h-full w-30 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">
+        <div className="flex h-full w-24 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">
+        <div className="flex h-full w-57.5 items-center pr-1 pl-2">
           {t(($) => $['chatVariable.modal.objectValue'], { ns: 'workflow' })}
         </div>
       </div>
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 f1b6d80b815..1f2c52fe097 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
@@ -77,8 +77,8 @@ const ChatVariableModal = ({ chatVar, onClose, onSave }: ModalPropsType) => {
   return (
     <div
       className={cn(
-        'flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl',
-        type === ChatVarType.Object && 'w-[480px]',
+        'flex h-full w-90 flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl',
+        type === ChatVarType.Object && 'w-120',
       )}
     >
       <div className="mb-3 flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
@@ -91,7 +91,7 @@ const ChatVariableModal = ({ chatVar, onClose, onSave }: ModalPropsType) => {
           </div>
         </div>
       </div>
-      <div className="max-h-[480px] overflow-y-auto px-4 py-2">
+      <div className="max-h-120 overflow-y-auto px-4 py-2">
         <NameSection
           name={name}
           onBlur={(nextName) =>
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 a58a9b579f4..bc7d2d8166a 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
@@ -77,7 +77,7 @@ const VariableTypeSelector = <T extends string>({
           <SelectItem
             key={item}
             value={item}
-            className="h-auto gap-2 py-[6px] pr-2 pl-3 system-md-regular font-normal"
+            className="h-auto gap-2 py-1.5 pr-2 pl-3 system-md-regular font-normal"
           >
             <SelectItemText className="px-0 system-md-regular text-text-secondary">
               {item}
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 e22e0198899..ef3851d7c28 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
@@ -205,7 +205,7 @@ const ChatVariablePanel = () => {
   return (
     <div
       className={cn(
-        'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
+        'relative flex h-full w-105 flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
       )}
     >
       <div className="flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
@@ -228,7 +228,7 @@ const ChatVariablePanel = () => {
       {showTip && (
         <div className="shrink-0 px-3 pt-2.5 pb-2">
           <div className="relative rounded-2xl bg-background-section-burn p-3">
-            <div className="inline-block rounded-[5px] border border-divider-deep px-[5px] py-[3px] system-2xs-medium-uppercase text-text-tertiary">
+            <div className="inline-block rounded-[5px] border border-divider-deep px-1.25 py-0.75 system-2xs-medium-uppercase text-text-tertiary">
               TIPS
             </div>
             <div className="mt-1 mb-4 system-sm-regular text-text-secondary">
@@ -263,7 +263,7 @@ const ChatVariablePanel = () => {
                 </div>
               </div>
             </div>
-            <div className="absolute top-[-4px] right-[38px] z-10 h-3 w-3 rotate-45 bg-background-section-burn" />
+            <div className="absolute -top-1 right-9.5 z-10 h-3 w-3 rotate-45 bg-background-section-burn" />
           </div>
         </div>
       )}
diff --git a/web/app/components/workflow/panel/comments-panel/index.tsx b/web/app/components/workflow/panel/comments-panel/index.tsx
index b237effb736..8a667e98655 100644
--- a/web/app/components/workflow/panel/comments-panel/index.tsx
+++ b/web/app/components/workflow/panel/comments-panel/index.tsx
@@ -66,7 +66,7 @@ const CommentsPanel = () => {
   return (
     <div
       className={cn(
-        'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg',
+        'relative flex h-full w-105 flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg',
       )}
     >
       <div className="flex items-center justify-between p-4 pb-2">
@@ -90,7 +90,7 @@ const CommentsPanel = () => {
             />
           </button>
           {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]">
+            <div className="absolute top-9 right-10 z-50 min-w-46 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 p-2 text-left text-sm hover:bg-state-base-hover',
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 7b6439b17c4..f0c0bf59f80 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
@@ -73,7 +73,7 @@ const ConversationVariableModal = ({ conversationID, onHide }: Props) => {
       <DialogContent
         className={cn(
           'w-full overflow-hidden! border-none text-left align-middle',
-          cn('h-[min(640px,calc(100dvh-2rem))] max-h-none! w-[920px] max-w-[calc(100vw-2rem)] p-0'),
+          cn('h-[min(640px,calc(100dvh-2rem))] max-h-none! w-230 max-w-[calc(100vw-2rem)] p-0'),
         )}
       >
         <button
@@ -86,7 +86,7 @@ const ConversationVariableModal = ({ conversationID, onHide }: Props) => {
         </button>
         <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="flex h-full w-56 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>
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 119036618f8..5425ed00fd4 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -119,7 +119,7 @@ const DebugAndPreview = () => {
                   </TooltipContent>
                 </Tooltip>
                 {expanded && (
-                  <div className="absolute right-[5px] bottom-[-17px] z-10 h-3 w-3 rotate-45 border-t-[0.5px] border-l-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />
+                  <div className="absolute right-1.25 -bottom-4.25 z-10 h-3 w-3 rotate-45 border-t-[0.5px] border-l-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />
                 )}
               </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 ef852f16539..123d5896adf 100644
--- a/web/app/components/workflow/panel/env-panel/env-item.tsx
+++ b/web/app/components/workflow/panel/env-panel/env-item.tsx
@@ -53,7 +53,7 @@ const EnvItem = ({ env, onEdit, onDelete }: EnvItemProps) => {
           <div className="h-[0.5px] bg-divider-subtle" />
           <div
             className={cn(
-              'rounded-br-[8px] rounded-bl-[8px] bg-background-default-subtle px-2.5 py-2 group-hover:bg-transparent',
+              'rounded-br-lg rounded-bl-lg bg-background-default-subtle px-2.5 py-2 group-hover:bg-transparent',
               destructive && 'bg-state-destructive-hover hover:bg-state-destructive-hover',
             )}
           >
diff --git a/web/app/components/workflow/panel/env-panel/index.tsx b/web/app/components/workflow/panel/env-panel/index.tsx
index 26872f3d4ce..c918ce74471 100644
--- a/web/app/components/workflow/panel/env-panel/index.tsx
+++ b/web/app/components/workflow/panel/env-panel/index.tsx
@@ -266,7 +266,7 @@ const EnvPanel = () => {
   return (
     <div
       className={cn(
-        'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
+        'relative flex h-full w-105 flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
       )}
     >
       <div className="flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
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 0cfda0c8f31..4911045faf9 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -90,7 +90,7 @@ const VariableModal = ({ env, onClose, onSave }: ModalPropsType) => {
   return (
     <div
       className={cn(
-        'flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl',
+        'flex h-full w-90 flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl',
       )}
     >
       <div className="mb-3 flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
@@ -112,7 +112,7 @@ const VariableModal = ({ env, onClose, onSave }: ModalPropsType) => {
           <div className="flex gap-2">
             <div
               className={cn(
-                'flex w-[106px] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                'flex w-26.5 cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
                 type === 'string' &&
                   'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
               )}
@@ -122,7 +122,7 @@ const VariableModal = ({ env, onClose, onSave }: ModalPropsType) => {
             </div>
             <div
               className={cn(
-                'flex w-[106px] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                'flex w-26.5 cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
                 type === 'number' &&
                   'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
               )}
@@ -135,7 +135,7 @@ const VariableModal = ({ env, onClose, onSave }: ModalPropsType) => {
             </div>
             <div
               className={cn(
-                'flex w-[106px] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                'flex w-26.5 cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
                 type === 'secret' &&
                   'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
               )}
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 3d97b8de0ff..57e48dcaac6 100644
--- a/web/app/components/workflow/panel/global-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/index.tsx
@@ -68,7 +68,7 @@ const Panel = () => {
   return (
     <div
       className={cn(
-        'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
+        'relative flex h-full w-105 flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
       )}
     >
       <div className="flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
diff --git a/web/app/components/workflow/panel/record.tsx b/web/app/components/workflow/panel/record.tsx
index b01ead287b8..6ff1c83eb9b 100644
--- a/web/app/components/workflow/panel/record.tsx
+++ b/web/app/components/workflow/panel/record.tsx
@@ -24,7 +24,7 @@ const Record = () => {
   )
 
   return (
-    <div className="flex h-full w-[400px] flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl">
+    <div className="flex h-full w-100 flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl">
       <div className="flex items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
         {`Test Run${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}`}
       </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 e033f96bae3..e2060b38233 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
@@ -58,7 +58,7 @@ const Filter: FC<FilterProps> = ({
         alignOffset={55}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="flex w-[248px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
+        <div className="flex w-62 flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
           <div className="flex flex-col p-1">
             {options.map((option) => {
               return (
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 9cfb4b65ef7..531f17483b8 100644
--- a/web/app/components/workflow/panel/version-history-panel/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/index.tsx
@@ -329,7 +329,7 @@ export const VersionHistoryPanel = ({
   )
 
   return (
-    <div className="flex h-full w-[268px] flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5">
+    <div className="flex h-full w-67 flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5">
       <div className="flex items-center gap-x-2 px-4 pt-3">
         <div className="flex-1 py-1 system-xl-semibold text-text-primary">
           {t(($) => $['versionHistory.title'], { ns: 'workflow' })}
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 ba9a208f0f2..dc5855afb8c 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
@@ -15,7 +15,7 @@ const Item: FC<ItemProps> = ({ titleWidth, releaseNotesWidth, isFirst, isLast })
       {!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="flex h-5 w-4.5 shrink-0 items-center justify-center">
         <div className="size-2 rounded-lg border-2 border-text-quaternary" />
       </div>
       <div className="flex grow flex-col gap-y-0.5">
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 55c3514a50d..1d05b884840 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
@@ -87,7 +87,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="flex h-5 w-4.5 shrink-0 items-center justify-center">
         <div
           className={cn(
             'size-2 rounded-lg border-2',
@@ -108,7 +108,7 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
               : item.marked_name || t(($) => $['versionHistory.defaultName'], { ns: 'workflow' })}
           </div>
           {isLatest && (
-            <div className="flex h-5 shrink-0 items-center rounded-md border border-text-accent-secondary bg-components-badge-bg-dimm px-[5px] system-2xs-medium-uppercase text-text-accent-secondary">
+            <div className="flex h-5 shrink-0 items-center rounded-md border border-text-accent-secondary bg-components-badge-bg-dimm px-1.25 system-2xs-medium-uppercase text-text-accent-secondary">
               {t(($) => $['versionHistory.latest'], { ns: 'workflow' })}
             </div>
           )}
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index 2d1be46dc99..e3cecdeb7c0 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -111,7 +111,7 @@ const WorkflowPreview = () => {
       style={{ width: `${panelWidth}px` }}
     >
       <div
-        className="absolute top-1/2 bottom-0 left-[3px] z-50 h-6 w-[3px] cursor-col-resize rounded-sm bg-gray-300"
+        className="absolute top-1/2 bottom-0 left-0.75 z-50 h-6 w-0.75 cursor-col-resize rounded-sm bg-gray-300"
         onMouseDown={startResizing}
       />
       <div className="flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
@@ -130,7 +130,7 @@ const WorkflowPreview = () => {
           {showInputsPanel && (
             <div
               className={cn(
-                'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary',
+                'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-4.5 font-semibold text-text-tertiary',
                 currentTab === 'INPUT' && 'border-[rgb(21,94,239)]! text-text-secondary',
               )}
               onClick={() => switchTab('INPUT')}
@@ -140,7 +140,7 @@ const WorkflowPreview = () => {
           )}
           <div
             className={cn(
-              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-4.5 font-semibold text-text-tertiary',
               currentTab === 'RESULT' && 'border-[rgb(21,94,239)]! text-text-secondary',
               !workflowRunningData && 'cursor-not-allowed! opacity-30',
             )}
@@ -153,7 +153,7 @@ const WorkflowPreview = () => {
           </div>
           <div
             className={cn(
-              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-4.5 font-semibold text-text-tertiary',
               currentTab === 'DETAIL' && 'border-[rgb(21,94,239)]! text-text-secondary',
               !workflowRunningData && 'cursor-not-allowed! opacity-30',
             )}
@@ -166,7 +166,7 @@ const WorkflowPreview = () => {
           </div>
           <div
             className={cn(
-              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-4.5 font-semibold text-text-tertiary',
               currentTab === 'TRACING' && 'border-[rgb(21,94,239)]! text-text-secondary',
               !workflowRunningData && 'cursor-not-allowed! opacity-30',
             )}
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 99b6768e8c5..75e522ebcc8 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
@@ -17,7 +17,7 @@ export function AgentLogNav({ agentOrToolLogItemStack, onShowAgentOrToolLog }: A
   return (
     <div className="flex h-8 items-center bg-components-panel-bg p-1 pr-3">
       <Button
-        className="shrink-0 px-[5px]"
+        className="shrink-0 px-1.25"
         size="small"
         variant="ghost-accent"
         onClick={() => {
@@ -30,7 +30,7 @@ export function AgentLogNav({ agentOrToolLogItemStack, onShowAgentOrToolLog }: A
       <div className="mx-0.5 shrink-0 system-xs-regular text-divider-deep">/</div>
       {agentOrToolLogItemStackLength > 1 ? (
         <Button
-          className="shrink-0 px-[5px]"
+          className="shrink-0 px-1.25"
           size="small"
           variant="ghost-accent"
           onClick={() => onShowAgentOrToolLog(first)}
@@ -51,7 +51,7 @@ export function AgentLogNav({ agentOrToolLogItemStack, onShowAgentOrToolLog }: A
       {!!end && agentOrToolLogItemStackLength > 1 && (
         <>
           <div className="mx-0.5 shrink-0 system-xs-regular text-divider-deep">/</div>
-          <div className="flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary">
+          <div className="flex items-center px-1.25 system-xs-medium-uppercase text-text-tertiary">
             {end.label}
           </div>
         </>
diff --git a/web/app/components/workflow/run/meta.tsx b/web/app/components/workflow/run/meta.tsx
index ba875ea5e9b..ce7f45368a1 100644
--- a/web/app/components/workflow/run/meta.tsx
+++ b/web/app/components/workflow/run/meta.tsx
@@ -32,7 +32,7 @@ const MetaData: FC<Props> = ({
       </div>
       <div className="py-1">
         <div className="flex">
-          <div className="w-[104px] shrink-0 truncate px-2 py-1.5 system-xs-regular text-text-tertiary">
+          <div className="w-26 shrink-0 truncate px-2 py-1.5 system-xs-regular text-text-tertiary">
             {t(($) => $['meta.status'], { ns: 'runLog' })}
           </div>
           <div className="grow px-2 py-1.5 system-xs-regular text-text-secondary">
@@ -48,23 +48,23 @@ const MetaData: FC<Props> = ({
           </div>
         </div>
         <div className="flex">
-          <div className="w-[104px] shrink-0 truncate px-2 py-1.5 system-xs-regular text-text-tertiary">
+          <div className="w-26 shrink-0 truncate px-2 py-1.5 system-xs-regular text-text-tertiary">
             {t(($) => $['meta.executor'], { ns: 'runLog' })}
           </div>
           <div className="grow px-2 py-1.5 system-xs-regular text-text-secondary">
             {status === 'running' && (
-              <div className="my-1 h-2 w-[88px] rounded-xs bg-text-quaternary" />
+              <div className="my-1 h-2 w-22 rounded-xs bg-text-quaternary" />
             )}
             {status !== 'running' && <span>{executor || 'N/A'}</span>}
           </div>
         </div>
         <div className="flex">
-          <div className="w-[104px] shrink-0 truncate px-2 py-1.5 system-xs-regular text-text-tertiary">
+          <div className="w-26 shrink-0 truncate px-2 py-1.5 system-xs-regular text-text-tertiary">
             {t(($) => $['meta.startTime'], { ns: 'runLog' })}
           </div>
           <div className="grow px-2 py-1.5 system-xs-regular text-text-secondary">
             {status === 'running' && (
-              <div className="my-1 h-2 w-[72px] rounded-xs bg-text-quaternary" />
+              <div className="my-1 h-2 w-18 rounded-xs bg-text-quaternary" />
             )}
             {status !== 'running' && (
               <span>
@@ -76,35 +76,35 @@ const MetaData: FC<Props> = ({
           </div>
         </div>
         <div className="flex">
-          <div className="w-[104px] shrink-0 truncate px-2 py-1.5 system-xs-regular text-text-tertiary">
+          <div className="w-26 shrink-0 truncate px-2 py-1.5 system-xs-regular text-text-tertiary">
             {t(($) => $['meta.time'], { ns: 'runLog' })}
           </div>
           <div className="grow px-2 py-1.5 system-xs-regular text-text-secondary">
             {status === 'running' && (
-              <div className="my-1 h-2 w-[72px] rounded-xs bg-text-quaternary" />
+              <div className="my-1 h-2 w-18 rounded-xs bg-text-quaternary" />
             )}
             {status !== 'running' && <span>{time ? `${time.toFixed(3)}s` : '-'}</span>}
           </div>
         </div>
         <div className="flex">
-          <div className="w-[104px] shrink-0 truncate px-2 py-1.5 system-xs-regular text-text-tertiary">
+          <div className="w-26 shrink-0 truncate px-2 py-1.5 system-xs-regular text-text-tertiary">
             {t(($) => $['meta.tokens'], { ns: 'runLog' })}
           </div>
           <div className="grow px-2 py-1.5 system-xs-regular text-text-secondary">
             {['running', 'paused'].includes(status) && (
-              <div className="my-1 h-2 w-[48px] animate-pulse rounded-xs bg-text-quaternary" />
+              <div className="my-1 h-2 w-12 animate-pulse rounded-xs bg-text-quaternary" />
             )}
             {!['running', 'paused'].includes(status) && <span>{`${tokens || 0} Tokens`}</span>}
           </div>
         </div>
         {showSteps && (
           <div className="flex">
-            <div className="w-[104px] shrink-0 truncate px-2 py-1.5 system-xs-regular text-text-tertiary">
+            <div className="w-26 shrink-0 truncate px-2 py-1.5 system-xs-regular text-text-tertiary">
               {t(($) => $['meta.steps'], { ns: 'runLog' })}
             </div>
             <div className="grow px-2 py-1.5 system-xs-regular text-text-secondary">
               {status === 'running' && (
-                <div className="my-1 h-2 w-[24px] rounded-xs bg-text-quaternary" />
+                <div className="my-1 h-2 w-6 rounded-xs bg-text-quaternary" />
               )}
               {status !== 'running' && <span>{steps}</span>}
             </div>
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 8de4456ccb6..c9885e4dd98 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -198,7 +198,7 @@ const NodePanel: FC<Props> = ({
             />
           )}
           {nodeInfo.status === 'running' && (
-            <div className="flex shrink-0 items-center text-[13px] leading-[16px] font-medium text-text-accent">
+            <div className="flex shrink-0 items-center text-[13px] leading-4 font-medium text-text-accent">
               <span className="mr-2 text-xs font-normal">Running</span>
               <RiLoader2Line className="size-3.5 animate-spin" />
             </div>
diff --git a/web/app/components/workflow/run/output-panel.tsx b/web/app/components/workflow/run/output-panel.tsx
index 19b68b8461f..4fedf87956f 100644
--- a/web/app/components/workflow/run/output-panel.tsx
+++ b/web/app/components/workflow/run/output-panel.tsx
@@ -47,7 +47,7 @@ const OutputPanel: FC<OutputPanelProps> = ({ isRunning, outputs, error, height }
   return (
     <div className="p-2">
       {isRunning && (
-        <div className="pt-4 pl-[26px]">
+        <div className="pt-4 pl-6.5">
           <LoadingAnim type="text" />
         </div>
       )}
diff --git a/web/app/components/workflow/run/result-text.tsx b/web/app/components/workflow/run/result-text.tsx
index 2cae39d4ab6..223adfd5bc6 100644
--- a/web/app/components/workflow/run/result-text.tsx
+++ b/web/app/components/workflow/run/result-text.tsx
@@ -29,7 +29,7 @@ const ResultText: FC<ResultTextProps> = ({
   return (
     <div className="bg-background-section-burn">
       {isRunning && !outputs && (
-        <div className="pt-4 pl-[26px]">
+        <div className="pt-4 pl-6.5">
           <LoadingAnim type="text" />
         </div>
       )}
@@ -39,7 +39,7 @@ const ResultText: FC<ResultTextProps> = ({
         </div>
       )}
       {!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">
+        <div className="mt-30 flex flex-col items-center px-4 py-2 text-[13px] leading-4.5 text-gray-500">
           <ImageIndentLeft className="size-6 text-gray-400" />
           <div className="mr-2">{t(($) => $['resultEmpty.title'], { ns: 'runLog' })}</div>
           <div>
diff --git a/web/app/components/workflow/run/status-container.tsx b/web/app/components/workflow/run/status-container.tsx
index 4ef510d9d2b..9ed9668b062 100644
--- a/web/app/components/workflow/run/status-container.tsx
+++ b/web/app/components/workflow/run/status-container.tsx
@@ -69,7 +69,7 @@ const StatusContainer: FC<Props> = ({ status, children }) => {
     >
       <div
         className={cn(
-          'absolute top-0 left-0 h-[50px] w-[65%] bg-no-repeat',
+          'absolute top-0 left-0 h-12.5 w-[65%] bg-no-repeat',
           theme === Theme.light && 'bg-[url(~@/app/components/workflow/run/assets/highlight.svg)]',
           theme === Theme.dark &&
             'bg-[url(~@/app/components/workflow/run/assets/highlight-dark.svg)]',
diff --git a/web/app/components/workflow/run/status.tsx b/web/app/components/workflow/run/status.tsx
index db04ffa3da7..d7ac3c45767 100644
--- a/web/app/components/workflow/run/status.tsx
+++ b/web/app/components/workflow/run/status.tsx
@@ -88,12 +88,7 @@ const StatusPanel: FC<ResultProps> = ({
   return (
     <StatusContainer status={status}>
       <div className="flex">
-        <div
-          className={cn(
-            'max-w-[120px] flex-[33%]',
-            status === 'partial-succeeded' && 'min-w-[140px]',
-          )}
-        >
+        <div className={cn('max-w-30 flex-[33%]', status === 'partial-succeeded' && 'min-w-35')}>
           <div className="mb-1 system-2xs-medium-uppercase text-text-tertiary">
             {t(($) => $['resultPanel.status'], { ns: 'runLog' })}
           </div>
@@ -152,7 +147,7 @@ const StatusPanel: FC<ResultProps> = ({
             )}
           </div>
         </div>
-        <div className="max-w-[152px] flex-[33%]">
+        <div className="max-w-38 flex-[33%]">
           <div className="mb-1 system-2xs-medium-uppercase text-text-tertiary">
             {t(($) => $['resultPanel.time'], { ns: 'runLog' })}
           </div>
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index d644f5c9e78..51849851d97 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -118,7 +118,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
           <div className={`relative pl-2 ${isCollapsed ? 'hidden' : ''}`}>
             <div
               className={cn(
-                'absolute top-0 bottom-0 left-[5px] w-[2px]',
+                'absolute top-0 bottom-0 left-1.25 w-0.5',
                 isHovered ? 'bg-text-accent-secondary' : 'bg-divider-subtle',
               )}
             ></div>
diff --git a/web/app/components/workflow/simple-node/index.tsx b/web/app/components/workflow/simple-node/index.tsx
index 9aee353d578..1f4fffb1073 100644
--- a/web/app/components/workflow/simple-node/index.tsx
+++ b/web/app/components/workflow/simple-node/index.tsx
@@ -50,7 +50,7 @@ const SimpleNode: FC<SimpleNodeProps> = ({ id, data }) => {
         className={cn(
           'group relative pb-1 shadow-xs',
           'rounded-[15px] border border-transparent',
-          'w-[240px] bg-workflow-block-bg',
+          'w-60 bg-workflow-block-bg',
           !data._runningStatus && 'hover:shadow-lg',
           showRunningBorder && 'border-state-accent-solid!',
           showSuccessBorder && 'border-state-success-solid!',
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index 2f689b8654f..36770cb3eba 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -183,18 +183,18 @@ const UpdateDSLModal = ({ onCancel, onBackup, onImport }: UpdateDSLModalProps) =
           if (!open) onCancel()
         }}
       >
-        <DialogContent className="w-full max-w-[480px]! overflow-hidden! rounded-2xl border-none p-6 text-left align-middle">
+        <DialogContent className="w-full max-w-120! overflow-hidden! rounded-2xl border-none p-6 text-left align-middle">
           <div className="mb-3 flex items-center justify-between">
             <div className="title-2xl-semi-bold text-text-primary">
               {t(($) => $.importApp, { ns: 'app' })}
             </div>
             <button
               type="button"
-              className="flex h-[22px] w-[22px] 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 h-5.5 w-5.5 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-[18px] w-[18px] text-text-tertiary" aria-hidden="true" />
+              <RiCloseLine className="h-4.5 w-4.5 text-text-tertiary" aria-hidden="true" />
             </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">
@@ -209,7 +209,7 @@ const UpdateDSLModal = ({ onCancel, onBackup, onImport }: UpdateDSLModalProps) =
               <div className="flex items-start gap-1 self-stretch pt-1 pb-0.5">
                 <Button size="small" variant="secondary" className="relative" onClick={onBackup}>
                   <RiFileDownloadLine className="size-3.5 text-components-button-secondary-text" />
-                  <div className="flex items-center justify-center gap-1 px-[3px]">
+                  <div className="flex items-center justify-center gap-1 px-0.75">
                     {t(($) => $['common.backupCurrentDraft'], { ns: 'workflow' })}
                   </div>
                 </Button>
@@ -244,7 +244,7 @@ const UpdateDSLModal = ({ onCancel, onBackup, onImport }: UpdateDSLModalProps) =
           if (!open) setShowErrorModal(false)
         }}
       >
-        <DialogContent className="w-full max-w-[480px]! overflow-hidden! border-none text-left align-middle">
+        <DialogContent className="w-full max-w-120! overflow-hidden! border-none text-left align-middle">
           <div className="flex flex-col items-start gap-2 self-stretch pb-4">
             <div className="title-2xl-semi-bold text-text-primary">
               {t(($) => $['newApp.appCreateDSLErrorTitle'], { ns: 'app' })}
diff --git a/web/app/components/workflow/variable-inspect/display-content.tsx b/web/app/components/workflow/variable-inspect/display-content.tsx
index 9731ce711f1..881537ae696 100644
--- a/web/app/components/workflow/variable-inspect/display-content.tsx
+++ b/web/app/components/workflow/variable-inspect/display-content.tsx
@@ -104,7 +104,7 @@ export function DisplayContent(props: DisplayContentProps) {
             <SegmentedControlItem
               key={value}
               value={value}
-              className="h-[22px] gap-[3px] rounded-md p-px pr-0.5 pl-1.5 text-text-tertiary data-pressed:text-text-accent-light-mode-only"
+              className="h-5.5 gap-0.75 rounded-md p-px pr-0.5 pl-1.5 text-text-tertiary data-pressed:text-text-accent-light-mode-only"
             >
               <i className={cn('size-4 shrink-0', iconClassName)} aria-hidden="true" />
               <span className="p-0.5 pr-1">{label}</span>
diff --git a/web/app/components/workflow/variable-inspect/listening.tsx b/web/app/components/workflow/variable-inspect/listening.tsx
index f658105a92f..0fe578b79a9 100644
--- a/web/app/components/workflow/variable-inspect/listening.tsx
+++ b/web/app/components/workflow/variable-inspect/listening.tsx
@@ -192,7 +192,7 @@ const Listening: FC<ListeningProps> = ({ onStop, message }) => {
                   aria-label={
                     t(($) => $['nodes.triggerWebhook.debugUrlCopy'], { ns: 'workflow' }) || ''
                   }
-                  className={`inline-flex items-center rounded-md border border-divider-regular bg-components-badge-white-to-dark px-1.5 py-[2px] font-mono text-[13px] leading-[18px] text-text-secondary transition-colors hover:bg-components-panel-on-panel-item-bg-hover focus:outline-hidden focus-visible:outline-2 focus-visible:outline-components-panel-border focus-visible:outline-solid ${debugUrlCopied ? 'bg-components-panel-on-panel-item-bg-hover text-text-primary' : ''}`}
+                  className={`inline-flex items-center rounded-md border border-divider-regular bg-components-badge-white-to-dark px-1.5 py-0.5 font-mono text-[13px] leading-4.5 text-text-secondary transition-colors hover:bg-components-panel-on-panel-item-bg-hover focus:outline-hidden focus-visible:outline-2 focus-visible:outline-components-panel-border focus-visible:outline-solid ${debugUrlCopied ? 'bg-components-panel-on-panel-item-bg-hover text-text-primary' : ''}`}
                   onClick={() => {
                     copy(webhookDebugUrl)
                     setDebugUrlCopied(true)
diff --git a/web/app/components/workflow/variable-inspect/panel.tsx b/web/app/components/workflow/variable-inspect/panel.tsx
index 08999675ba6..f0d2e6779c8 100644
--- a/web/app/components/workflow/variable-inspect/panel.tsx
+++ b/web/app/components/workflow/variable-inspect/panel.tsx
@@ -218,7 +218,7 @@ const Panel: FC = () => {
           'w-60 shrink-0 border-r border-divider-burn',
           bottomPanelWidth < 488
             ? showLeftPanel
-              ? 'absolute top-0 left-0 z-10 h-full w-[217px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-xs'
+              ? 'absolute top-0 left-0 z-10 h-full w-54.25 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-xs'
               : 'hidden'
             : 'block',
         )}
diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index cce7a711209..afa67fcfaa5 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -243,7 +243,7 @@ const Right = ({ nodeId, currentNodeVar, handleOpenMenu, isValueFetching }: Prop
               )}
               {!isTruncated && currentNodeVar.var.edited && (
                 <Badge>
-                  <span className="mr-[4.5px] ml-[2.5px] h-[3px] w-[3px] rounded-sm bg-text-accent-secondary"></span>
+                  <span className="mr-[4.5px] ml-[2.5px] h-0.75 w-0.75 rounded-sm bg-text-accent-secondary"></span>
                   <span className="system-2xs-semibold-uupercase">
                     {t(($) => $['debug.variableInspect.edited'], { ns: 'workflow' })}
                   </span>
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 a9aa5851b0b..89888fb74e5 100644
--- a/web/app/components/workflow/variable-inspect/value-content-sections.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content-sections.tsx
@@ -43,14 +43,14 @@ export const TextEditorSection = ({
           mdString={typeof value === 'string' ? value : String(value ?? '')}
           readonly={textEditorDisabled}
           handleTextChange={onTextChange}
-          className={cn(isTruncated && 'pt-[36px]')}
+          className={cn(isTruncated && 'pt-9')}
         />
       ) : (
         <Textarea
           aria-label={t(($) => $['errorMsg.fields.variableValue'], { ns: 'workflow' })}
           readOnly={textEditorDisabled}
           disabled={textEditorDisabled || isTruncated}
-          className={cn('h-full', isTruncated && 'pt-[48px]')}
+          className={cn('h-full', isTruncated && 'pt-12')}
           value={typeof value === 'number' ? value : String(value ?? '')}
           onValueChange={(value) => onTextChange(value)}
         />
@@ -66,7 +66,7 @@ type BoolArraySectionProps = {
 
 export const BoolArraySection = ({ values, onChange }: BoolArraySectionProps) => {
   return (
-    <div className="w-[295px] space-y-1">
+    <div className="w-73.75 space-y-1">
       {values.map((value, index) => (
         <BoolValue
           key={`${index}-${String(value)}`}
@@ -142,7 +142,7 @@ export const FileEditorSection = ({
   onChange,
 }: FileEditorSectionProps) => {
   return (
-    <div className="max-w-[460px]">
+    <div className="max-w-115">
       <FileUploaderInAttachmentWrapper
         value={fileValue}
         onChange={onChange}
diff --git a/web/app/components/workflow/variable-inspect/value-content.tsx b/web/app/components/workflow/variable-inspect/value-content.tsx
index dc99d8f0b00..eedc6495a80 100644
--- a/web/app/components/workflow/variable-inspect/value-content.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content.tsx
@@ -131,7 +131,7 @@ const ValueContent = ({ currentVar, handleValueChange, isTruncated }: Props) =>
           />
         )}
         {showBoolEditor && (
-          <div className="w-[295px]">
+          <div className="w-73.75">
             <BoolValue
               value={currentVar.value as boolean}
               onChange={(newValue) => {
diff --git a/web/app/components/workflow/workflow-generator/example-prompts.tsx b/web/app/components/workflow/workflow-generator/example-prompts.tsx
index 3567793ec7c..7d64adf08a2 100644
--- a/web/app/components/workflow/workflow-generator/example-prompts.tsx
+++ b/web/app/components/workflow/workflow-generator/example-prompts.tsx
@@ -134,7 +134,7 @@ const ExamplePrompts = ({ mode, onSelect }: Props) => {
           ? SKELETONS.map(({ id, width }) => (
               <div
                 key={id}
-                className="h-[26px] animate-pulse rounded-md bg-components-button-secondary-bg"
+                className="h-6.5 animate-pulse rounded-md bg-components-button-secondary-bg"
                 style={{ width }}
               />
             ))
diff --git a/web/app/components/workflow/workflow-generator/index.tsx b/web/app/components/workflow/workflow-generator/index.tsx
index f8b1add0688..8554600f3a0 100644
--- a/web/app/components/workflow/workflow-generator/index.tsx
+++ b/web/app/components/workflow/workflow-generator/index.tsx
@@ -569,12 +569,12 @@ function WorkflowGeneratorModal() {
         }
       }}
     >
-      <DialogContent className="h-[min(680px,calc(100dvh-2rem))] max-h-none! w-[calc(100vw-2rem)] max-w-[1140px]! min-w-0 overflow-hidden! border-none p-0! text-left align-middle">
+      <DialogContent className="h-[min(680px,calc(100dvh-2rem))] max-h-none! w-[calc(100vw-2rem)] max-w-285! min-w-0 overflow-hidden! border-none p-0! text-left align-middle">
         <div className="flex h-full min-h-0 flex-col md:flex-row">
           {/* Left pane: instructions + ideal output + model selector */}
-          <div className="max-h-[55%] w-full shrink-0 overflow-y-auto border-b border-divider-regular p-6 md:h-full md:max-h-none md:w-1/2 md:border-r md:border-b-0 lg:w-[570px]">
+          <div className="max-h-[55%] w-full shrink-0 overflow-y-auto border-b border-divider-regular p-6 md:h-full md:max-h-none md:w-1/2 md:border-r md:border-b-0 lg:w-142.5">
             <div className="mb-5">
-              <DialogTitle className="text-lg leading-[28px] font-bold text-text-primary">
+              <DialogTitle className="text-lg leading-7 font-bold text-text-primary">
                 {isRefine
                   ? t(($) => $['workflowGenerator.refineTitle'], { mode: modeLabel })
                   : t(($) => $['workflowGenerator.title'], { mode: modeLabel })}
@@ -608,7 +608,7 @@ function WorkflowGeneratorModal() {
                 // capture an instruction, so focusing it on open aids the flow.
                 // oxlint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus
-                className="h-[160px]"
+                className="h-40"
                 placeholder={
                   isRefine
                     ? t(($) => $['workflowGenerator.refineInstructionPlaceholder'])
diff --git a/web/app/components/workflow/workflow-preview/components/__tests__/zoom-in-out.spec.tsx b/web/app/components/workflow/workflow-preview/components/__tests__/zoom-in-out.spec.tsx
index 983e9db6bc3..116d08f1b66 100644
--- a/web/app/components/workflow/workflow-preview/components/__tests__/zoom-in-out.spec.tsx
+++ b/web/app/components/workflow/workflow-preview/components/__tests__/zoom-in-out.spec.tsx
@@ -21,7 +21,7 @@ vi.mock('reactflow', () => ({
 
 const getZoomControls = () => {
   const label = Array.from(document.querySelectorAll('button')).find((element) => {
-    return /^\d+%$/.test(element.textContent ?? '') && element.className.includes('w-[34px]')
+    return /^\d+%$/.test(element.textContent ?? '') && element.className.includes('w-8.5')
   })
   const zoomOutIcon = document.querySelector('.i-ri-zoom-out-line')
   const zoomInIcon = document.querySelector('.i-ri-zoom-in-line')
diff --git a/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx b/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx
index 35e2b1fecb1..e2ce0b3018f 100644
--- a/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx
@@ -23,7 +23,7 @@ const ErrorHandleOnNode = ({ id, data }: ErrorHandleOnNodeProps) => {
     <div className="relative px-3 pt-1 pb-2">
       <div
         className={cn(
-          'relative flex h-6 items-center justify-between rounded-md bg-workflow-block-parma-bg px-[5px]',
+          'relative flex h-6 items-center justify-between rounded-md bg-workflow-block-parma-bg px-1.25',
           data._runningStatus === NodeRunningStatus.Exception &&
             'border-[0.5px] border-components-badge-status-light-warning-halo bg-state-warning-hover',
         )}
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/base.tsx b/web/app/components/workflow/workflow-preview/components/nodes/base.tsx
index f5980ff9c33..14f2ba9f69d 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/base.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/base.tsx
@@ -77,7 +77,7 @@ const BaseCard = ({ id, data, children }: NodeCardProps) => {
                   aria-label={t(($) => $['nodes.iteration.parallelModeEnableTitle'], {
                     ns: 'workflow',
                   })}
-                  className="ml-1 flex items-center justify-center rounded-[5px] border border-text-warning bg-transparent px-[5px] py-[3px] system-2xs-medium-uppercase text-text-warning"
+                  className="ml-1 flex items-center justify-center rounded-[5px] border border-text-warning bg-transparent px-1.25 py-0.75 system-2xs-medium-uppercase text-text-warning"
                 >
                   {t(($) => $['nodes.iteration.parallelModeUpper'], { ns: 'workflow' })}
                 </PopoverTrigger>
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/if-else/node.tsx b/web/app/components/workflow/workflow-preview/components/nodes/if-else/node.tsx
index a60c8a1f6e5..80df2f958da 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/if-else/node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/if-else/node.tsx
@@ -46,7 +46,7 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
         <div key={caseItem.case_id}>
           <div className="relative flex h-6 items-center px-1">
             <div className="flex w-full items-center justify-between">
-              <div className="text-[10px] font-semibold text-text-tertiary">
+              <div className="text-2xs font-semibold text-text-tertiary">
                 {casesLength > 1 && `CASE ${index + 1}`}
               </div>
               <div className="text-[12px] font-semibold text-text-secondary">
@@ -77,7 +77,7 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
                   conditionNotSet
                 )}
                 {i !== caseItem.conditions.length - 1 && (
-                  <div className="absolute right-1 bottom-[-10px] z-10 text-[10px] leading-4 font-medium text-text-accent uppercase">
+                  <div className="absolute right-1 -bottom-2.5 z-10 text-2xs leading-4 font-medium text-text-accent uppercase">
                     {t(($) => $[`${i18nPrefix}.${caseItem.logical_operator}`], { ns: 'workflow' })}
                   </div>
                 )}
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx b/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx
index 220316ce5ef..f330b99bf7c 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx
@@ -11,7 +11,7 @@ const Node: FC<NodeProps<IterationNodeType>> = ({ id }) => {
   return (
     <div
       className={cn(
-        'relative h-full min-h-[90px] w-full min-w-[240px] rounded-2xl bg-workflow-canvas-workflow-bg',
+        'relative h-full min-h-22.5 w-full min-w-60 rounded-2xl bg-workflow-canvas-workflow-bg',
       )}
     >
       <Background
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx b/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx
index f7391487505..e0ed3a16b8e 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx
@@ -18,7 +18,7 @@ const Node: FC<NodeProps<LoopNodeType>> = ({ id, data: _data }) => {
   return (
     <div
       className={cn(
-        'relative h-full min-h-[90px] w-full min-w-[240px] rounded-2xl bg-workflow-canvas-workflow-bg',
+        'relative h-full min-h-22.5 w-full min-w-60 rounded-2xl bg-workflow-canvas-workflow-bg',
       )}
       // style={{
       //   width: data.width || 'auto',
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 d617ddf724b..79a5bd1192b 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
@@ -82,7 +82,7 @@ const ZoomInOut: FC = () => {
         'hover:bg-state-base-hover',
       )}
     >
-      <div className="flex h-8 w-[98px] items-center justify-between rounded-lg">
+      <div className="flex h-8 w-24.5 items-center justify-between rounded-lg">
         <TipPopup
           title={t(($) => $['operator.zoomOut'], { ns: 'workflow' })}
           shortcut="workflow.zoom-out"
@@ -106,7 +106,7 @@ const ZoomInOut: FC = () => {
           </button>
         </TipPopup>
         <DropdownMenu>
-          <DropdownMenuTrigger className="flex h-8 w-[34px] items-center justify-center rounded-lg system-sm-medium text-text-tertiary hover:bg-black/5 hover:text-text-secondary data-popup-open:bg-black/5 data-popup-open:text-text-secondary">
+          <DropdownMenuTrigger className="flex h-8 w-8.5 items-center justify-center rounded-lg system-sm-medium text-text-tertiary hover:bg-black/5 hover:text-text-secondary data-popup-open:bg-black/5 data-popup-open:text-text-secondary">
             {Number.parseFloat(`${zoom * 100}`).toFixed(0)}%
           </DropdownMenuTrigger>
           <DropdownMenuContent
@@ -115,7 +115,7 @@ const ZoomInOut: FC = () => {
             alignOffset={-2}
             popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
           >
-            <div className="w-[145px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
+            <div className="w-36.25 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
               {zoomOptions.map((options, groupIndex) => (
                 <Fragment key={options[0]!.key}>
                   {groupIndex !== 0 && <DropdownMenuSeparator className="my-0" />}
diff --git a/web/app/components/workflow/workflow-preview/index.tsx b/web/app/components/workflow/workflow-preview/index.tsx
index 1908b05d5dc..8b5cd398269 100644
--- a/web/app/components/workflow/workflow-preview/index.tsx
+++ b/web/app/components/workflow/workflow-preview/index.tsx
@@ -77,7 +77,7 @@ const WorkflowPreview = ({
           }}
           maskColor="var(--color-workflow-minimap-bg)"
           className={cn(
-            'absolute! bottom-14! z-9 m-0! h-[72px]! w-[102px]! rounded-lg! border-[0.5px]! border-divider-subtle! bg-background-default-subtle! shadow-md! shadow-shadow-shadow-5!',
+            'absolute! bottom-14! z-9 m-0! h-18! w-25.5! rounded-lg! border-[0.5px]! border-divider-subtle! bg-background-default-subtle! shadow-md! shadow-shadow-shadow-5!',
             miniMapToRight ? 'right-4!' : 'left-4!',
           )}
         />
diff --git a/web/app/device/layout.tsx b/web/app/device/layout.tsx
index d7d79999631..d9c3f45d7fa 100644
--- a/web/app/device/layout.tsx
+++ b/web/app/device/layout.tsx
@@ -16,10 +16,8 @@ export default function DeviceLayout({ children }: { children: React.ReactNode }
         )}
       >
         <Header />
-        <div
-          className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]')}
-        >
-          <div className="flex flex-col md:w-[400px]">{children}</div>
+        <div className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-27')}>
+          <div className="flex flex-col md:w-100">{children}</div>
         </div>
         {systemFeatures.branding.enabled === false && (
           <div className="px-8 py-6 system-xs-regular text-text-tertiary">
diff --git a/web/app/device/page.tsx b/web/app/device/page.tsx
index 5926797ac3a..c597dc01262 100644
--- a/web/app/device/page.tsx
+++ b/web/app/device/page.tsx
@@ -191,8 +191,8 @@ export default function DevicePage() {
 
       {view.kind === 'success' && (
         <div className="flex flex-col gap-1">
-          <div className="mb-2.5 flex h-[38px] w-[38px] items-center justify-center rounded-full bg-state-success-hover">
-            <span className="i-ri-checkbox-circle-line h-[18px] w-[18px] text-util-colors-green-green-600" />
+          <div className="mb-2.5 flex h-9.5 w-9.5 items-center justify-center rounded-full bg-state-success-hover">
+            <span className="i-ri-checkbox-circle-line h-4.5 w-4.5 text-util-colors-green-green-600" />
           </div>
           <h1 className="text-xl font-semibold text-text-primary">
             {t(($) => $['success.title'])}
@@ -207,8 +207,8 @@ export default function DevicePage() {
 
       {view.kind === 'error_expired' && (
         <div className="flex flex-col gap-1">
-          <div className="mb-2.5 flex h-[38px] w-[38px] items-center justify-center rounded-full bg-state-warning-hover">
-            <span className="i-ri-error-warning-line h-[18px] w-[18px] text-util-colors-yellow-yellow-600" />
+          <div className="mb-2.5 flex h-9.5 w-9.5 items-center justify-center rounded-full bg-state-warning-hover">
+            <span className="i-ri-error-warning-line h-4.5 w-4.5 text-util-colors-yellow-yellow-600" />
           </div>
           <h1 className="text-xl font-semibold text-text-primary">
             {t(($) => $['errorExpired.title'])}
@@ -238,8 +238,8 @@ export default function DevicePage() {
 
       {view.kind === 'error_rate_limited' && (
         <div className="flex flex-col gap-1">
-          <div className="mb-2.5 flex h-[38px] w-[38px] items-center justify-center rounded-full bg-state-warning-hover">
-            <span className="i-ri-error-warning-line h-[18px] w-[18px] text-util-colors-yellow-yellow-600" />
+          <div className="mb-2.5 flex h-9.5 w-9.5 items-center justify-center rounded-full bg-state-warning-hover">
+            <span className="i-ri-error-warning-line h-4.5 w-4.5 text-util-colors-yellow-yellow-600" />
           </div>
           <h1 className="text-xl font-semibold text-text-primary">
             {t(($) => $['errorRateLimited.title'])}
@@ -261,8 +261,8 @@ export default function DevicePage() {
 
       {view.kind === 'error_lookup_failed' && (
         <div className="flex flex-col gap-1">
-          <div className="mb-2.5 flex h-[38px] w-[38px] items-center justify-center rounded-full bg-state-destructive-hover">
-            <span className="i-ri-close-circle-line h-[18px] w-[18px] text-util-colors-red-red-600" />
+          <div className="mb-2.5 flex h-9.5 w-9.5 items-center justify-center rounded-full bg-state-destructive-hover">
+            <span className="i-ri-close-circle-line h-4.5 w-4.5 text-util-colors-red-red-600" />
           </div>
           <h1 className="text-xl font-semibold text-text-primary">
             {t(($) => $['errorLookupFailed.title'])}
@@ -284,10 +284,10 @@ export default function DevicePage() {
 
       {view.kind === 'error_sso' && (
         <div className="flex flex-col gap-1">
-          <div className="mb-2.5 flex h-[38px] w-[38px] items-center justify-center rounded-full bg-state-warning-hover">
+          <div className="mb-2.5 flex h-9.5 w-9.5 items-center justify-center rounded-full bg-state-warning-hover">
             <span
               aria-hidden="true"
-              className="i-ri-error-warning-line h-[18px] w-[18px] text-util-colors-yellow-yellow-600"
+              className="i-ri-error-warning-line h-4.5 w-4.5 text-util-colors-yellow-yellow-600"
             />
           </div>
           <h1 className="text-xl font-semibold text-text-primary">
diff --git a/web/app/education-apply/applied-education-content.tsx b/web/app/education-apply/applied-education-content.tsx
index c581c5d133a..8d74ba5273a 100644
--- a/web/app/education-apply/applied-education-content.tsx
+++ b/web/app/education-apply/applied-education-content.tsx
@@ -76,7 +76,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"
+              className="h-12! w-fit max-w-full min-w-70 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"
               disabled={isSwitchingWorkspace}
             >
               <span className="flex min-w-0 items-center gap-3">
diff --git a/web/app/education-apply/education-apply-page.tsx b/web/app/education-apply/education-apply-page.tsx
index 190eb4eb10b..6d4444c0be7 100644
--- a/web/app/education-apply/education-apply-page.tsx
+++ b/web/app/education-apply/education-apply-page.tsx
@@ -168,18 +168,18 @@ const EducationApplyAgeContent = () => {
 
   return (
     <div className="fixed inset-0 z-31 overflow-y-auto bg-background-body p-6">
-      <div className="mx-auto w-full max-w-[1408px] rounded-2xl border border-effects-highlight bg-background-default-subtle">
+      <div className="mx-auto w-full max-w-352 rounded-2xl border border-effects-highlight bg-background-default-subtle">
         <div
-          className="h-[349px] w-full overflow-hidden rounded-t-2xl bg-cover bg-center bg-no-repeat"
+          className="h-87.25 w-full overflow-hidden rounded-t-2xl bg-cover bg-center bg-no-repeat"
           style={{
             backgroundImage: 'url(/education/bg.png)',
           }}
         ></div>
-        <div className="mt-[-349px] box-content flex h-7 items-center justify-between p-6">
+        <div className="-mt-87.25 box-content flex h-7 items-center justify-between p-6">
           <DifyLogo alt="Dify" size="large" className="brightness-0 invert" />
         </div>
-        <div className="mx-auto max-w-[720px] px-8 pb-[180px]">
-          <div className="mb-2 flex h-[192px] flex-col justify-end pt-3 pb-4 text-text-primary-on-surface">
+        <div className="mx-auto max-w-180 px-8 pb-45">
+          <div className="mb-2 flex h-48 flex-col justify-end pt-3 pb-4 text-text-primary-on-surface">
             <div className="mb-2 title-5xl-bold shadow-xs">
               {t(($) => $.toVerified, { ns: 'education' })}
             </div>
diff --git a/web/app/education-apply/expire-notice-modal.tsx b/web/app/education-apply/expire-notice-modal.tsx
index cc11adb4dfb..17aea0dd42a 100644
--- a/web/app/education-apply/expire-notice-modal.tsx
+++ b/web/app/education-apply/expire-notice-modal.tsx
@@ -52,7 +52,7 @@ const ExpireNoticeModal: React.FC<Props> = ({ expireAt, expired, onClose }) => {
         if (!open) onClose()
       }}
     >
-      <DialogContent className="w-full max-w-[600px] overflow-hidden! border-none text-left align-middle">
+      <DialogContent className="w-full max-w-150 overflow-hidden! border-none text-left align-middle">
         <DialogCloseButton />
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {expired
diff --git a/web/app/education-apply/search-input.tsx b/web/app/education-apply/search-input.tsx
index 0add876a7bc..532da4b57d0 100644
--- a/web/app/education-apply/search-input.tsx
+++ b/web/app/education-apply/search-input.tsx
@@ -82,7 +82,7 @@ const SearchInput = ({ value, onChange }: SearchInputProps) => {
           sideOffset={4}
           popupClassName="w-[var(--anchor-width)] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg"
         >
-          <div className="max-h-[330px] overflow-y-auto" onScroll={handleScroll}>
+          <div className="max-h-82.5 overflow-y-auto" onScroll={handleScroll}>
             {schools.map((school) => (
               <div
                 key={school}
diff --git a/web/app/education-apply/user-info.tsx b/web/app/education-apply/user-info.tsx
index 7bad32a261b..26a8e3e64b0 100644
--- a/web/app/education-apply/user-info.tsx
+++ b/web/app/education-apply/user-info.tsx
@@ -24,10 +24,10 @@ const UserInfo = () => {
   return (
     <div className="relative flex items-center justify-between rounded-xl border-4 border-components-panel-on-panel-item-bg bg-linear-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 pt-9 pr-8 pb-6 pl-6 shadow-shadow-shadow-5">
       <div className="absolute top-0 left-0 flex items-center">
-        <div className="flex h-[22px] items-center bg-components-panel-on-panel-item-bg pt-1 pl-2 system-2xs-semibold-uppercase text-text-accent-light-mode-only">
+        <div className="flex h-5.5 items-center bg-components-panel-on-panel-item-bg pt-1 pl-2 system-2xs-semibold-uppercase text-text-accent-light-mode-only">
           {t(($) => $.currentSigned, { ns: 'education' })}
         </div>
-        <Triangle className="h-[22px] w-4 text-components-panel-on-panel-item-bg" />
+        <Triangle className="h-5.5 w-4 text-components-panel-on-panel-item-bg" />
       </div>
       <div className="flex items-center">
         <Avatar
diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index eb4b2b63217..89a515f1765 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -66,15 +66,11 @@ const ChangePasswordForm = () => {
 
   return (
     <div
-      className={cn(
-        'flex w-full grow flex-col items-center justify-center',
-        'px-6',
-        'md:px-[108px]',
-      )}
+      className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-27')}
     >
       {!isTokenMissing && !verifyTokenRes && <Loading />}
       {(isTokenMissing || (verifyTokenRes && !verifyTokenRes.is_valid)) && (
-        <div className="flex flex-col md:w-[400px]">
+        <div className="flex flex-col md:w-100">
           <div className="mx-auto w-full">
             <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">
               🤷‍♂️
@@ -91,7 +87,7 @@ const ChangePasswordForm = () => {
         </div>
       )}
       {verifyTokenRes && verifyTokenRes.is_valid && !showSuccess && (
-        <div className="flex flex-col md:w-[400px]">
+        <div className="flex flex-col md:w-100">
           <div className="mx-auto w-full">
             <h2 className="text-[32px] font-bold text-text-primary">
               {t(($) => $.changePassword, { ns: 'login' })}
@@ -154,7 +150,7 @@ const ChangePasswordForm = () => {
         </div>
       )}
       {verifyTokenRes && verifyTokenRes.is_valid && showSuccess && (
-        <div className="flex flex-col md:w-[400px]">
+        <div className="flex flex-col md:w-100">
           <div className="mx-auto w-full">
             <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">
               <CheckCircleIcon className="h-10 w-10 text-[#039855]" />
diff --git a/web/app/reset-password/layout.tsx b/web/app/reset-password/layout.tsx
index 97c58ec60d1..a592176e314 100644
--- a/web/app/reset-password/layout.tsx
+++ b/web/app/reset-password/layout.tsx
@@ -19,10 +19,10 @@ export default function SignInLayout({ children }: any) {
             className={cn(
               'flex w-full grow flex-col items-center justify-center',
               'px-6',
-              'md:px-[108px]',
+              'md:px-27',
             )}
           >
-            <div className="flex flex-col md:w-[400px]">{children}</div>
+            <div className="flex flex-col md:w-100">{children}</div>
           </div>
           {!systemFeatures.branding.enabled && (
             <div className="px-8 py-6 system-xs-regular text-text-tertiary">
diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index 14beddb53c4..baaca353f6f 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -89,14 +89,10 @@ const ChangePasswordForm = () => {
 
   return (
     <div
-      className={cn(
-        'flex w-full grow flex-col items-center justify-center',
-        'px-6',
-        'md:px-[108px]',
-      )}
+      className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-27')}
     >
       {!showSuccess && (
-        <div className="flex flex-col md:w-[400px]">
+        <div className="flex flex-col md:w-100">
           <div className="mx-auto w-full">
             <h2 className="title-4xl-semi-bold text-text-primary">
               {t(($) => $.changePassword, { ns: 'login' })}
@@ -173,7 +169,7 @@ const ChangePasswordForm = () => {
         </div>
       )}
       {showSuccess && (
-        <div className="flex flex-col md:w-[400px]">
+        <div className="flex flex-col md:w-100">
           <div className="mx-auto w-full">
             <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" />
diff --git a/web/app/signin/_locale-menu.tsx b/web/app/signin/_locale-menu.tsx
index 0e7f2db8df0..2c97f0919ef 100644
--- a/web/app/signin/_locale-menu.tsx
+++ b/web/app/signin/_locale-menu.tsx
@@ -38,7 +38,7 @@ export default function LocaleMenu<T extends string>({
               render={
                 <button
                   type="button"
-                  className="inline-flex w-full items-center rounded-lg border border-components-button-secondary-border px-[10px] py-[6px] text-[13px] font-medium text-text-primary hover:bg-state-base-hover"
+                  className="inline-flex w-full items-center rounded-lg border border-components-button-secondary-border px-2.5 py-1.5 text-[13px] font-medium text-text-primary hover:bg-state-base-hover"
                 />
               }
             >
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index 33eeea9e6c2..1ad3e50b85e 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -171,7 +171,7 @@ export default function InviteSettingsPage() {
   if (isProfilePending || shouldReturnToSignIn || !checkRes) return <Loading />
   if (!checkRes.is_valid) {
     return (
-      <div className="flex flex-col md:w-[400px]">
+      <div className="flex flex-col md:w-100">
         <div className="mx-auto w-full">
           <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">
             🤷‍♂️
diff --git a/web/app/signin/layout.tsx b/web/app/signin/layout.tsx
index e63f00c10f2..42fcf2bf5bb 100644
--- a/web/app/signin/layout.tsx
+++ b/web/app/signin/layout.tsx
@@ -18,11 +18,9 @@ export default function SignInLayout({ children }: any) {
         >
           <Header />
           <div
-            className={cn(
-              'flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]',
-            )}
+            className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-27')}
           >
-            <div className="flex flex-col md:w-[400px]">{children}</div>
+            <div className="flex flex-col md:w-100">{children}</div>
           </div>
           {systemFeatures.branding.enabled === false && (
             <div className="px-8 py-6 system-xs-regular text-text-tertiary">
diff --git a/web/app/signin/normal-form.tsx b/web/app/signin/normal-form.tsx
index 3b7d296540a..7b2af90117d 100644
--- a/web/app/signin/normal-form.tsx
+++ b/web/app/signin/normal-form.tsx
@@ -113,11 +113,7 @@ function NormalForm() {
   if (isLoading) {
     return (
       <div
-        className={cn(
-          'flex w-full grow flex-col items-center justify-center',
-          'px-6',
-          'md:px-[108px]',
-        )}
+        className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-27')}
       >
         <Loading type="area" />
       </div>
diff --git a/web/app/signin/split.tsx b/web/app/signin/split.tsx
index f5f812bf0db..ef589ee0029 100644
--- a/web/app/signin/split.tsx
+++ b/web/app/signin/split.tsx
@@ -11,7 +11,7 @@ const Split: FC<Props> = ({ className }) => {
   return (
     <div
       className={cn(
-        'h-px w-[400px] bg-[linear-gradient(90deg,rgba(255,255,255,0.01)_0%,rgba(16,24,40,0.08)_50.5%,rgba(255,255,255,0.01)_100%)]',
+        'h-px w-100 bg-[linear-gradient(90deg,rgba(255,255,255,0.01)_0%,rgba(16,24,40,0.08)_50.5%,rgba(255,255,255,0.01)_100%)]',
         className,
       )}
     ></div>
diff --git a/web/app/signup/layout.tsx b/web/app/signup/layout.tsx
index cc2ddbec128..90251e8f208 100644
--- a/web/app/signup/layout.tsx
+++ b/web/app/signup/layout.tsx
@@ -18,11 +18,9 @@ export default function RegisterLayout({ children }: any) {
         >
           <Header />
           <div
-            className={cn(
-              'flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]',
-            )}
+            className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-27')}
           >
-            <div className="flex flex-col md:w-[400px]">{children}</div>
+            <div className="flex flex-col md:w-100">{children}</div>
           </div>
           {systemFeatures.branding.enabled === false && (
             <div className="px-8 py-6 system-xs-regular text-text-tertiary">
diff --git a/web/app/signup/set-password/page.tsx b/web/app/signup/set-password/page.tsx
index 5e124afbe51..485b46cb2c9 100644
--- a/web/app/signup/set-password/page.tsx
+++ b/web/app/signup/set-password/page.tsx
@@ -111,13 +111,9 @@ const ChangePasswordForm = () => {
 
   return (
     <div
-      className={cn(
-        'flex w-full grow flex-col items-center justify-center',
-        'px-6',
-        'md:px-[108px]',
-      )}
+      className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-27')}
     >
-      <div className="flex flex-col md:w-[400px]">
+      <div className="flex flex-col md:w-100">
         <div className="mx-auto w-full">
           <h2 className="title-4xl-semi-bold text-text-primary">
             {t(($) => $.changePassword, { ns: 'login' })}
diff --git a/web/docs/lint.md b/web/docs/lint.md
index ae0c1ce3ebd..b6349080fc4 100644
--- a/web/docs/lint.md
+++ b/web/docs/lint.md
@@ -36,6 +36,8 @@ Oxlint and Vite+ type-check scope is defined by `lint.config.ts` `ignorePatterns
 
 The primary rule baseline lives in `lint.config.ts` and is connected through the root `vite.config.ts` `lint` block. Oxlint-native rules are preferred, and compatible ESLint rules can run through Oxlint's `jsPlugins` support. The rules are explicit snapshots of the ESLint configurations that were active at migration time. Do not import an upstream preset wholesale: enable a new rule intentionally and review its existing violations first.
 
+Tailwind canonical class cleanup is optional because loading the JavaScript plugin adds noticeable lint startup time. The default `pnpm check` command does not load it. Run `pnpm lint:tailwind` to inspect `web/` and `packages/dify-ui/`, or `pnpm lint:tailwind:fix` to apply safe replacements. Both commands run the complete lint configuration with the additional `better-tailwindcss/enforce-canonical-classes` rule, using `web/app/styles/globals.css` and a 16px root font size.
+
 The non-code baseline and its repository-wide file scope live in `eslint.config.mjs`. ESLint checks JSON, JSONC, JSON5, YAML, TOML, and Markdown only. The configuration globally ignores JavaScript, JSX, TypeScript, TSX, and declaration files; a comment-only inventory records the removed code checks as a migration tradeoff. It does not import or depend on the Antfu ESLint config.
 
 ### Auto-fix Workflow
diff --git a/web/features/agent-v2/agent-detail/access/components/agent-api-key-modal.tsx b/web/features/agent-v2/agent-detail/access/components/agent-api-key-modal.tsx
index d3106ac47e9..c347bf98a4d 100644
--- a/web/features/agent-v2/agent-detail/access/components/agent-api-key-modal.tsx
+++ b/web/features/agent-v2/agent-detail/access/components/agent-api-key-modal.tsx
@@ -129,7 +129,7 @@ export function AgentApiKeyModal({
   return (
     <>
       <Dialog open={open} onOpenChange={handleOpenChange}>
-        <DialogContent className="flex w-full max-w-[800px]! flex-col overflow-hidden px-8">
+        <DialogContent className="flex w-full max-w-200! flex-col overflow-hidden px-8">
           <DialogCloseButton />
           <DialogTitle className="title-2xl-semi-bold text-text-primary">
             {t(($) => $['apiKeyModal.apiSecretKey'])}
@@ -141,11 +141,11 @@ export function AgentApiKeyModal({
           <div className="mt-4 min-h-20 overflow-hidden">
             <div className="flex h-9 shrink-0 items-center border-b border-divider-regular text-xs font-semibold text-text-tertiary">
               <div className="w-64 shrink-0 px-3">{t(($) => $['apiKeyModal.secretKey'])}</div>
-              <div className="w-[200px] shrink-0 px-3">{t(($) => $['apiKeyModal.created'])}</div>
-              <div className="w-[200px] shrink-0 px-3">{t(($) => $['apiKeyModal.lastUsed'])}</div>
+              <div className="w-50 shrink-0 px-3">{t(($) => $['apiKeyModal.created'])}</div>
+              <div className="w-50 shrink-0 px-3">{t(($) => $['apiKeyModal.lastUsed'])}</div>
               <div className="grow px-3" />
             </div>
-            <div className="max-h-[280px] overflow-auto">
+            <div className="max-h-70 overflow-auto">
               {apiKeysQuery.isPending && (
                 <div
                   role="status"
@@ -182,7 +182,7 @@ export function AgentApiKeyModal({
                     <div className="w-64 shrink-0 truncate px-3 font-mono" translate="no">
                       {maskApiKey(apiKey.token)}
                     </div>
-                    <div className="w-[200px] shrink-0 truncate px-3">
+                    <div className="w-50 shrink-0 truncate px-3">
                       {apiKey.created_at
                         ? formatTime(
                             apiKey.created_at,
@@ -190,7 +190,7 @@ export function AgentApiKeyModal({
                           )
                         : t(($) => $.never)}
                     </div>
-                    <div className="w-[200px] shrink-0 truncate px-3">
+                    <div className="w-50 shrink-0 truncate px-3">
                       {apiKey.last_used_at
                         ? formatTime(
                             apiKey.last_used_at,
@@ -272,7 +272,7 @@ function AgentApiKeyGenerateModal({
         if (!nextOpen) onClose()
       }}
     >
-      <DialogContent className="w-full max-w-[480px]! overflow-hidden px-8">
+      <DialogContent className="w-full max-w-120! overflow-hidden px-8">
         <DialogCloseButton />
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {t(($) => $['apiKeyModal.apiSecretKey'])}
diff --git a/web/features/agent-v2/agent-detail/access/components/workflow-references-table.tsx b/web/features/agent-v2/agent-detail/access/components/workflow-references-table.tsx
index 173bca5608a..0c639b57020 100644
--- a/web/features/agent-v2/agent-detail/access/components/workflow-references-table.tsx
+++ b/web/features/agent-v2/agent-detail/access/components/workflow-references-table.tsx
@@ -40,12 +40,12 @@ export function WorkflowReferencesTable({ agentId, enabled = true }: WorkflowRef
 
   return (
     <div className="min-w-0 overflow-x-auto">
-      <table className="w-full min-w-[1212px] table-fixed border-collapse">
+      <table className="w-full min-w-303 table-fixed border-collapse">
         <colgroup>
-          <col className="w-[572px]" />
+          <col className="w-143" />
           <col className="w-40" />
           <col className="w-32" />
-          <col className="w-[204px]" />
+          <col className="w-51" />
           <col className="w-36" />
         </colgroup>
         <thead>
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/content-moderation.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/content-moderation.tsx
index eb6a411687e..9a7e99efe2b 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/content-moderation.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/content-moderation.tsx
@@ -161,7 +161,7 @@ function AgentContentModerationSettingsContent() {
             </div>
             <div className="truncate system-xs-regular text-text-secondary">{providerContent}</div>
           </div>
-          <div className="h-[27px] w-px shrink-0 rotate-12 bg-divider-subtle" />
+          <div className="h-6.75 w-px shrink-0 rotate-12 bg-divider-subtle" />
           <div className="min-w-0">
             <div className="mb-0.5 truncate system-2xs-medium-uppercase text-text-tertiary">
               {t(($) => $['feature.moderation.contentEnableLabel'], { ns: 'appDebug' })}
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/bottom-actions.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/bottom-actions.tsx
index 66ffa1c7530..8e9965847ad 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/bottom-actions.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/bottom-actions.tsx
@@ -9,15 +9,15 @@ export function AgentOrchestrateBottomActions({
   shrinkOnOpen?: boolean
 }) {
   return (
-    <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 flex h-[72px] flex-col items-center justify-end px-4 pt-4 pb-2 transition-[height] duration-150 ease-out has-[[data-open]]:h-[307px] motion-reduce:transition-none">
+    <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 flex h-18 flex-col items-center justify-end px-4 pt-4 pb-2 transition-[height] duration-150 ease-out has-data-open:h-76.75 motion-reduce:transition-none">
       <div
         aria-hidden
-        className="pointer-events-none absolute inset-0 z-0 bg-gradient-to-t from-components-panel-bg to-components-panel-bg-transparent [mask-image:linear-gradient(to_top,black,transparent)] backdrop-blur-[2px] [-webkit-mask-image:linear-gradient(to_top,black,transparent)]"
+        className="pointer-events-none absolute inset-0 z-0 bg-linear-to-t from-components-panel-bg to-components-panel-bg-transparent mask-[linear-gradient(to_top,black,transparent)] backdrop-blur-[2px] [-webkit-mask-image:linear-gradient(to_top,black,transparent)]"
       />
       <div
         className={cn(
-          'relative z-10 flex w-full max-w-[506px] flex-col items-center justify-end transition-[max-width] duration-150 ease-out motion-reduce:transition-none',
-          shrinkOnOpen && 'has-[[data-open]]:max-w-96',
+          'relative z-10 flex w-full max-w-126.5 flex-col items-center justify-end transition-[max-width] duration-150 ease-out motion-reduce:transition-none',
+          shrinkOnOpen && 'has-data-open:max-w-96',
         )}
       >
         {children}
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/build-draft-bar.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/build-draft-bar.tsx
index 74e9cb415eb..bb4e5fdf9e8 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/build-draft-bar.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/build-draft-bar.tsx
@@ -63,7 +63,7 @@ export function AgentBuildDraftBar({
       <AgentBuildGridTexture
         aria-hidden
         cellOpacityMultiplier={3}
-        className="pointer-events-none absolute top-[-104px] left-[-1171px] z-0 opacity-70"
+        className="pointer-events-none absolute -top-26 -left-292.75 z-0 opacity-70"
         dotClassName="bg-[#5C90FF]"
       />
       <CollapsiblePanel
@@ -79,7 +79,7 @@ export function AgentBuildDraftBar({
       </CollapsiblePanel>
       <div
         ref={collapsedBarRef}
-        className="relative z-1 flex h-[50px] max-w-full min-w-0 items-center gap-2 p-2 group-data-open/build-draft:justify-end"
+        className="relative z-1 flex h-12.5 max-w-full min-w-0 items-center gap-2 p-2 group-data-open/build-draft:justify-end"
       >
         <div className="flex min-w-0 flex-1 items-center gap-3 pr-8 pl-2 group-data-open/build-draft:hidden">
           <p className="min-w-0 truncate system-sm-semibold text-text-primary">
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/build-draft-change-dot.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/build-draft-change-dot.tsx
index 634dc6a460d..c57553e46a6 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/build-draft-change-dot.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/build-draft-change-dot.tsx
@@ -4,7 +4,7 @@ export function AgentBuildDraftChangeDot() {
   return (
     <span
       aria-hidden="true"
-      className="absolute top-[9px] left-[-9px] size-[5px] rounded-full bg-text-warning-secondary"
+      className="absolute top-2.25 -left-2.25 size-1.25 rounded-full bg-text-warning-secondary"
     />
   )
 }
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/build-draft-changes-panel.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/build-draft-changes-panel.tsx
index ff5e239c6b5..11dd849511f 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/build-draft-changes-panel.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/build-draft-changes-panel.tsx
@@ -42,7 +42,7 @@ export function AgentBuildDraftChangesPanel({
           <span aria-hidden className="i-ri-arrow-right-s-line size-4 shrink-0 rotate-90" />
         </button>
       </div>
-      <div className="flex max-h-[232px] flex-col gap-1 overflow-y-auto pt-2 pb-1">
+      <div className="flex max-h-58 flex-col gap-1 overflow-y-auto pt-2 pb-1">
         {sections.map((section) => (
           <AgentBuildDraftChangeSectionRow key={section.key} section={section} />
         ))}
@@ -55,7 +55,7 @@ function AgentBuildDraftChangeSectionRow({ section }: { section: AgentBuildDraft
   return (
     <div className="flex w-full items-start p-2">
       <div className="flex min-w-20 shrink-0 items-center gap-1.5">
-        <span aria-hidden className="size-[5px] rounded-full bg-text-warning" />
+        <span aria-hidden className="size-1.25 rounded-full bg-text-warning" />
         <p className="min-w-0 flex-1 truncate system-xs-medium-uppercase text-text-tertiary">
           {section.label}
         </p>
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/files/index.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/files/index.tsx
index 08a9878c3e9..a175450dda7 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/files/index.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/files/index.tsx
@@ -239,7 +239,7 @@ function AgentFileItem({
   return (
     <li
       data-selected={selected || undefined}
-      className="group/file-row relative flex h-6 min-w-0 items-center rounded-md focus-within:bg-state-base-hover hover:bg-state-base-hover data-[selected]:bg-state-base-active"
+      className="group/file-row relative flex h-6 min-w-0 items-center rounded-md focus-within:bg-state-base-hover hover:bg-state-base-hover data-selected:bg-state-base-active"
     >
       <Dialog open={isPreviewOpen} onOpenChange={handlePreviewOpenChange}>
         <DialogTrigger
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/files/upload-dialog.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/files/upload-dialog.tsx
index 10e45b2d216..ee14db280a8 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/files/upload-dialog.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/files/upload-dialog.tsx
@@ -145,7 +145,7 @@ function AgentFileUploader({ file, onChange }: { file?: File; onChange: (file?:
             <span className="max-w-full min-w-0 truncate text-[12px] leading-4 font-medium text-text-secondary">
               {file.name}
             </span>
-            <div className="flex h-3 items-center gap-1 self-stretch text-[10px] leading-3 font-medium text-text-tertiary uppercase">
+            <div className="flex h-3 items-center gap-1 self-stretch text-2xs leading-3 font-medium text-text-tertiary uppercase">
               <span>{t(($) => $['agentDetail.configure.files.upload.fileType'])}</span>
               <span className="text-text-quaternary">·</span>
               <span>{formatFileSize(file.size)}</span>
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/header.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/header.tsx
index 753bd8c681c..a32a3e8efce 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/header.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/header.tsx
@@ -29,7 +29,7 @@ export function AgentOrchestrateHeader({
           </h2>
           <CommunityEditionTip tip={communityEditionIsolationTip} popupClassName="max-w-[320px]" />
           {isBuildDraftActive && (
-            <span className="flex min-w-[18px] shrink-0 items-center justify-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1.25 py-0.75 system-2xs-medium-uppercase text-text-accent-secondary">
+            <span className="flex min-w-4.5 shrink-0 items-center justify-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1.25 py-0.75 system-2xs-medium-uppercase text-text-accent-secondary">
               {t(($) => $['agentDetail.configure.buildDraft.modeBadge'])}
             </span>
           )}
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/dialog.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/dialog.tsx
index 2d94295f28b..0b9783d25c7 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/dialog.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/dialog.tsx
@@ -732,7 +732,7 @@ export function AgentKnowledgeRetrievalDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         backdropProps={{ forceRender: true }}
-        className="flex h-130 max-h-[calc(100dvh-2rem)] w-[400px] flex-col overflow-hidden p-0"
+        className="flex h-130 max-h-[calc(100dvh-2rem)] w-100 flex-col overflow-hidden p-0"
       >
         <AgentKnowledgeRetrievalDialogContent
           item={item}
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/index.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/index.tsx
index ed26eed5660..655854ab165 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/index.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/index.tsx
@@ -22,7 +22,7 @@ import { AgentKnowledgeRetrievalDialog } from './dialog'
 
 function KnowledgeRetrievalIcon() {
   return (
-    <span className="flex size-5 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-subtle bg-util-colors-green-green-500 p-[3px] text-text-primary-on-surface shadow-xs shadow-shadow-shadow-3">
+    <span className="flex size-5 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-subtle bg-util-colors-green-green-500 p-0.75 text-text-primary-on-surface shadow-xs shadow-shadow-shadow-3">
       <span aria-hidden className="i-ri-book-open-line size-3.5" />
     </span>
   )
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/prompt-editor/index.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/prompt-editor/index.tsx
index 4acaa58fe2e..6fcbf6322ad 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/prompt-editor/index.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/prompt-editor/index.tsx
@@ -1089,7 +1089,7 @@ export function AgentPromptEditor() {
           onKeyUpCapture={handleEditorKeyUp}
           onPointerUpCapture={handleEditorPointerUp}
         >
-          <div ref={promptEditorHostRef} className="min-h-[104px] overflow-y-auto px-3 pt-0.5">
+          <div ref={promptEditorHostRef} className="min-h-26 overflow-y-auto px-3 pt-0.5">
             <PromptEditor
               instanceId="agent-configure-prompt-editor"
               aria-controls={isSlashMenuOpen ? agentPromptSlashMenuId : undefined}
@@ -1097,7 +1097,7 @@ export function AgentPromptEditor() {
               aria-labelledby="agent-configure-prompt-label"
               compact
               wrapperClassName="min-h-[104px]"
-              className="min-h-[104px] text-text-primary"
+              className="min-h-26 text-text-primary"
               placeholder={promptPlaceholder}
               placeholderClassName="top-0!"
               editable={!readOnly}
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/prompt-editor/slash.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/prompt-editor/slash.tsx
index 02ea70542a8..48482025ceb 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/prompt-editor/slash.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/prompt-editor/slash.tsx
@@ -137,7 +137,7 @@ export function AgentPromptSlashMenu({
 
   if (view === 'main') {
     return (
-      <AgentPromptSlashPanel className="w-[200px]">
+      <AgentPromptSlashPanel className="w-50">
         <div className="flex flex-col gap-px p-1">
           {categories.map((category) => (
             <button
@@ -145,7 +145,7 @@ export function AgentPromptSlashMenu({
               type="button"
               {...agentPromptSlashMenuItemProps}
               data-agent-prompt-menu-category={category.key}
-              className="flex h-6 w-full items-center gap-1 rounded-md pr-2 pl-3 text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-[agent-prompt-menu-active]:bg-state-base-hover"
+              className="flex h-6 w-full items-center gap-1 rounded-md pr-2 pl-3 text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-agent-prompt-menu-active:bg-state-base-hover"
               onClick={() => onOpenCategory(category.key)}
             >
               <span
@@ -167,13 +167,13 @@ export function AgentPromptSlashMenu({
   }
 
   return (
-    <AgentPromptSlashPanel className="w-[360px]">
+    <AgentPromptSlashPanel className="w-90">
       <div className="flex flex-col p-1">
         <button
           type="button"
           {...agentPromptSlashMenuItemProps}
           data-agent-prompt-menu-back=""
-          className="flex h-6 w-full items-center gap-1 rounded-md pr-2 pl-3 text-left text-text-tertiary hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-[agent-prompt-menu-active]:bg-state-base-hover"
+          className="flex h-6 w-full items-center gap-1 rounded-md pr-2 pl-3 text-left text-text-tertiary hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-agent-prompt-menu-active:bg-state-base-hover"
           onClick={onBack}
         >
           <span aria-hidden className="i-ri-arrow-left-line size-4 shrink-0" />
@@ -217,7 +217,7 @@ export function AgentPromptSlashMenu({
           <button
             type="button"
             {...agentPromptSlashMenuItemProps}
-            className="flex h-6 w-full items-center gap-1 rounded-md pr-2 pl-3 text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-[agent-prompt-menu-active]:bg-state-base-hover"
+            className="flex h-6 w-full items-center gap-1 rounded-md pr-2 pl-3 text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-agent-prompt-menu-active:bg-state-base-hover"
             onClick={handleAddFromFooter}
           >
             <span aria-hidden className="i-ri-add-line size-4 shrink-0 text-text-secondary" />
@@ -411,7 +411,7 @@ function AgentPromptToolRows({
           </button>
         ))}
       </div>
-      <div className="max-h-[464px] overflow-y-auto px-1 pb-1">
+      <div className="max-h-116 overflow-y-auto px-1 pb-1">
         {activeTab === 'cli'
           ? configuredCliTools.map((tool) => (
               <AgentPromptCliToolRow
@@ -567,7 +567,7 @@ function AgentPromptProviderToolRow({
       <button
         type="button"
         {...agentPromptSlashMenuItemProps}
-        className="flex min-w-0 flex-1 items-center gap-1.5 rounded-l-md py-1 pr-1 pl-2 text-left group-hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-[agent-prompt-menu-active]:bg-state-base-hover"
+        className="flex min-w-0 flex-1 items-center gap-1.5 rounded-l-md py-1 pr-1 pl-2 text-left group-hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-agent-prompt-menu-active:bg-state-base-hover"
         onClick={onClick}
       >
         <AgentPromptProviderIcon provider={provider} getProviderIcon={getProviderIcon} />
@@ -588,7 +588,7 @@ function AgentPromptProviderToolRow({
         {...agentPromptSlashMenuItemProps}
         aria-label={providerLabel}
         aria-expanded={isExpanded}
-        className="flex size-7 shrink-0 items-center justify-center rounded-r-md text-text-tertiary group-hover:bg-state-base-hover hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-[agent-prompt-menu-active]:bg-state-base-hover"
+        className="flex size-7 shrink-0 items-center justify-center rounded-r-md text-text-tertiary group-hover:bg-state-base-hover hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-agent-prompt-menu-active:bg-state-base-hover"
         onClick={onToggle}
       >
         <span
@@ -622,7 +622,7 @@ function AgentPromptToolFooter({ onAddCliTool }: { onAddCliTool?: () => void })
         target="_blank"
         rel="noreferrer"
         {...agentPromptSlashMenuItemProps}
-        className="flex h-7 w-full items-center gap-1.5 rounded-md px-2 text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-[agent-prompt-menu-active]:bg-state-base-hover"
+        className="flex h-7 w-full items-center gap-1.5 rounded-md px-2 text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-agent-prompt-menu-active:bg-state-base-hover"
       >
         <span aria-hidden className="i-ri-store-2-line size-4 shrink-0 text-text-secondary" />
         <span className="system-sm-regular text-text-secondary">
@@ -633,7 +633,7 @@ function AgentPromptToolFooter({ onAddCliTool }: { onAddCliTool?: () => void })
         <button
           type="button"
           {...agentPromptSlashMenuItemProps}
-          className="flex h-7 w-full items-center gap-1.5 rounded-md px-2 text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-[agent-prompt-menu-active]:bg-state-base-hover"
+          className="flex h-7 w-full items-center gap-1.5 rounded-md px-2 text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-agent-prompt-menu-active:bg-state-base-hover"
           onClick={onAddCliTool}
         >
           <span aria-hidden className="i-ri-add-line size-4 shrink-0 text-text-secondary" />
@@ -659,7 +659,7 @@ function AgentPromptProviderToolActionRow({
     <button
       type="button"
       {...agentPromptSlashMenuItemProps}
-      className="flex h-6 w-full items-center gap-1 rounded-md text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-[agent-prompt-menu-active]:bg-state-base-hover"
+      className="flex h-6 w-full items-center gap-1 rounded-md text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-agent-prompt-menu-active:bg-state-base-hover"
       onClick={onClick}
     >
       <span className="ml-4 h-full w-px shrink-0 bg-divider-subtle" />
@@ -685,7 +685,7 @@ function AgentPromptCliToolRow({
     <button
       type="button"
       {...agentPromptSlashMenuItemProps}
-      className="flex h-7 w-full items-center gap-1 rounded-md text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-[agent-prompt-menu-active]:bg-state-base-hover"
+      className="flex h-7 w-full items-center gap-1 rounded-md text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-agent-prompt-menu-active:bg-state-base-hover"
       onClick={onClick}
     >
       <span className="flex min-w-0 flex-1 items-center gap-1.5 py-1 pr-8 pl-2">
@@ -761,7 +761,7 @@ function AgentPromptSubmenuRow({
     <button
       type="button"
       {...agentPromptSlashMenuItemProps}
-      className="flex h-6 w-full items-center gap-1 rounded-md text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-[agent-prompt-menu-active]:bg-state-base-hover"
+      className="flex h-6 w-full items-center gap-1 rounded-md text-left hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden data-agent-prompt-menu-active:bg-state-base-hover"
       onClick={onClick}
     >
       <span className={`flex min-w-0 flex-1 items-center gap-1 ${indent} pr-2`}>
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/publish-bar/publish-impact-details.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/publish-bar/publish-impact-details.tsx
index 06cd9f161ba..efcf509d76c 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/publish-bar/publish-impact-details.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/publish-bar/publish-impact-details.tsx
@@ -54,7 +54,7 @@ export function AgentPublishImpactDetails({
         <div className="flex min-h-6 items-center system-sm-medium text-text-secondary">
           {t(($) => $['agentDetail.configure.publishImpact.affectedWorkflows'])}
         </div>
-        <div className="flex max-h-[123px] flex-col gap-px overflow-y-auto rounded-xl border border-components-panel-border p-1">
+        <div className="flex max-h-30.75 flex-col gap-px overflow-y-auto rounded-xl border border-components-panel-border p-1">
           {references.map((reference) => (
             <ReferenceLink
               key={`${reference.app_id}-${reference.workflow_id}`}
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/__tests__/index.spec.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/__tests__/index.spec.tsx
index 0af65fa9026..11dca29cd8f 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/__tests__/index.spec.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/__tests__/index.spec.tsx
@@ -715,8 +715,8 @@ describe('AgentSkills', () => {
 
     const skillMdCode = await screen.findByText('# Skill')
     expect(skillMdCode.tagName).toBe('CODE')
-    expect(skillMdCode).toHaveClass('[overflow-wrap:anywhere]')
-    expect(skillMdCode).toHaveClass('break-words')
+    expect(skillMdCode).toHaveClass('wrap-anywhere')
+    expect(skillMdCode).toHaveClass('wrap-break-word')
     expect(skillMdCode).toHaveClass('whitespace-pre-wrap')
     expect(skillMdCode).not.toHaveClass('whitespace-pre')
     expect(skillMdCode).not.toHaveClass('min-w-max')
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/detail-dialog.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/detail-dialog.tsx
index 0b1c0f49525..1cb6660c9ea 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/detail-dialog.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/detail-dialog.tsx
@@ -312,7 +312,7 @@ function AgentFilePreviewContent({
   }))
 
   return (
-    <div className="min-h-0 flex-1 overflow-auto px-2 pb-4 font-mono text-[13px] leading-[22px]">
+    <div className="min-h-0 flex-1 overflow-auto px-2 pb-4 font-mono text-[13px] leading-5.5">
       {lines.map((line) => (
         <div key={line.key} className="flex min-w-0 items-start">
           <span
@@ -321,7 +321,7 @@ function AgentFilePreviewContent({
           >
             {line.lineNumber}
           </span>
-          <code className="block min-w-0 flex-1 [overflow-wrap:anywhere] break-words whitespace-pre-wrap text-text-primary">
+          <code className="block min-w-0 flex-1 wrap-anywhere wrap-break-word whitespace-pre-wrap text-text-primary">
             {line.content}
           </code>
         </div>
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/upload-dialog.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/upload-dialog.tsx
index 58c87641b6e..78ab5a2fe41 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/upload-dialog.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/upload-dialog.tsx
@@ -173,7 +173,7 @@ function AgentSkillPackageUploader({
             <span className="max-w-full min-w-0 truncate text-[12px] leading-4 font-medium text-text-secondary">
               {file.name}
             </span>
-            <div className="flex h-3 items-center gap-1 self-stretch text-[10px] leading-3 font-medium text-text-tertiary uppercase">
+            <div className="flex h-3 items-center gap-1 self-stretch text-2xs leading-3 font-medium text-text-tertiary uppercase">
               <span>{t(($) => $['agentDetail.configure.skills.upload.fileType'])}</span>
               <span className="text-text-quaternary">·</span>
               <span>{formatFileSize(file.size)}</span>
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/tools/cli-tool/dialog.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/tools/cli-tool/dialog.tsx
index 23c114b49cf..6decbd2b67e 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/tools/cli-tool/dialog.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/tools/cli-tool/dialog.tsx
@@ -158,7 +158,7 @@ export function CliToolDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange} disablePointerDismissal>
-      <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[640px] flex-col overflow-hidden p-0">
+      <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-160 flex-col overflow-hidden p-0">
         <div className="relative px-6 pt-6 pb-3">
           <DialogCloseButton />
           <DialogTitle className="title-2xl-semi-bold text-text-primary">
diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/build-chat.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/build-chat.tsx
index b52a84843f3..18fa9135cb0 100644
--- a/web/features/agent-v2/agent-detail/configure/components/preview/build-chat.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/preview/build-chat.tsx
@@ -38,7 +38,7 @@ function AgentBuildChatEmptyState({
 
   return (
     <>
-      <div className="dify-blue-glass-surface relative flex h-[50px] w-12 items-center justify-center rounded-xl p-2">
+      <div className="dify-blue-glass-surface relative flex h-12.5 w-12 items-center justify-center rounded-xl p-2">
         <div className="absolute inset-x-px inset-y-0.5 grid grid-cols-[repeat(8,4px)] grid-rows-[repeat(8,4px)] gap-0.5 opacity-25">
           {buildIconGridCells.map((cell) => (
             <span
diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/chat-conversation.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/chat-conversation.tsx
index 09c81228c95..1d1c067c32c 100644
--- a/web/features/agent-v2/agent-detail/configure/components/preview/chat-conversation.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/preview/chat-conversation.tsx
@@ -316,7 +316,7 @@ export function AgentPreviewChatConversation({
       isResponding={isResponding}
       sendButtonLabel={isEmptyChat ? sendButtonLabel : undefined}
       sendButtonLoading={sendButtonLoading}
-      chatContainerClassName={cn('pt-6', isEmptyChat ? 'px-12 pt-2 !pb-[88px]' : 'px-3')}
+      chatContainerClassName={cn('pt-6', isEmptyChat ? 'px-12 pt-2 pb-22!' : 'px-3')}
       chatFooterClassName={isEmptyChat ? 'hidden' : 'px-3 pb-0 pt-10'}
       suggestedQuestions={suggestedQuestions}
       onSend={doSend}
diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/filter.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/filter.tsx
index 0399725c5c7..060b458bfe1 100644
--- a/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/filter.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/filter.tsx
@@ -67,7 +67,7 @@ export function VersionFilter({
         alignOffset={55}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className="flex w-[248px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
+        <div className="flex w-62 flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
           <div className="flex flex-col p-1">
             <FilterItem
               label={tWorkflow(($) => $['versionHistory.filter.all'])}
diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/index.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/index.tsx
index ce419386d22..718a61e93f6 100644
--- a/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/index.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/index.tsx
@@ -57,7 +57,7 @@ export function AgentPreviewVersionsPanel({
   }
 
   return (
-    <aside className="flex h-full w-[268px] shrink-0 flex-col rounded-l-lg bg-components-panel-bg shadow-xl shadow-shadow-shadow-5">
+    <aside className="flex h-full w-67 shrink-0 flex-col rounded-l-lg bg-components-panel-bg shadow-xl shadow-shadow-shadow-5">
       <div className="flex shrink-0 items-center gap-2 pt-3 pr-3 pl-4">
         <h2 className="min-w-0 flex-1 truncate system-xl-semibold text-text-primary">
           {tWorkflow(($) => $['versionHistory.title'])}
diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/version-item.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/version-item.tsx
index 0a062457268..096f5f499c3 100644
--- a/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/version-item.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/version-item.tsx
@@ -67,7 +67,7 @@ export function VersionItem({
             {label}
           </p>
           {isLatest && (
-            <span className="shrink-0 rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-[5px] py-[3px] system-2xs-medium-uppercase text-text-accent-secondary">
+            <span className="shrink-0 rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1.25 py-0.75 system-2xs-medium-uppercase text-text-accent-secondary">
               {tWorkflow(($) => $['versionHistory.latest'])}
             </span>
           )}
diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/version-timeline-dot.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/version-timeline-dot.tsx
index a9dbcdb86d9..812d70abf55 100644
--- a/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/version-timeline-dot.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/preview/versions-panel/version-timeline-dot.tsx
@@ -10,7 +10,7 @@ export function VersionTimelineDot({
   isLast: boolean
 }) {
   return (
-    <div className="relative flex w-[18px] shrink-0 justify-center pt-1.5">
+    <div className="relative flex w-4.5 shrink-0 justify-center pt-1.5">
       {!isFirst && <div className="absolute top-0 h-2 w-0.5 bg-divider-subtle" />}
       <span
         aria-hidden
@@ -19,7 +19,7 @@ export function VersionTimelineDot({
           isActive ? 'border-text-accent' : 'border-text-quaternary',
         )}
       />
-      {!isLast && <div className="absolute top-3 bottom-[-18px] w-0.5 bg-divider-subtle" />}
+      {!isLast && <div className="absolute top-3 -bottom-4.5 w-0.5 bg-divider-subtle" />}
     </div>
   )
 }
diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/working-directory-breadcrumb.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/working-directory-breadcrumb.tsx
index d22b7d86538..6e01b6c195e 100644
--- a/web/features/agent-v2/agent-detail/configure/components/preview/working-directory-breadcrumb.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/preview/working-directory-breadcrumb.tsx
@@ -177,7 +177,7 @@ export function AgentWorkingDirectoryBreadcrumb({
                   <DropdownMenu modal={false}>
                     <DropdownMenuTrigger
                       aria-label="..."
-                      className="flex size-6 shrink-0 items-center justify-center rounded-md p-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden data-[popup-open]:bg-state-base-hover data-[popup-open]:text-text-secondary"
+                      className="flex size-6 shrink-0 items-center justify-center rounded-md p-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden data-popup-open:bg-state-base-hover data-popup-open:text-text-secondary"
                     >
                       <span aria-hidden className="i-ri-more-fill size-4" />
                     </DropdownMenuTrigger>
diff --git a/web/features/agent-v2/agent-detail/monitoring/chart.tsx b/web/features/agent-v2/agent-detail/monitoring/chart.tsx
index 7f6493191d0..65b52b34f9b 100644
--- a/web/features/agent-v2/agent-detail/monitoring/chart.tsx
+++ b/web/features/agent-v2/agent-detail/monitoring/chart.tsx
@@ -45,7 +45,7 @@ export function AgentMonitoringChart({
   const isEmptySummary = Number.parseFloat(summaryValue.replace(/,/g, '')) === 0
 
   return (
-    <article className="flex h-[316px] w-full min-w-0 flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg">
+    <article className="flex h-79 w-full min-w-0 flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg">
       <div className="flex h-11 shrink-0 items-center px-6 pt-6 pb-1">
         <div className="flex min-w-0 items-center gap-1">
           <h3 className="truncate system-md-semibold text-text-secondary">
diff --git a/web/features/agent-v2/agent-detail/monitoring/page.tsx b/web/features/agent-v2/agent-detail/monitoring/page.tsx
index 49360b66da3..4ddd9d0244a 100644
--- a/web/features/agent-v2/agent-detail/monitoring/page.tsx
+++ b/web/features/agent-v2/agent-detail/monitoring/page.tsx
@@ -251,7 +251,7 @@ function AgentMonitoringSourceFilter({
 
 function AgentMonitoringState({ children }: { children: ReactNode }) {
   return (
-    <div className="flex h-[316px] items-center justify-center rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg px-6 py-8 text-center system-sm-regular text-text-tertiary">
+    <div className="flex h-79 items-center justify-center rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg px-6 py-8 text-center system-sm-regular text-text-tertiary">
       {children}
     </div>
   )
@@ -264,7 +264,7 @@ function AgentMonitoringSkeletonGrid() {
         <article
           key={index}
           aria-hidden="true"
-          className="flex h-[316px] w-full min-w-0 flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg"
+          className="flex h-79 w-full min-w-0 flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg"
         >
           <div className="flex h-11 items-end px-6 pb-1">
             <div className="h-4 w-40 rounded-sm bg-text-quaternary opacity-20" />
diff --git a/web/features/agent-v2/agent-detail/navigation.tsx b/web/features/agent-v2/agent-detail/navigation.tsx
index a1f6531cbef..7d712a68713 100644
--- a/web/features/agent-v2/agent-detail/navigation.tsx
+++ b/web/features/agent-v2/agent-detail/navigation.tsx
@@ -189,11 +189,11 @@ export function AgentDetailSection({ expand = true }: AgentDetailSectionProps) {
   return (
     <div className={cn('flex min-h-0 flex-1 flex-col', expand ? 'px-2 pb-2' : 'pb-2')}>
       {!expand && (
-        <div className="flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-[3px]">
+        <div className="flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-0.75">
           <Divider
             type="horizontal"
             bgStyle="solid"
-            className="my-0 h-px w-[27px] bg-divider-subtle"
+            className="my-0 h-px w-6.75 bg-divider-subtle"
           />
         </div>
       )}
diff --git a/web/features/agent-v2/roster/components/create-agent-dialog.tsx b/web/features/agent-v2/roster/components/create-agent-dialog.tsx
index 274fc4d0908..66670b2dd3f 100644
--- a/web/features/agent-v2/roster/components/create-agent-dialog.tsx
+++ b/web/features/agent-v2/roster/components/create-agent-dialog.tsx
@@ -102,7 +102,7 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
             <span className="px-0.5 system-sm-medium">{t(($) => $['roster.createAgent'])}</span>
           </DialogTrigger>
         )}
-        <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[520px] flex-col overflow-hidden! p-0!">
+        <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-130 flex-col overflow-hidden! p-0!">
           <DialogCloseButton />
           <div className="shrink-0 pt-6 pr-14 pb-3 pl-6">
             <DialogTitle className="title-2xl-semi-bold text-text-primary">
diff --git a/web/features/deployments/create-guide/ui/layout.tsx b/web/features/deployments/create-guide/ui/layout.tsx
index c56f1b3b153..769885e45f2 100644
--- a/web/features/deployments/create-guide/ui/layout.tsx
+++ b/web/features/deployments/create-guide/ui/layout.tsx
@@ -192,14 +192,14 @@ export function GuideFrame({
       <div className="flex min-w-0 flex-1 shrink-0 justify-center overflow-hidden">
         <section
           aria-label={t(($) => $['createGuide.title'])}
-          className="flex h-full w-full max-w-[840px] flex-col px-5 sm:px-8 lg:px-10"
+          className="flex h-full w-full max-w-210 flex-col px-5 sm:px-8 lg:px-10"
         >
           <div className="h-5 sm:h-8 lg:h-12" />
           <div className="flex min-w-0 items-start justify-between gap-6 pt-1 pb-4">
             <h1 className="title-2xl-semi-bold text-text-primary">
               {t(($) => $['createGuide.title'])}
             </h1>
-            <div className="hidden w-[184px] shrink-0 min-[1120px]:block">
+            <div className="hidden w-46 shrink-0 min-[1120px]:block">
               <GuideProgressSummary activeStep={activeStep} />
             </div>
           </div>
diff --git a/web/features/deployments/create-guide/ui/source-step.tsx b/web/features/deployments/create-guide/ui/source-step.tsx
index a033cb060da..ad943e83dd3 100644
--- a/web/features/deployments/create-guide/ui/source-step.tsx
+++ b/web/features/deployments/create-guide/ui/source-step.tsx
@@ -119,7 +119,7 @@ function SourceMethodCard({
       nativeButton
       render={<button type="button" />}
       className={cn(
-        `relative box-content h-[84px] w-full cursor-pointer rounded-xl border-[0.5px] border-components-option-card-option-border bg-components-panel-on-panel-item-bg p-3 text-left shadow-xs outline-hidden hover:shadow-md focus-visible:ring-2 focus-visible:ring-state-accent-solid sm:w-[240px]`,
+        `relative box-content h-21 w-full cursor-pointer rounded-xl border-[0.5px] border-components-option-card-option-border bg-components-panel-on-panel-item-bg p-3 text-left shadow-xs outline-hidden hover:shadow-md focus-visible:ring-2 focus-visible:ring-state-accent-solid sm:w-60`,
         'data-checked:border-components-option-card-option-selected-border data-checked:bg-components-option-card-option-selected-bg data-checked:shadow-md data-checked:inset-ring-[0.5px] data-checked:inset-ring-components-option-card-option-selected-border',
       )}
     >
diff --git a/web/features/deployments/deploy-drawer/index.tsx b/web/features/deployments/deploy-drawer/index.tsx
index 56feb3478f9..38fe39f9a7a 100644
--- a/web/features/deployments/deploy-drawer/index.tsx
+++ b/web/features/deployments/deploy-drawer/index.tsx
@@ -39,7 +39,7 @@ export function DeployDrawer() {
       <DrawerPortal>
         <DrawerBackdrop />
         <DrawerViewport>
-          <DrawerPopup className="data-[swipe-direction=right]:w-[640px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)]">
+          <DrawerPopup className="data-[swipe-direction=right]:w-160 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)]">
             <DrawerCloseButton
               aria-label={t(($) => $['deployDrawer.close'])}
               className="absolute top-4 right-5 size-6 rounded-md"
diff --git a/web/features/deployments/deployment-actions/index.tsx b/web/features/deployments/deployment-actions/index.tsx
index 5622f43d3d7..af875999a81 100644
--- a/web/features/deployments/deployment-actions/index.tsx
+++ b/web/features/deployments/deployment-actions/index.tsx
@@ -51,7 +51,7 @@ function DeploymentActionsMenuContent({
       role="presentation"
       className={cn(
         className,
-        '[&:has([data-popup-open])]:pointer-events-auto [&:has([data-popup-open])]:opacity-100',
+        'has-data-popup-open:pointer-events-auto has-data-popup-open:opacity-100',
       )}
       onClick={(event) => event.stopPropagation()}
       onKeyDown={(event) => event.stopPropagation()}
diff --git a/web/features/deployments/detail/access/index.tsx b/web/features/deployments/detail/access/index.tsx
index 39f469a8013..c434cf2a6b8 100644
--- a/web/features/deployments/detail/access/index.tsx
+++ b/web/features/deployments/detail/access/index.tsx
@@ -5,7 +5,7 @@ import { AccessPermissionsSection } from './permissions/section'
 
 export function DeploymentAccess() {
   return (
-    <div className="flex w-full max-w-[960px] min-w-0 flex-col gap-y-4 px-6 py-6 sm:px-20 sm:py-8">
+    <div className="flex w-full max-w-240 min-w-0 flex-col gap-y-4 px-6 py-6 sm:px-20 sm:py-8">
       <AccessChannelsSection />
       <AccessPermissionsSection />
     </div>
diff --git a/web/features/deployments/detail/access/permissions/access-control-dialog.tsx b/web/features/deployments/detail/access/permissions/access-control-dialog.tsx
index 3d4cfafa797..86007c76311 100644
--- a/web/features/deployments/detail/access/permissions/access-control-dialog.tsx
+++ b/web/features/deployments/detail/access/permissions/access-control-dialog.tsx
@@ -52,7 +52,7 @@ export function DeploymentAccessControlDialog({
     <Dialog open={open} disablePointerDismissal onOpenChange={(open) => !open && onClose()}>
       <DialogContent
         className={cn(
-          'h-auto max-h-[calc(100dvh-2rem)] min-h-[323px] w-[600px] max-w-none overflow-y-auto rounded-2xl border-none bg-components-panel-bg p-0 shadow-xl transition-shadow',
+          'h-auto max-h-[calc(100dvh-2rem)] min-h-80.75 w-150 max-w-none overflow-y-auto rounded-2xl border-none bg-components-panel-bg p-0 shadow-xl transition-shadow',
         )}
       >
         <DialogCloseButton className="top-5 right-5 size-8" />
diff --git a/web/features/deployments/detail/access/permissions/access-subject-selector/add-button.tsx b/web/features/deployments/detail/access/permissions/access-subject-selector/add-button.tsx
index 7f594fc30a5..2b819aa10bf 100644
--- a/web/features/deployments/detail/access/permissions/access-subject-selector/add-button.tsx
+++ b/web/features/deployments/detail/access/permissions/access-subject-selector/add-button.tsx
@@ -128,7 +128,7 @@ export function AccessSubjectAddButton({
         onClick={() => {
           if (open) closeMenu()
         }}
-        className="h-6 w-auto min-w-[52px] shrink-0 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 data-popup-open:bg-state-accent-hover"
+        className="h-6 w-auto min-w-13 shrink-0 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 data-popup-open:bg-state-accent-hover"
       >
         <span className="inline-flex min-w-0 items-center justify-center gap-x-0.5 whitespace-nowrap">
           <span className="i-ri-add-circle-fill size-4 shrink-0" aria-hidden="true" />
diff --git a/web/features/deployments/detail/access/permissions/access-subject-selector/selection-list.tsx b/web/features/deployments/detail/access/permissions/access-subject-selector/selection-list.tsx
index ce29846a798..6c627f4eabc 100644
--- a/web/features/deployments/detail/access/permissions/access-subject-selector/selection-list.tsx
+++ b/web/features/deployments/detail/access/permissions/access-subject-selector/selection-list.tsx
@@ -23,7 +23,7 @@ export function AccessSubjectSelectionList({
   return (
     <div
       className={cn(
-        'flex max-h-[400px] flex-col gap-y-2 overflow-y-auto rounded-lg bg-background-section p-2',
+        'flex max-h-100 flex-col gap-y-2 overflow-y-auto rounded-lg bg-background-section p-2',
         className,
       )}
     >
@@ -154,7 +154,7 @@ function SelectedGroupItem({
     <SelectedBaseItem
       icon={
         <span
-          className="i-ri-organization-chart h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0"
+          className="i-ri-organization-chart h-3.5 w-3.5 text-components-avatar-shape-fill-stop-0"
           aria-hidden="true"
         />
       }
@@ -205,7 +205,7 @@ function SelectedBaseItem({ icon, onRemove, children }: SelectedBaseItemProps) {
   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="size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-        <div className="flex size-full items-center justify-center bg-[image:var(--color-access-app-icon-mask-bg)]">
+        <div className="flex size-full items-center justify-center bg-(image:--color-access-app-icon-mask-bg)">
           {icon}
         </div>
       </div>
@@ -217,7 +217,7 @@ function SelectedBaseItem({ icon, onRemove, children }: SelectedBaseItemProps) {
         onClick={onRemove}
       >
         <span
-          className="i-ri-close-circle-fill h-[14px] w-[14px] text-text-quaternary"
+          className="i-ri-close-circle-fill h-3.5 w-3.5 text-text-quaternary"
           aria-hidden="true"
         />
       </button>
diff --git a/web/features/deployments/detail/access/permissions/access-subject-selector/subject-options.tsx b/web/features/deployments/detail/access/permissions/access-subject-selector/subject-options.tsx
index 0678bb2b2ca..0e919338b9e 100644
--- a/web/features/deployments/detail/access/permissions/access-subject-selector/subject-options.tsx
+++ b/web/features/deployments/detail/access/permissions/access-subject-selector/subject-options.tsx
@@ -125,9 +125,9 @@ function GroupItem({ group, subject, selectedGroups, onExpandGroup }: GroupItemP
         <SelectionBox checked={isChecked} />
         <ComboboxItemText className="flex grow items-center px-0">
           <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-            <div className="flex size-full items-center justify-center bg-[image:var(--color-access-app-icon-mask-bg)]">
+            <div className="flex size-full items-center justify-center bg-(image:--color-access-app-icon-mask-bg)">
               <span
-                className="i-ri-organization-chart h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0"
+                className="i-ri-organization-chart h-3.5 w-3.5 text-components-avatar-shape-fill-stop-0"
                 aria-hidden="true"
               />
             </div>
@@ -144,7 +144,7 @@ function GroupItem({ group, subject, selectedGroups, onExpandGroup }: GroupItemP
         onPointerDown={(event) => event.preventDefault()}
         onClick={() => onExpandGroup(group)}
       >
-        <span className="px-[3px]">
+        <span className="px-0.75">
           {t(($) => $['accessControlDialog.operateGroupAndMember.expand'], { ns: 'app' })}
         </span>
         <span className="i-ri-arrow-right-s-line size-4" aria-hidden="true" />
@@ -168,7 +168,7 @@ function MemberItem({ member, subject, selectedMembers }: MemberItemProps) {
       <SelectionBox checked={isChecked} />
       <ComboboxItemText className="flex grow items-center px-0">
         <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-          <div className="flex size-full items-center justify-center bg-[image:var(--color-access-app-icon-mask-bg)]">
+          <div className="flex size-full items-center justify-center bg-(image:--color-access-app-icon-mask-bg)">
             <Avatar size="xxs" avatar={null} name={member.name} />
           </div>
         </div>
diff --git a/web/features/deployments/detail/api-tokens/docs/docs-drawer.tsx b/web/features/deployments/detail/api-tokens/docs/docs-drawer.tsx
index 74c5630cd24..9953925d3f9 100644
--- a/web/features/deployments/detail/api-tokens/docs/docs-drawer.tsx
+++ b/web/features/deployments/detail/api-tokens/docs/docs-drawer.tsx
@@ -82,7 +82,7 @@ export function DeveloperApiDocsDrawer({
       <DrawerPortal>
         <DrawerBackdrop />
         <DrawerViewport>
-          <DrawerPopup className="data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[840px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-[0.5px]">
+          <DrawerPopup className="data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-210 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-[0.5px]">
             <DrawerCloseButton
               aria-label={t(($) => $['access.api.docsClose'])}
               className="absolute top-4 right-5 size-6 rounded-md"
diff --git a/web/features/deployments/detail/api-tokens/index.tsx b/web/features/deployments/detail/api-tokens/index.tsx
index 9aed81805bb..c42aedfa9be 100644
--- a/web/features/deployments/detail/api-tokens/index.tsx
+++ b/web/features/deployments/detail/api-tokens/index.tsx
@@ -4,7 +4,7 @@ import { DeveloperApiSection } from './api-token-management/section'
 
 export function DeploymentApiTokens() {
   return (
-    <div className="flex w-full max-w-[960px] min-w-0 flex-col gap-y-4 px-6 py-6 sm:px-20 sm:py-8">
+    <div className="flex w-full max-w-240 min-w-0 flex-col gap-y-4 px-6 py-6 sm:px-20 sm:py-8">
       <DeveloperApiSection />
     </div>
   )
diff --git a/web/features/deployments/detail/deployment-sidebar.tsx b/web/features/deployments/detail/deployment-sidebar.tsx
index 1086d4fe41d..88a6122e3e3 100644
--- a/web/features/deployments/detail/deployment-sidebar.tsx
+++ b/web/features/deployments/detail/deployment-sidebar.tsx
@@ -278,11 +278,11 @@ export function DeploymentDetailSection({ expand = true }: { expand?: boolean })
   return (
     <div className={cn('flex min-h-0 flex-1 flex-col', expand ? 'px-2 pb-2' : 'pb-2')}>
       {!expand && (
-        <div className="flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-[3px]">
+        <div className="flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-0.75">
           <Divider
             type="horizontal"
             bgStyle="solid"
-            className="my-0 h-px w-[27px] bg-divider-subtle"
+            className="my-0 h-px w-6.75 bg-divider-subtle"
           />
         </div>
       )}
diff --git a/web/features/deployments/detail/instances/row-actions/deployment-error-dialog.tsx b/web/features/deployments/detail/instances/row-actions/deployment-error-dialog.tsx
index 95686961369..1f0f1b55cdf 100644
--- a/web/features/deployments/detail/instances/row-actions/deployment-error-dialog.tsx
+++ b/web/features/deployments/detail/instances/row-actions/deployment-error-dialog.tsx
@@ -24,7 +24,7 @@ function DeploymentErrorDetails({ error }: { error?: EnvironmentDeployment['erro
       <div className="system-xs-medium-uppercase text-text-tertiary">
         {t(($) => $['deployTab.errorMessage'])}
       </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">
         {message}
       </div>
       {metadata.length > 0 && (
diff --git a/web/features/deployments/detail/releases/release-history/release-history-rows.tsx b/web/features/deployments/detail/releases/release-history/release-history-rows.tsx
index 87852bdcfd4..245328f948e 100644
--- a/web/features/deployments/detail/releases/release-history/release-history-rows.tsx
+++ b/web/features/deployments/detail/releases/release-history/release-history-rows.tsx
@@ -172,7 +172,7 @@ export function ReleaseHistoryRows({
     <>
       <ReleaseHistoryMobileRows releaseRows={releaseRows} onReleaseDeleted={onReleaseDeleted} />
       <div className="hidden pc:block">
-        <DetailTable className="min-w-[840px]">
+        <DetailTable className="min-w-210">
           <DetailTableHeader>
             <DetailTableRow>
               <DetailTableHead className={RELEASE_DETAIL_TABLE_COLUMN_CLASS_NAMES.release}>
diff --git a/web/features/deployments/detail/releases/release-history/release-history-table-skeleton.tsx b/web/features/deployments/detail/releases/release-history/release-history-table-skeleton.tsx
index 466a451950e..dcf98ca02a6 100644
--- a/web/features/deployments/detail/releases/release-history/release-history-table-skeleton.tsx
+++ b/web/features/deployments/detail/releases/release-history/release-history-table-skeleton.tsx
@@ -52,7 +52,7 @@ export function ReleaseHistoryTableSkeleton() {
         ))}
       </DetailTableCardList>
       <div className="hidden pc:block">
-        <DetailTable className="min-w-[840px]">
+        <DetailTable className="min-w-210">
           <DetailTableHeader>
             <DetailTableRow>
               <DetailTableHead className={RELEASE_DETAIL_TABLE_COLUMN_CLASS_NAMES.release}>
diff --git a/web/features/deployments/list/ui/environment-filter.tsx b/web/features/deployments/list/ui/environment-filter.tsx
index 6717895b7fc..fedcb231ba6 100644
--- a/web/features/deployments/list/ui/environment-filter.tsx
+++ b/web/features/deployments/list/ui/environment-filter.tsx
@@ -19,7 +19,7 @@ import {
 } from '../state'
 
 function EnvironmentOptionIcon() {
-  return <span className="i-ri-server-line size-[14px]" />
+  return <span className="i-ri-server-line size-3.5" />
 }
 
 function EnvironmentFilterOptionIcon({
@@ -28,7 +28,7 @@ function EnvironmentFilterOptionIcon({
   option: DeploymentsListEnvironmentFilterOption
 }) {
   return option.kind === 'all' ? (
-    <span className="i-ri-apps-2-line size-[14px]" />
+    <span className="i-ri-apps-2-line size-3.5" />
   ) : (
     <EnvironmentOptionIcon />
   )
diff --git a/web/features/deployments/shared/components/detail-table.tsx b/web/features/deployments/shared/components/detail-table.tsx
index 4b2b7491678..22918d3ea77 100644
--- a/web/features/deployments/shared/components/detail-table.tsx
+++ b/web/features/deployments/shared/components/detail-table.tsx
@@ -13,10 +13,7 @@ export function DetailTable({ className, containerClassName, ...props }: DetailT
     >
       <table
         data-slot="deployment-detail-table"
-        className={cn(
-          'w-full max-w-full min-w-[700px] border-collapse border-0 text-sm',
-          className,
-        )}
+        className={cn('w-full max-w-full min-w-175 border-collapse border-0 text-sm', className)}
         {...props}
       />
     </div>
@@ -65,7 +62,7 @@ export function DetailTableHead({ className, ...props }: ComponentProps<'th'>) {
       data-slot="deployment-detail-table-head"
       className={cn(
         className,
-        'box-border max-w-[200px] px-2.5 py-0 text-left align-middle font-medium whitespace-nowrap first:pl-3',
+        'box-border max-w-50 px-2.5 py-0 text-left align-middle font-medium whitespace-nowrap first:pl-3',
       )}
       {...props}
     />
@@ -76,7 +73,7 @@ export function DetailTableCell({ className, ...props }: ComponentProps<'td'>) {
   return (
     <td
       data-slot="deployment-detail-table-cell"
-      className={cn(className, 'box-border max-w-[200px] px-2.5 py-[5px] align-middle first:pl-3')}
+      className={cn(className, 'box-border max-w-50 px-2.5 py-1.25 align-middle first:pl-3')}
       {...props}
     />
   )
diff --git a/web/features/new-rag/__tests__/documents-page.spec.tsx b/web/features/new-rag/__tests__/documents-page.spec.tsx
index 53368914ccb..1b852f6c403 100644
--- a/web/features/new-rag/__tests__/documents-page.spec.tsx
+++ b/web/features/new-rag/__tests__/documents-page.spec.tsx
@@ -2499,7 +2499,7 @@ describe('DocumentsPage', () => {
     rendered.rerender(<DocumentsPage knowledgeSpaceId="space-1" />)
 
     const error = await screen.findByText('Parser failed at line 400 with complete server context')
-    expect(error).toHaveClass('whitespace-pre-wrap', 'break-words')
+    expect(error).toHaveClass('whitespace-pre-wrap', 'wrap-break-word')
     expect(error).not.toHaveClass('truncate')
   })
 
diff --git a/web/features/new-rag/add-source-page.tsx b/web/features/new-rag/add-source-page.tsx
index ecf5721be3c..afec4c8511f 100644
--- a/web/features/new-rag/add-source-page.tsx
+++ b/web/features/new-rag/add-source-page.tsx
@@ -452,7 +452,7 @@ function UnconfiguredProvider({
   return (
     <div className="rounded-xl bg-background-section p-4">
       <span className="flex size-9 items-center justify-center rounded-lg border border-divider-subtle bg-background-default">
-        <span aria-hidden className="i-ri-fire-line size-[18px] text-text-tertiary" />
+        <span aria-hidden className="i-ri-fire-line size-4.5 text-text-tertiary" />
       </span>
       <h3 className="mt-3 system-sm-semibold text-text-primary">
         {t(($) => $['newKnowledge.providerNotConfigured'], {
diff --git a/web/features/new-rag/components/create-knowledge-dialog-parts.tsx b/web/features/new-rag/components/create-knowledge-dialog-parts.tsx
index 663f6dca37d..0423e6f9a48 100644
--- a/web/features/new-rag/components/create-knowledge-dialog-parts.tsx
+++ b/web/features/new-rag/components/create-knowledge-dialog-parts.tsx
@@ -52,7 +52,7 @@ export function StartMode({
       >
         <RadioControl aria-hidden />
         <span className="flex size-9 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-components-option-card-option-border bg-background-default">
-          <span aria-hidden className={`${icon} size-[18px] text-text-accent`} />
+          <span aria-hidden className={`${icon} size-4.5 text-text-accent`} />
         </span>
         <span className="min-w-0 flex-1">
           <span id={titleId} className="block system-sm-medium text-text-primary">
@@ -65,7 +65,7 @@ export function StartMode({
         {value === 'source' && (
           <span
             aria-hidden
-            className="h-4 w-[82px] shrink-0 bg-[url('/images/new-rag/create-knowledge-connectors.svg')] bg-contain bg-center bg-no-repeat"
+            className="h-4 w-20.5 shrink-0 bg-[url('/images/new-rag/create-knowledge-connectors.svg')] bg-contain bg-center bg-no-repeat"
           />
         )}
         {disabled && (
@@ -83,7 +83,7 @@ export function KnowledgeIllustration({ title }: { title: string }) {
   return (
     <div className="flex size-full flex-col items-start bg-background-default" aria-hidden>
       <div className="min-h-0 w-full flex-1 border-b border-divider-subtle" />
-      <div className="flex max-h-full w-full shrink-0 flex-col items-start overflow-hidden pb-[94px]">
+      <div className="flex max-h-full w-full shrink-0 flex-col items-start overflow-hidden pb-23.5">
         <div className="flex w-full shrink-0 flex-col items-start gap-4 overflow-hidden py-4 pr-32 pl-8">
           <span className="flex size-14 shrink-0 items-center justify-center rounded-[10px] backdrop-blur-[6px]">
             <span className="flex size-full items-center justify-center rounded-xl border border-dashed border-divider-regular bg-components-card-bg p-1 text-text-accent">
@@ -94,7 +94,7 @@ export function KnowledgeIllustration({ title }: { title: string }) {
             {title}
           </p>
         </div>
-        <div className="aspect-[1489/840] w-full shrink-0 overflow-hidden">
+        <div className="aspect-1489/840 w-full shrink-0 overflow-hidden">
           <img
             alt=""
             className="block size-full max-w-none object-contain"
diff --git a/web/features/new-rag/components/knowledge-space-card.tsx b/web/features/new-rag/components/knowledge-space-card.tsx
index 3bd587e2115..587c372c385 100644
--- a/web/features/new-rag/components/knowledge-space-card.tsx
+++ b/web/features/new-rag/components/knowledge-space-card.tsx
@@ -23,7 +23,7 @@ export function KnowledgeSpaceCard({ knowledgeSpace }: { knowledgeSpace: Knowled
       <Link
         href={`/datasets/new/${knowledgeSpace.id}/sources`}
         aria-label={knowledgeSpace.name}
-        className="relative flex h-[166px] w-full flex-col overflow-hidden rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg text-left shadow-xs outline-hidden transition-shadow hover:shadow-md focus-visible:ring-2 focus-visible:ring-state-accent-solid motion-reduce:transition-none"
+        className="relative flex h-41.5 w-full flex-col overflow-hidden rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg text-left shadow-xs outline-hidden transition-shadow hover:shadow-md focus-visible:ring-2 focus-visible:ring-state-accent-solid motion-reduce:transition-none"
       >
         <div className="flex w-full items-center gap-3 px-4 pt-4 pb-1.5">
           <div
diff --git a/web/features/new-rag/components/knowledge-view-switcher.tsx b/web/features/new-rag/components/knowledge-view-switcher.tsx
index a025416a5bf..1177c9a0dcd 100644
--- a/web/features/new-rag/components/knowledge-view-switcher.tsx
+++ b/web/features/new-rag/components/knowledge-view-switcher.tsx
@@ -43,13 +43,13 @@ export function KnowledgeViewSwitcher({ value, onChange }: KnowledgeViewSwitcher
         }}
       >
         <SegmentedControlItem
-          className="h-[22px] rounded-md px-1 py-px system-xs-medium"
+          className="h-5.5 rounded-md px-1 py-px system-xs-medium"
           value="legacy"
         >
           {t(($) => $['newKnowledge.legacy'])}
         </SegmentedControlItem>
         <SegmentedControlItem
-          className="h-[22px] rounded-md py-px pr-5 pl-1 system-xs-medium"
+          className="h-5.5 rounded-md py-px pr-5 pl-1 system-xs-medium"
           value="new"
         >
           {t(($) => $['newKnowledge.new'])}
@@ -61,7 +61,7 @@ export function KnowledgeViewSwitcher({ value, onChange }: KnowledgeViewSwitcher
           render={
             <button
               type="button"
-              className="absolute top-[5px] right-1 z-10 flex size-3.5 items-center justify-center rounded-sm text-text-tertiary outline-hidden hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid"
+              className="absolute top-1.25 right-1 z-10 flex size-3.5 items-center justify-center rounded-sm text-text-tertiary outline-hidden hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid"
             >
               <span aria-hidden className="i-ri-question-line size-3.5" />
             </button>
@@ -74,9 +74,9 @@ export function KnowledgeViewSwitcher({ value, onChange }: KnowledgeViewSwitcher
         >
           <span
             aria-hidden
-            className="absolute -top-[9.59px] left-1/2 flex size-[19.456px] -translate-x-1/2 items-center justify-center"
+            className="absolute top-[-9.59px] left-1/2 flex size-[19.456px] -translate-x-1/2 items-center justify-center"
           >
-            <span className="size-[13.757px] -rotate-45 rounded-tr-[2px] border-t border-r border-divider-subtle bg-components-panel-bg" />
+            <span className="size-[13.757px] -rotate-45 rounded-tr-xs border-t border-r border-divider-subtle bg-components-panel-bg" />
           </span>
           <div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4 pt-3.5 pb-4">
             <PopoverTitle className="system-md-medium text-text-primary">
diff --git a/web/features/new-rag/components/new-knowledge-list-states.tsx b/web/features/new-rag/components/new-knowledge-list-states.tsx
index 3744be7a279..990f789502b 100644
--- a/web/features/new-rag/components/new-knowledge-list-states.tsx
+++ b/web/features/new-rag/components/new-knowledge-list-states.tsx
@@ -33,7 +33,7 @@ export function NewKnowledgeLoadingState() {
       {LOADING_CARD_IDS.map((id) => (
         <div
           key={id}
-          className="h-[166px] rounded-xl border border-components-card-border bg-components-card-bg p-4 shadow-xs"
+          className="h-41.5 rounded-xl border border-components-card-border bg-components-card-bg p-4 shadow-xs"
         >
           <SkeletonContainer className="h-full">
             <div className="flex gap-3">
@@ -62,12 +62,12 @@ export function NewKnowledgePageState({
   title: ReactNode
 }) {
   return (
-    <div className="flex min-h-[420px] flex-col items-center justify-center px-6 text-center">
+    <div className="flex min-h-105 flex-col items-center justify-center px-6 text-center">
       <div className="mb-5 flex size-12 items-center justify-center rounded-xl border border-components-card-border bg-components-card-bg shadow-xs">
         <span aria-hidden className="i-ri-book-open-line size-6 text-text-tertiary" />
       </div>
       <h2 className="title-2xl-semi-bold text-text-primary">{title}</h2>
-      <p className="mt-2 max-w-[520px] body-md-regular text-text-tertiary">{description}</p>
+      <p className="mt-2 max-w-130 body-md-regular text-text-tertiary">{description}</p>
       {action ? <div className="mt-6">{action}</div> : null}
     </div>
   )
@@ -98,7 +98,7 @@ function EmptyAction({
       href={href}
       aria-label={title}
       aria-describedby={`${descriptionId}${href ? '' : ` ${unavailableId}`}${recommended ? ` ${recommendedId}` : ''}`}
-      className="relative flex min-h-[58px] w-full items-center overflow-hidden rounded-xl bg-components-button-secondary-bg px-3 py-2 text-left text-text-secondary outline-hidden backdrop-blur-[6px] hover:bg-components-button-secondary-bg-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-components-button-secondary-bg"
+      className="relative flex min-h-14.5 w-full items-center overflow-hidden rounded-xl bg-components-button-secondary-bg px-3 py-2 text-left text-text-secondary outline-hidden backdrop-blur-[6px] hover:bg-components-button-secondary-bg-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-components-button-secondary-bg"
     >
       <span className="mr-3 flex size-9 shrink-0 items-center justify-center rounded-lg bg-background-default-subtle">
         <span
@@ -178,13 +178,13 @@ function EmptyGhostGrid() {
   return (
     <div
       aria-hidden
-      className="pointer-events-none absolute inset-0 z-0 overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,black_22%,black_68%,transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_22%,black_68%,transparent)]"
+      className="pointer-events-none absolute inset-0 z-0 overflow-hidden mask-[linear-gradient(to_bottom,transparent,black_22%,black_68%,transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_22%,black_68%,transparent)]"
     >
-      <div className="absolute top-0 left-1/2 grid w-[1200px] -translate-x-1/2 grid-cols-4 gap-2.5 opacity-35">
+      <div className="absolute top-0 left-1/2 grid w-300 -translate-x-1/2 grid-cols-4 gap-2.5 opacity-35">
         {EMPTY_GHOST_CARD_IDS.map((id) => (
           <div
             key={id}
-            className="h-[209px] rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg p-4 shadow-xs"
+            className="h-52.25 rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg p-4 shadow-xs"
           >
             <div className="flex items-center gap-3">
               <div className="size-10 shrink-0 rounded-[10px] bg-background-section" />
@@ -216,7 +216,7 @@ export function NewKnowledgeEmptyState({
   return (
     <div className="relative isolate flex min-h-[calc(100vh-134px)] items-center justify-center overflow-hidden px-4 py-16 text-center sm:px-6">
       <EmptyGhostGrid />
-      <div className="relative z-10 flex w-full max-w-[520px] flex-col items-center gap-6">
+      <div className="relative z-10 flex w-full max-w-130 flex-col items-center gap-6">
         <div className="flex flex-col items-center gap-3">
           <div className="flex size-14 items-center justify-center rounded-xl border border-dashed border-divider-regular bg-components-card-bg p-1 backdrop-blur-[6px]">
             <span aria-hidden className="i-ri-book-open-line size-6 text-text-accent" />
diff --git a/web/features/new-rag/crawl-selection-form.tsx b/web/features/new-rag/crawl-selection-form.tsx
index c46c4d73a3d..e16bfcf02ad 100644
--- a/web/features/new-rag/crawl-selection-form.tsx
+++ b/web/features/new-rag/crawl-selection-form.tsx
@@ -436,7 +436,7 @@ function ReadyCrawlSelectionForm({
             />
             {t(($) => $['newKnowledge.selectAll'])}
           </label>
-          <ul className="max-h-[280px] divide-y divide-divider-subtle overflow-y-auto">
+          <ul className="max-h-70 divide-y divide-divider-subtle overflow-y-auto">
             {pages.map((page, index) => {
               const skipReason = pageSkipReasons.get(page.pageId)
               const selectable = !skipReason
diff --git a/web/features/new-rag/create-knowledge-page.tsx b/web/features/new-rag/create-knowledge-page.tsx
index e8f290789e1..fd73a2af969 100644
--- a/web/features/new-rag/create-knowledge-page.tsx
+++ b/web/features/new-rag/create-knowledge-page.tsx
@@ -361,9 +361,9 @@ export function CreateKnowledgePage() {
           </button>
 
           <div className="flex min-h-0 min-w-0 flex-col items-end border-divider-subtle xl:border-r">
-            <div className="min-h-6 w-full max-w-[760px] flex-1 [@media(max-height:850px)]:h-6 [@media(max-height:850px)]:flex-none" />
+            <div className="min-h-6 w-full max-w-190 flex-1 [@media(max-height:850px)]:h-6 [@media(max-height:850px)]:flex-none" />
             <Form
-              className="flex max-h-full min-h-0 w-full max-w-[760px] flex-col"
+              className="flex max-h-full min-h-0 w-full max-w-190 flex-col"
               onFormSubmit={handleSubmit}
             >
               <header className="shrink-0 px-6 pt-2 pb-6 sm:px-10">
@@ -579,7 +579,7 @@ export function CreateKnowledgePage() {
                 </div>
               </div>
             </Form>
-            <div className="min-h-px w-full max-w-[760px] flex-1 [@media(max-height:850px)]:h-6 [@media(max-height:850px)]:flex-none" />
+            <div className="min-h-px w-full max-w-190 flex-1 [@media(max-height:850px)]:h-6 [@media(max-height:850px)]:flex-none" />
           </div>
 
           <aside className="hidden min-h-0 min-w-0 xl:block">
diff --git a/web/features/new-rag/document-chunk-detail.tsx b/web/features/new-rag/document-chunk-detail.tsx
index 1c770a31d66..eca7f5214b2 100644
--- a/web/features/new-rag/document-chunk-detail.tsx
+++ b/web/features/new-rag/document-chunk-detail.tsx
@@ -111,7 +111,7 @@ export function DocumentChunkDetail({
                 >
                   <div className="flex items-start justify-between gap-2">
                     <div className="min-w-0">
-                      <h3 className="system-sm-semibold break-words text-text-primary">
+                      <h3 className="system-sm-semibold wrap-break-word text-text-primary">
                         {content.heading ||
                           t(($) => $['newKnowledge.chunkHeading'], { position: chunk.ordinal })}
                       </h3>
@@ -133,7 +133,7 @@ export function DocumentChunkDetail({
                     </Button>
                   </div>
                   {content.body && (
-                    <p className="mt-3 body-md-regular break-words whitespace-pre-wrap text-text-primary">
+                    <p className="mt-3 body-md-regular wrap-break-word whitespace-pre-wrap text-text-primary">
                       {content.body}
                     </p>
                   )}
@@ -175,7 +175,7 @@ export function DocumentChunkDetail({
               <dt className="system-2xs-medium text-text-tertiary">
                 {t(($) => $['newKnowledge.sourceColumn'])}
               </dt>
-              <dd className="mt-1 system-xs-regular break-words text-text-secondary">
+              <dd className="mt-1 system-xs-regular wrap-break-word text-text-secondary">
                 {sourceName ??
                   (document.sourceId
                     ? t(($) => $['newKnowledge.sourceType.connector'])
@@ -251,7 +251,7 @@ export function DocumentChunkDetail({
               <dt className="system-2xs-medium text-text-tertiary">
                 {t(($) => $['newKnowledge.mimeType'])}
               </dt>
-              <dd className="mt-1 system-xs-regular break-words text-text-secondary">
+              <dd className="mt-1 system-xs-regular wrap-break-word text-text-secondary">
                 {revision?.mimeType ?? document.active?.mimeType ?? '—'}
               </dd>
             </div>
@@ -275,8 +275,8 @@ export function DocumentChunkDetail({
                 </div>
                 {chunkMetadataEntries(selectedChunk.userMetadata).map(([key, value]) => (
                   <div key={key}>
-                    <dt className="system-2xs-medium break-words text-text-tertiary">{key}</dt>
-                    <dd className="mt-1 system-xs-regular break-words text-text-secondary">
+                    <dt className="system-2xs-medium wrap-break-word text-text-tertiary">{key}</dt>
+                    <dd className="mt-1 system-xs-regular wrap-break-word text-text-secondary">
                       {value}
                     </dd>
                   </div>
diff --git a/web/features/new-rag/document-list.tsx b/web/features/new-rag/document-list.tsx
index 780313270fe..e16c1b51ab9 100644
--- a/web/features/new-rag/document-list.tsx
+++ b/web/features/new-rag/document-list.tsx
@@ -135,7 +135,7 @@ const DocumentRow = memo(
           <div className="flex min-w-0 items-center gap-2.5">
             <span
               aria-hidden
-              className="i-ri-file-text-line size-[18px] shrink-0 text-text-tertiary"
+              className="i-ri-file-text-line size-4.5 shrink-0 text-text-tertiary"
             />
             <Link
               id={titleId}
@@ -472,7 +472,7 @@ export function DocumentsList({
         role="region"
         tabIndex={-1}
       >
-        <table className="w-full table-fixed border-collapse text-left lg:min-w-[900px] lg:table-auto">
+        <table className="w-full table-fixed border-collapse text-left lg:min-w-225 lg:table-auto">
           <thead className="system-2xs-medium text-text-tertiary uppercase">
             <tr>
               <th className="pb-2 font-medium">
diff --git a/web/features/new-rag/knowledge-space-shell.tsx b/web/features/new-rag/knowledge-space-shell.tsx
index 22a16844098..dcca1fe1130 100644
--- a/web/features/new-rag/knowledge-space-shell.tsx
+++ b/web/features/new-rag/knowledge-space-shell.tsx
@@ -115,7 +115,7 @@ export function KnowledgeSpaceShell({
           <div className="flex min-w-0 items-center px-1 py-2">
             <div className="flex min-w-0 flex-1 items-center gap-2 rounded-xl p-2">
               <div className="flex size-9 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-regular bg-components-icon-bg-orange-dark-soft">
-                <span aria-hidden className="i-ri-book-open-line size-[18px] text-text-tertiary" />
+                <span aria-hidden className="i-ri-book-open-line size-4.5 text-text-tertiary" />
               </div>
               <div className="min-w-0 flex-1">
                 <h1 className="truncate system-md-semibold text-text-secondary">
diff --git a/web/features/new-rag/new-knowledge-list.tsx b/web/features/new-rag/new-knowledge-list.tsx
index 9d621c42348..c63f44dc059 100644
--- a/web/features/new-rag/new-knowledge-list.tsx
+++ b/web/features/new-rag/new-knowledge-list.tsx
@@ -95,7 +95,7 @@ export function NewKnowledgeList({
       aria-label={t(($) => $['newKnowledge.new'])}
       className="relative flex grow flex-col overflow-y-auto bg-background-body"
     >
-      <header className="sticky top-0 z-10 flex flex-col gap-[14px] bg-background-body px-4 pt-4 pb-2 sm:px-8">
+      <header className="sticky top-0 z-10 flex flex-col gap-3.5 bg-background-body px-4 pt-4 pb-2 sm:px-8">
         <div className="flex min-h-6 flex-wrap items-center justify-between gap-2">
           <div className="flex min-w-0 flex-wrap items-center gap-2">
             <h1 className="text-[18px]/[21.6px] font-semibold text-text-primary">
@@ -129,7 +129,7 @@ export function NewKnowledgeList({
               onClick={showFilterBoundary}
             />
             <SearchInput
-              className="w-full min-w-0 sm:w-[200px]"
+              className="w-full min-w-0 sm:w-50"
               value={searchValue}
               onValueChange={setSearchValue}
             />
diff --git a/web/features/new-rag/processing-tasks-drawer.tsx b/web/features/new-rag/processing-tasks-drawer.tsx
index cd6ef467899..15bf639c115 100644
--- a/web/features/new-rag/processing-tasks-drawer.tsx
+++ b/web/features/new-rag/processing-tasks-drawer.tsx
@@ -386,7 +386,7 @@ export function ProcessingTasksDrawer({
       <DrawerPortal>
         <DrawerBackdrop />
         <DrawerViewport>
-          <DrawerPopup className="data-[swipe-direction=right]:w-[440px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)]">
+          <DrawerPopup className="data-[swipe-direction=right]:w-110 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)]">
             <DrawerContent className="flex min-h-0 flex-1 flex-col bg-components-panel-bg p-0 pb-0">
               <header className="shrink-0 pt-[calc(1.25rem+env(safe-area-inset-top,0px))] pr-[calc(1.5rem+env(safe-area-inset-right,0px))] pb-4 pl-[calc(1.5rem+env(safe-area-inset-left,0px))]">
                 <div className="flex items-center justify-between gap-3">
@@ -510,7 +510,7 @@ export function ProcessingTasksDrawer({
                       const taskError = task.errorMessage ?? task.errorCode
                       const actionTarget = `${documentTitles.get(task.documentId) ?? task.documentId} · ${task.id}`
                       return (
-                        <li key={task.id} className="flex min-h-[62px] items-center gap-2.5 py-3.5">
+                        <li key={task.id} className="flex min-h-15.5 items-center gap-2.5 py-3.5">
                           <span
                             aria-hidden
                             className={
@@ -539,7 +539,7 @@ export function ProcessingTasksDrawer({
                               )}
                             </p>
                             {taskError && (
-                              <p className="mt-1 system-2xs-regular break-words whitespace-pre-wrap text-text-destructive">
+                              <p className="mt-1 system-2xs-regular wrap-break-word whitespace-pre-wrap text-text-destructive">
                                 {taskError}
                               </p>
                             )}
diff --git a/web/features/new-rag/sources-page.tsx b/web/features/new-rag/sources-page.tsx
index ddc37abb246..b5734efb953 100644
--- a/web/features/new-rag/sources-page.tsx
+++ b/web/features/new-rag/sources-page.tsx
@@ -325,7 +325,7 @@ function SourceRow({
           <span
             aria-hidden
             className={cn(
-              'size-[18px] shrink-0 text-text-tertiary',
+              'size-4.5 shrink-0 text-text-tertiary',
               source.type === 'web' ? 'i-ri-global-line' : 'i-ri-links-line',
             )}
           />
@@ -619,7 +619,7 @@ export function SourcesPage({ knowledgeSpaceId }: { knowledgeSpaceId: string })
             )}
           </div>
           <div className="mt-4 overflow-x-auto">
-            <table className="w-full table-fixed border-collapse text-left lg:min-w-[900px] lg:table-auto">
+            <table className="w-full table-fixed border-collapse text-left lg:min-w-225 lg:table-auto">
               <thead className="system-2xs-medium text-text-tertiary uppercase">
                 <tr>
                   <th className="w-7 pr-3 pb-2">