feat(web): compact two-line HistoryEntry/NetworkEntry for the narrow column (#1616)

In the pinned monitoring column (embedded), the single-line entry headers wrap
badly. Add compact two-line variants gated on `embedded`:

- HistoryEntry: line 1 = time + client/server badge + elapsed + status; line 2 =
  method (and target, truncated) on the left with the controls on the right,
  where Replay becomes an icon (new ReplayButton element) next to Pin/Expand.
- NetworkEntry: line 1 = time + HTTP method + category + elapsed + status; line 2
  = the URL in a horizontal ScrollArea (new Text `nowrap` variant) with the
  expand toggle on the right.

The full-size (non-embedded) layouts are unchanged. `embedded` is threaded from
the History/Network panels into the entries.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-07-08 20:53:23 -04:00
commit 3550b64032

View file

@ -16,6 +16,16 @@ export const ThemeText = Text.extend({
},
};
}
// Single-line text that never wraps — used inside a horizontal ScrollArea so
// a long value (e.g. a network URL in the compact column) scrolls instead of
// wrapping to many lines (#1616).
if (props.variant === "nowrap") {
return {
root: {
whiteSpace: "nowrap",
},
};
}
return { root: {} };
},
});