feat(app): give a device capture a column of its own

[vishnuv688]

What & why

Type of change

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Polish (an improvement to an existing feature)
• Breaking change (existing behavior changes for users)
• Documentation
• Internal (build, CI, dependencies, tooling)

Packages touched

• shared (types and contracts)
• core (framework-agnostic capture/reporting)
• elements (published element/snapshot API — @wdio/elements)
• service (WebdriverIO adapter)
• nightwatch-devtools (Nightwatch adapter)
• selenium-devtools (Selenium adapter)
• selenium-devtools-py (Selenium Python adapter)
• backend (server)
• app (UI)
• script (page-injected runtime)
• trace (Trace mode)

Notes for reviewers

Screenshots / recordings

Trace mode:

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge; the latest update resolves the remaining metadata-dependent width issue without introducing a new actionable defect.

Summary

• Adds responsive device-pane sizing and an end-anchored horizontal divider.
• Makes drag-controller defaults and bounds react to current window and metadata inputs while preserving valid user-selected sizes.
• Re-fits browser snapshots with a ResizeObserver when their containing box changes.
• Adds UI and controller tests for device layouts, resizing, reconnection, clamping, and late metadata.
• The changes since the previous review correctly re-clamp user-selected device widths when metadata changes.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  M[Session metadata changes] --> D{Device capture?}
  D -->|No| S[Render stacked browser and dock]
  D -->|Yes| O{Viewport landscape?}
  O -->|Yes| S
  O -->|No| B[Re-resolve device-pane bounds]
  B --> C[Clamp stored width or derive default]
  C --> R[Render dock beside device column]
  R --> Z[ResizeObserver re-fits snapshot]

Loading

[greptile-apps]

Resize listener lost on reconnect

The resize listener is registered only in the controller constructor but removed by hostDisconnected(). When a Lit host is detached and later reconnected without reconstructing the controller, the listener is never restored. Derived panes then stop following window resizes, and persisted pane sizes are no longer re-clamped.

[greptile-apps]

Landscape devices use portrait layout

This gate checks only for metadata.device, although supported Android and iOS traces can have landscape viewports. A landscape capture therefore enters sizing logic designed for a portrait frame, potentially allocating up to 60% of the window to an unnecessarily wide device column and taking that space from the dock instead of retaining the stacked layout.

[greptile-apps]

Device pane can overflow

The device pane has a fixed 180px minimum, but its bounds use the whole window rather than the actual row width remaining after the actions sidebar. In a narrow window or after widening the sidebar, the row can become narrower than 180px. The non-shrinking device pane then overflows the clipped row, the dock collapses toward zero, and the divider can become inaccessible.

[greptile-apps]

Device width freezes before metadata

#dragDevice resolves its initial position while the element is being constructed, before the consumed metadata context can populate this.metadata, so a new workbench starts with the fallback 0.5 aspect ratio. Later metadata updates rerender the workbench but do not rederive the controller position. Captures with a different ratio therefore keep a stale column width until a window resize or user drag.

[greptile-apps]

Metadata leaves width oversized

When metadata changes after the user has dragged or restored the device-pane width, this path calls refreshDerived(), which skips user-chosen positions. Rendering then uses the stored width without checking the new bounds, so a rotated or newly loaded portrait capture can keep an obsolete oversized column and take space from the dock until the window is resized.