diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index 83582f92..b5aa5ea2 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, watchEffect } from 'vue';
 
 import type { MApp } from '@tmagic/schema';
 
@@ -70,13 +70,24 @@ const root = computed(() => editorService?.get<MApp>('root'));
 
 const pageLength = computed(() => editorService?.get<number>('pageLength') || 0);
 const showSrc = computed(() => uiService?.get<boolean>('showSrc'));
-const columnWidth = ref({
+const columnWidth = ref<Partial<GetColumnWidth>>({
   left: DEFAULT_LEFT_COLUMN_WIDTH,
-  center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
-  right: DEFAULT_RIGHT_COLUMN_WIDTH,
+  center: 0,
+  right: 0,
 });
 uiService?.set('columnWidth', columnWidth.value);
 
+watchEffect(() => {
+  if (pageLength.value <= 0) {
+    columnWidth.value.right = undefined;
+    columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH;
+  } else {
+    columnWidth.value.right = columnWidth.value.right || DEFAULT_RIGHT_COLUMN_WIDTH;
+    columnWidth.value.center =
+      globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH;
+  }
+});
+
 const saveCode = (value: string) => {
   try {
     // eslint-disable-next-line no-eval
diff --git a/packages/editor/src/services/ui.ts b/packages/editor/src/services/ui.ts
index 33b8e0e4..2259f435 100644
--- a/packages/editor/src/services/ui.ts
+++ b/packages/editor/src/services/ui.ts
@@ -37,7 +37,11 @@ const state = reactive<UiState>({
     width: 375,
     height: 817,
   },
-  columnWidth: {},
+  columnWidth: {
+    left: 0,
+    right: 0,
+    center: 0,
+  },
   showGuides: true,
   showRule: true,
   propsPanelSize: 'small',
@@ -47,11 +51,6 @@ const state = reactive<UiState>({
 class Ui extends BaseService {
   constructor() {
     super(['zoom', 'calcZoom']);
-    globalThis.addEventListener('resize', () => {
-      this.setColumnWidth({
-        center: 'auto',
-      });
-    });
   }
 
   public set<T = any>(name: keyof UiState, value: T) {