fix(observe): right state pane no longer overflows its width (#478)

* fix(observe): right state pane no longer overflows its width

The right pane is a fixed ~26% column, but the actions tab rendered a
5-column table and the e2e tab 3- and 4-column tables. Tables cannot
shrink below their column content, so at typical window widths the
Status/Params/Run columns were clipped off the pane (the Run button was
unreachable) and action ids line-wrapped mid-word.

Replace the tables with stacked rows built for a narrow column:

- Actions: id + status badge + Run on line 1 (id truncates with title
  hover), intent wrapped below with a 2-line clamp, param inputs
  flex-wrap to the available width instead of fixed 110px columns,
  result/output underneath. The panel also gains the same scrollable
  reg-container wrapper the e2e tab already had.
- E2E: suite results and run history as one-line rows (mark, truncating
  id, duration, badge / totals + verdict); error excerpts wrap below;
  expanded run detail reuses the same row component. History rows are
  real <button>s now, so they are keyboard-reachable.
- Pane guards: .pane.right min-width 340px, tabs flex-wrap, long live
  routes word-break.
- Left timeline column drops 40% -> 33% (min-width 380px) per review
  feedback; the reclaimed width goes to the device mirror.

Verified in Chrome against a mock API harness at 1440px and 1150px:
no horizontal overflow in any tab, all run/param/output states render.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(observe): cap device pane at 400px, give surplus width to state pane

The mirror is a portrait phone screen capped at ~100vh height, so width
beyond ~400px in the center pane is dead space. The right state pane now
grows instead (flex: 1 1 26%), which fits full 36-char run ids and long
test ids without truncation at 1440px.

Also apply the Codex review advisory: the .result-row + .result-row
divider rule missed rows that follow an error excerpt (the .errx div
breaks sibling adjacency) — add .errx + .result-row to the rule.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: Lykhoyda

.changeset/observe-right-pane-width.md

@@ -0,0 +1,30 @@
+---
+'rn-dev-agent-cdp': patch
+'rn-dev-agent-plugin': patch
+---
+
+Observe UI: make the right state pane fit its width, and slim the timeline
+column.
+
+The right pane is a fixed ~26% column (~340-450px), but the actions tab
+rendered a 5-column table and the e2e tab 3- and 4-column tables. Tables
+cannot shrink below their column content, so at typical window widths the
+Status/Params/Run columns were clipped clean off the pane — the Run button
+was unreachable — and action ids line-wrapped mid-word. Both tabs now render
+stacked rows designed for a narrow column:
+
+- **Actions**: one item per action — id (truncating, full value on hover) +
+  status badge + Run on the first line, intent wrapped below (2-line clamp),
+  param inputs flex-wrapping to the available width instead of fixed 110px
+  columns, result/output underneath.
+- **E2E**: suite results and run history as one-line rows — pass/fail mark,
+  truncating test/run id, duration, classification badge or `2✓ 1✗` totals +
+  verdict — with error excerpts wrapping below and the expanded run detail
+  reusing the same row layout.
+- Pane guards: `.pane.right` gets `min-width: 340px`, tabs wrap instead of
+  overflowing, long live routes break instead of pushing the pane wide.
+- Layout rebalance: the left timeline column drops from 40% to 33%
+  (`min-width: 380px`; summaries already ellipsize), and the device pane no
+  longer greedily takes all remaining width — the mirror is a portrait phone
+  screen capped at ~100vh, so the pane is capped at 400px and the state pane
+  absorbs the surplus instead.