From 4dd5580854243926499e8d9b096bb4cf7a2c1021 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 15 Oct 2025 18:16:57 +0800
Subject: [PATCH] chore: preview two cols in panel

---
 web/app/components/app/configuration/config-var/index.tsx     | 3 ++-
 .../app/configuration/config/agent/agent-tools/index.tsx      | 4 ++--
 web/app/components/app/configuration/dataset-config/index.tsx | 3 ++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index 2ac68227e3..ec793d5e26 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -22,6 +22,7 @@ import { useModalContext } from '@/context/modal-context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import type { InputVar } from '@/app/components/workflow/types'
 import { InputVarType } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
 
 export const ADD_EXTERNAL_DATA_TOOL = 'ADD_EXTERNAL_DATA_TOOL'
 
@@ -244,7 +245,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
         </div>
       )}
       {hasVar && (
-        <div className='mt-1 px-3 pb-3'>
+        <div className={cn('grid-col-1 mt-1 grid px-3 pb-3', readonly && 'grid-cols-2 gap-1')}>
           {promptVariables.map(({ key, name, type, required, config, icon, icon_background }, index) => (
             <VarItem
               key={index}
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index b4711ea39a..0031dcdde3 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -37,7 +37,7 @@ type AgentToolWithMoreInfo = AgentTool & { icon: any; collection?: Collection }
 const AgentTools: FC = () => {
   const { t } = useTranslation()
   const [isShowChooseTool, setIsShowChooseTool] = useState(false)
-  const { modelConfig, setModelConfig } = useContext(ConfigContext)
+  const { readonly, modelConfig, setModelConfig } = useContext(ConfigContext)
   const { data: buildInTools } = useAllBuiltInTools()
   const { data: customTools } = useAllCustomTools()
   const { data: workflowTools } = useAllWorkflowTools()
@@ -177,7 +177,7 @@ const AgentTools: FC = () => {
           </div>
         }
       >
-        <div className='grid grid-cols-1 flex-wrap items-center justify-between gap-1 2xl:grid-cols-2'>
+        <div className={cn('grid grid-cols-1 flex-wrap items-center justify-between gap-1 2xl:grid-cols-2', readonly && 'grid-cols-2')}>
           {tools.map((item: AgentTool & { icon: any; collection?: Collection }, index) => (
             <div key={index}
               className={cn(
diff --git a/web/app/components/app/configuration/dataset-config/index.tsx b/web/app/components/app/configuration/dataset-config/index.tsx
index fa1103933c..081d1d5b69 100644
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.tsx
@@ -36,6 +36,7 @@ import {
   LogicalOperator,
   MetadataFilteringVariableType,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
+import cn from '@/utils/classnames'
 
 type Props = {
   readonly?: boolean
@@ -268,7 +269,7 @@ const DatasetConfig: FC<Props> = ({ readonly, hideMetadataFilter }) => {
     >
       {hasData
         ? (
-          <div className='mt-1 flex flex-wrap justify-between px-3 pb-3'>
+          <div className={cn('mt-1 grid grid-cols-1 px-3 pb-3', readonly && 'grid-cols-2 gap-1')}>
             {formattedDataset.map(item => (
               <CardItem
                 key={item.id}