From 0dcfac5b84bca253778d4d4b6928db55795247d1 Mon Sep 17 00:00:00 2001
From: NFish <douxc512@gmail.com>
Date: Thu, 12 Mar 2026 17:57:08 +0800
Subject: [PATCH] fix: The HTTP Request node panel supports line break and
 overflow handling for variable values (#33359)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 web/app/components/base/prompt-editor/index.tsx           | 8 ++++++--
 .../nodes/_base/components/input-support-select-var.tsx   | 6 +++---
 .../components/key-value/key-value-edit/input-item.tsx    | 7 +++----
 web/eslint-suppressions.json                              | 3 ---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 6f1d40f6eb..deead5086c 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import type { InitialConfigType } from '@lexical/react/LexicalComposer'
 import type {
   EditorState,
   LexicalCommand,
@@ -153,7 +154,10 @@ const PromptEditor: FC<PromptEditorProps> = ({
   shortcutPopups = [],
 }) => {
   const { eventEmitter } = useEventEmitterContextContext()
-  const initialConfig = {
+  const initialConfig: InitialConfigType = {
+    theme: {
+      paragraph: 'group-[.clamp]:line-clamp-5 group-focus/editable:!line-clamp-none',
+    },
     namespace: 'prompt-editor',
     nodes: [
       CodeNode,
@@ -214,7 +218,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           contentEditable={(
             <ContentEditable
               className={cn(
-                'text-text-secondary outline-none',
+                'group/editable text-text-secondary outline-none group-[.clamp]:max-h-24 group-[.clamp]:overflow-y-auto',
                 compact ? 'text-[13px] leading-5' : 'text-sm leading-6',
                 className,
               )}
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 8880aedf80..9940eb7ed6 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
@@ -61,11 +61,11 @@ const Editor: FC<Props> = ({
   const setShowInputFieldPanel = useStore(s => s.setShowInputFieldPanel)
 
   return (
-    <div className={cn(className, 'relative')}>
+    <div className={cn(className, 'relative min-h-8')}>
       <>
         <PromptEditor
           instanceId={instanceId}
-          className={cn(promptMinHeightClassName, '!leading-[18px]')}
+          className={cn(promptMinHeightClassName, 'leading-[18px]')}
           placeholder={placeholder}
           placeholderClassName={placeholderClassName}
           value={value}
@@ -118,7 +118,7 @@ const Editor: FC<Props> = ({
         {/* to patch Editor not support dynamic change editable status */}
         {readOnly && <div className="absolute inset-0 z-10"></div>}
         {isFocus && (
-          <div className={cn('absolute z-10', insertVarTipToLeft ? 'left-[-12px] top-1.5' : ' right-1 top-[-9px]')}>
+          <div className={cn('absolute z-10', insertVarTipToLeft ? 'left-[-12px] top-1.5' : 'right-1 top-[-9px]')}>
             <Tooltip
               popupContent={`${t('common.insertVarTip', { ns: 'workflow' })}`}
             >
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 7f1e2df2a0..a6914f0eb7 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
@@ -59,12 +59,12 @@ const InputItem: FC<Props> = ({
   }, [onRemove])
 
   return (
-    <div className={cn(className, 'hover:cursor-text hover:bg-state-base-hover', 'relative flex !h-[30px] items-center')}>
+    <div className={cn(className, 'hover:cursor-text hover:bg-state-base-hover', 'relative flex')}>
       {(!readOnly)
         ? (
             <Input
               instanceId={instanceId}
-              className={cn(isFocus ? 'bg-components-input-bg-active' : 'bg-width', 'h-full w-0 grow px-3 py-1')}
+              className={cn(isFocus ? 'bg-components-input-bg-active' : '', 'clamp group w-0 grow px-3 py-1')}
               value={value}
               onChange={onChange}
               readOnly={readOnly}
@@ -73,7 +73,6 @@ const InputItem: FC<Props> = ({
               onFocusChange={setIsFocus}
               placeholder={t('nodes.http.insertVarPlaceholder', { ns: 'workflow' })!}
               placeholderClassName="!leading-[21px]"
-              promptMinHeightClassName="h-full"
               insertVarTipToLeft={insertVarTipToLeft}
             />
           )
@@ -85,7 +84,7 @@ const InputItem: FC<Props> = ({
               {hasValue && (
                 <Input
                   instanceId={instanceId}
-                  className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'h-full w-0 grow rounded-lg border px-3 py-[6px]')}
+                  className={cn(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]')}
                   value={value}
                   onChange={onChange}
                   readOnly={readOnly}
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 58da7a1857..82fe7c89b4 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -6853,9 +6853,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }