Auto-hide template after read; size preview to content with cap

- After the user clicks Read Resource on the template form,
  handleReadResource now clears selectedTemplateUri so the screen
  swaps from the template form to the resource preview. Previously
  both panels stayed mounted side-by-side.
- The preview no longer hard-fills the viewport. The Card uses a new
  "preview" theme variant (overflow: hidden) and is content-sized,
  capped at SCROLL_MAX_HEIGHT. ResourcePreviewPanel's flex column
  marks the header / meta / footer rows as `flex: 0 0 auto` and the
  ContentScroll as `flex: 0 1 auto` with `mih: 0`, so:
    - short content → card hugs it, footer sits right under the body
    - long content → card caps at viewport, ContentScroll shrinks
      and scrolls internally, footer stays pinned at the cap
- ScrollArea / Group imports in ResourcesScreen pruned to match the
  simpler single-pane layout.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: cliffhall

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

@@ -54,6 +54,7 @@ function formatLastUpdated(date: Date): string {
 const HeaderRow = Group.withProps({
   justify: "space-between",
   wrap: "nowrap",
+  flex: "0 0 auto",
 });
 
 const UriGroup = Group.withProps({
@@ -70,6 +71,7 @@ const UriText = Text.withProps({
 const MetaRow = Group.withProps({
   justify: "space-between",
   wrap: "nowrap",
+  flex: "0 0 auto",
 });
 
 const TimestampText = Text.withProps({
@@ -84,6 +86,7 @@ const MimeText = Text.withProps({
 
 const FooterRow = Group.withProps({
   justify: "space-between",
+  flex: "0 0 auto",
 });
 
 const AnnotationGroup = Group.withProps({
@@ -96,22 +99,25 @@ const ActionGroup = Group.withProps({
 
 const Spacer = Flex.withProps({});
 
-// Outer container fills the parent (a fixed-height Card in the resource
-// branch of ResourcesScreen) so the header/footer can pin to its edges
-// while the content area scrolls.
+// The panel sizes to its content: when the resource body is short the
+// Card hugs it; when the body would overflow the Card's `mah`, the
+// browser shrinks shrinkable flex items (only ContentScroll, since the
+// header / meta / footer rows opt out with `flex: 0 0 auto`) and the
+// inner ScrollArea takes over scrolling — keeping the subscribe button
+// pinned at the bottom edge of the cap.
 const PanelStack = Stack.withProps({
   gap: "md",
-  h: "100%",
-  flex: 1,
   miw: 0,
+  mih: 0,
 });
 
-// The middle scroll region. flex=1 lets it absorb the height left over
-// after the header / meta / footer rows; miw=0 prevents wide markdown
-// (tables, long links) from pushing the panel past the viewport.
+// Middle scroll region: basis sized to its own content, can shrink to
+// fit the available space when content overflows, never grows past its
+// content (so a short resource body doesn't push the footer down).
 const ContentScroll = ScrollArea.withProps({
-  flex: 1,
+  flex: "0 1 auto",
   miw: 0,
+  mih: 0,
   type: "auto",
   scrollbars: "y",
   offsetScrollbars: true,

clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx

@@ -110,10 +110,27 @@ describe("ResourcesScreen", () => {
     await user.click(screen.getByText("Templates (1)"));
     await user.click(screen.getByText("files"));
     expect(
-      screen.getByText("Enter a URI and click Read to preview"),
+      screen.getByRole("button", { name: "Read Resource" }),
     ).toBeInTheDocument();
   });
 
+  it("hides the template panel once the user reads the resource", async () => {
+    const user = userEvent.setup();
+    const onReadResource = vi.fn();
+    renderWithMantine(
+      <ResourcesScreen {...baseProps} onReadResource={onReadResource} />,
+    );
+    await user.click(screen.getByText("Templates (1)"));
+    await user.click(screen.getByText("files"));
+    await user.type(screen.getByLabelText("path"), "alpha");
+    await user.click(screen.getByRole("button", { name: "Read Resource" }));
+    expect(onReadResource).toHaveBeenCalledWith("file:///alpha");
+    // After read, the template form is gone and the preview branch is active.
+    expect(
+      screen.queryByRole("button", { name: "Read Resource" }),
+    ).not.toBeInTheDocument();
+  });
+
   it("auto-reads when a resource is clicked in the sidebar", async () => {
     const user = userEvent.setup();
     const onReadResource = vi.fn();

clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx

@@ -1,14 +1,5 @@
 import { useState } from "react";
-import {
-  Alert,
-  Card,
-  Flex,
-  Group,
-  Loader,
-  ScrollArea,
-  Stack,
-  Text,
-} from "@mantine/core";
+import { Alert, Card, Flex, Loader, Stack, Text } from "@mantine/core";
 import type {
   ReadResourceResult,
   Resource,
@@ -62,22 +53,24 @@ const DetailCard = Card.withProps({
   padding: "lg",
 });
 
-// Same as DetailCard but stretched to fill its parent's height. Used in
-// the preview pane so the ResourcePreviewPanel can pin its header/footer
-// to the card's edges while the content scrolls in the middle.
-const FillDetailCard = Card.withProps({
+// Card that sizes to its content but caps at the screen's available
+// height. When content fits, the card stays compact (footer sits right
+// under the body); when content would overflow, the inner ScrollArea
+// inside ResourcePreviewPanel shrinks and scrolls.
+const PreviewCard = Card.withProps({
   withBorder: true,
   padding: "lg",
-  h: "100%",
+  variant: "preview",
 });
 
-// Fixed-height column that hosts the FillDetailCard. Replaces the prior
-// ScrollArea.Autosize wrapping so the panel's internal scroll region —
-// not the whole card — handles overflow.
+// Column that pins the preview card to the top of the available space
+// and bounds its growth via the consumer-set `mah`. The card inside
+// keeps its natural height up to that cap.
 const PreviewPane = Flex.withProps({
   flex: 1,
   miw: 0,
   direction: "column",
+  align: "stretch",
 });
 
 const EmptyState = Text.withProps({
@@ -134,6 +127,11 @@ export function ResourcesScreen({
   }
 
   function handleReadResource(uri: string) {
+    // Once the user reads (either from the template form or a refresh
+    // inside the preview panel), hand the screen over to the preview:
+    // clearing the template selection hides the template form so only
+    // the rendered resource is shown.
+    setSelectedTemplateUri(undefined);
     setSelectedResourceUri(uri);
     onReadResource(uri);
   }
@@ -143,28 +141,28 @@ export function ResourcesScreen({
 
     if (readState.status === "pending") {
       return (
-        <FillDetailCard>
+        <PreviewCard>
           <Stack align="center" py="xl">
             <Loader size="sm" />
             <Text c="dimmed">Reading resource...</Text>
           </Stack>
-        </FillDetailCard>
+        </PreviewCard>
       );
     }
 
     if (readState.status === "error") {
       return (
-        <FillDetailCard>
+        <PreviewCard>
           <Alert color="red" variant="light" title="Read Error">
             {readState.error ?? "Failed to read resource"}
           </Alert>
-        </FillDetailCard>
+        </PreviewCard>
       );
     }
 
     if (readState.result && readResource) {
       return (
-        <FillDetailCard>
+        <PreviewCard>
           <ResourcePreviewPanel
             resource={readResource}
             contents={readState.result.contents}
@@ -174,7 +172,7 @@ export function ResourcesScreen({
             onSubscribe={() => onSubscribeResource(readResource.uri)}
             onUnsubscribe={() => onUnsubscribeResource(readResource.uri)}
           />
-        </FillDetailCard>
+        </PreviewCard>
       );
     }
 
@@ -201,36 +199,25 @@ export function ResourcesScreen({
       </Sidebar>
 
       {selectedTemplate ? (
-        <Group
-          flex={1}
-          miw={0}
-          mah={SCROLL_MAX_HEIGHT}
-          gap="md"
-          align="stretch"
-          wrap="nowrap"
-        >
-          <ScrollArea.Autosize flex={1} miw={0} mah={SCROLL_MAX_HEIGHT}>
-            <DetailCard>
-              <ResourceTemplatePanel
-                template={selectedTemplate}
-                onReadResource={handleReadResource}
-              />
-            </DetailCard>
-          </ScrollArea.Autosize>
-          <PreviewPane>
-            {renderReadState() ?? (
-              <FillDetailCard>
-                <EmptyState>Enter a URI and click Read to preview</EmptyState>
-              </FillDetailCard>
-            )}
-          </PreviewPane>
-        </Group>
-      ) : selectedResource ? (
-        // Fixed-height column lets the preview panel pin its header and
-        // subscribe/refresh footer to the card's edges while the resource
-        // body scrolls inside the panel. miw=0 prevents wide content
-        // (long unbroken lines, tables) from pushing the pane past the
-        // viewport's right edge.
+        // Template form only — once the user clicks Read Resource,
+        // handleReadResource clears the template selection so the
+        // resource branch takes over and the preview is shown alone.
+        <PreviewPane mah={SCROLL_MAX_HEIGHT}>
+          <PreviewCard>
+            <ResourceTemplatePanel
+              template={selectedTemplate}
+              onReadResource={handleReadResource}
+            />
+          </PreviewCard>
+        </PreviewPane>
+      ) : readResource ? (
+        // Sized-to-content preview pane, capped at the screen's available
+        // height. When the resource body fits, the card hugs its content
+        // and the subscribe/refresh row sits right under it. When the body
+        // would overflow, the inner ScrollArea inside ResourcePreviewPanel
+        // shrinks and scrolls, keeping the footer pinned at the cap.
+        // miw=0 prevents wide content (long unbroken lines, tables) from
+        // pushing the pane past the viewport's right edge.
         <PreviewPane mah={SCROLL_MAX_HEIGHT}>{renderReadState()}</PreviewPane>
       ) : (
         <DetailCard flex={1}>

clients/web/src/theme/Card.ts

@@ -20,6 +20,19 @@ export const ThemeCard = Card.extend({
         },
       };
     }
+    if (props.variant === "preview") {
+      // Container for the resource preview / template form panels: sizes to
+      // content (no forced height) but caps at the screen's available area
+      // via consumer-set `mah`. `overflow: hidden` lets a flex-shrunk inner
+      // ScrollArea take over scrolling when content exceeds the cap, instead
+      // of the whole card bleeding past the viewport.
+      return {
+        root: {
+          backgroundColor: "var(--inspector-surface-card)",
+          overflow: "hidden",
+        },
+      };
+    }
     return {
       root: { backgroundColor: "var(--inspector-surface-card)" },
     };