refactor(web): share screen fade-up animation with the monitoring column

Extract the primary pane's per-screen enter/exit transition into a shared
`ScreenStage` element (the `fade-up` Mantine Transition: incoming screen slides
up + fades in while the outgoing fades down + out, both absolutely positioned).
InspectorView now imports it (behavior unchanged), and the pinned monitoring
column uses it too — via a new `fill` variant that stretches the stage to the
column's height — so switching Logs/Protocol/Network animates the same way as
switching the main screens.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BrihGWcrM9JGRyu41nzZYw

clients/web/src/components/elements/ScreenStage/ScreenStage.test.tsx

@@ -0,0 +1,32 @@
+import { describe, it, expect } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { ScreenStage } from "./ScreenStage";
+
+describe("ScreenStage", () => {
+  it("renders its screen when active", () => {
+    renderWithMantine(
+      <ScreenStage active>
+        <div>active screen</div>
+      </ScreenStage>,
+    );
+    expect(screen.getByText("active screen")).toBeInTheDocument();
+  });
+
+  it("renders nothing when inactive (outgoing screen unmounts)", () => {
+    renderWithMantine(
+      <ScreenStage active={false}>
+        <div>inactive screen</div>
+      </ScreenStage>,
+    );
+    expect(screen.queryByText("inactive screen")).toBeNull();
+  });
+
+  it("still renders its screen in the fill variant", () => {
+    renderWithMantine(
+      <ScreenStage active fill>
+        <div>filled screen</div>
+      </ScreenStage>,
+    );
+    expect(screen.getByText("filled screen")).toBeInTheDocument();
+  });
+});

clients/web/src/components/elements/ScreenStage/ScreenStage.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import { Box, Transition } from "@mantine/core";
+
+/** Screen enter / exit durations for the shared `fade-up` stage transition. */
+export const SCREEN_ENTER_MS = 350;
+export const SCREEN_EXIT_MS = 250;
+
+export interface ScreenStageProps {
+  /** True when this stage's screen is the active one. */
+  active: boolean;
+  children: ReactNode;
+  /**
+   * Stretch the stage to fill its relative-positioned parent (adds `bottom: 0`).
+   * Needed where the screen relies on the parent for height (e.g. an inner
+   * ScrollArea in the monitoring column). Off by default so callers whose
+   * screens size themselves keep the top/left/right anchoring.
+   */
+  fill?: boolean;
+}
+
+/**
+ * Wraps a screen in a Mantine `fade-up` Transition so that, on switch, the
+ * incoming screen slides up and fades in while the outgoing one fades down and
+ * out — both mounted at once via absolute positioning. With Transition's default
+ * (`keepMounted={false}`) the outgoing screen unmounts after its exit animation,
+ * resetting any local screen state (search filters, scroll, expanded sections).
+ *
+ * Shared by the primary InspectorView pane and the pinned monitoring column so
+ * both use identical enter/exit motion (#1639-follow-up). Must be rendered
+ * inside a `position: relative` container.
+ */
+export function ScreenStage({
+  active,
+  children,
+  fill = false,
+}: ScreenStageProps) {
+  return (
+    <Transition
+      mounted={active}
+      transition="fade-up"
+      duration={SCREEN_ENTER_MS}
+      exitDuration={SCREEN_EXIT_MS}
+      timingFunction="ease"
+    >
+      {(styles) => (
+        // `style={styles}` is the runtime transition state from Mantine's
+        // Transition API — interpolated values, not static styling.
+        <Box
+          style={styles}
+          pos="absolute"
+          top={0}
+          left={0}
+          right={0}
+          bottom={fill ? 0 : undefined}
+        >
+          {children}
+        </Box>
+      )}
+    </Transition>
+  );
+}