fix Invalid layout total size

src/composables/useAuthenticatedLayoutResizable.js

@@ -63,6 +63,13 @@ export function useAuthenticatedLayoutResizable() {
     );
     const asideMaxSize = computed(() => pxToPercent(asideMaxPx, undefined, 0));
 
+    const mainDefaultSize = computed(
+        () =>
+            100 -
+            navDefaultSize.value -
+            (isSideBarTabShow.value ? asideDefaultSize.value : 0)
+    );
+
     const handleLayout = (sizes) => {
         if (!Array.isArray(sizes) || sizes.length < 2) {
             return;
@@ -129,6 +136,7 @@ export function useAuthenticatedLayoutResizable() {
         navMaxSize,
         asideDefaultSize,
         asideMaxSize,
+        mainDefaultSize,
         handleLayout,
         isAsideCollapsed,
         isNavCollapsed,

src/views/Layout/AuthenticatedLayout.vue

@@ -6,16 +6,11 @@
             class="group/main-layout flex-1 h-full min-w-0"
             @layout="handleLayout">
             <template #default="{ layout }">
-                <ResizablePanel
+                <ResizablePanel ref="navPanelRef" :min-size="navMinSize" :max-size="navMaxSize" :order="1">
-                    ref="navPanelRef"
-                    :default-size="navDefaultSize"
-                    :min-size="navMinSize"
-                    :max-size="navMaxSize"
-                    :order="1">
                     <NavMenu></NavMenu>
                 </ResizablePanel>
                 <ResizableHandle :disabled="isNavCollapsed" class="opacity-0"></ResizableHandle>
-                <ResizablePanel :order="2">
+                <ResizablePanel :default-size="mainDefaultSize" :order="2">
                     <RouterView v-slot="{ Component }">
                         <KeepAlive include="Feed,GameLog,PlayerList">
                             <component :is="Component" />
@@ -120,6 +115,7 @@
         navMaxSize,
         asideDefaultSize,
         asideMaxSize,
+        mainDefaultSize,
         handleLayout,
         isAsideCollapsed,
         isNavCollapsed,