fix(web): make sidebar lists, monitor panels, and Tools placeholder fill height (#1663) (#1664)

Three related "fill the available height" layout fixes to the connected screens:

- Tools & Prompts sidebars: replace the fixed magic max-height on ToolControls/
  PromptControls with the Resources pattern — sidebar Card `variant="sidebar"`
  (full-height flex column) + `Stack flex={1} mih={0}` + a flex-filling
  ScrollArea — so the list runs to the bottom of the card before scrolling.
- Logs/Console/Protocol/Network standalone screens: only override ScreenLayout
  `h` when embedded. Passing `h={undefined}` clobbered the default
  `h: calc(100dvh - header)` (withProps plain-spreads), collapsing an empty
  screen to its controls' height. Also center the Network/Protocol empty states.
- Tools placeholder: render the "Select a tool" empty state in a full-height
  `DetailCard flex={1}` (like Prompts/Resources) instead of the content-sized
  preview card, so it fills the pane.


Claude-Session: https://claude.ai/code/session_015sMW1YZXkM7fDkdPtHpE95

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cliff Hall 2026-07-11 18:45:50 -04:00 • committed by GitHub
commit 6722438428
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -34,10 +34,17 @@ const PanelContainer = Paper.withProps({
variant: "panel",
});
// Centered in the full-height panel so the empty message sits mid-panel rather
// than clinging to the top of an otherwise-empty box (matches LogStreamPanel).
const EmptyCenter = Stack.withProps({
flex: 1,
align: "center",
justify: "center",
});
const EmptyState = Text.withProps({
c: "dimmed",
ta: "center",
py: "xl",
});
function formatTitle(count: number): string {
@ -133,7 +140,9 @@ export function NetworkStreamPanel({
</Group>
{!hasResults ? (
<EmptyState>No network requests</EmptyState>
<EmptyCenter>
<EmptyState>No network requests</EmptyState>
</EmptyCenter>
) : (
<EmbeddableScrollArea
embedded={embedded}