Mastra Studio Trace Page Scroll Fix

mastra-studio-trace-page-scroll-fix.md

Mastra Studio Trace Page Scroll Fix

Summary

The trace page card content was expanding beyond the browser viewport. The left Trace Timeline section and the right Span Details section needed to be scrollable independently within a card area constrained to the viewport height.

Root cause

The parent page layout used a grid row setup equivalent to:

grid-rows-[auto_auto]

That lets the content row grow to the full height of its children. Because the trace timeline can be extremely tall, the two-column card grid grew to tens of thousands of pixels. As a result, max-h-full on the child cards did not help because the parent height was already huge.

The trace page grid also used items-start, which allowed each column to size itself to its contents instead of stretching within the constrained row.

Verified live behavior

I applied a live CSS fix in the browser and verified:

• Main content was constrained to the viewport.
• The two-column trace card area was constrained to the remaining page height.
• The left timeline body became independently scrollable.
• The right span details panel became independently scrollable.

See mastra-scroll-fix.png in this folder for visual proof.

Persistent patch

Page layout wrapper

Change the page layout so the content row is constrained:

<Lt className="grid-rows-[auto_minmax(0,1fr)] h-full min-h-0 overflow-hidden">

If this is controlled by the shared Lt page component, update the height="full" variant from:

h-full grid-rows-[auto_1fr] overflow-y-auto

or from any route override using:

grid-rows-[auto_auto]

to:

h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden

Trace page two-column grid

Change:

<div
  className={K(
    "grid h-full min-h-0 gap-4 overflow-hidden items-start mt-4",
    selectedSpanId ? "grid-cols-[2fr_3fr]" : "grid-cols-[1fr]"
  )}
>

to:

<div
  className={K(
    "grid h-full min-h-0 gap-4 overflow-hidden items-stretch mt-4",
    selectedSpanId ? "grid-cols-[2fr_3fr]" : "grid-cols-[1fr]"
  )}
>

Right panel container

Change:

<div
  className={K(
    "grid gap-4 max-h-full min-h-0 overflow-auto",
    selectedScore ? "grid-rows-[1fr_1fr]" : "grid-rows-[1fr]"
  )}
>

to:

<div
  className={K(
    "grid gap-4 h-full max-h-full min-h-0 overflow-auto",
    selectedScore ? "grid-rows-[1fr_1fr]" : "grid-rows-[1fr]"
  )}
>

Timeline card body

Make sure the timeline card body includes min-h-0:

className="flex-1 min-h-0 p-4 overflow-y-auto"

Live CSS test that was applied

This is the equivalent live DOM style patch I used to validate the behavior in the browser:

const h = [...document.querySelectorAll('h3')]
  .find(e => e.textContent?.includes('Trace Timeline'));
const leftSection = h?.closest('section');
const grid = leftSection?.parentElement;
const main = grid?.closest('main');
const leftBody = leftSection?.children?.[1];
const rightCol = grid?.children?.[1];

Object.assign(main.style, {
  height: '100%',
  minHeight: '0',
  overflow: 'hidden',
  gridTemplateRows: 'auto minmax(0, 1fr)',
  alignContent: 'normal',
});

Object.assign(grid.style, {
  height: '100%',
  minHeight: '0',
  maxHeight: '100%',
  overflow: 'hidden',
  alignItems: 'stretch',
});

Object.assign(leftSection.style, {
  height: '100%',
  minHeight: '0',
  maxHeight: '100%',
  overflow: 'hidden',
});

Object.assign(leftBody.style, {
  minHeight: '0',
  overflowY: 'auto',
});

Object.assign(rightCol.style, {
  height: '100%',
  minHeight: '0',
  maxHeight: '100%',
  overflowY: 'auto',
});