feat(browser): add browser.detailsPanelPosition config option and button

Author: shairez

AGENTS.md

@@ -100,6 +100,7 @@ Vitest is a next-generation testing framework powered by Vite. This is a monorep
 - Main docs in `docs/` directory
 - Built with `pnpm docs:build`
 - Local dev server: `pnpm docs`
+- When adding cli options, run `pnpm -C docs run cli-table` to update the cli-generated.md file
 
 ## Dependencies and Tools
 

docs/.vitepress/config.ts

@@ -644,6 +644,10 @@ export default ({ mode }: { mode: string }) => {
                 text: 'browser.ui',
                 link: '/config/browser/ui',
               },
+              {
+                text: 'browser.detailsPanelPosition',
+                link: '/config/browser/detailspanelposition',
+              },
               {
                 text: 'browser.viewport',
                 link: '/config/browser/viewport',

docs/config/browser.md

@@ -93,6 +93,7 @@ List of available `browser` options:
 - [`browser.screenshotDirectory`](#browser-screenshotdirectory)
 - [`browser.screenshotFailures`](#browser-screenshotfailures)
 - [`browser.provider`](#browser-provider)
+- [`browser.detailsPanelPosition`](#browser-detailspanelposition)
 
 Under the hood, Vitest transforms these instances into separate [test projects](/api/advanced/test-project) sharing a single Vite server for better caching performance.
 
@@ -220,6 +221,14 @@ export interface BrowserProvider {
 
 Should Vitest UI be injected into the page. By default, injects UI iframe during development.
 
+## browser.detailsPanelPosition
+
+- **Type:** `'right' | 'bottom'`
+- **Default:** `'right'`
+- **CLI:** `--browser.detailsPanelPosition=bottom`, `--browser.detailsPanelPosition=right`
+
+Controls the default position of the details panel in the Vitest UI when running browser tests. See [`browser.detailsPanelPosition`](/config/browser/detailspanelposition) for more details.
+
 ## browser.viewport
 
 - **Type:** `{ width, height }`

docs/config/browser/detailspanelposition.md

@@ -0,0 +1,28 @@
+---
+title: browser.detailsPanelPosition | Config
+outline: deep
+---
+
+# browser.detailsPanelPosition
+
+- **Type:** `'right' | 'bottom'`
+- **Default:** `'right'`
+- **CLI:** `--browser.detailsPanelPosition=bottom`, `--browser.detailsPanelPosition=right`
+
+Controls the default position of the details panel in the Vitest UI when running browser tests.
+
+- `'right'` - Shows the details panel on the right side with a horizontal split between the browser viewport and the details panel.
+- `'bottom'` - Shows the details panel at the bottom with a vertical split between the browser viewport and the details panel.
+
+```ts [vitest.config.ts]
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    browser: {
+      enabled: true,
+      detailsPanelPosition: 'bottom', // or 'right'
+    },
+  },
+})
+```

docs/guide/cli-generated.md

@@ -346,6 +346,13 @@ Run every browser test file in isolation. To disable isolation, use `--browser.i
 
 Show Vitest UI when running tests (default: `!process.env.CI`)
 
+### browser.detailsPanelPosition
+
+- **CLI:** `--browser.detailsPanelPosition <position>`
+- **Config:** [browser.detailsPanelPosition](/config/browser/detailspanelposition)
+
+Default position for the details panel in browser mode. Either `right` (horizontal split) or `bottom` (vertical split) (default: `right`)
+
 ### browser.fileParallelism
 
 - **CLI:** `--browser.fileParallelism`

packages/ui/client/components/BrowserIframe.vue

@@ -5,10 +5,10 @@ import { computed } from 'vue'
 import { viewport } from '~/composables/browser'
 import { browserState } from '~/composables/client'
 import {
-  hideRightPanel,
+  detailsPanelVisible,
+  detailsPosition,
   panels,
   showNavigationPanel,
-  showRightPanel,
   updateBrowserPanel,
 } from '~/composables/navigation'
 import IconButton from './IconButton.vue'
@@ -86,19 +86,11 @@ const marginLeft = computed(() => {
       <div class="i-carbon-content-delivery-network" />
       <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>Browser UI</span>
       <IconButton
-        v-show="panels.details.main > 0"
-        v-tooltip.bottom="'Hide Right Panel'"
-        title="Hide Right Panel"
+        v-show="detailsPosition === 'right' && !detailsPanelVisible"
+        v-tooltip.bottom="'Show Details Panel'"
+        title="Show Details Panel"
         icon="i-carbon:side-panel-close"
-        rotate-180
-        @click="hideRightPanel()"
-      />
-      <IconButton
-        v-show="panels.details.main === 0"
-        v-tooltip.bottom="'Show Right Panel'"
-        title="Show Right Panel"
-        icon="i-carbon:side-panel-close"
-        @click="showRightPanel()"
+        @click="detailsPanelVisible = true"
       />
     </div>
     <div p="l3 y2 r2" flex="~ gap-2" items-center bg-header border="b-2 base">

packages/ui/client/components/ClosedDetailsHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import DetailsHeaderButtons from '~/components/DetailsHeaderButtons.vue'
+</script>
+
+<template>
+  <div
+    p="2"
+    flex="~ gap-2"
+    items-center
+    bg-header
+    border="b base"
+  >
+    <div flex-1 />
+    <DetailsHeaderButtons />
+  </div>
+</template>

packages/ui/client/components/Coverage.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import DetailsHeaderButtons from '~/components/DetailsHeaderButtons.vue'
+import { browserState } from '~/composables/client'
+
 defineProps<{
   src: string
 }>()
@@ -9,6 +12,7 @@ defineProps<{
     <div p="3" h-10 flex="~ gap-2" items-center bg-header border="b base">
       <div class="i-carbon:folder-details-reference" />
       <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>Coverage</span>
+      <DetailsHeaderButtons v-if="browserState" />
     </div>
     <div flex-auto py-1 bg-white>
       <iframe id="vitest-ui-coverage" :src="src" />

packages/ui/client/components/Dashboard.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import DetailsHeaderButtons from '~/components/DetailsHeaderButtons.vue'
+import { browserState } from '~/composables/client'
 import TestsFilesContainer from './dashboard/TestsFilesContainer.vue'
 </script>
 
@@ -7,6 +9,7 @@ import TestsFilesContainer from './dashboard/TestsFilesContainer.vue'
     <div p="3" h-10 flex="~ gap-2" items-center bg-header border="b base">
       <div class="i-carbon-dashboard" />
       <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>Dashboard</span>
+      <DetailsHeaderButtons v-if="browserState" />
     </div>
     <div class="scrolls" flex-auto py-1>
       <TestsFilesContainer />

packages/ui/client/components/DetailsHeaderButtons.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import IconButton from '~/components/IconButton.vue'
+import {
+  detailsPanelVisible,
+  detailsPosition,
+  hideDetailsPanel,
+  showDetailsPanel,
+  toggleDetailsPosition,
+} from '~/composables/navigation'
+
+function getDetailsPanelToggleRotation(action: 'show' | 'hide') {
+  // `i-carbon:side-panel-close` is treated as "pointing right" by default.
+  // We rotate it based on where the details panel is positioned.
+  if (detailsPosition.value === 'right') {
+    return action === 'hide' ? 'rotate-180' : ''
+  }
+  // detailsPosition === 'bottom'
+  return action === 'hide' ? '-rotate-90' : 'rotate-90'
+}
+</script>
+
+<template>
+  <IconButton
+    v-tooltip.bottom="`Switch panel position (${detailsPosition === 'bottom' ? 'right' : 'bottom'})`"
+    :title="`Switch panel position (${detailsPosition === 'bottom' ? 'right' : 'bottom'})`"
+    icon="i-carbon-split-screen"
+    :class="{ 'rotate-90': detailsPosition === 'right' }"
+    @click="toggleDetailsPosition"
+  />
+  <IconButton
+    v-if="detailsPanelVisible"
+    v-tooltip.bottom="detailsPosition === 'right' ? 'Hide Right Panel' : 'Hide Bottom Panel'"
+    :title="detailsPosition === 'right' ? 'Hide Right Panel' : 'Hide Bottom Panel'"
+    icon="i-carbon:side-panel-close"
+    :class="getDetailsPanelToggleRotation('hide')"
+    @click="hideDetailsPanel"
+  />
+  <IconButton
+    v-show="!detailsPanelVisible"
+    v-tooltip.bottom="detailsPosition === 'right' ? 'Show Right Panel' : 'Show Bottom Panel'"
+    :title="detailsPosition === 'right' ? 'Show Right Panel' : 'Show Bottom Panel'"
+    icon="i-carbon:side-panel-close"
+    :class="getDetailsPanelToggleRotation('show')"
+    @click="showDetailsPanel"
+  />
+</template>