Contain resource preview: sticky header/footer, scrollable body

Restructure ResourcePreviewPanel into a fixed-height column with the
resource title + URI pinned to the top and the timestamp / annotations /
subscribe-refresh actions pinned to the bottom. The content viewer area
in the middle now owns its own ScrollArea, so a long markdown body
scrolls within the panel instead of pushing the subscribe button below
the viewport.

In ResourcesScreen, the selectedResource branch (and the template
branch's right pane) now hosts the panel inside a PreviewPane Flex
column with the screen's max-height, and renderReadState wraps in a
FillDetailCard sized to fill that column. The legacy outer
ScrollArea.Autosize is removed for these panes since scrolling is
internal now.

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

Author: cliffhall

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

@@ -1,4 +1,12 @@
-import { Button, Flex, Group, Stack, Text, Title } from "@mantine/core";
+import {
+  Button,
+  Flex,
+  Group,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import type {
   BlobResourceContents,
   ContentBlock,
@@ -88,6 +96,31 @@ 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.
+const PanelStack = Stack.withProps({
+  gap: "md",
+  h: "100%",
+  flex: 1,
+  miw: 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.
+const ContentScroll = ScrollArea.withProps({
+  flex: 1,
+  miw: 0,
+  type: "auto",
+  scrollbars: "y",
+  offsetScrollbars: true,
+});
+
+const ContentStack = Stack.withProps({
+  gap: "md",
+});
+
 // Infer a markdown MIME from the URI when the server didn't supply one.
 // MCP servers often return `text/plain` (or omit mimeType entirely) for
 // `.md` resources; the file extension is the most reliable fallback signal.
@@ -125,22 +158,26 @@ export function ResourcePreviewPanel({
   const mimeType = effectiveMime(contents[0]?.mimeType, resource);
 
   return (
-    <Stack gap="md">
+    <PanelStack>
       <HeaderRow>
         <Title order={4}>Resource</Title>
         <UriGroup>
           <UriText>{uri}</UriText>
           <CopyButton value={uri} />
         </UriGroup>
       </HeaderRow>
-      {contents.map((item, index) => (
-        <ContentViewer
-          key={index}
-          block={toContentBlock(item)}
-          mimeType={effectiveMime(item.mimeType, resource)}
-          copyable
-        />
-      ))}
+      <ContentScroll>
+        <ContentStack>
+          {contents.map((item, index) => (
+            <ContentViewer
+              key={index}
+              block={toContentBlock(item)}
+              mimeType={effectiveMime(item.mimeType, resource)}
+              copyable
+            />
+          ))}
+        </ContentStack>
+      </ContentScroll>
       <MetaRow>
         {lastUpdated ? (
           <TimestampText>{formatLastUpdated(lastUpdated)}</TimestampText>
@@ -168,6 +205,6 @@ export function ResourcePreviewPanel({
           />
         </ActionGroup>
       </FooterRow>
-    </Stack>
+    </PanelStack>
   );
 }

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

@@ -62,6 +62,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({
+  withBorder: true,
+  padding: "lg",
+  h: "100%",
+});
+
+// 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.
+const PreviewPane = Flex.withProps({
+  flex: 1,
+  miw: 0,
+  direction: "column",
+});
+
 const EmptyState = Text.withProps({
   c: "dimmed",
   ta: "center",
@@ -125,28 +143,28 @@ export function ResourcesScreen({
 
     if (readState.status === "pending") {
       return (
-        <DetailCard>
+        <FillDetailCard>
           <Stack align="center" py="xl">
             <Loader size="sm" />
             <Text c="dimmed">Reading resource...</Text>
           </Stack>
-        </DetailCard>
+        </FillDetailCard>
       );
     }
 
     if (readState.status === "error") {
       return (
-        <DetailCard>
+        <FillDetailCard>
           <Alert color="red" variant="light" title="Read Error">
             {readState.error ?? "Failed to read resource"}
           </Alert>
-        </DetailCard>
+        </FillDetailCard>
       );
     }
 
     if (readState.result && readResource) {
       return (
-        <DetailCard>
+        <FillDetailCard>
           <ResourcePreviewPanel
             resource={readResource}
             contents={readState.result.contents}
@@ -156,7 +174,7 @@ export function ResourcesScreen({
             onSubscribe={() => onSubscribeResource(readResource.uri)}
             onUnsubscribe={() => onUnsubscribeResource(readResource.uri)}
           />
-        </DetailCard>
+        </FillDetailCard>
       );
     }
 
@@ -183,7 +201,14 @@ export function ResourcesScreen({
       </Sidebar>
 
       {selectedTemplate ? (
-        <Group flex={1} miw={0} gap="md" align="flex-start" wrap="nowrap">
+        <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
@@ -192,21 +217,21 @@ export function ResourcesScreen({
               />
             </DetailCard>
           </ScrollArea.Autosize>
-          <ScrollArea.Autosize flex={1} miw={0} mah={SCROLL_MAX_HEIGHT}>
+          <PreviewPane>
             {renderReadState() ?? (
-              <DetailCard>
+              <FillDetailCard>
                 <EmptyState>Enter a URI and click Read to preview</EmptyState>
-              </DetailCard>
+              </FillDetailCard>
             )}
-          </ScrollArea.Autosize>
+          </PreviewPane>
         </Group>
       ) : selectedResource ? (
-        // miw=0 lets the flex item shrink below its content's intrinsic
-        // width; without it a single long unwrappable line in the resource
-        // body would push the panel past the viewport's right edge.
-        <ScrollArea.Autosize flex={1} miw={0} mah={SCROLL_MAX_HEIGHT}>
-          {renderReadState()}
-        </ScrollArea.Autosize>
+        // 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.
+        <PreviewPane mah={SCROLL_MAX_HEIGHT}>{renderReadState()}</PreviewPane>
       ) : (
         <DetailCard flex={1}>
           <EmptyState>Select a resource to preview</EmptyState>