fix(nc-gui): extension panel resize issue

packages/nc-gui/components/extensions/Pane.vue

@@ -17,8 +17,6 @@ const {
 
 const { $e } = useNuxtApp()
 
-const isReady = ref(false)
-
 const searchExtensionRef = ref<HTMLInputElement>()
 
 const extensionHeaderRef = ref<HTMLDivElement>()
@@ -27,6 +25,13 @@ const searchQuery = ref<string>('')
 
 const showSearchBox = ref(false)
 
+const panelSize = computed(() => {
+  if (isPanelExpanded.value) {
+    return extensionPanelSize.value
+  }
+  return 0
+})
+
 const { width } = useElementSize(extensionHeaderRef)
 
 const isOpenSearchBox = computed(() => {
@@ -54,14 +59,6 @@ const toggleMarket = () => {
   isMarketVisible.value = !isMarketVisible.value
 }
 
-const normalizePaneMaxWidth = computed(() => {
-  if (isReady.value) {
-    return 60
-  } else {
-    return extensionPanelSize.value
-  }
-})
-
 const onMove = async (_event: { moved: { newIndex: number; oldIndex: number; element: ExtensionType } }) => {
   let {
     moved: { newIndex = 0, oldIndex = 0, element },
@@ -100,20 +97,6 @@ const onMove = async (_event: { moved: { newIndex: number; oldIndex: number; ele
   $e('a:extension:reorder')
 }
 
-defineExpose({
-  onReady: () => {
-    isReady.value = true
-  },
-})
-
-watch(isPanelExpanded, (newValue) => {
-  if (newValue && !isReady.value) {
-    setTimeout(() => {
-      isReady.value = true
-    }, 300)
-  }
-})
-
 onClickOutside(searchExtensionRef, () => {
   if (searchQuery.value) {
     return
@@ -130,17 +113,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <Pane
+  <Pane :size="panelSize" max-size="60%" class="nc-extension-pane">
-    v-if="isPanelExpanded"
+    <Transition name="layout" :duration="150">
-    :size="extensionPanelSize"
+      <div v-if="isPanelExpanded" class="flex flex-col">
-    min-size="10%"
-    max-size="60%"
-    class="nc-extension-pane"
-    :style="{
-      minWidth: isReady ? '300px' : `${normalizePaneMaxWidth}%`,
-      maxWidth: `${normalizePaneMaxWidth}%`,
-    }"
-  >
         <div
           ref="extensionHeaderRef"
           class="h-[var(--toolbar-height)] flex items-center gap-3 px-4 py-2 border-b-1 border-gray-200 bg-white"
@@ -249,6 +224,8 @@ onMounted(() => {
           :extension-id="detailsExtensionId"
           :from="detailsFrom"
         />
+      </div>
+    </Transition>
   </Pane>
 </template>
 

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -80,8 +80,6 @@ useProvideSmartsheetLtarHelpers(meta)
 
 const grid = ref()
 
-const extensionPaneRef = ref()
-
 const onDrop = async (event: DragEvent) => {
   event.preventDefault()
   try {
@@ -161,36 +159,40 @@ watch([activeViewTitleOrId, activeTableId], () => {
   handleSidebarOpenOnMobileForNonViews()
 })
 
+const { leftSidebarWidth, windowSize } = storeToRefs(useSidebarStore())
+
 const { isPanelExpanded, extensionPanelSize } = useExtensions()
 
+const contentSize = computed(() => {
+  if (isPanelExpanded.value && extensionPanelSize.value) {
+    return 100 - extensionPanelSize.value
+  } else {
+    return 100
+  }
+})
+
+const contentMaxSize = computed(() => {
+  if (!isPanelExpanded.value) {
+    return 100
+  } else {
+    return ((windowSize.value - leftSidebarWidth.value - 300) / (windowSize.value - leftSidebarWidth.value)) * 100
+  }
+})
+
 const onResize = (sizes: { min: number; max: number; size: number }[]) => {
   if (sizes.length === 2) {
     if (!sizes[1].size) return
     extensionPanelSize.value = sizes[1].size
   }
 }
-
-const onReady = () => {
-  if (isPanelExpanded.value && extensionPaneRef.value) {
-    // wait until extension pane animation complete
-    setTimeout(() => {
-      extensionPaneRef.value?.onReady()
-    }, 300)
-  }
-}
 </script>
 
 <template>
   <div class="nc-container flex flex-col h-full" @drop="onDrop" @dragover.prevent>
     <LazySmartsheetTopbar />
     <div style="height: calc(100% - var(--topbar-height))">
-      <Splitpanes
+      <Splitpanes v-if="openedViewsTab === 'view'" class="nc-extensions-content-resizable-wrapper" @resized="onResize">
-        v-if="openedViewsTab === 'view'"
+        <Pane class="flex flex-col h-full min-w-0" :max-size="contentMaxSize" :size="contentSize">
-        class="nc-extensions-content-resizable-wrapper"
-        @ready="onReady"
-        @resized="onResize"
-      >
-        <Pane class="flex flex-col h-full min-w-0" :size="isPanelExpanded && extensionPanelSize ? 100 - extensionPanelSize : 100">
           <LazySmartsheetToolbar v-if="!isForm" />
           <div
             :style="{ height: isForm || isMobileMode ? '100%' : 'calc(100% - var(--toolbar-height))' }"
@@ -217,7 +219,7 @@ const onReady = () => {
             </Transition>
           </div>
         </Pane>
-        <ExtensionsPane ref="extensionPaneRef" />
+        <ExtensionsPane />
       </Splitpanes>
       <SmartsheetDetails v-else />
     </div>