refactor(env-panel): improve environment variable item layout and styling

- Move padding to inner container for better hover effects
- Add description section with divider when present
- Use group hover for consistent styling

web/app/components/workflow/panel/env-panel/env-item.tsx

@@ -3,7 +3,6 @@ import { capitalize } from 'lodash-es'
 import { RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
-import { useTranslation } from 'react-i18next'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 
@@ -18,37 +17,47 @@ const EnvItem = ({
   onEdit,
   onDelete,
 }: EnvItemProps) => {
-  const { t } = useTranslation()
   const envSecrets = useStore(s => s.envSecrets)
   const [destructive, setDestructive] = useState(false)
 
   return (
     <div className={cn(
-      'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      'radius-md group mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
       destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
     )}>
-      <div className='flex items-center justify-between'>
+      <div className='px-2.5 py-2'>
-        <div className='flex grow items-center gap-1'>
+        <div className='flex items-center justify-between'>
-          <Env className='h-4 w-4 text-util-colors-violet-violet-600' />
+          <div className='flex grow items-center gap-1'>
-          <div className='system-sm-medium text-text-primary'>{env.name}</div>
+            <Env className='h-4 w-4 text-util-colors-violet-violet-600' />
-          <div className='system-xs-medium text-text-tertiary'>{capitalize(env.value_type)}</div>
+            <div className='system-sm-medium text-text-primary'>{env.name}</div>
-          {env.value_type === 'secret' && <RiLock2Line className='h-3 w-3 text-text-tertiary' />}
+            <div className='system-xs-medium text-text-tertiary'>{capitalize(env.value_type)}</div>
-        </div>
+            {env.value_type === 'secret' && <RiLock2Line className='h-3 w-3 text-text-tertiary' />}
-        <div className='flex shrink-0 items-center gap-1 text-text-tertiary'>
-          <div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
-            <RiEditLine className='h-4 w-4' onClick={() => onEdit(env)}/>
           </div>
-          <div
+          <div className='flex shrink-0 items-center gap-1 text-text-tertiary'>
-            className='radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
+            <div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
-            onMouseOver={() => setDestructive(true)}
+              <RiEditLine className='h-4 w-4' onClick={() => onEdit(env)}/>
-            onMouseOut={() => setDestructive(false)}
+            </div>
-          >
+            <div
-            <RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(env)} />
+              className='radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
+              onMouseOver={() => setDestructive(true)}
+              onMouseOut={() => setDestructive(false)}
+            >
+              <RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(env)} />
+            </div>
           </div>
         </div>
+        <div className='system-xs-regular truncate text-text-tertiary'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
       </div>
-      <div className='system-xs-regular truncate text-text-tertiary'>{env.description ? (`${t('workflow.env.modal.description')}: ${env.description}`) : ''}</div>
+      {env.description && (
-      <div className='system-xs-regular truncate text-text-tertiary'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
+        <>
+          <div className={'h-[0.5px] bg-divider-subtle'} />
+          <div className={cn('rounded-bl-[8px] rounded-br-[8px] bg-background-default-subtle px-2.5 py-2 group-hover:bg-transparent',
+            destructive && 'bg-state-destructive-hover hover:bg-state-destructive-hover',
+          )}>
+            <div className='system-xs-regular truncate text-text-tertiary'>{env.description}</div>
+          </div>
+        </>
+      )}
     </div>
   )
 }