diff --git a/.changeset/adapt-the-player-pane-to-the-window.md b/.changeset/adapt-the-player-pane-to-the-window.md
new file mode 100644
index 00000000..7143f433
--- /dev/null
+++ b/.changeset/adapt-the-player-pane-to-the-window.md
@@ -0,0 +1,11 @@
+---
+"@wdio/devtools-app": patch
+---
+
+Adapt the player pane to the window it is actually in. The pane's height came from a pixel number resolved once, at construction, from whatever window happened to be open then, and nothing recomputed it: measured at 124px in a 1280x720 window and still 124px at 2560x1440, so a trace rendered into a 13px-wide box on a 2560px screen. Not mobile-specific — wrong for every trace, just least visible on a desktop one.
+
+Three separate things froze it, and all three had to go. `MIN_WORKBENCH_HEIGHT` was `Math.min(300, window.innerHeight * 0.3)` evaluated at module import, so it took the window open at page load and — being the pane's own `minPosition` — pinned the pane there for the life of the page; loaded in a 413px-tall window it is exactly the 124px measured. `DragController.initialPosition` took a number rather than the getter its bounds already accepted, so a window-derived default could never follow the window. And each controller registered its resize handling by assigning `window.onresize`, which is a single slot: with five controllers on the page only the last one constructed ever adjusted, and it clobbered anything else on that slot.
+
+A height the user dragged still wins. It is stored, and a resize only re-clamps it — so it survives a window that still has room for it and is pulled back inside one that no longer does, rather than leaving the drag handle off-screen.
+
+The player component also re-fitted only on `resize` and `window-drag`, which meant it depended on whoever changed the layout remembering to announce it — and the dock divider, the sidebar collapsing and browser zoom announce nothing. It now watches its own box with a `ResizeObserver`, which covers all of them.
diff --git a/packages/app/src/components/browser/snapshot-styles.ts b/packages/app/src/components/browser/snapshot-styles.ts
index 9e74e324..c4069abc 100644
--- a/packages/app/src/components/browser/snapshot-styles.ts
+++ b/packages/app/src/components/browser/snapshot-styles.ts
@@ -16,6 +16,15 @@ export const snapshotStyles = css`
     background: ${unsafeCSS(BROWSER_BACKDROP_GRADIENT)};
   }
 
+  /* A device frame owns its column, which already provides the backdrop and the
+     gap, so the host's own 1.25rem is 40px of height and width spent on
+     nothing. It is spent OUTSIDE the box deviceFrameSize measures, so the frame
+     came out 40px short on each axis — and because a portrait frame's width
+     follows its height, the lost height cost width a second time. */
+  :host([device-frame]) {
+    padding: 0.25rem !important;
+  }
+
   section {
     box-sizing: border-box;
     width: calc(100% - 0px); /* host padding already applied */
diff --git a/packages/app/src/components/browser/snapshot.ts b/packages/app/src/components/browser/snapshot.ts
index 93d5a399..0efd9d99 100644
--- a/packages/app/src/components/browser/snapshot.ts
+++ b/packages/app/src/components/browser/snapshot.ts
@@ -135,15 +135,21 @@ export class DevtoolsBrowser extends Element {
   @query('section')
   section?: HTMLElement
 
+  /**
+   * Watches the player's OWN box rather than the window. Re-fitting used to
+   * hang off `resize` and `window-drag`, so it depended on whoever changed the
+   * layout announcing it — and the dock divider, the sidebar collapsing and
+   * browser zoom announce nothing. Every one of those moves this box.
+   */
+  #boxObserver?: ResizeObserver
+
   /** The window events the player handles while connected, as one table so its
    *  registration and its teardown cannot drift. Every handler is a per-instance
    *  arrow field, so the reference removeEventListener gets is the one that was
    *  added — a bound method would produce a new function per call and never
-   *  detach. */
+   *  detach. Sizing is not among them: that is the ResizeObserver's job. */
   #windowListeners(): ReadonlyArray<readonly [string, EventListener]> {
     return [
-      ['resize', this.#handleResize],
-      ['window-drag', this.#handleResize],
       ['app-mutation-highlight', this.#highlightMutation],
       ['app-mutation-select', this.#handleMutationSelect],
       ['a11y-highlight', this.#highlightBySelector],
@@ -157,6 +163,11 @@ export class DevtoolsBrowser extends Element {
     for (const [type, handler] of this.#windowListeners()) {
       window.addEventListener(type, handler)
     }
+    // Safe against the observer loop: this watches the host, and the sizing it
+    // triggers writes to a descendant. The host is laid out by its parent
+    // (width/height 100%), so nothing it writes can feed back into this box.
+    this.#boxObserver = new ResizeObserver(() => this.#handleResize())
+    this.#boxObserver.observe(this)
     await this.updateComplete
   }
 
@@ -169,6 +180,8 @@ export class DevtoolsBrowser extends Element {
     for (const [type, handler] of this.#windowListeners()) {
       window.removeEventListener(type, handler)
     }
+    this.#boxObserver?.disconnect()
+    this.#boxObserver = undefined
   }
 
   #captureShape?: { screenshot: string; size: ImageSize | null }
@@ -470,6 +483,10 @@ export class DevtoolsBrowser extends Element {
 
   // View-mode flips swap the iframe with <img>/<video> and don't fire resize.
   updated() {
+    // Drives the host-padding rule above. An attribute rather than a style:
+    // the padding is `!important` in the component's own sheet, so only
+    // another rule in that sheet can win.
+    this.toggleAttribute('device-frame', Boolean(this.metadata?.device))
     this.#setIframeSize()
   }
 
diff --git a/packages/app/src/components/workbench.ts b/packages/app/src/components/workbench.ts
index 2046322f..acece8fc 100644
--- a/packages/app/src/components/workbench.ts
+++ b/packages/app/src/components/workbench.ts
@@ -1,5 +1,5 @@
 import { Element } from '@core/element'
-import { html, css, nothing } from 'lit'
+import { html, css, nothing, type PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
@@ -45,8 +45,11 @@ import './browser/trace-player-controls.js'
 import {
   BROWSER_BACKDROP_GRADIENT,
   HEADER_HEIGHT,
-  MIN_WORKBENCH_HEIGHT,
+  minWorkbenchHeight,
   MIN_METATAB_WIDTH,
+  DEVICE_PANE_MIN_WIDTH,
+  DEVICE_PANE_CHROME_ALLOWANCE,
+  DEVICE_PANE_MAX_WIDTH_RATIO,
   ACTIONS_DEFAULT_WIDTH,
   BROWSER_HEIGHT_RATIO,
   PLAYER_CONTROLS_HEIGHT,
@@ -119,14 +122,23 @@ export class DevtoolsWorkbench extends Element {
         background-color: var(--vscode-editor-background);
         position: relative;
       }
+
+      /* The dock must not be sized by its own content. As a flex row item its
+         floor is min-content unless this is set, so switching to a wide tab
+         (the Network table) grew it and shoved the device column sideways —
+         only the drag handle may move that boundary. Scoped here rather than as
+         a utility class so it holds wherever the shadow root is styled from. */
+      section[data-device-row] > wdio-devtools-tabs {
+        min-width: 0;
+      }
     `
   ]
 
   #dragVertical = new DragController(this, {
     localStorageKey: 'toolbarHeight',
-    minPosition: MIN_WORKBENCH_HEIGHT,
-    maxPosition: window.innerHeight * 0.7,
-    initialPosition: window.innerHeight * BROWSER_HEIGHT_RATIO,
+    minPosition: minWorkbenchHeight,
+    maxPosition: () => window.innerHeight * 0.7,
+    initialPosition: () => window.innerHeight * BROWSER_HEIGHT_RATIO,
     getContainerEl: () => this.#getVerticalWindow(),
     direction: Direction.vertical
   })
@@ -157,18 +169,115 @@ export class DevtoolsWorkbench extends Element {
   // The live max bound keeps the handle (and pane) inside the current budget.
   #dragVerticalPlayer = new DragController(this, {
     localStorageKey: 'playerPaneHeight',
-    minPosition: MIN_WORKBENCH_HEIGHT,
+    minPosition: minWorkbenchHeight,
     maxPosition: () => this.#playerPaneBudget(),
-    initialPosition: Math.max(
-      MIN_WORKBENCH_HEIGHT,
+    initialPosition: () =>
+      Math.max(
+        minWorkbenchHeight(),
+        window.innerHeight -
+          HEADER_HEIGHT -
+          PLAYER_CONTROLS_HEIGHT -
+          TRACE_TIMELINE_DEFAULT_HEIGHT -
+          PLAYER_DOCK_DEFAULT_HEIGHT
+      ),
+    getContainerEl: () => this.#getVerticalWindow(),
+    direction: Direction.vertical
+  })
+
+  /**
+   * A capture off a device gets a column of its own down the right-hand side,
+   * with the dock beside it rather than under it. A portrait frame in a wide
+   * row is a narrow strip with the rest backdrop; the full column height is
+   * the largest such frame the window can hold.
+   *
+   * Keyed on the trace stating a device, in live and player mode alike. A
+   * DESKTOP capture keeps the stacked layout — this is not a better layout in
+   * general, only for a capture that is taller than it is wide.
+   *
+   * Deliberately a wider gate than the device CHROME uses (which also requires
+   * no DOM and no url): a mobile browser session is still a portrait viewport
+   * that wants the tall column, it just keeps its address bar inside it.
+   */
+  get #deviceLayout(): boolean {
+    if (!this.metadata?.device) {
+      return false
+    }
+    // A landscape capture — a device rotated mid-run, or an app that only runs
+    // that way — is served better by the stacked layout, exactly as a desktop
+    // one is: a wide frame in a tall column wastes the column and would claim
+    // up to 60% of the window from the dock. An UNKNOWN shape is treated as
+    // portrait, which is what a device reports unless it was rotated, and is
+    // also all a zip recorded before the viewport was captured can offer.
+    const viewport = this.metadata.viewport
+    const landscape = Boolean(
+      viewport?.width && viewport?.height && viewport.width > viewport.height
+    )
+    return !landscape
+  }
+
+  /**
+   * Height the device column has to work with: what the fixed rows leave of the
+   * window. Deliberately computed, not measured — measuring the row fed this
+   * its own half-laid-out result (40px on the first pass, 68 on the next),
+   * because the row is not final at the moment its child's width is decided.
+   * The arithmetic is exact whenever the workbench fills the window, which is
+   * every case but an embedded panel.
+   */
+  #deviceColumnHeight(): number {
+    return Math.max(
+      minWorkbenchHeight(),
       window.innerHeight -
         HEADER_HEIGHT -
-        PLAYER_CONTROLS_HEIGHT -
-        TRACE_TIMELINE_DEFAULT_HEIGHT -
-        PLAYER_DOCK_DEFAULT_HEIGHT
-    ),
+        (this.playerMode
+          ? PLAYER_CONTROLS_HEIGHT + this.#timelinePaneHeight()
+          : 0)
+    )
+  }
+
+  /**
+   * The width at which the capture fills the column's height — the column's own
+   * height times the capture's shape. It is both the default AND the maximum,
+   * because a portrait capture is bound by height: past this the frame stops
+   * growing and the column only gains backdrop while taking room from the dock.
+   * So the drag range runs from `DEVICE_PANE_MIN_WIDTH` up to "fills the
+   * height", and dragging can only trade the capture's size for the dock's.
+   *
+   * The shape comes from the reported viewport, the only one the workbench has;
+   * the player then fits the image to its own decoded pixels inside this box,
+   * so a viewport that disagrees with the screenshot costs a little backdrop
+   * here and nothing in correctness.
+   */
+  #deviceFillWidth(): number {
+    const viewport = this.metadata?.viewport
+    const ratio =
+      viewport?.width && viewport?.height
+        ? viewport.width / viewport.height
+        : 0.5
+    return Math.min(
+      Math.max(
+        DEVICE_PANE_MIN_WIDTH,
+        this.#deviceColumnHeight() * ratio + DEVICE_PANE_CHROME_ALLOWANCE
+      ),
+      Math.max(
+        DEVICE_PANE_MIN_WIDTH,
+        window.innerWidth * DEVICE_PANE_MAX_WIDTH_RATIO
+      )
+    )
+  }
+
+  // Width of the device column; own key so it never disturbs the other splits.
+  #dragDevice = new DragController(this, {
+    localStorageKey: 'devicePaneWidth',
+    minPosition: DEVICE_PANE_MIN_WIDTH,
+    // Capped at the useful width, not at a share of the window: beyond
+    // "fills the height" the drag buys backdrop and costs the dock.
+    maxPosition: () => this.#deviceFillWidth(),
+    initialPosition: () => this.#deviceFillWidth(),
     getContainerEl: () => this.#getVerticalWindow(),
-    direction: Direction.vertical
+    direction: Direction.horizontal,
+    // The pane is on the right, so its handle sits on its inner edge and
+    // dragging left widens it.
+    anchor: 'end'
   })
 
   // Player snapshot keeps the recorded viewport's shape, slightly narrowed.
@@ -183,7 +292,7 @@ export class DevtoolsWorkbench extends Element {
   // Space left for the snapshot pane once the fixed rows and dock minimum eat theirs.
   #playerPaneBudget(): number {
     return Math.max(
-      MIN_WORKBENCH_HEIGHT,
+      minWorkbenchHeight(),
       window.innerHeight -
         HEADER_HEIGHT -
         PLAYER_CONTROLS_HEIGHT -
@@ -243,13 +352,13 @@ export class DevtoolsWorkbench extends Element {
       const maxHeight = `calc(100vh - ${
         HEADER_HEIGHT + PLAYER_CONTROLS_HEIGHT + PLAYER_DOCK_MIN_HEIGHT
       }px - ${this.#timelinePaneHeight()}px)`
-      return `flex-grow:0; flex-shrink:0; ${this.#dragVerticalPlayer.getPosition()}; max-height:${maxHeight}; min-height:${MIN_WORKBENCH_HEIGHT}px;`
+      return `flex-grow:0; flex-shrink:0; ${this.#dragVerticalPlayer.getPosition()}; max-height:${maxHeight}; min-height:${minWorkbenchHeight()}px;`
     }
     const raw =
       basisPx(this.#dragVertical.getPosition()) ??
       window.innerHeight * BROWSER_HEIGHT_RATIO
     const capped = Math.min(raw, window.innerHeight * 0.7)
-    const paneHeight = Math.max(MIN_WORKBENCH_HEIGHT, capped)
+    const paneHeight = Math.max(minWorkbenchHeight(), capped)
     return `flex:0 0 ${paneHeight}px; height:${paneHeight}px; max-height:70vh; min-height:0;`
   }
 
@@ -417,19 +526,30 @@ export class DevtoolsWorkbench extends Element {
     `
   }
 
-  #renderBrowserPane() {
+  /**
+   * `fill` is the device column: the capture takes the whole box. No height
+   * from the vertical split — that split does not exist in this layout — and no
+   * aspect-locked wrapper either, because the column's own width already is the
+   * capture's shape and the player fits the image to its decoded pixels inside
+   * whatever box it gets. Locking the aspect again here letterboxed the frame
+   * inside a column that was already its shape.
+   */
+  #renderBrowserPane(fill = false) {
     // Player: the boxed host goes transparent and the pane carries the shared
     // backdrop, so the aspect box blends instead of showing a gradient seam.
     const playerPaneExtra = this.playerMode
       ? ` background:${BROWSER_BACKDROP_GRADIENT};`
       : ''
+    const paneStyle = fill
+      ? `flex:1 1 auto; min-height:0; min-width:0;${playerPaneExtra}`
+      : `${this.#computeBrowserPaneStyle()}${playerPaneExtra}`
     return html`
       <section
         class="basis-auto text-gray-500 flex items-center justify-center flex-1 min-h-0"
-        style="${this.#computeBrowserPaneStyle()}${playerPaneExtra}"
+        style="${paneStyle}"
       >
         ${
-          this.playerMode
+          this.playerMode && !fill
             ? html`<div
                 class="h-full max-w-full mx-auto"
                 style="aspect-ratio:${this.#playerAspectRatio()};"
@@ -438,12 +558,85 @@ export class DevtoolsWorkbench extends Element {
                   style="background:transparent"
                 ></wdio-devtools-browser>
               </div>`
-            : html`<wdio-devtools-browser></wdio-devtools-browser>`
+            : html`<wdio-devtools-browser
+                style="${this.playerMode ? 'background:transparent' : ''}"
+              ></wdio-devtools-browser>`
         }
       </section>
     `
   }
 
+  /** Today's layout: the capture over the dock, split by a vertical handle. */
+  /**
+   * Both the device column's default AND its maximum are derived from the
+   * capture's shape, and the controller resolves them during field
+   * initialization — before the consumed metadata context has delivered any.
+   * Re-resolve when that input changes: a default has to be recomputed, and a
+   * width the user chose has to be re-clamped, or a column sized for one
+   * capture outlives it. Guarded on the property, so not a per-render pass.
+   */
+  protected updated(changed: PropertyValues<this>): void {
+    if (
+      changed.has('metadata') &&
+      this.#deviceLayout &&
+      this.#dragDevice.refreshBounds()
+    ) {
+      this.requestUpdate()
+    }
+  }
+
+  #renderStackedSplit() {
+    return html`
+      <section
+        class="relative flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden"
+      >
+        ${this.#renderBrowserPane()}
+        ${
+          !this.#toolbarCollapsed
+            ? (this.playerMode
+                ? this.#dragVerticalPlayer
+                : this.#dragVertical
+              ).getSlider('z-[999] pointer-events-auto')
+            : nothing
+        }
+        ${this.#renderWorkbenchTabs()}
+      </section>
+    `
+  }
+
+  /**
+   * Device layout: the dock takes the room the capture does not need, and the
+   * capture takes a column of its own on the right — full height, so a portrait
+   * frame is as large as the window allows instead of a strip in a wide row.
+   *
+   * The capture keeps its own fitting inside that column: it shapes itself to
+   * its decoded pixels and re-fits through its ResizeObserver, so dragging this
+   * handle needs to tell it nothing.
+   */
+  #renderDeviceSplit() {
+    const width = basisPx(this.#dragDevice.getPosition())
+    return html`
+      <section
+        data-device-row
+        class="relative flex flex-row flex-1 min-w-0 min-h-0 overflow-hidden"
+      >
+        ${this.#renderWorkbenchTabs()}
+        ${
+          !this.#toolbarCollapsed
+            ? this.#dragDevice.getSlider('z-[999] pointer-events-auto')
+            : nothing
+        }
+        <section
+          data-device-pane
+          class="relative flex flex-col min-w-0 min-h-0 overflow-hidden"
+          style="${this.#dragDevice.getPosition()}; flex:0 1 auto; width:${width}px; max-width:100%;"
+        >
+          ${this.#renderBrowserPane(true)}
+        </section>
+      </section>
+    `
+  }
+
   // Full-width playback strip above the workbench row — player mode only.
   #renderTimelineStrip() {
     if (!this.playerMode) {
@@ -489,20 +682,11 @@ export class DevtoolsWorkbench extends Element {
                 ></wdio-devtools-trace-player-controls>`
               : nothing
           }
-          <section
-            class="relative flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden"
-          >
-            ${this.#renderBrowserPane()}
-            ${
-              !this.#toolbarCollapsed
-                ? (this.playerMode
-                    ? this.#dragVerticalPlayer
-                    : this.#dragVertical
-                  ).getSlider('z-[999] pointer-events-auto')
-                : nothing
-            }
-            ${this.#renderWorkbenchTabs()}
-          </section>
+          ${
+            this.#deviceLayout
+              ? this.#renderDeviceSplit()
+              : this.#renderStackedSplit()
+          }
         </section>
       </section>
     `
diff --git a/packages/app/src/controller/constants.ts b/packages/app/src/controller/constants.ts
index d43e22d0..29a573b2 100644
--- a/packages/app/src/controller/constants.ts
+++ b/packages/app/src/controller/constants.ts
@@ -3,8 +3,32 @@ import type { LogSource } from '@wdio/devtools-shared'
 export const CACHE_ID = 'wdio-trace-cache'
 export const SIDEBAR_MIN_WIDTH = 250
 export const DARK_MODE_KEY = 'darkMode'
-export const MIN_WORKBENCH_HEIGHT = Math.min(300, window.innerHeight * 0.3)
+/**
+ * Smallest useful workbench pane, for the window AS IT IS NOW. A function
+ * rather than a constant: evaluated at module import it froze at whatever
+ * window happened to be open then, and — because it is also the pane's
+ * `minPosition` — pinned the pane there for the life of the page. Loaded in a
+ * 413px-tall window it is 124px, which is what a trace then rendered into on a
+ * 2560px screen.
+ */
+export function minWorkbenchHeight(): number {
+  return Math.min(300, window.innerHeight * 0.3)
+}
 export const MIN_METATAB_WIDTH = 260
+/** Narrowest useful device column — below this a phone frame is unreadable. */
+export const DEVICE_PANE_MIN_WIDTH = 180
+/**
+ * Slack added to a device column's width so its frame is bound by HEIGHT.
+ * The frame spends some of the column on its own header, padding and border,
+ * so a column sized to `height x ratio` leaves the capture less height than
+ * that and it becomes width-bound instead — measured at ~180px of dead space
+ * above AND below. The error is asymmetric: a column a few px too wide costs a
+ * sliver of side backdrop, one too narrow costs that whole gap, so this biases
+ * wide on purpose.
+ */
+export const DEVICE_PANE_CHROME_ALLOWANCE = 48
+/** Most of the window a device column may take, so the dock stays usable. */
+export const DEVICE_PANE_MAX_WIDTH_RATIO = 0.6
 export const RERENDER_TIMEOUT = 10
 export const SIDEBAR_DEFAULT_WIDTH = 350
 export const ACTIONS_DEFAULT_WIDTH = 360
diff --git a/packages/app/src/utils/DragController.ts b/packages/app/src/utils/DragController.ts
index a9f058c4..8f1060cd 100644
--- a/packages/app/src/utils/DragController.ts
+++ b/packages/app/src/utils/DragController.ts
@@ -18,7 +18,17 @@ type AsyncGetElFn = () => Element | Promise<Element | null>
 type Bound = number | (() => number)
 
 interface DragControllerOptions {
-  initialPosition: number
+  /** Accepts a getter, like the bounds: a window-derived default resolved once
+   *  at construction never follows the window it was derived from. */
+  initialPosition: Bound
+  /**
+   * Which edge the pane is measured from. `start` (the default) is a pane on
+   * the left or top, whose size grows as the handle moves away from that edge.
+   * `end` is a pane on the right or bottom: its handle sits on its inner edge,
+   * so the position is an offset from the far side and dragging TOWARDS the
+   * start makes it bigger.
+   */
+  anchor?: 'start' | 'end'
   direction: Direction
   localStorageKey?: string
   minPosition?: Bound
@@ -53,6 +63,9 @@ export class DragController implements ReactiveController {
 
   #state: State = 'idle'
   #pointerTracker: PointerTracker | null = null
+  /** Whether the current position is the user's own — restored from storage or
+   *  dragged — rather than derived from the window. */
+  #userChosen = false
 
   constructor(host: DragControllerHost, options: DragControllerOptions) {
     this.#host = host
@@ -80,8 +93,6 @@ export class DragController implements ReactiveController {
           return
         }
 
-        window.onresize = () => this.#adjustPosition()
-
         // TODO Add typeguard to check if HTMLElement
         this.#draggableEl = draggableEl as HTMLElement
         this.#containerEl = containerEl as HTMLElement
@@ -94,10 +105,38 @@ export class DragController implements ReactiveController {
         ? parseInt(localStorage.getItem(this.#localStorageKey)!, 10)
         : undefined
       : undefined
-    const initialPosition = storageValue || this.#options.initialPosition
+    // A stored height is the user's own choice and keeps winning; only a
+    // derived default follows the window.
+    this.#userChosen =
+      storageValue !== undefined && Number.isFinite(storageValue)
+    const initialPosition = this.#userChosen
+      ? storageValue!
+      : (resolveBound(this.#options.initialPosition) ?? 0)
     this.#setPosition(initialPosition, initialPosition)
   }
 
+  /**
+   * Own listener, not `window.onresize`: that is a single slot, so with five
+   * controllers on the page only the last one constructed ever ran — which is
+   * why nothing re-fitted on resize.
+   *
+   * Registered per CONNECT, not once in the constructor: Lit detaches and
+   * reattaches a host without rebuilding its controllers, and a listener
+   * removed on disconnect and never restored leaves that pane deaf to resizes
+   * for the rest of the page's life. `addEventListener` with the same
+   * reference is idempotent, so reconnecting twice cannot double-subscribe.
+   */
+  hostConnected(): void {
+    window.addEventListener('resize', this.#onWindowResize)
+  }
+
+  /** Follow the window — the same re-resolution a changed input triggers. */
+  #onWindowResize = () => {
+    this.refreshBounds()
+    this.#host.requestUpdate()
+    void this.#adjustPosition()
+  }
+
   async #getDraggableEl() {
     await this.#host.updateComplete
     return this.#host.shadowRoot!.querySelector(
@@ -166,6 +205,36 @@ export class DragController implements ReactiveController {
     this.#adjustPosition()
   }
 
+  /**
+   * Re-resolve this pane against its inputs as they are NOW, and report whether
+   * it moved.
+   *
+   * A derived default is recomputed outright: its inputs are not all present
+   * when a controller is constructed — a workbench builds its controllers
+   * during field initialization, before the consumed metadata context has
+   * delivered anything — so a default derived from a capture's shape starts
+   * from a fallback.
+   *
+   * A position the USER chose is re-clamped rather than left alone, because the
+   * bounds are derived too. A width chosen for one capture's shape can exceed
+   * what the next one allows, and without this it kept an obsolete oversized
+   * column, taking room from its neighbour until something resized the window.
+   *
+   * Call this when an INPUT changes, never on every render: the derivation must
+   * not be fed a box that is still settling, which is how an earlier attempt at
+   * this produced a 40px column.
+   */
+  refreshBounds(): boolean {
+    const before = this.#getPosition()
+    if (this.#userChosen) {
+      this.#setPosition(this.#x, this.#y)
+    } else {
+      const derived = resolveBound(this.#options.initialPosition) ?? 0
+      this.#setPosition(derived, derived)
+    }
+    return this.#getPosition() !== before
+  }
+
   hostUpdated() {
     this.#maybeReinit()
   }
@@ -174,6 +243,7 @@ export class DragController implements ReactiveController {
     if (this.#pointerTracker) {
       this.#pointerTracker.stop()
     }
+    window.removeEventListener('resize', this.#onWindowResize)
   }
 
   #handleWindowMove(pointer: Pointer) {
@@ -197,7 +267,10 @@ export class DragController implements ReactiveController {
       const xDelta = cursorPositionX - this.#cursorPositionX
       const yDelta = cursorPositionY - this.#cursorPositionY
 
-      this.#setPosition(oldX + xDelta, oldY + yDelta)
+      const sign = this.#options.anchor === 'end' ? -1 : 1
+      this.#setPosition(oldX + sign * xDelta, oldY + sign * yDelta)
+      // From here on this pane's height is the user's, not the window's.
+      this.#userChosen = true
 
       if (this.#localStorageKey) {
         localStorage.setItem(
@@ -256,7 +329,6 @@ export class DragController implements ReactiveController {
         const containerEl = await this.#options.getContainerEl()
         if (containerEl) {
           this.#containerEl = containerEl as HTMLElement
-          window.onresize = () => this.#adjustPosition()
         }
       }
       this.#init()
@@ -264,17 +336,28 @@ export class DragController implements ReactiveController {
   }
 
   getSlider(className = '') {
+    const fromEnd = this.#options.anchor === 'end'
     const anchor =
       this.#options.direction === Direction.horizontal
-        ? 'left'
+        ? fromEnd
+          ? 'right'
+          : 'left'
         : this.#options.direction === Direction.vertical
-          ? 'top'
+          ? fromEnd
+            ? 'bottom'
+            : 'top'
           : ''
+    // The edge class must match the anchor. It used to be `left-0`/`top-0`
+    // unconditionally, which an inline `left`/`top` simply overrides — but an
+    // END-anchored handle sets the OPPOSITE property, so `left:0` from the
+    // class and `right:Npx` inline both applied and, on a fixed-width absolute
+    // box, `left` wins: the handle pinned itself to the container's start edge
+    // instead of sitting on its own pane.
     className +=
       this.#options.direction === Direction.horizontal
-        ? ' cursor-col-resize left-0 h-full w-[10px]'
+        ? ` cursor-col-resize ${fromEnd ? 'right-0' : 'left-0'} h-full w-[10px]`
         : this.#options.direction === Direction.vertical
-          ? ' cursor-row-resize top-0 w-full h-[10px]'
+          ? ` cursor-row-resize ${fromEnd ? 'bottom-0' : 'top-0'} w-full h-[10px]`
           : ''
 
     return html`
diff --git a/packages/app/test-ui/workbench/player/snapshot.test.ts b/packages/app/test-ui/workbench/player/snapshot.test.ts
index c49f2380..8078ae14 100644
--- a/packages/app/test-ui/workbench/player/snapshot.test.ts
+++ b/packages/app/test-ui/workbench/player/snapshot.test.ts
@@ -1607,6 +1607,31 @@ describe('wdio-devtools-browser', () => {
           expect(section.style.height).toBe('100%')
         })
 
+        it('re-fits when its box changes with no event announcing it', async () => {
+          // The dock divider, the sidebar collapsing and browser zoom all move
+          // this box and fire neither `resize` nor `window-drag`. Nothing is
+          // dispatched here on purpose: a ResizeObserver on its own box is what
+          // makes those cases work.
+          const el = await framed()
+          await settle(el)
+          const section = shadow(el, 'section')!
+          await resizeScreenshotPane(el, ...paneFor(el, { w: 400, h: 300 }))
+          await waitUntil(
+            () => section.style.height !== '',
+            'the frame to be sized to the capture'
+          )
+          const before = section.getBoundingClientRect().height
+
+          const host = el.parentElement!
+          host.style.height = `${parseFloat(host.style.height) + 200}px`
+          await waitUntil(
+            () => section.getBoundingClientRect().height !== before,
+            'the frame to follow its own box'
+          )
+
+          expect(section.getBoundingClientRect().height).toBeGreaterThan(before)
+        })
+
         it('keeps the browser frame for a device session that has a url', async () => {
           // A mobile browser — Appium driving Chrome on Android — reports a
           // device too, and its url arrives before any DOM batch.
diff --git a/packages/app/test-ui/workbench/workbench-fixtures.ts b/packages/app/test-ui/workbench/workbench-fixtures.ts
index d7326ed7..2408c155 100644
--- a/packages/app/test-ui/workbench/workbench-fixtures.ts
+++ b/packages/app/test-ui/workbench/workbench-fixtures.ts
@@ -17,6 +17,7 @@ import { ContextProvider, type Context } from '@lit/context'
 import type {
   CommandLog,
   ConsoleLog,
+  Metadata,
   NetworkRequest,
   PreservedAttempt,
   PreservedStep
@@ -256,6 +257,8 @@ export function failingSuites(
 }
 
 export interface WorkbenchContexts {
+  /** Session metadata — `device` is what selects the device layout. */
+  metadata?: Metadata
   commands?: CommandLog[]
   consoleLogs?: ConsoleLog[]
   networkRequests?: NetworkRequest[]
@@ -272,6 +275,10 @@ export interface WorkbenchHarness {
   sidebar: DevtoolsTabs
   /** Republish `baselineContext` the way DataManager does on a
    *  `baseline:saved` / `baseline:cleared` broadcast: always a fresh Map. */
+  /** Republish `metadataContext` the way DataManager does when a session's
+   *  metadata arrives — which is AFTER the workbench has built its
+   *  controllers, so anything derived from it starts from a fallback. */
+  publishMetadata(next: Metadata | undefined): Promise<void>
   publishBaselines(next: Map<string, PreservedAttempt>): Promise<void>
   /** Republish `selectedTestUidContext` through the one setter DataManager
    *  exposes for it (`setSelectedTestUid`); `undefined` deselects. */
@@ -408,7 +415,7 @@ export function mountWorkbench(
     [logContext, []],
     [consoleLogContext, contexts.consoleLogs ?? []],
     [networkRequestContext, contexts.networkRequests ?? []],
-    [metadataContext, undefined],
+    [metadataContext, contexts.metadata],
     [metadataBySessionContext, {}],
     [commandContext, contexts.commands ?? []],
     [sourceContext, undefined],
@@ -472,6 +479,10 @@ async function finishMount(
     dock,
     sidebar,
     settleTabs,
+    publishMetadata: async (next) => {
+      providers.get(metadataContext)?.setValue(next)
+      await settleTabs()
+    },
     publishBaselines: async (next) => {
       providers.get(baselineContext)?.setValue(next)
       await settleTabs()
diff --git a/packages/app/test-ui/workbench/workbench.test.ts b/packages/app/test-ui/workbench/workbench.test.ts
index 394d2b1b..0dbc1050 100644
--- a/packages/app/test-ui/workbench/workbench.test.ts
+++ b/packages/app/test-ui/workbench/workbench.test.ts
@@ -5,9 +5,12 @@
 // between DataManager publishing a baseline for the selected test and the
 // compare panel rendering it; neither end's spec covers it.
 
+import { TraceType, type Metadata } from '@wdio/devtools-shared'
+
 import { collectErrors } from '@components/workbench/errors/collect.js'
 import { pairSteps } from '@components/workbench/compare/compareUtils.js'
 import type { DevtoolsTabs } from '@components/tabs.js'
+import type { DevtoolsWorkbench } from '@components/workbench.js'
 
 import { shadow, shadowAll, text, texts } from '../support/queries.js'
 import {
@@ -748,4 +751,285 @@ describe('wdio-devtools-workbench', () => {
       expect(openTabLabels(harness.dock)).toEqual(['Source'])
     })
   })
+
+  /**
+   * A portrait capture in a wide row is a narrow strip with the rest backdrop.
+   * When the trace says it came off a device the capture gets a column of its
+   * own down the right-hand side and the dock sits beside it, so the frame is
+   * as tall as the window allows.
+   */
+  describe('device layout', () => {
+    const DEVICE_PANE = 'section[data-device-pane]'
+    const IPHONE: Metadata = {
+      type: TraceType.Testrunner,
+      device: { platform: 'ios', name: 'iPhone 17', version: '18.1' },
+      viewport: {
+        width: 402,
+        height: 874,
+        offsetLeft: 0,
+        offsetTop: 0,
+        scale: 1
+      }
+    }
+    const DESKTOP: Metadata = {
+      type: TraceType.Testrunner,
+      viewport: {
+        width: 1280,
+        height: 800,
+        offsetLeft: 0,
+        offsetTop: 0,
+        scale: 1
+      }
+    }
+
+    const paneOf = (workbench: DevtoolsWorkbench) =>
+      shadow(workbench, DEVICE_PANE)
+
+    it('gives a device capture its own column, with the dock beside it', async () => {
+      const { workbench, dock } = await mountWorkbench(
+        { metadata: IPHONE },
+        { playerMode: true }
+      )
+
+      const pane = paneOf(workbench)
+      expect(pane).toBeTruthy()
+      const paneBox = pane!.getBoundingClientRect()
+      const dockBox = dock.getBoundingClientRect()
+
+      // Beside, not under: the dock ends exactly where the column begins, and
+      // both span the same rows.
+      expect(dockBox.right).toBeCloseTo(paneBox.left, 0)
+      expect(dockBox.top).toBeCloseTo(paneBox.top, 0)
+      // ...and the column is the rightmost thing in the row.
+      expect(paneBox.right).toBeGreaterThanOrEqual(dockBox.right)
+    })
+
+    it('lets the capture fill the whole column', async () => {
+      // The reason for the layout. In the stacked layout the capture kept the
+      // vertical split's height and an aspect-locked box, so a portrait frame
+      // used a fraction of the room; here it takes the column entire.
+      const { workbench } = await mountWorkbench(
+        { metadata: IPHONE },
+        { playerMode: true }
+      )
+      // Sized deliberately: the pane may not overflow its row, so in an
+      // unsized host it correctly collapses to nothing and there is no column
+      // to fill. This assertion used to pass only because the pane was rigid
+      // and overflowed a zero-width row.
+      const host = workbench.parentElement as HTMLElement
+      host.style.width = '1400px'
+      host.style.height = '900px'
+      await workbench.updateComplete
+      await new Promise((resolve) => requestAnimationFrame(resolve))
+
+      const pane = paneOf(workbench)!.getBoundingClientRect()
+      const capture = shadow(
+        paneOf(workbench)!,
+        BROWSER
+      )!.getBoundingClientRect()
+      expect(capture.width).toBeCloseTo(pane.width, 1)
+      expect(capture.height).toBeCloseTo(pane.height, 1)
+    })
+
+    it('leaves a desktop capture in the stacked layout', async () => {
+      const { workbench } = await mountWorkbench(
+        { metadata: DESKTOP },
+        { playerMode: true }
+      )
+
+      // Not a better layout in general — only for a capture taller than wide.
+      expect(paneOf(workbench)).toBeNull()
+      expect(shadowAll(workbench, BROWSER).length).toBeGreaterThan(0)
+    })
+
+    it('applies in live mode too, not only in the player', async () => {
+      const { workbench } = await mountWorkbench({ metadata: IPHONE })
+
+      expect(paneOf(workbench)).toBeTruthy()
+    })
+
+    /**
+     * The dock must not be sized by its CONTENT. As a flex row item its floor
+     * is min-content unless min-width is cleared, so switching to a wide tab
+     * (the Network table) grew the dock and shoved the column sideways — only
+     * the drag handle may move that boundary.
+     *
+     * The rule is asserted directly because the symptom is not reproducible
+     * here: it needs content wider than the leftover space, and this harness's
+     * network fixture fits. The pane-geometry check below is a sanity net, not
+     * a proof — it passes with the rule removed.
+     */
+    it('clears the dock min-width so its content cannot move the column', async () => {
+      const { workbench, dock, settleTabs } = await mountWorkbench(
+        { metadata: IPHONE, networkRequests: networkRequests() },
+        { playerMode: true }
+      )
+
+      expect(getComputedStyle(dock).minWidth).toBe('0px')
+
+      const before = paneOf(workbench)!.getBoundingClientRect()
+      const network = shadowAll<HTMLElement>(dock, '[role="tab"], button').find(
+        (el) => text(el).includes('Network')
+      )
+      network?.click()
+      await settleTabs()
+
+      const after = paneOf(workbench)!.getBoundingClientRect()
+      expect(after.width).toBeCloseTo(before.width, 1)
+      expect(after.left).toBeCloseTo(before.left, 1)
+    })
+
+    /**
+     * The handle for a pane on the RIGHT sets `right`, so its edge class has to
+     * be `right-0` too. With `left-0` — which every horizontal handle used to
+     * get — both properties applied and `left` won on a fixed-width absolute
+     * box, so this handle pinned itself beside the sidebar's one instead of
+     * sitting between the dock and the column.
+     *
+     * Asserted on the class and the inline property, not on geometry: the
+     * harness does not apply Tailwind utilities inside a shadow root, so where
+     * an absolutely positioned handle actually lands cannot be measured here.
+     */
+    it('anchors the column handle to its own edge, not the row start', async () => {
+      const { workbench } = await mountWorkbench(
+        { metadata: IPHONE },
+        { playerMode: true }
+      )
+
+      const handle = shadowAll<HTMLElement>(
+        workbench,
+        'button[data-draggable-id]'
+      ).find((el) => (el.getAttribute('style') ?? '').includes('right:'))
+
+      expect(handle).toBeTruthy()
+      expect(handle!.className).toContain('right-0')
+      expect(handle!.className).not.toContain('left-0')
+      expect(handle!.className).toContain('cursor-col-resize')
+    })
+
+    it('leaves a LANDSCAPE device capture in the stacked layout', async () => {
+      // A rotated device, or an app that only runs landscape. A wide frame in a
+      // tall column wastes it, and the column would claim up to 60% of the
+      // window from the dock — the same reason a desktop capture stays stacked.
+      const { workbench } = await mountWorkbench(
+        {
+          metadata: {
+            ...IPHONE,
+            viewport: {
+              width: 874,
+              height: 402,
+              offsetLeft: 0,
+              offsetTop: 0,
+              scale: 1
+            }
+          }
+        },
+        { playerMode: true }
+      )
+
+      expect(paneOf(workbench)).toBeNull()
+    })
+
+    it('treats a device that reported no viewport as portrait', async () => {
+      // Every zip recorded before the viewport was captured, and any session
+      // whose read was refused: a device is portrait unless it says otherwise.
+      const { workbench } = await mountWorkbench(
+        { metadata: { type: TraceType.Testrunner, device: IPHONE.device } },
+        { playerMode: true }
+      )
+
+      expect(paneOf(workbench)).toBeTruthy()
+    })
+
+    it('never overflows the row, however little of it is left', async () => {
+      // The pane has a 180px floor but the row is what it must fit inside. A
+      // non-shrinking pane overflowed the clipped row, collapsed the dock and
+      // put the divider out of reach.
+      const { workbench } = await mountWorkbench(
+        { metadata: IPHONE },
+        { playerMode: true }
+      )
+      const host = workbench.parentElement as HTMLElement
+      host.style.width = '260px'
+      host.style.height = '700px'
+      await workbench.updateComplete
+      await new Promise((resolve) => requestAnimationFrame(resolve))
+
+      const pane = paneOf(workbench)!.getBoundingClientRect()
+      const row = paneOf(workbench)!.parentElement!.getBoundingClientRect()
+      expect(pane.width).toBeLessThanOrEqual(row.width)
+      expect(pane.right).toBeLessThanOrEqual(row.right + 1)
+    })
+
+    it('re-derives the column when the metadata changes', async () => {
+      // The controller resolves its default during field initialization, before
+      // the consumed context has delivered anything, and a later metadata
+      // update re-renders the workbench without re-deriving the position — so
+      // the column kept a width taken from a shape it no longer has.
+      //
+      // Two portrait devices of different shapes, because the absolute widths
+      // are not predictable here: the derivation reads `window.innerHeight`,
+      // and this harness's window is unrelated to the host it mounts into.
+      const TALL = {
+        ...IPHONE,
+        viewport: {
+          width: 402,
+          height: 874,
+          offsetLeft: 0,
+          offsetTop: 0,
+          scale: 1
+        }
+      }
+      const SQUARISH = {
+        ...IPHONE,
+        viewport: {
+          width: 900,
+          height: 1000,
+          offsetLeft: 0,
+          offsetTop: 0,
+          scale: 1
+        }
+      }
+      const { workbench, publishMetadata } = await mountWorkbench(
+        { metadata: TALL },
+        { playerMode: true }
+      )
+      const host = workbench.parentElement as HTMLElement
+      host.style.width = '1400px'
+      host.style.height = '900px'
+      await workbench.updateComplete
+      const tall = paneOf(workbench)!.getBoundingClientRect().width
+
+      await publishMetadata(SQUARISH)
+      await new Promise((resolve) => requestAnimationFrame(resolve))
+
+      // A squarer device needs a wider column for the same height.
+      expect(paneOf(workbench)!.getBoundingClientRect().width).toBeGreaterThan(
+        tall
+      )
+    })
+
+    it('leaves the dock room and never collapses below its floor', async () => {
+      const { workbench } = await mountWorkbench(
+        { metadata: IPHONE },
+        { playerMode: true }
+      )
+      // Sized, or the row measures 0 and there is nothing to be inside of.
+      const host = workbench.parentElement as HTMLElement
+      host.style.width = '1400px'
+      host.style.height = '900px'
+      await workbench.updateComplete
+      await new Promise((resolve) => requestAnimationFrame(resolve))
+
+      const pane = paneOf(workbench)!.getBoundingClientRect()
+      const row = paneOf(workbench)!.parentElement!.getBoundingClientRect()
+      expect(pane.width).toBeGreaterThanOrEqual(180)
+      expect(pane.width).toBeLessThan(row.width)
+      // The default itself is not asserted here: it is derived from
+      // `window.innerHeight`, and this harness mounts the workbench in a host
+      // whose height is unrelated to the window's. That divergence is exactly
+      // what DEVICE_PANE_CHROME_ALLOWANCE biases against, and it is only
+      // observable in the running app.
+    })
+  })
 })
diff --git a/packages/app/tests/drag-controller-resize.test.ts b/packages/app/tests/drag-controller-resize.test.ts
new file mode 100644
index 00000000..6b5c5d73
--- /dev/null
+++ b/packages/app/tests/drag-controller-resize.test.ts
@@ -0,0 +1,300 @@
+// @vitest-environment happy-dom
+//
+// The player pane took its height from a pixel number resolved once, from
+// whatever window was open at construction, and nothing recomputed it: measured
+// at 124px in a 1280x720 window and still 124px at 2560x1440, so a trace
+// rendered into a 13px-wide box on a 2560px screen.
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { minWorkbenchHeight } from '../src/controller/constants.js'
+import { DragController, Direction } from '../src/utils/DragController.js'
+
+/** Position as a number, off the `flex-basis: Npx` the host renders. */
+const positionOf = (drag: DragController): number =>
+  parseFloat(drag.getPosition().split(':')[1])
+
+/**
+ * The controller only needs a ReactiveControllerHost to count updates and a
+ * shadow root to look for its handle in. No handle exists here, so the pointer
+ * tracker never attaches — position handling is what this covers.
+ */
+function fakeHost() {
+  const host = {
+    updates: 0,
+    // A real ReactiveControllerHost that is already connected calls this the
+    // moment a controller is added, which is what registers its listener.
+    addController: (controller: { hostConnected?: () => void }) =>
+      controller.hostConnected?.(),
+    removeController: () => {},
+    requestUpdate() {
+      host.updates++
+    },
+    updateComplete: Promise.resolve(true),
+    shadowRoot: { querySelector: () => null }
+  }
+  return host as unknown as ConstructorParameters<typeof DragController>[0] & {
+    updates: number
+  }
+}
+
+const setWindowHeight = (height: number) => {
+  Object.defineProperty(window, 'innerHeight', {
+    value: height,
+    configurable: true,
+    writable: true
+  })
+}
+
+const resize = () => window.dispatchEvent(new Event('resize'))
+
+beforeEach(() => {
+  localStorage.clear()
+  setWindowHeight(720)
+})
+
+describe('a pane height derived from the window', () => {
+  const derived = (host: ReturnType<typeof fakeHost>) =>
+    new DragController(host, {
+      localStorageKey: 'testPaneHeight',
+      minPosition: 50,
+      maxPosition: () => window.innerHeight * 0.9,
+      initialPosition: () => window.innerHeight * 0.5,
+      getContainerEl: () => Promise.resolve(null),
+      direction: Direction.vertical
+    })
+
+  it('resolves from the window as it is at construction', () => {
+    setWindowHeight(1000)
+
+    expect(positionOf(derived(fakeHost()))).toBe(500)
+  })
+
+  it('follows the window when it changes', () => {
+    const host = fakeHost()
+    const drag = derived(host)
+    expect(positionOf(drag)).toBe(360)
+
+    setWindowHeight(1440)
+    resize()
+
+    // The whole bug: this used to stay at its construction-time value forever.
+    expect(positionOf(drag)).toBe(720)
+    expect(host.updates).toBeGreaterThan(0)
+  })
+
+  it('stays inside its own bounds while following', () => {
+    const drag = derived(fakeHost())
+
+    setWindowHeight(80)
+    resize()
+
+    // 50% of 80 is under the 50px floor.
+    expect(positionOf(drag)).toBe(50)
+  })
+})
+
+describe('a pane height the user chose', () => {
+  const chosen = (host: ReturnType<typeof fakeHost>) =>
+    new DragController(host, {
+      localStorageKey: 'testPaneHeight',
+      minPosition: 50,
+      maxPosition: () => window.innerHeight * 0.5,
+      initialPosition: () => window.innerHeight * 0.9,
+      getContainerEl: () => Promise.resolve(null),
+      direction: Direction.vertical
+    })
+
+  it('wins over the derived default', () => {
+    localStorage.setItem('testPaneHeight', '300')
+
+    expect(positionOf(chosen(fakeHost()))).toBe(300)
+  })
+
+  it('keeps winning when the window changes and it still fits', () => {
+    localStorage.setItem('testPaneHeight', '300')
+    const drag = chosen(fakeHost())
+
+    setWindowHeight(1440)
+    resize()
+
+    // Not recomputed to 90% of the new window: the user picked this.
+    expect(positionOf(drag)).toBe(300)
+  })
+
+  it('is pulled back inside a window that no longer has room', () => {
+    localStorage.setItem('testPaneHeight', '300')
+    const drag = chosen(fakeHost())
+
+    setWindowHeight(400)
+    resize()
+
+    // Max is half the window; a stored height outliving its room would push the
+    // handle off-screen.
+    expect(positionOf(drag)).toBe(200)
+  })
+})
+
+describe('every controller on the page, not just the last one built', () => {
+  it('each follows the window independently', () => {
+    // `window.onresize` is a single slot, so five controllers assigning it left
+    // only the last one adjusting — which is why nothing re-fitted.
+    const build = (ratio: number) =>
+      new DragController(fakeHost(), {
+        minPosition: 10,
+        initialPosition: () => window.innerHeight * ratio,
+        getContainerEl: () => Promise.resolve(null),
+        direction: Direction.vertical
+      })
+    const first = build(0.25)
+    const second = build(0.5)
+
+    setWindowHeight(1000)
+    resize()
+
+    expect([positionOf(first), positionOf(second)]).toEqual([250, 500])
+  })
+})
+
+describe('minWorkbenchHeight', () => {
+  it('reads the window at call time, not at import time', () => {
+    setWindowHeight(2000)
+    expect(minWorkbenchHeight()).toBe(300)
+
+    // The frozen value is what pinned the pane: loaded in a 413px window it is
+    // 124px, and it is also the pane's own minimum.
+    setWindowHeight(413)
+    expect(Math.round(minWorkbenchHeight())).toBe(124)
+  })
+})
+
+/**
+ * Lit detaches and reattaches a host without rebuilding its controllers, so a
+ * listener registered once in the constructor and removed on disconnect leaves
+ * that pane deaf to every later resize.
+ */
+describe('a host that reconnects', () => {
+  const build = (host: ReturnType<typeof fakeHost>) =>
+    new DragController(host, {
+      minPosition: 10,
+      initialPosition: () => window.innerHeight * 0.5,
+      getContainerEl: () => Promise.resolve(null),
+      direction: Direction.vertical
+    })
+
+  it('follows the window again after a detach and reattach', () => {
+    const host = fakeHost()
+    const drag = build(host)
+
+    drag.hostDisconnected()
+    drag.hostConnected()
+    setWindowHeight(1440)
+    resize()
+
+    expect(positionOf(drag)).toBe(720)
+  })
+
+  it('does not double-subscribe across repeated connects', () => {
+    const host = fakeHost()
+    const drag = build(host)
+    drag.hostConnected()
+    drag.hostConnected()
+    const before = host.updates
+
+    setWindowHeight(1000)
+    resize()
+
+    // One update per resize however many times it connected: the same listener
+    // reference cannot be added twice.
+    expect(host.updates - before).toBe(1)
+  })
+})
+
+/**
+ * A controller's derived default is resolved during construction, and a host
+ * that builds its controllers as field initializers has not yet received any
+ * consumed context — so the inputs of the derivation can arrive later.
+ */
+describe('a derived default whose inputs arrive late', () => {
+  it('re-derives when told an input changed', () => {
+    let ratio = 0.5
+    const drag = new DragController(fakeHost(), {
+      minPosition: 10,
+      initialPosition: () => 1000 * ratio,
+      getContainerEl: () => Promise.resolve(null),
+      direction: Direction.horizontal
+    })
+    expect(positionOf(drag)).toBe(500)
+
+    ratio = 0.46
+    expect(drag.refreshBounds()).toBe(true)
+    expect(positionOf(drag)).toBe(460)
+    // Idempotent: nothing moved the second time, so a caller can guard a
+    // re-render on the return value.
+    expect(drag.refreshBounds()).toBe(false)
+  })
+
+  it('keeps a chosen position that still fits', () => {
+    localStorage.setItem('testPaneHeight', '300')
+    let ratio = 0.5
+    const drag = new DragController(fakeHost(), {
+      localStorageKey: 'testPaneHeight',
+      minPosition: 10,
+      maxPosition: () => 1000 * ratio,
+      initialPosition: () => 1000 * ratio,
+      getContainerEl: () => Promise.resolve(null),
+      direction: Direction.horizontal
+    })
+
+    ratio = 0.46
+    expect(drag.refreshBounds()).toBe(false)
+    expect(positionOf(drag)).toBe(300)
+  })
+
+  it('re-clamps a chosen position the new bounds no longer allow', () => {
+    // The BOUNDS are derived too: a width chosen for one capture's shape can
+    // exceed what the next one allows, and it kept the obsolete oversized
+    // column until something resized the window.
+    //
+    // Covered here rather than through the workbench: the device column's
+    // bounds are derived from `window.innerHeight`, and in the component
+    // harness that window is small enough that every shape's maximum collapses
+    // to the same floor — so the re-clamp has nothing to show there.
+    localStorage.setItem('testPaneHeight', '450')
+    let ratio = 0.5
+    const drag = new DragController(fakeHost(), {
+      localStorageKey: 'testPaneHeight',
+      minPosition: 10,
+      maxPosition: () => 1000 * ratio,
+      initialPosition: () => 1000 * ratio,
+      getContainerEl: () => Promise.resolve(null),
+      direction: Direction.horizontal
+    })
+    expect(positionOf(drag)).toBe(450)
+
+    ratio = 0.3
+    expect(drag.refreshBounds()).toBe(true)
+    expect(positionOf(drag)).toBe(300)
+  })
+})
+
+describe('teardown', () => {
+  it('stops following once the host disconnects', () => {
+    const host = fakeHost()
+    const drag = new DragController(host, {
+      minPosition: 10,
+      initialPosition: () => window.innerHeight * 0.5,
+      getContainerEl: () => Promise.resolve(null),
+      direction: Direction.vertical
+    })
+    const removeSpy = vi.spyOn(window, 'removeEventListener')
+
+    drag.hostDisconnected()
+    setWindowHeight(1440)
+    resize()
+
+    expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function))
+    expect(positionOf(drag)).toBe(360)
+    removeSpy.mockRestore()
+  })
+})