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>

clients/web/src/components/groups/ToolControls/ToolControls.tsx

@@ -17,9 +17,6 @@ export interface ToolControlsProps {
   onSelectTool: (name: string) => void;
 }
 
-const LIST_MAX_HEIGHT =
-  "calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2 - 160px)";
-
 export function ToolControls({
   tools,
   selectedName,
@@ -40,7 +37,12 @@ export function ToolControls({
     : tools;
 
   return (
-    <Stack gap="sm">
+    // Fill the full-height `sidebar` Card (a flex column) so the scroll region
+    // below claims all the remaining space under the fixed title/search — the
+    // list runs to the bottom of the card before it scrolls, instead of being
+    // capped short by a fixed max-height. `mih: 0` lets the scroll child shrink
+    // and scroll rather than overflow the card.
+    <Stack gap="sm" flex={1} mih={0}>
       <Group justify="space-between">
         <Title order={4}>Tools</Title>
         <ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
@@ -54,7 +56,7 @@ export function ToolControls({
           searchText ? <ClearButton onClick={() => onSearchChange("")} /> : null
         }
       />
-      <ScrollArea.Autosize viewportRef={viewportRef} mah={LIST_MAX_HEIGHT}>
+      <ScrollArea viewportRef={viewportRef} flex={1} mih={0} type="auto">
         <Stack gap="xs">
           {filteredTools.map((tool) => (
             <ToolListItem
@@ -67,7 +69,7 @@ export function ToolControls({
             />
           ))}
         </Stack>
-      </ScrollArea.Autosize>
+      </ScrollArea>
     </Stack>
   );
 }