feat: fix dock styles

Author: antfu

packages/core/src/client/webcomponents/.generated/css.ts

@@ -67,7 +67,7 @@ function togglePositionDropdown() {
         ],
         onClick: () => switchPosition(pos),
       }, [
-        h('div', { class: `${positionIcons[pos]} w-4 h-4` }),
+        h('div', { class: `${positionIcons[pos]} w-4.5 h-4.5` }),
         h('span', positionLabels[pos]),
       ]),
     )),
@@ -190,6 +190,7 @@ const contentClass = computed(() => {
           :context="context"
           :groups="groupedEntries"
           :is-vertical="isVertical"
+          :rotate="false"
           :selected="selectedEntry"
           @select="(e) => context.docks.switchEntry(e?.id)"
         />
@@ -206,14 +207,14 @@ const contentClass = computed(() => {
           title="Switch edge position"
           @click="togglePositionDropdown"
         >
-          <div :class="positionIcons[store.position]" class="w-4 h-4" />
+          <div :class="positionIcons[store.position]" class="w-4.5 h-4.5" />
         </button>
         <button
           class="p1.5 rounded hover:bg-active transition op50 hover:op100"
           title="Switch to float mode"
           @click="switchToFloat"
         >
-          <div class="i-ph-cards-three-duotone w-4 h-4" />
+          <div class="i-ph-cards-three-duotone w-4.5 h-4.5" />
         </button>
       </div>
     </div>

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

@@ -4,12 +4,15 @@ import type { DocksContext } from '@vitejs/devtools-kit/client'
 import type { DevToolsDockEntriesGrouped } from '../state/dock-settings'
 import DockEntries from './DockEntries.vue'
 
-defineProps<{
+withDefaults(defineProps<{
   context: DocksContext
   groups: DevToolsDockEntriesGrouped
   selected: DevToolsDockEntry | null
   isVertical: boolean
-}>()
+  rotate?: boolean
+}>(), {
+  rotate: true,
+})
 
 const emit = defineEmits<{
   (e: 'select', entry: DevToolsDockEntry): void
@@ -19,12 +22,13 @@ const emit = defineEmits<{
 <template>
   <template v-for="[category, entries], idx of groups" :key="category">
     <slot v-if="idx > 0" name="separator" :category="category" :index="idx" :is-vertical="isVertical">
-      <div class="border-base m1 h-20px w-px border-r-1.5" />
+      <div v-if="isVertical" class="border-base m1 w-20px h-px border-b-1.5" />
+      <div v-else class="border-base m1 h-20px w-px border-r-1.5" />
     </slot>
     <DockEntries
       :context="context"
       :entries="entries"
-      :is-vertical="isVertical"
+      :is-vertical="isVertical && rotate"
       :selected="selected"
       @select="(e) => emit('select', e)"
     />

packages/core/src/client/webcomponents/components/DockEntriesWithCategories.vue

@@ -141,6 +141,50 @@ function resetSettings() {
           DevTools Settings
         </h1>
 
+        <section class="border-t border-base pt-6 mb-8">
+          <h2 class="text-lg font-medium mb-4 op75">
+            Appearance
+          </h2>
+
+          <div class="flex flex-col gap-3">
+            <!-- Show iframe address bar toggle -->
+            <label class="flex items-center gap-3 cursor-pointer group">
+              <button
+                class="w-10 h-6 rounded-full transition-colors relative shrink-0"
+                :class="settings.showIframeAddressBar ? 'bg-lime' : 'bg-gray/30'"
+                @click="settingsStore.mutate((s) => { s.showIframeAddressBar = !s.showIframeAddressBar })"
+              >
+                <div
+                  class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
+                  :class="settings.showIframeAddressBar ? 'translate-x-5' : 'translate-x-1'"
+                />
+              </button>
+              <div class="flex flex-col">
+                <span class="text-sm">Show iframe address bar</span>
+                <span class="text-xs op50">Display navigation controls and URL bar for iframe views</span>
+              </div>
+            </label>
+
+            <!-- Close on outside click toggle -->
+            <label class="flex items-center gap-3 cursor-pointer group">
+              <button
+                class="w-10 h-6 rounded-full transition-colors relative shrink-0"
+                :class="settings.closeOnOutsideClick ? 'bg-lime' : 'bg-gray/30'"
+                @click="settingsStore.mutate((s) => { s.closeOnOutsideClick = !s.closeOnOutsideClick })"
+              >
+                <div
+                  class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
+                  :class="settings.closeOnOutsideClick ? 'translate-x-5' : 'translate-x-1'"
+                />
+              </button>
+              <div class="flex flex-col">
+                <span class="text-sm">Close panel on outside click</span>
+                <span class="text-xs op50">Close the DevTools panel when clicking outside of it (embedded mode only)</span>
+              </div>
+            </label>
+          </div>
+        </section>
+
         <section class="mb-8">
           <h2 class="text-lg font-medium mb-4 op75">
             Dock Entries
@@ -261,50 +305,6 @@ function resetSettings() {
           </div>
         </section>
 
-        <section class="border-t border-base pt-6 mb-8">
-          <h2 class="text-lg font-medium mb-4 op75">
-            Appearance
-          </h2>
-
-          <div class="flex flex-col gap-3">
-            <!-- Show iframe address bar toggle -->
-            <label class="flex items-center gap-3 cursor-pointer group">
-              <button
-                class="w-10 h-6 rounded-full transition-colors relative shrink-0"
-                :class="settings.showIframeAddressBar ? 'bg-lime' : 'bg-gray/30'"
-                @click="settingsStore.mutate((s) => { s.showIframeAddressBar = !s.showIframeAddressBar })"
-              >
-                <div
-                  class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
-                  :class="settings.showIframeAddressBar ? 'translate-x-5' : 'translate-x-1'"
-                />
-              </button>
-              <div class="flex flex-col">
-                <span class="text-sm">Show iframe address bar</span>
-                <span class="text-xs op50">Display navigation controls and URL bar for iframe views</span>
-              </div>
-            </label>
-
-            <!-- Close on outside click toggle -->
-            <label class="flex items-center gap-3 cursor-pointer group">
-              <button
-                class="w-10 h-6 rounded-full transition-colors relative shrink-0"
-                :class="settings.closeOnOutsideClick ? 'bg-lime' : 'bg-gray/30'"
-                @click="settingsStore.mutate((s) => { s.closeOnOutsideClick = !s.closeOnOutsideClick })"
-              >
-                <div
-                  class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
-                  :class="settings.closeOnOutsideClick ? 'translate-x-5' : 'translate-x-1'"
-                />
-              </button>
-              <div class="flex flex-col">
-                <span class="text-sm">Close panel on outside click</span>
-                <span class="text-xs op50">Close the DevTools panel when clicking outside of it (embedded mode only)</span>
-              </div>
-            </label>
-          </div>
-        </section>
-
         <section class="border-t border-base pt-6">
           <h2 class="text-lg font-medium mb-4 op75">
             Reset