From abbafd56ef2d102e04eb994efdf5e10f32ca7cec Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Mon, 24 Mar 2025 18:31:21 +0800
Subject: [PATCH] chore: reorder class names for consistency and improved
 readability in various components

---
 .../base/segmented-control/index.tsx          |  6 +++---
 .../nodes/_base/components/collapse/index.tsx |  8 ++++----
 .../nodes/_base/components/output-vars.tsx    |  4 ++--
 .../object-child-tree-panel/picker/field.tsx  | 10 +++++-----
 .../object-child-tree-panel/picker/index.tsx  |  8 ++++----
 .../object-child-tree-panel/show/field.tsx    | 12 +++++------
 .../variable/var-reference-vars.tsx           |  8 ++++----
 .../json-schema-config-modal/code-editor.tsx  | 12 +++++------
 .../error-message.tsx                         |  4 ++--
 .../json-schema-config-modal/index.tsx        |  2 +-
 .../json-importer.tsx                         | 12 +++++------
 .../json-schema-config.tsx                    | 20 +++++++++----------
 .../generated-result.tsx                      | 16 +++++++--------
 .../json-schema-generator/index.tsx           |  2 +-
 .../json-schema-generator/prompt-editor.tsx   | 20 +++++++++----------
 .../visual-editor/add-field.tsx               |  4 ++--
 .../visual-editor/card.tsx                    |  8 ++++----
 .../visual-editor/edit-card/actions.tsx       | 12 +++++------
 .../edit-card/advanced-actions.tsx            |  2 +-
 .../edit-card/advanced-options.tsx            | 16 +++++++--------
 .../edit-card/required-switch.tsx             |  4 ++--
 .../visual-editor/edit-card/type-selector.tsx | 14 ++++++-------
 .../visual-editor/index.tsx                   |  2 +-
 .../visual-editor/schema-node.tsx             |  4 ++--
 .../nodes/llm/components/structure-output.tsx |  8 ++++----
 .../components/workflow/nodes/llm/panel.tsx   |  6 +++---
 web/app/dev-preview/page.tsx                  |  4 ++--
 27 files changed, 114 insertions(+), 114 deletions(-)

diff --git a/web/app/components/base/segmented-control/index.tsx b/web/app/components/base/segmented-control/index.tsx
index e3e0f7f6ca..bd921e4243 100644
--- a/web/app/components/base/segmented-control/index.tsx
+++ b/web/app/components/base/segmented-control/index.tsx
@@ -41,7 +41,7 @@ export const SegmentedControl = <T extends string | number | symbol>({
             )}
             onClick={() => onChange(option.value)}
           >
-            <span className='flex items-center justify-center w-5 h-5'>
+            <span className='flex h-5 w-5 items-center justify-center'>
               <Icon className={classNames(
                 'w-4 h-4 text-text-tertiary',
                 isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
@@ -54,8 +54,8 @@ export const SegmentedControl = <T extends string | number | symbol>({
               {option.text}
             </span>
             {!isLast && !isSelected && !isNextSelected && (
-              <div className='absolute top-0 right-[-1px] h-full flex items-center'>
-                <Divider type='vertical' className='h-3.5 mx-0' />
+              <div className='absolute right-[-1px] top-0 flex h-full items-center'>
+                <Divider type='vertical' className='mx-0 h-3.5' />
               </div>
             )}
           </button>
diff --git a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
index ac99bb9750..1c21e37c5e 100644
--- a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
@@ -27,7 +27,7 @@ const Collapse = ({
 
   return (
     <>
-      <div className='flex justify-between items-center'>
+      <div className='flex items-center justify-between'>
         <div
           className='flex items-center'
           onClick={() => {
@@ -37,13 +37,13 @@ const Collapse = ({
             }
           }}
         >
-          <div className='shrink-0 w-4 h-4'>
+          <div className='h-4 w-4 shrink-0'>
             {
               !disabled && (
                 <RiArrowDropRightLine
                   className={cn(
-                    'w-4 h-4 text-text-tertiary',
-                    !collapsedMerged && 'transform rotate-90',
+                    'h-4 w-4 text-text-tertiary',
+                    !collapsedMerged && 'rotate-90',
                   )}
                 />
               )
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 91c07c52db..cc9cebb080 100644
--- a/web/app/components/workflow/nodes/_base/components/output-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
@@ -46,9 +46,9 @@ export const VarItem: FC<VarItemProps> = ({
   return (
     <div className='py-1'>
       <div className='flex justify-between'>
-        <div className='flex leading-[18px] items-center'>
+        <div className='flex items-center leading-[18px]'>
           <div className='code-sm-semibold text-text-secondary'>{name}</div>
-          <div className='ml-2 system-xs-regular text-text-tertiary'>{type}</div>
+          <div className='system-xs-regular ml-2 text-text-tertiary'>{type}</div>
         </div>
       </div>
       <div className='system-xs-regular mt-0.5 text-text-tertiary'>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
index b01badca57..f90f30e7ce 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
@@ -40,18 +40,18 @@ const Field: FC<Props> = ({
     <div>
       <Tooltip popupContent={t('app.structOutput.moreFillTip')} disabled={depth !== MAX_DEPTH + 1}>
         <div
-          className={cn('flex pr-2 items-center justify-between rounded-md', !readonly && 'hover:bg-state-base-hover', depth !== MAX_DEPTH + 1 && 'cursor-pointer')}
+          className={cn('flex items-center justify-between rounded-md pr-2', !readonly && 'hover:bg-state-base-hover', depth !== MAX_DEPTH + 1 && 'cursor-pointer')}
           onClick={() => !readonly && onSelect?.([...valueSelector, name])}
         >
-          <div className='grow flex items-stretch'>
+          <div className='flex grow items-stretch'>
             <TreeIndentLine depth={depth} />
             {depth === MAX_DEPTH + 1 ? (
-              <RiMoreFill className='w-3 h-3 text-text-tertiary' />
-            ) : (<div className={cn('h-6 leading-6 grow w-0 truncate system-sm-medium text-text-secondary', isHighlight && 'text-text-accent')}>{name}</div>)}
+              <RiMoreFill className='h-3 w-3 text-text-tertiary' />
+            ) : (<div className={cn('system-sm-medium h-6 w-0 grow truncate leading-6 text-text-secondary', isHighlight && 'text-text-accent')}>{name}</div>)}
 
           </div>
           {depth < MAX_DEPTH + 1 && (
-            <div className='ml-2 shrink-0 system-xs-regular text-text-tertiary'>{getFieldType(payload)}</div>
+            <div className='system-xs-regular ml-2 shrink-0 text-text-tertiary'>{getFieldType(payload)}</div>
           )}
         </div>
       </Tooltip>
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 305d29aeea..302ed3ca75 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
@@ -42,18 +42,18 @@ export const PickerPanelMain: FC<Props> = ({
   return (
     <div className={cn(className)} ref={ref}>
       {/* Root info */}
-      <div className='px-2 py-1 flex justify-between items-center'>
+      <div className='flex items-center justify-between px-2 py-1'>
         <div className='flex'>
           {root.nodeName && (
             <>
-              <div className='max-w-[100px] truncate system-sm-medium text-text-tertiary'>{root.nodeName}</div>
+              <div className='system-sm-medium max-w-[100px] truncate text-text-tertiary'>{root.nodeName}</div>
               <div className='system-sm-medium text-text-tertiary'>.</div>
             </>
           )}
           <div className='system-sm-medium text-text-secondary'>{root.attrName}</div>
         </div>
         {/* It must be object */}
-        <div className='shrink-0 ml-2 system-xs-regular text-text-tertiary'>object</div>
+        <div className='system-xs-regular ml-2 shrink-0 text-text-tertiary'>object</div>
       </div>
       {fieldNames.map(name => (
         <Field
@@ -74,7 +74,7 @@ const PickerPanel: FC<Props> = ({
   ...props
 }) => {
   return (
-    <div className={cn('w-[296px] p-1 pb-0 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]', className)}>
+    <div className={cn('w-[296px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 pb-0 shadow-lg backdrop-blur-[5px]', className)}>
       <PickerPanelMain {...props} />
     </div>
   )
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 9915f8248e..f886c1b776 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,20 +33,20 @@ const Field: FC<Props> = ({
       <div className={cn('flex pr-2')}>
         <TreeIndentLine depth={depth} />
         <div className='grow'>
-          <div className='flex relative select-none'>
+          <div className='relative flex select-none'>
             {hasChildren && (
               <RiArrowDropDownLine
-                className={cn('absolute top-[50%] translate-y-[-50%] left-[-18px] bg-components-panel-bg w-4 h-4 text-text-tertiary cursor-pointer', fold && 'rotate-[270deg] text-text-accent')}
+                className={cn('absolute left-[-18px] top-[50%] h-4 w-4 translate-y-[-50%] cursor-pointer bg-components-panel-bg text-text-tertiary', fold && 'rotate-[270deg] text-text-accent')}
                 onClick={toggleFold}
               />
             )}
-            <div className='h-6 truncate system-sm-medium text-text-secondary leading-6'>{name}</div>
-            <div className='ml-3 shrink-0 system-xs-regular text-text-tertiary leading-6'>{getFieldType(payload)}</div>
-            {required && <div className='ml-3 text-text-warning system-2xs-medium-uppercase leading-6'>{t('app.structOutput.required')}</div>}
+            <div className='system-sm-medium h-6 truncate leading-6 text-text-secondary'>{name}</div>
+            <div className='system-xs-regular ml-3 shrink-0 leading-6 text-text-tertiary'>{getFieldType(payload)}</div>
+            {required && <div className='system-2xs-medium-uppercase ml-3 leading-6 text-text-warning'>{t('app.structOutput.required')}</div>}
           </div>
           {payload.description && (
             <div className='flex'>
-              <div className='w-0 grow system-xs-regular text-text-tertiary truncate'>{payload.description}</div>
+              <div className='system-xs-regular w-0 grow truncate text-text-tertiary'>{payload.description}</div>
             </div>
           )}
         </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 21dead08c0..9f0eb16446 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
@@ -136,7 +136,7 @@ const Item: FC<ItemProps> = ({
           className={cn(
             (isObj || isStructureOutput) ? ' pr-1' : 'pr-[18px]',
             isHovering && ((isObj || isStructureOutput) ? 'bg-primary-50' : 'bg-state-base-hover'),
-            'relative w-full flex items-center h-6 pl-3  rounded-md cursor-pointer')
+            'relative flex h-6 w-full cursor-pointer items-center  rounded-md pl-3')
           }
           onClick={handleChosen}
           onMouseDown={e => e.preventDefault()}
@@ -155,10 +155,10 @@ const Item: FC<ItemProps> = ({
               <div title={itemData.des} className='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{itemData.variable.replace('conversation.', '')}</div>
             )}
           </div>
-          <div className='ml-1 shrink-0 text-xs font-normal text-text-tertiary capitalize'>{itemData.type}</div>
+          <div className='ml-1 shrink-0 text-xs font-normal capitalize text-text-tertiary'>{itemData.type}</div>
           {
             (isObj || isStructureOutput) && (
-              <ChevronRight className={cn('ml-0.5 w-3 h-3 text-text-quaternary', isHovering && 'text-text-tertiary')} />
+              <ChevronRight className={cn('ml-0.5 h-3 w-3 text-text-quaternary', isHovering && 'text-text-tertiary')} />
             )
           }
         </div >
@@ -338,7 +338,7 @@ const VarReferenceVars: FC<Props> = ({
               </div>))
           }
         </div>
-        : <div className='pl-3 leading-[18px] text-xs font-medium text-gray-500 uppercase'>{t('workflow.common.noVar')}</div>}
+        : <div className='pl-3 text-xs font-medium uppercase leading-[18px] text-gray-500'>{t('workflow.common.noVar')}</div>}
     </>
   )
 }
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
index 789d75fa3b..d076f05f0a 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
@@ -76,8 +76,8 @@ const CodeEditor: FC<CodeEditorProps> = ({
 
   return (
     <div className={classNames('flex flex-col h-full bg-components-input-bg-normal overflow-hidden', className)}>
-      <div className='flex items-center justify-between pl-2 pt-1 pr-1'>
-        <div className='py-0.5 text-text-secondary system-xs-semibold-uppercase'>
+      <div className='flex items-center justify-between pl-2 pr-1 pt-1'>
+        <div className='system-xs-semibold-uppercase py-0.5 text-text-secondary'>
           <span className='px-1 py-0.5'>JSON</span>
         </div>
         <div className='flex items-center gap-x-0.5'>
@@ -85,19 +85,19 @@ const CodeEditor: FC<CodeEditorProps> = ({
             <Tooltip popupContent={t('common.operation.format')}>
               <button
                 type='button'
-                className='flex items-center justify-center h-6 w-6'
+                className='flex h-6 w-6 items-center justify-center'
                 onClick={formatJsonContent}
               >
-                <RiIndentIncrease className='w-4 h-4 text-text-tertiary' />
+                <RiIndentIncrease className='h-4 w-4 text-text-tertiary' />
               </button>
             </Tooltip>
           )}
           <Tooltip popupContent={t('common.operation.copy')}>
             <button
               type='button'
-              className='flex items-center justify-center h-6 w-6'
+              className='flex h-6 w-6 items-center justify-center'
               onClick={() => copy(value)}>
-              <RiClipboardLine className='w-4 h-4 text-text-tertiary' />
+              <RiClipboardLine className='h-4 w-4 text-text-tertiary' />
             </button>
           </Tooltip>
         </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
index a51980e20f..2685182f9f 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
@@ -16,8 +16,8 @@ const ErrorMessage: FC<ErrorMessageProps> = ({
       'flex gap-x-1 mt-1 p-2 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg',
       className,
     )}>
-      <RiErrorWarningFill className='shrink-0 w-4 h-4 text-text-destructive' />
-      <div className='grow text-text-primary system-xs-medium max-h-12 overflow-y-auto break-words'>
+      <RiErrorWarningFill className='h-4 w-4 shrink-0 text-text-destructive' />
+      <div className='system-xs-medium max-h-12 grow overflow-y-auto break-words text-text-primary'>
         {message}
       </div>
     </div>
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 864aade83f..d34836d5b2 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
@@ -20,7 +20,7 @@ const JsonSchemaConfigModal: FC<JsonSchemaConfigModalProps> = ({
     <Modal
       isShow={isShow}
       onClose={onClose}
-      className='max-w-[960px] h-[800px] p-0'
+      className='h-[800px] max-w-[960px] p-0'
     >
       <JsonSchemaConfig
         defaultSchema={defaultSchema}
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 c49ea05cd6..a16896276b 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
@@ -78,7 +78,7 @@ const JsonImporter: FC<JsonImporterProps> = ({
         <button
           type='button'
           className={cn(
-            'flex shrink-0 px-1.5 py-1 rounded-md hover:bg-components-button-ghost-bg-hover text-text-tertiary system-xs-medium',
+            'system-xs-medium flex shrink-0 rounded-md px-1.5 py-1 text-text-tertiary hover:bg-components-button-ghost-bg-hover',
             open && 'bg-components-button-ghost-bg-hover',
           )}
         >
@@ -86,13 +86,13 @@ const JsonImporter: FC<JsonImporterProps> = ({
         </button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[100]'>
-        <div className='flex flex-col w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'>
+        <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'>
           {/* Title */}
-          <div className='relative px-3 pt-3.5 pb-1'>
-            <div className='flex items-center justify-center absolute right-2.5 bottom-0 w-8 h-8' onClick={onClose}>
-              <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          <div className='relative px-3 pb-1 pt-3.5'>
+            <div className='absolute bottom-0 right-2.5 flex h-8 w-8 items-center justify-center' onClick={onClose}>
+              <RiCloseLine className='h-4 w-4 text-text-tertiary' />
             </div>
-            <div className='flex pl-1 pr-8 text-text-primary system-xl-semibold'>
+            <div className='system-xl-semibold flex pl-1 pr-8 text-text-primary'>
               {t('workflow.nodes.llm.jsonSchema.import')}
             </div>
           </div>
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 e1ae28e4aa..71cff8fe95 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
@@ -141,14 +141,14 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
   }, [currentTab, jsonSchema, json, onSave, onClose])
 
   return (
-    <div className='flex flex-col h-full'>
+    <div className='flex h-full flex-col'>
       {/* Header */}
-      <div className='relative flex p-6 pr-14 pb-3'>
-        <div className='text-text-primary title-2xl-semi-bold grow truncate'>
+      <div className='relative flex p-6 pb-3 pr-14'>
+        <div className='title-2xl-semi-bold grow truncate text-text-primary'>
           {t('workflow.nodes.llm.jsonSchema.title')}
         </div>
-        <div className='absolute right-5 top-5 w-8 h-8 flex justify-center items-center p-1.5' onClick={onClose}>
-          <RiCloseLine className='w-[18px] h-[18px] text-text-tertiary' />
+        <div className='absolute right-5 top-5 flex h-8 w-8 items-center justify-center p-1.5' onClick={onClose}>
+          <RiCloseLine className='h-[18px] w-[18px] text-text-tertiary' />
         </div>
       </div>
       {/* Content */}
@@ -173,7 +173,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
           />
         </div>
       </div>
-      <div className='flex flex-col gap-y-1 px-6 grow overflow-hidden'>
+      <div className='flex grow flex-col gap-y-1 overflow-hidden px-6'>
         {currentTab === SchemaView.VisualEditor && (
           <MittProvider>
             <VisualEditorContextProvider>
@@ -194,22 +194,22 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
         {validationError && <ErrorMessage message={validationError} />}
       </div>
       {/* Footer */}
-      <div className='flex items-center p-6 pt-5 gap-x-2'>
+      <div className='flex items-center gap-x-2 p-6 pt-5'>
         <a
-          className='flex items-center gap-x-1 grow text-text-accent'
+          className='flex grow items-center gap-x-1 text-text-accent'
           href='https://json-schema.org/' // todo: replace with documentation link
           target='_blank'
           rel='noopener noreferrer'
         >
           <span className='system-xs-regular'>{t('workflow.nodes.llm.jsonSchema.doc')}</span>
-          <RiExternalLinkLine className='w-3 h-3' />
+          <RiExternalLinkLine className='h-3 w-3' />
         </a>
         <div className='flex items-center gap-x-3'>
           <div className='flex items-center gap-x-2'>
             <Button variant='secondary' onClick={handleResetDefaults}>
               {t('workflow.nodes.llm.jsonSchema.resetDefaults')}
             </Button>
-            <Divider type='vertical' className='h-4 ml-1 mr-0' />
+            <Divider type='vertical' className='ml-1 mr-0 h-4' />
           </div>
           <div className='flex items-center gap-x-2'>
             <Button variant='secondary' onClick={handleCancel}>
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 c7c84533fc..56a174c176 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
@@ -55,16 +55,16 @@ const GeneratedResult: FC<GeneratedResultProps> = ({
   }, [schema, onApply])
 
   return (
-    <div className='flex flex-col w-[480px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'>
-      <div className='flex items-center justify-center absolute top-2.5 right-2.5 w-8 h-8' onClick={onClose}>
-        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+    <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='absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center' onClick={onClose}>
+        <RiCloseLine className='h-4 w-4 text-text-tertiary' />
       </div>
       {/* Title */}
-      <div className='flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1'>
-        <div className='flex pl-1 pr-8 text-text-primary system-xl-semibold'>
+      <div className='flex flex-col gap-y-[0.5px] px-3 pb-1 pt-3.5'>
+        <div className='system-xl-semibold flex pl-1 pr-8 text-text-primary'>
           {t('workflow.nodes.llm.jsonSchema.generatedResult')}
         </div>
-        <div className='flex px-1 text-text-tertiary system-xs-regular'>
+        <div className='system-xs-regular flex px-1 text-text-tertiary'>
           {t('workflow.nodes.llm.jsonSchema.resultTip')}
         </div>
       </div>
@@ -83,12 +83,12 @@ const GeneratedResult: FC<GeneratedResultProps> = ({
       {/* Footer */}
       <div className='flex items-center justify-between p-4 pt-2'>
         <Button variant='secondary' className='flex items-center gap-x-0.5' onClick={onBack}>
-          <RiArrowLeftLine className='w-4 h-4' />
+          <RiArrowLeftLine className='h-4 w-4' />
           <span>{t('workflow.nodes.llm.jsonSchema.back')}</span>
         </Button>
         <div className='flex items-center gap-x-2'>
           <Button variant='secondary' className='flex items-center gap-x-0.5' onClick={onRegenerate}>
-            <RiSparklingLine className='w-4 h-4' />
+            <RiSparklingLine className='h-4 w-4' />
             <span>{t('workflow.nodes.llm.jsonSchema.regenerate')}</span>
           </Button>
           <Button variant='primary' onClick={handleApply}>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
index 28b2848eb8..16936bc4b9 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
@@ -135,7 +135,7 @@ export const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
         <button
           type='button'
           className={cn(
-            'w-6 h-6 flex items-center justify-center p-0.5 rounded-md hover:bg-state-accent-hover',
+            'flex h-6 w-6 items-center justify-center rounded-md p-0.5 hover:bg-state-accent-hover',
             open && 'bg-state-accent-active',
           )}
         >
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
index 382e1c20d0..9387813ee5 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
@@ -42,22 +42,22 @@ const PromptEditor: FC<PromptEditorProps> = ({
   }, [onInstructionChange])
 
   return (
-    <div className='flex flex-col relative w-[480px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'>
-      <div className='flex items-center justify-center absolute top-2.5 right-2.5 w-8 h-8' onClick={onClose}>
-        <RiCloseLine className='w-4 h-4 text-text-tertiary'/>
+    <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='absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center' onClick={onClose}>
+        <RiCloseLine className='h-4 w-4 text-text-tertiary'/>
       </div>
       {/* Title */}
-      <div className='flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1'>
-        <div className='flex pl-1 pr-8 text-text-primary system-xl-semibold'>
+      <div className='flex flex-col gap-y-[0.5px] px-3 pb-1 pt-3.5'>
+        <div className='system-xl-semibold flex pl-1 pr-8 text-text-primary'>
           {t('workflow.nodes.llm.jsonSchema.generateJsonSchema')}
         </div>
-        <div className='flex px-1 text-text-tertiary system-xs-regular'>
+        <div className='system-xs-regular flex px-1 text-text-tertiary'>
           {t('workflow.nodes.llm.jsonSchema.generationTip')}
         </div>
       </div>
       {/* Content */}
       <div className='flex flex-col gap-y-1 px-4 py-2'>
-        <div className='flex items-center h-6 text-text-secondary system-sm-semibold-uppercase'>
+        <div className='system-sm-semibold-uppercase flex h-6 items-center text-text-secondary'>
           {t('common.modelProvider.model')}
         </div>
         <ModelParameterModal
@@ -74,13 +74,13 @@ const PromptEditor: FC<PromptEditorProps> = ({
         />
       </div>
       <div className='flex flex-col gap-y-1 px-4 py-2'>
-        <div className='flex items-center h-6 text-text-secondary system-sm-semibold-uppercase'>
+        <div className='system-sm-semibold-uppercase flex h-6 items-center text-text-secondary'>
           <span>{t('workflow.nodes.llm.jsonSchema.instruction')}</span>
           <Tooltip popupContent={t('workflow.nodes.llm.jsonSchema.promptTooltip')} />
         </div>
         <div className='flex items-center'>
           <Textarea
-            className='h-[364px] px-2 py-1 resize-none'
+            className='h-[364px] resize-none px-2 py-1'
             value={instruction}
             placeholder={t('workflow.nodes.llm.jsonSchema.promptPlaceholder')}
             onChange={handleInstructionChange}
@@ -97,7 +97,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           className='flex items-center gap-x-0.5'
           onClick={onGenerate}
         >
-          <RiSparklingFill className='w-4 h-4' />
+          <RiSparklingFill className='h-4 w-4' />
           <span>{t('workflow.nodes.llm.jsonSchema.generate')}</span>
         </Button>
       </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
index 2e4398ecf7..ab28233841 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
@@ -16,14 +16,14 @@ const AddField = () => {
   }, [setIsAddingNewField, emit])
 
   return (
-    <div className='pl-5 py-2'>
+    <div className='py-2 pl-5'>
       <Button
         size='small'
         variant='secondary-accent'
         className='flex items-center gap-x-[1px]'
         onClick={handleAddField}
       >
-        <RiAddCircleFill className='w-3.5 h-3.5'/>
+        <RiAddCircleFill className='h-3.5 w-3.5'/>
         <span className='px-[3px]'>{t('workflow.nodes.llm.jsonSchema.addField')}</span>
       </Button>
     </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
index 5870eaac0a..bdfc2a53fc 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
@@ -19,15 +19,15 @@ const Card: FC<CardProps> = ({
   return (
     <div className='flex flex-col py-0.5'>
       <div className='flex items-center gap-x-1 p-0.5 pl-1'>
-        <div className='px-1 py-0.5 text-text-primary system-sm-semibold truncate'>
+        <div className='system-sm-semibold truncate px-1 py-0.5 text-text-primary'>
           {name}
         </div>
-        <div className='px-1 py-0.5 text-text-tertiary system-xs-medium'>
+        <div className='system-xs-medium px-1 py-0.5 text-text-tertiary'>
           {type}
         </div>
         {
           required && (
-            <div className='px-1 py-0.5 text-text-warning system-2xs-medium-uppercase'>
+            <div className='system-2xs-medium-uppercase px-1 py-0.5 text-text-warning'>
               {t('workflow.nodes.llm.jsonSchema.required')}
             </div>
           )
@@ -35,7 +35,7 @@ const Card: FC<CardProps> = ({
       </div>
 
       {description && (
-        <div className='px-2 pb-1 text-text-tertiary system-xs-regular truncate'>
+        <div className='system-xs-regular truncate px-2 pb-1 text-text-tertiary'>
           {description}
         </div>
       )}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx
index 3fa76b45ea..3f693c23c7 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx
@@ -24,29 +24,29 @@ const Actions: FC<ActionsProps> = ({
       <Tooltip popupContent={t('workflow.nodes.llm.jsonSchema.addChildField')}>
         <button
           type='button'
-          className='flex items-center justify-center w-6 h-6 rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled'
+          className='flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled'
           onClick={onAddChildField}
           disabled={disableAddBtn}
         >
-          <RiAddCircleLine className='w-4 h-4'/>
+          <RiAddCircleLine className='h-4 w-4'/>
         </button>
       </Tooltip>
       <Tooltip popupContent={t('common.operation.edit')}>
         <button
           type='button'
-          className='flex items-center justify-center w-6 h-6 rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'
+          className='flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'
           onClick={onEdit}
         >
-          <RiEditLine className='w-4 h-4' />
+          <RiEditLine className='h-4 w-4' />
         </button>
       </Tooltip>
       <Tooltip popupContent={t('common.operation.remove')}>
         <button
           type='button'
-          className='flex items-center justify-center w-6 h-6 rounded-md text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
+          className='flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
           onClick={onDelete}
         >
-          <RiDeleteBinLine className='w-4 h-4' />
+          <RiDeleteBinLine className='h-4 w-4' />
         </button>
       </Tooltip>
     </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
index 23f27618bf..e065406bde 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
@@ -13,7 +13,7 @@ type AdvancedActionsProps = {
 const Key = (props: { keyName: string }) => {
   const { keyName } = props
   return (
-    <kbd className='flex items-center justify-center min-w-4 h-4 px-px rounded-[4px] bg-components-kbd-bg-white text-text-primary-on-surface system-kbd'>
+    <kbd className='system-kbd flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-white px-px text-text-primary-on-surface'>
       {keyName}
     </kbd>
   )
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-options.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-options.tsx
index 1ada910003..a672fa4c02 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-options.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-options.tsx
@@ -36,17 +36,17 @@ const AdvancedOptions: FC<AdvancedOptionsProps> = ({
   return (
     <div className='border-t border-divider-subtle'>
       {showAdvancedOptions ? (
-        <div className='flex flex-col px-2 py-1.5 gap-y-1'>
-          <div className='flex items-center gap-x-2 w-full'>
-            <span className='text-text-tertiary system-2xs-medium-uppercase'>
+        <div className='flex flex-col gap-y-1 px-2 py-1.5'>
+          <div className='flex w-full items-center gap-x-2'>
+            <span className='system-2xs-medium-uppercase text-text-tertiary'>
               {t('workflow.nodes.llm.jsonSchema.stringValidations')}
             </span>
             <div className='grow'>
-              <Divider type='horizontal' className='h-px my-0 bg-line-divider-bg' />
+              <Divider type='horizontal' className='my-0 h-px bg-line-divider-bg' />
             </div>
           </div>
           <div className='flex flex-col'>
-            <div className='flex items-center h-6 text-text-secondary system-xs-medium'>
+            <div className='system-xs-medium flex h-6 items-center text-text-secondary'>
               Enum
             </div>
             <Textarea
@@ -62,11 +62,11 @@ const AdvancedOptions: FC<AdvancedOptionsProps> = ({
       ) : (
         <button
           type='button'
-          className='flex items-center pl-1.5 pt-2 pr-2 pb-1 gap-x-0.5'
+          className='flex items-center gap-x-0.5 pb-1 pl-1.5 pr-2 pt-2'
           onClick={handleToggleAdvancedOptions}
         >
-          <RiArrowDownDoubleLine className='w-3 h-3 text-text-tertiary' />
-          <span className='text-text-tertiary system-xs-regular'>
+          <RiArrowDownDoubleLine className='h-3 w-3 text-text-tertiary' />
+          <span className='system-xs-regular text-text-tertiary'>
             {t('workflow.nodes.llm.jsonSchema.showAdvancedOptions')}
           </span>
         </button>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
index 4e6980f675..c7179408cf 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
@@ -15,8 +15,8 @@ const RequiredSwitch: FC<RequiredSwitchProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='flex items-center gap-x-1 px-1.5 py-1 rounded-[5px] border border-divider-subtle bg-background-default-lighter'>
-      <span className='text-text-secondary system-2xs-medium-uppercase'>{t('workflow.nodes.llm.jsonSchema.required')}</span>
+    <div className='flex items-center gap-x-1 rounded-[5px] border border-divider-subtle bg-background-default-lighter px-1.5 py-1'>
+      <span className='system-2xs-medium-uppercase text-text-secondary'>{t('workflow.nodes.llm.jsonSchema.required')}</span>
       <Switch size='xs' defaultValue={defaultValue} onChange={toggleRequired} />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
index 130eed7ed9..84d75e1ada 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
@@ -36,27 +36,27 @@ const TypeSelector: FC<TypeSelectorProps> = ({
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <div className={cn(
-          'flex items-center p-0.5 pl-1 rounded-[5px] hover:bg-state-base-hover',
+          'flex items-center rounded-[5px] p-0.5 pl-1 hover:bg-state-base-hover',
           open && 'bg-state-base-hover',
         )}>
-          <span className='text-text-tertiary system-xs-medium'>{currentValue}</span>
-          <RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
+          <span className='system-xs-medium text-text-tertiary'>{currentValue}</span>
+          <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className={popupClassName}>
-        <div className='w-40 p-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'>
+        <div className='w-40 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg shadow-shadow-shadow-5'>
           {items.map((item) => {
             const isSelected = item.value === currentValue
             return (<div
               key={item.value}
-              className={'flex items-center gap-x-1 px-2 py-1 rounded-lg hover:bg-state-base-hover'}
+              className={'flex items-center gap-x-1 rounded-lg px-2 py-1 hover:bg-state-base-hover'}
               onClick={() => {
                 onSelect(item)
                 setOpen(false)
               }}
             >
-              <span className='px-1 text-text-secondary system-sm-medium'>{item.text}</span>
-              {isSelected && <RiCheckLine className='w-4 h-4 text-text-accent' />}
+              <span className='system-sm-medium px-1 text-text-secondary'>{item.text}</span>
+              {isSelected && <RiCheckLine className='h-4 w-4 text-text-accent' />}
             </div>
             )
           })}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
index b5dafe2058..a94fa09a2c 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
@@ -13,7 +13,7 @@ const VisualEditor: FC<VisualEditorProps> = (props) => {
   useSchemaNodeOperations(props)
 
   return (
-    <div className='h-full rounded-xl p-1 pl-2 bg-background-section-burn overflow-auto'>
+    <div className='h-full overflow-auto rounded-xl bg-background-section-burn p-1 pl-2'>
       <SchemaNode
         name='structured_output'
         schema={schema}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
index a2420d6b63..67cd900cd4 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
@@ -97,8 +97,8 @@ const SchemaNode: FC<SchemaNodeProps> = ({
             >
               {
                 isExpanded
-                  ? <RiArrowDropDownLine className='w-4 h-4' />
-                  : <RiArrowDropRightLine className='w-4 h-4' />
+                  ? <RiArrowDropDownLine className='h-4 w-4' />
+                  : <RiArrowDropRightLine className='h-4 w-4' />
               }
             </button>
           </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 5ebe12eff2..9a9d583af2 100644
--- a/web/app/components/workflow/nodes/llm/components/structure-output.tsx
+++ b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
@@ -35,9 +35,9 @@ const StructureOutput: FC<Props> = ({
   return (
     <div className={cn(className)}>
       <div className='flex justify-between'>
-        <div className='flex leading-[18px] items-center'>
+        <div className='flex items-center leading-[18px]'>
           <div className='code-sm-semibold text-text-secondary'>structured_output</div>
-          <div className='ml-2 system-xs-regular text-text-tertiary'>object</div>
+          <div className='system-xs-regular ml-2 text-text-tertiary'>object</div>
         </div>
         <Button
           size='small'
@@ -45,7 +45,7 @@ const StructureOutput: FC<Props> = ({
           className='flex'
           onClick={showConfigModal}
         >
-          <RiEditLine className='size-3.5 mr-1' />
+          <RiEditLine className='mr-1 size-3.5' />
           <div className='system-xs-medium text-components-button-secondary-text'>{t('app.structOutput.configure')}</div>
         </Button>
       </div>
@@ -53,7 +53,7 @@ const StructureOutput: FC<Props> = ({
         <ShowPanel
           payload={value}
         />) : (
-        <div className='mt-1.5 flex items-center h-10 justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary'>{t('app.structOutput.notConfiguredTip')}</div>
+        <div className='system-xs-regular mt-1.5 flex h-10 items-center justify-center rounded-[10px] bg-background-section text-text-tertiary'>{t('app.structOutput.notConfiguredTip')}</div>
       )}
 
       {showConfig && (
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index f91caf587f..efe679051a 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -293,9 +293,9 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
           <div className='mr-4 flex items-center'>
             {!isModelSupportStructuredOutput && (
               <Tooltip noDecoration popupContent={
-                <div className='w-[232px] px-4 py-3.5 rounded-xl bg-components-tooltip-bg border-[0.5px] border-components-panel-border shadow-lg backdrop-blur-[5px]'>
+                <div 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]'>
                   <div className='title-xs-semi-bold text-text-primary'>{t('app.structOutput.modelNotSupported')}</div>
-                  <div className='mt-1 body-xs-regular text-text-secondary'>{t('app.structOutput.modelNotSupportedTip')}</div>
+                  <div className='body-xs-regular mt-1 text-text-secondary'>{t('app.structOutput.modelNotSupportedTip')}</div>
                 </div>
               }>
                 <div>
@@ -303,7 +303,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
                 </div>
               </Tooltip>
             )}
-            <div className='mr-0.5 system-xs-medium-uppercase text-text-tertiary'>{t('app.structOutput.structured')}</div>
+            <div className='system-xs-medium-uppercase mr-0.5 text-text-tertiary'>{t('app.structOutput.structured')}</div>
             <Tooltip popupContent={
               <div className='max-w-[150px]'>{t('app.structOutput.structuredTip')}</div>
             }>
diff --git a/web/app/dev-preview/page.tsx b/web/app/dev-preview/page.tsx
index 49a8fe747b..61877f7cbf 100644
--- a/web/app/dev-preview/page.tsx
+++ b/web/app/dev-preview/page.tsx
@@ -60,7 +60,7 @@ export default function Page() {
     additionalProperties: false,
   })
 
-  return <div className='flex flex-col p-20 h-full w-full overflow-hidden'>
+  return <div className='flex h-full w-full flex-col overflow-hidden p-20'>
     <button onClick={() => setShow(true)} className='shrink-0'>Open Json Schema Config</button>
     {show && (
       <JsonSchemaConfigModal
@@ -72,7 +72,7 @@ export default function Page() {
         onClose={() => setShow(false)}
       />
     )}
-    <pre className='bg-gray-50 p-4 rounded-lg overflow-auto grow'>
+    <pre className='grow overflow-auto rounded-lg bg-gray-50 p-4'>
       {JSON.stringify(schema, null, 2)}
     </pre>
   </div>