From 872a066358e50462ee64680bf7e21d4032f07f3e Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Fri, 14 Aug 2026 05:32:41 +0000
Subject: [PATCH] fix(hub-ui): observe dock sidebar size in the popup's own
 realm

Port of vitejs/devtools#521. In popup dock mode the sidebar's ResizeObserver
was bound implicitly to the host window via useElementBounding, so resizing
the popup didn't update the group rail (collapsing into the overflow "more"
icon, or restoring hidden icons) until the mouse moved back into the host
page. Bind the observer through the sidebar element's own document/window
instead.

Co-authored-by: SaKaNa-Y <185575200+SaKaNa-Y@users.noreply.github.com>
---
 .../components/dock/DockGroupSidebar.vue      | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
index 0a842a68..fae3f7ff 100644
--- a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
+++ b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { DevframeDockEntry, DevframeViewGroup } from '@devframes/hub'
 import type { DocksContext } from '@devframes/hub/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,29 @@ const memberGroups = computed(() => getGroupMembersGrouped(
 ))
 
 const sidebar = useTemplateRef<HTMLDivElement>('sidebar')
-const { height: frameHeight } = useElementBounding(sidebar)
+
+// Bind the ResizeObserver via the sidebar element's own document/window
+// rather than a global one: in popup dock mode the sidebar renders inside
+// the popup's own realm, and `useElementBounding`'s window-level resize
+// listener only fires for the host page, so the rail wouldn't collapse or
+// restore until the mouse moved back into the host page.
+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))