diff --git a/packages/core/src/client/webcomponents/components/dock/DockGroupSidebar.vue b/packages/core/src/client/webcomponents/components/dock/DockGroupSidebar.vue
index 26d4688e..47788046 100644
--- a/packages/core/src/client/webcomponents/components/dock/DockGroupSidebar.vue
+++ b/packages/core/src/client/webcomponents/components/dock/DockGroupSidebar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry, DevToolsViewGroup } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
-import { useElementBounding, watchDebounced } from '@vueuse/core'
-import { computed, h, ref, useTemplateRef } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import { computed, h, ref, useTemplateRef, watch } from 'vue'
 import { deriveSidebarCapacity, docksSplitGroupsWithCapacity, getGroupMembersGrouped } from '../../state/dock-settings'
 import { sharedStateToRef } from '../../state/docks'
 import { setDocksSidebarOverflowPanel, setFloatingTooltip, useDocksSidebarOverflowPanel } from '../../state/floating-tooltip'
@@ -36,7 +36,24 @@ const memberGroups = computed(() => getGroupMembersGrouped(
 ))
 
 const sidebar = useTemplateRef<HTMLDivElement>('sidebar')
-const { height: frameHeight } = useElementBounding(sidebar)
+
+const frameHeight = ref(0)
+watch(sidebar, (el, _prev, onCleanup) => {
+  if (!el) {
+    frameHeight.value = 0
+    return
+  }
+  const ResizeObserverCtor = el.ownerDocument?.defaultView?.ResizeObserver ?? globalThis.ResizeObserver
+  if (!ResizeObserverCtor)
+    return
+  const observer = new ResizeObserverCtor(([entry]) => {
+    if (!entry)
+      return
+    frameHeight.value = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height
+  })
+  observer.observe(el)
+  onCleanup(() => observer.disconnect())
+}, { immediate: true, flush: 'post' })
 
 const totalItems = computed(() => memberGroups.value.reduce((acc, [, items]) => acc + items.length, 0))