From 0a320c63a00be0ebcfb8b92efe8ee89ff5836671 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= <hjlarry@163.com>
Date: Wed, 11 Mar 2026 13:55:17 +0800
Subject: [PATCH] fix: vertically center key-value table headers in HTTP and
 Webhook  (#33260)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../components/key-value/key-value-edit/index.tsx   |  8 ++++----
 .../trigger-webhook/components/generic-table.tsx    | 13 ++++++++-----
 web/eslint-suppressions.json                        |  6 ------
 3 files changed, 12 insertions(+), 15 deletions(-)

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 b1112a9b5b..55ccee4068 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
@@ -58,10 +58,10 @@ const KeyValueList: FC<Props> = ({
 
   return (
     <div className="overflow-hidden rounded-lg border border-divider-regular">
-      <div className={cn('system-xs-medium-uppercase flex h-7 items-center leading-7 text-text-tertiary')}>
-        <div className={cn('h-full border-r border-divider-regular pl-3', isSupportFile ? 'w-[140px]' : 'w-1/2')}>{t(`${i18nPrefix}.key`, { ns: 'workflow' })}</div>
-        {isSupportFile && <div className="h-full w-[70px] shrink-0 border-r border-divider-regular pl-3">{t(`${i18nPrefix}.type`, { ns: 'workflow' })}</div>}
-        <div className={cn('h-full items-center justify-between pl-3 pr-1', isSupportFile ? 'grow' : 'w-1/2')}>{t(`${i18nPrefix}.value`, { ns: 'workflow' })}</div>
+      <div className={cn('flex h-7 items-center leading-7 text-text-tertiary system-xs-medium-uppercase')}>
+        <div className={cn('flex h-full items-center border-r border-divider-regular pl-3', isSupportFile ? 'w-[140px]' : '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">{t(`${i18nPrefix}.type`, { ns: 'workflow' })}</div>}
+        <div className={cn('flex h-full items-center justify-between pl-3 pr-1', isSupportFile ? 'grow' : 'w-1/2')}>{t(`${i18nPrefix}.value`, { ns: 'workflow' })}</div>
       </div>
       {
         list.map((item, index) => (
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 d85b622e10..0d31428bd2 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
@@ -96,7 +96,10 @@ const GenericTable: FC<GenericTableProps> = ({
     })
 
     // If the last configured row has content, append a trailing empty row
-    const lastHasContent = !isEmptyRow(data[data.length - 1])
+    const lastRow = data.at(-1)
+    if (!lastRow)
+      return rows
+    const lastHasContent = !isEmptyRow(lastRow)
     if (lastHasContent)
       rows.push({ row: { ...emptyRowData }, dataIndex: null, isVirtual: true })
 
@@ -163,7 +166,7 @@ const GenericTable: FC<GenericTableProps> = ({
               // Ghost/inline style: looks like plain text until focus/hover
               'h-6 rounded-none border-0 bg-transparent px-0 py-0 shadow-none',
               'hover:border-transparent hover:bg-transparent focus:border-transparent focus:bg-transparent',
-              'system-sm-regular text-text-secondary placeholder:text-text-quaternary',
+              'text-text-secondary system-sm-regular placeholder:text-text-quaternary',
             )}
           />
         )
@@ -212,12 +215,12 @@ const GenericTable: FC<GenericTableProps> = ({
     return (
       <div className="rounded-lg border border-divider-regular">
         {showHeader && (
-          <div className="system-xs-medium-uppercase flex h-7 items-center leading-7 text-text-tertiary">
+          <div className="flex h-7 items-center leading-7 text-text-tertiary system-xs-medium-uppercase">
             {columns.map((column, index) => (
               <div
                 key={column.key}
                 className={cn(
-                  'h-full pl-3',
+                  'flex h-full items-center pl-3',
                   column.width && column.width.startsWith('w-') ? 'shrink-0' : 'flex-1',
                   column.width,
                   // Add right border except for last column
@@ -285,7 +288,7 @@ const GenericTable: FC<GenericTableProps> = ({
   return (
     <div className={className}>
       <div className="mb-3 flex items-center justify-between">
-        <h4 className="system-sm-semibold-uppercase text-text-secondary">{title}</h4>
+        <h4 className="text-text-secondary system-sm-semibold-uppercase">{title}</h4>
       </div>
 
       {showPlaceholder
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index abd403a6f6..40c8a43205 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -7490,9 +7490,6 @@
     }
   },
   "app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -8522,9 +8519,6 @@
   "app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/workflow/nodes/trigger-webhook/default.ts": {