fix(dock): collapse panel size when no content is displayed

Author: SaKaNa-Y

packages/core/src/client/webcomponents/components/dock/DockEdge.vue

@@ -22,6 +22,12 @@ const isVertical = computed(() => store.position === 'left' || store.position ==
 
 const groupedEntries = computed(() => context.docks.groupedEntries)
 const selectedEntry = computed(() => context.docks.selected)
+const hasPanelContent = computed(() => {
+  const entry = selectedEntry.value
+  return context.panel.store.open
+    && !!entry
+    && entry.type !== 'action'
+})
 
 const positions = ['top', 'right', 'bottom', 'left'] as const
 const positionIcons: Record<string, string> = {
@@ -114,33 +120,41 @@ const panelStyle = computed<CSSProperties>(() => {
       style.left = '0'
       style.right = '0'
       style.bottom = '0'
-      style.height = `${store.height}vh`
-      style.minHeight = '150px'
       style.borderRadius = '8px 8px 0 0'
+      if (hasPanelContent.value) {
+        style.height = `${store.height}vh`
+        style.minHeight = '150px'
+      }
       break
     case 'top':
       style.left = '0'
       style.right = '0'
       style.top = '0'
-      style.height = `${store.height}vh`
-      style.minHeight = '150px'
       style.borderRadius = '0 0 8px 8px'
+      if (hasPanelContent.value) {
+        style.height = `${store.height}vh`
+        style.minHeight = '150px'
+      }
       break
     case 'left':
       style.top = '0'
       style.bottom = '0'
       style.left = '0'
-      style.width = `${store.width}vw`
-      style.minWidth = '200px'
       style.borderRadius = '0 8px 8px 0'
+      if (hasPanelContent.value) {
+        style.width = `${store.width}vw`
+        style.minWidth = '200px'
+      }
       break
     case 'right':
       style.top = '0'
       style.bottom = '0'
       style.right = '0'
-      style.width = `${store.width}vw`
-      style.minWidth = '200px'
       style.borderRadius = '8px 0 0 8px'
+      if (hasPanelContent.value) {
+        style.width = `${store.width}vw`
+        style.minWidth = '200px'
+      }
       break
   }
 
@@ -167,7 +181,7 @@ const contentClass = computed(() => {
     :class="`flex ${isVertical ? 'flex-row' : 'flex-col'}`"
     :style="panelStyle"
   >
-    <DockPanelResizer :panel="context.panel" edge-mode />
+    <DockPanelResizer v-if="hasPanelContent" :panel="context.panel" edge-mode />
 
     <!-- Toolbar -->
     <div class="flex items-center shrink-0 select-none py1" :class="toolbarClass">
@@ -214,25 +228,14 @@ const contentClass = computed(() => {
     </div>
 
     <!-- Content -->
-    <div class="relative" :class="contentClass">
-      <template v-if="selectedEntry && selectedEntry.type !== 'action'">
-        <ViewEntry
-          v-if="viewsContainer"
-          :key="selectedEntry.id"
-          :context
-          :entry="selectedEntry"
-          :persisted-doms="persistedDoms"
-        />
-      </template>
-      <div
-        v-else
-        class="absolute inset-0 flex items-center justify-center op40 select-none"
-      >
-        <div class="flex flex-col items-center gap-2">
-          <div class="i-ph-layout-duotone w-8 h-8" />
-          <span class="text-sm">{{ selectedEntry ? 'Action executed' : 'Select a dock entry' }}</span>
-        </div>
-      </div>
+    <div v-show="hasPanelContent" class="relative" :class="contentClass">
+      <ViewEntry
+        v-if="hasPanelContent && viewsContainer && selectedEntry"
+        :key="selectedEntry.id"
+        :context
+        :entry="selectedEntry"
+        :persisted-doms="persistedDoms"
+      />
       <div
         id="vite-devtools-views-container"
         ref="viewsContainer"