diff --git a/packages/nc-gui/components/nc/Switch.vue b/packages/nc-gui/components/nc/Switch.vue
index a2ba8e9fd0..31955bd799 100644
--- a/packages/nc-gui/components/nc/Switch.vue
+++ b/packages/nc-gui/components/nc/Switch.vue
@@ -11,7 +11,8 @@ const onChange = (e: boolean) => {
 </script>
 
 <template>
-  <a-switch v-model:checked="checked" :disabled="props.disabled" class="nc-switch" size="small" @change="onChange">
+  <a-switch v-model:checked="checked" :disabled="props.disabled" class="nc-switch" size="small" @change="onChange"> </a-switch>
+  <span class="cursor-pointer pl-2" @click="checked = !checked">
     <slot />
-  </a-switch>
+  </span>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue b/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
index 620b81a51e..0c506fb002 100644
--- a/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
@@ -28,9 +28,10 @@ watch(richMode, () => {
 <template>
   <div class="flex flex-col mt-2 gap-2">
     <a-form-item>
-      <div class="flex flex-row space-x-2 items-center">
-        <NcSwitch v-model:checked="richMode" :name="$t('labels.enableRichText')" size="small" />
-        <div class="text-xs">{{ $t('labels.enableRichText') }}</div>
+      <div class="flex flex-row items-center">
+        <NcSwitch v-model:checked="richMode" :name="$t('labels.enableRichText')" size="small">
+          <div class="text-xs">{{ $t('labels.enableRichText') }}</div>
+        </NcSwitch>
       </div>
     </a-form-item>
   </div>