fix(style): some style issues (#5029)

web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx

@@ -53,9 +53,9 @@ const ConfigCredential: FC<Props> = ({
       positionCenter={positionCenter}
       onHide={onHide}
       title={t('tools.createTool.authMethod.title')!}
-      panelClassName='mt-2 !w-[520px]'
+      panelClassName='mt-2 !w-[520px] h-fit'
       maxWidthClassName='!max-w-[520px]'
-      height='calc(100vh - 16px)'
+      height={'fit-content'}
       headerClassName='!border-b-black/5'
       body={
         <div className='pt-2 px-6'>

web/app/components/workflow/nodes/_base/components/field.tsx

@@ -31,7 +31,7 @@ const Filed: FC<Props> = ({
     toggle: toggleFold,
   }] = useBoolean(true)
   return (
-    <div className={cn(className, inline && 'flex justify-between items-center')}>
+    <div className={cn(className, inline && 'flex justify-between items-center w-full')}>
       <div
         onClick={() => supportFold && toggleFold()}
         className={cn('flex justify-between items-center', supportFold && 'cursor-pointer')}>

web/app/components/workflow/nodes/_base/components/info-panel.tsx

@@ -17,7 +17,7 @@ const InfoPanel: FC<Props> = ({
         <div className='leading-4 text-[10px] font-medium text-gray-500 uppercase'>
           {title}
         </div>
-        <div className='leading-4 text-xs font-normal text-gray-700'>
+        <div className='leading-4 text-xs font-normal text-gray-700 break-words'>
           {content}
         </div>
       </div>

web/app/components/workflow/nodes/if-else/components/condition-item.tsx

@@ -145,7 +145,7 @@ const Item: FC<ItemProps> = ({
   return (
     <div className='space-y-2'>
       {isShowLogicalOperator && (
-        <div className='flex items-center select-none'>
+        <div className='flex items-center justify-center select-none'>
           <div className='flex items-center '>
             {Line}
             <div
@@ -168,7 +168,7 @@ const Item: FC<ItemProps> = ({
           nodeId={nodeId}
           readonly={readonly}
           isShowNodeName
-          className='w-[162px]'
+          className='min-w-[162px] flex-grow'
           value={payload.variable_selector}
           onChange={handleVarReferenceChange}
           filterVar={filterVar}
@@ -229,7 +229,7 @@ const Item: FC<ItemProps> = ({
           value={!isValueReadOnly ? payload.value : ''}
           onChange={handleValueChange}
           placeholder={(!readonly && !isValueReadOnly) ? t(`${i18nPrefix}.enterValue`)! : ''}
-          className='w-[80px] h-8 leading-8 px-2.5  rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
+          className='min-w-[80px] flex-grow h-8 leading-8 px-2.5  rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
           type='text'
         />
         {!readonly && (