From 57c33d586917bfc887183ae8da970b56f0276bf9 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Mon, 12 Jan 2026 14:51:48 +0800
Subject: [PATCH] refactor(draggable-plugin, hitl-input, human-input): update
 styles and improve layout for better UI consistency

---
 .../plugins/draggable-plugin/index.tsx        |  4 +-
 .../plugins/hitl-input-block/component-ui.tsx |  2 +-
 .../human-input/components/form-content.tsx   | 90 ++++++++++---------
 .../workflow/nodes/human-input/panel.tsx      |  9 +-
 4 files changed, 59 insertions(+), 46 deletions(-)

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 2a550d86c0..6260cc3e98 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
@@ -61,7 +61,7 @@ export default function DraggableBlockPlugin({
       menuComponent={
         isSupportDrag
           ? (
-              <div ref={menuRef} className={cn(DRAGGABLE_BLOCK_MENU_CLASSNAME, 'absolute right-[24px] top-[16px] cursor-grab opacity-0 will-change-transform active:cursor-move')}>
+              <div ref={menuRef} className={cn(DRAGGABLE_BLOCK_MENU_CLASSNAME, 'absolute right-6 top-4 cursor-grab opacity-0 will-change-transform active:cursor-move')}>
                 <RiDraggable className="size-3.5 text-text-tertiary" />
               </div>
             )
@@ -74,7 +74,7 @@ export default function DraggableBlockPlugin({
           // style={{ width: 500 }} // width not worked here
         >
           <div
-            className="absolute left-0 right-[-40px] top-0 h-[2px] bg-text-accent-secondary"
+            className="absolute -right-10 left-0 top-0 h-[2px] bg-text-accent-secondary"
           >
           </div>
         </div>
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 1426d57451..45c7c97bd4 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
@@ -129,7 +129,7 @@ const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
 
         {/* Actions */}
         {!readonly && (
-          <div className="hidden h-full shrink-0 items-center space-x-1 pr-[24px] group-hover:flex">
+          <div className="hidden h-full shrink-0 items-center space-x-1 pr-8 group-hover:flex">
             <div className="flex h-full items-center" ref={editBtnRef}>
               <ActionButton size="s">
                 <RiEditLine className="size-4 text-text-tertiary" />
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 3a1c4bc25d..627d629e08 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
@@ -105,47 +105,55 @@ const FormContent: FC<FormContentProps> = ({
   }, {})
 
   return (
-    <div 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]')}>
-      <PromptEditor
-        key={editorKey}
-        value={value}
-        onChange={onChange}
-        className={cn('min-h-[80px] ', isExpand && 'h-full')}
-        wrapperClassName={cn('max-h-[300px] overflow-y-auto px-3', isExpand && 'h-0 max-h-full grow')}
-        onFocus={setFocus}
-        onBlur={setBlur}
-        hitlInputBlock={{
-          show: true,
-          formInputs,
-          nodeId,
-          onFormInputsChange,
-          onFormInputItemRename,
-          onFormInputItemRemove,
-          variables: availableVars || [],
-          workflowNodesMap,
-          getVarType,
-          readonly,
-        }}
-        workflowVariableBlock={{
-          show: true,
-          variables: availableVars || [],
-          getVarType: getVarType as any,
-          workflowNodesMap,
-        }}
-        editable={!readonly}
-        shortcutPopups={readonly
-          ? []
-          : [{
-              hotkey: ['mod', '/'],
-              Popup: ({ onClose, onInsert }) => (
-                <AddInputField
-                  nodeId={nodeId}
-                  onSave={handleInsertHITLNode(onInsert!)}
-                  onCancel={onClose}
-                />
-              ),
-            }]}
-      />
+    <div
+      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]',
+        readonly && 'pointer-events-none',
+      )}
+    >
+      <div className={cn('max-h-[300px] 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')}
+          onFocus={setFocus}
+          onBlur={setBlur}
+          hitlInputBlock={{
+            show: true,
+            formInputs,
+            nodeId,
+            onFormInputsChange,
+            onFormInputItemRename,
+            onFormInputItemRemove,
+            variables: availableVars || [],
+            workflowNodesMap,
+            getVarType,
+            readonly,
+          }}
+          workflowVariableBlock={{
+            show: true,
+            variables: availableVars || [],
+            getVarType: getVarType as any,
+            workflowNodesMap,
+          }}
+          editable={!readonly}
+          shortcutPopups={readonly
+            ? []
+            : [{
+                hotkey: ['mod', '/'],
+                Popup: ({ onClose, onInsert }) => (
+                  <AddInputField
+                    nodeId={nodeId}
+                    onSave={handleInsertHITLNode(onInsert!)}
+                    onCancel={onClose}
+                  />
+                ),
+              }]}
+        />
+      </div>
       {isFocus && (
         <div className="system-xs-regular flex h-8 shrink-0 items-center px-3 text-components-input-text-placeholder">
           <Trans
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 81d923fafe..80e38e08bc 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -66,7 +66,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
   const [isExpandFormContent, {
     toggle: toggleExpandFormContent,
   }] = useBoolean(false)
-  const panelWidth = useStore(state => state.panelWidth)
+  const nodePanelWidth = useStore(state => state.nodePanelWidth)
 
   const [isPreview, {
     toggle: togglePreview,
@@ -89,7 +89,12 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
         <Divider className="!my-0 !h-px !bg-divider-subtle" />
       </div>
       {/* form content */}
-      <div className={cn('px-4 py-2', isExpandFormContent && 'fixed bottom-[8px] right-[4px] top-[189px] z-10 flex flex-col bg-components-panel-bg')} style={{ width: isExpandFormContent ? panelWidth : '100%' }}>
+      <div
+        className={cn('px-4 py-2', isExpandFormContent && 'fixed bottom-[8px] right-[4px] top-[244px] z-10 flex flex-col rounded-b-2xl bg-components-panel-bg')}
+        style={{
+          width: isExpandFormContent ? nodePanelWidth : '100%',
+        }}
+      >
         <div className="mb-1 flex shrink-0 items-center justify-between">
           <div className="flex h-6 items-center gap-0.5">
             <div className="system-sm-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}.formContent.title`, { ns: 'workflow' })}</div>