diff --git a/src/client/pages/component-docs.vue b/src/client/pages/component-docs.vue
index e91cb991..e86c8b15 100644
--- a/src/client/pages/component-docs.vue
+++ b/src/client/pages/component-docs.vue
@@ -70,7 +70,7 @@ watch(keywords, () => {
           </div>
         </div>
       </Pane>
-      <Pane>
+      <Pane min-size="8">
         <div h-full select-none overflow-scroll p-2 class="no-scrollbar">
           <JsonEditorVue
             v-show="list.length" v-model="content" h-full class="json-editor-vue" :class="[
diff --git a/src/client/pages/components.vue b/src/client/pages/components.vue
index 9e69a2dd..b7f38652 100644
--- a/src/client/pages/components.vue
+++ b/src/client/pages/components.vue
@@ -80,7 +80,7 @@ function openInEditor() {
           <ComponentTreeNode v-for="(item) in componentTree" :key="item.id" :data="item" />
         </div>
       </Pane>
-      <Pane>
+      <Pane min-size="8">
         <div v-if="normalizedComponentState.length" border="b base" flex justify-between px-4 py-2>
           <span v-if="selectedComponentName" text-sm text-primary op90>&lt;{{ selectedComponentName }}&gt;</span>
           <p flex>
diff --git a/src/client/pages/pinia.vue b/src/client/pages/pinia.vue
index b98a5fc3..b52b1db0 100644
--- a/src/client/pages/pinia.vue
+++ b/src/client/pages/pinia.vue
@@ -45,7 +45,7 @@ const data = computed(() => {
           </div>
         </div>
       </Pane>
-      <Pane :size="60">
+      <Pane min-size="8" :size="60">
         <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
           <StateFields v-for="(item, index) in data" :id="index" :key="index" :data="item" />
         </div>
diff --git a/src/client/pages/routes.vue b/src/client/pages/routes.vue
index 7fce12cd..91211d18 100644
--- a/src/client/pages/routes.vue
+++ b/src/client/pages/routes.vue
@@ -38,7 +38,7 @@ import { activeRouteRecordIndex, activeRouteRecordMatcherState, routeRecordMatch
           </div>
         </div>
       </Pane>
-      <Pane size="60">
+      <Pane min-size="8" size="60">
         <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
           <StateFields :data="activeRouteRecordMatcherState" />
         </div>
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index d3661c92..f8e3c15e 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -33,12 +33,12 @@ import {
           </div>
         </div>
       </Pane>
-      <Pane border="r base" size="45">
+      <Pane border="r base" min-size="8" size="45">
         <div h-screen select-none overflow-scroll class="no-scrollbar">
           <TimelineEvent :data="activeTimelineEvents" :selected="activeTimelineEventIndex" @update-selected="toggleTimelineEventIndex" />
         </div>
       </Pane>
-      <Pane v-if="timelineEventDetails.value" size="35">
+      <Pane v-if="timelineEventDetails.value" min-size="8" size="35">
         <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
           <StateFields :data="timelineEventDetails" />
         </div>