fix(ui): load panel sizes from storage on initial load (#7265)

userquin · web-flow · commit 6555d61db107 · 2025-04-17T15:51:33.000+02:00
diff --git a/packages/ui/client/components/BrowserIframe.vue b/packages/ui/client/components/BrowserIframe.vue
@@ -59,7 +59,7 @@ const marginLeft = computed(() => {
   <div h="full" flex="~ col">
     <div p="3" h-10 flex="~ gap-2" items-center bg-header border="b base">
       <IconButton
-        v-show="panels.navigation <= 2"
+        v-show="panels.navigation <= 15"
         v-tooltip.bottom="'Show Navigation Panel'"
         title="Show Navigation Panel"
         rotate-180
diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
@@ -8,7 +8,6 @@ import { RecycleScroller } from 'vue-virtual-scroller'
 import { config } from '~/composables/client'
 import { useSearch } from '~/composables/explorer/search'
 
-import { panels } from '~/composables/navigation'
 import { activeFileId } from '~/composables/params'
 
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
@@ -46,12 +45,10 @@ const {
 
 const filterClass = ref<string>('grid-cols-2')
 const filterHeaderClass = ref<string>('grid-col-span-2')
-const testExplorerRef = ref<HTMLInputElement | undefined>()
 
-const { width: windowWidth } = useWindowSize()
-
-watch(() => windowWidth.value * (panels.navigation / 100), (width) => {
-  if (width < 420) {
+const testExplorerRef = ref<HTMLElement | undefined>()
+useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
+  if (contentRect.width < 420) {
     filterClass.value = 'grid-cols-2'
     filterHeaderClass.value = 'grid-col-span-2'
   }
diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts
@@ -19,16 +19,10 @@ export const coverageEnabled = computed(() => {
 export const mainSizes = useLocalStorage<[left: number, right: number]>(
   'vitest-ui_splitpanes-mainSizes',
   [33, 67],
-  {
-    initOnMounted: true,
-  },
 )
 export const detailSizes = useLocalStorage<[left: number, right: number]>(
   'vitest-ui_splitpanes-detailSizes',
   [33, 67],
-  {
-    initOnMounted: true,
-  },
 )
 
 // live sizes of panels in percentage
diff --git a/packages/ui/client/pages/index.vue b/packages/ui/client/pages/index.vue
@@ -40,17 +40,6 @@ const resizingMain = useDebounceFn((event: { size: number }[]) => {
   preventBrowserEvents()
 }, 0)
 
-function resizeMain() {
-  const width = window.innerWidth
-  const panelWidth = Math.min(width / 3, 300)
-  mainSizes.value[0] = (100 * panelWidth) / width
-  mainSizes.value[1] = 100 - mainSizes.value[0]
-  recordMainResize([
-    { size: mainSizes.value[0] },
-    { size: mainSizes.value[1] },
-  ])
-}
-
 function recordMainResize(event: { size: number }[]) {
   panels.navigation = event[0].size
   panels.details.size = event[1].size
@@ -83,7 +72,6 @@ function allowBrowserEvents() {
       class="pt-4px"
       @resized="onMainResized"
       @resize="resizingMain"
-      @ready="resizeMain"
     >
       <Pane :size="mainSizes[0]">
         <Navigation />
