diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
index d0297cfd74..8758490bee 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
@@ -64,55 +64,56 @@ const ClassList: FC<Props> = ({
   const handleSideWidth = 3
   // Todo Remove; edit topic name
   return (
-    <ReactSortable
-      list={list.map(item => ({ ...item }))}
-      setList={handleSortTopic}
-      handle='.handle'
-      ghostClass='bg-components-panel-bg'
-      animation={150}
-      disabled={readonly}
-      className='space-y-2'
-    >
-      {
-        list.map((item, index) => {
-          const canDrag = (() => {
-            if (readonly)
-              return false
+    <>
+      <ReactSortable
+        list={list.map(item => ({ ...item }))}
+        setList={handleSortTopic}
+        handle='.handle'
+        ghostClass='bg-components-panel-bg'
+        animation={150}
+        disabled={readonly}
+        className='space-y-2'
+      >
+        {
+          list.map((item, index) => {
+            const canDrag = (() => {
+              if (readonly)
+                return false
 
-            return topicCount >= 2
-          })()
-          return (
-            <div key={item.id}
-                className={cn(
-                  'group relative rounded-[10px] bg-components-panel-bg',
-                  `-ml-${handleSideWidth} min-h-[40px] px-0 py-0`,
-            )}>
-              <div >
-                <Item
-                  className={cn(canDrag && 'handle')}
-                  headerClassName={cn(canDrag && 'cursor-grab')}
-                  nodeId={nodeId}
-                  key={list[index].id}
-                  payload={item}
-                  onChange={handleClassChange(index)}
-                  onRemove={handleRemoveClass(index)}
-                  index={index + 1}
-                  readonly={readonly}
-                  filterVar={filterVar}
-                />
+              return topicCount >= 2
+            })()
+            return (
+              <div key={item.id}
+                  className={cn(
+                    'group relative rounded-[10px] bg-components-panel-bg',
+                    `-ml-${handleSideWidth} min-h-[40px] px-0 py-0`,
+              )}>
+                <div >
+                  <Item
+                    className={cn(canDrag && 'handle')}
+                    headerClassName={cn(canDrag && 'cursor-grab')}
+                    nodeId={nodeId}
+                    key={list[index].id}
+                    payload={item}
+                    onChange={handleClassChange(index)}
+                    onRemove={handleRemoveClass(index)}
+                    index={index + 1}
+                    readonly={readonly}
+                    filterVar={filterVar}
+                  />
+                </div>
               </div>
-            </div>
-          )
-        })
-      }
+            )
+          })
+        }
+      </ReactSortable>
       {!readonly && (
         <AddButton
           onClick={handleAddClass}
           text={t(`${i18nPrefix}.addClass`)}
         />
       )}
-
-    </ReactSortable>
+    </>
   )
 }
 export default React.memo(ClassList)