From a71d0af58bccc58ee7e99a9f9aed0098eab80818 Mon Sep 17 00:00:00 2001
From: Ethan Arrowood <ethan@arrowood.dev>
Date: Wed, 21 Jan 2026 08:54:47 -0700
Subject: [PATCH] Fix Stack Details overlay height in FullFlameGraph
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Stack Details overlay height as part of the FullFlameGraph page was
being truncated due the `height: 100%` styling. I modified the styles
so now the overlay will have a height that exceeds the graph height but
still constrained to the overall height of the viewport. The overlay now
scrolls within itself if it exceeds the height of the page.

Changes:
- Added flexbox layout to body in cli-template.html to support flex children
- Updated FullFlameGraph overlay to use `maxHeight: calc(100vh - 112px)`
- Changed from `height: 100%` to `height: auto` with `overflowY: scroll`
- Added test to verify the heights no longer match

The 112px offset accounts for header and control elements above the graph.

Fixes https://github.com/platformatic/react-pprof/issues/49

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/cli-template.html             |  2 ++
 src/components/FullFlameGraph.tsx |  8 ++++++--
 tests/full-flamegraph.spec.ts     | 26 ++++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/cli-template.html b/src/cli-template.html
index 8cc5960..22a0bb5 100644
--- a/src/cli-template.html
+++ b/src/cli-template.html
@@ -8,6 +8,8 @@
     * { box-sizing: border-box; }
     html, body { margin: 0; padding: 0; height: 100%; }
     body {
+      display: flex;
+      flex-direction: column;
       background-color: #1e1e1e;
       color: #ffffff;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
diff --git a/src/components/FullFlameGraph.tsx b/src/components/FullFlameGraph.tsx
index 30a78a5..c4c1b16 100644
--- a/src/components/FullFlameGraph.tsx
+++ b/src/components/FullFlameGraph.tsx
@@ -388,10 +388,14 @@ export const FullFlameGraph: React.FC<FullFlameGraphProps> = ({
             top: 0,
             right: 0,
             width: '400px',
-            height: '100%',
+            height: 'auto',
+            // The 112px here is based off of the other hard coded px values of
+            // the header and control elements in order to limit the height of
+            // this element to always be constrained within the viewport.
+            maxHeight: 'calc(100vh - 112px)',
+            overflowY: 'scroll',
             backgroundColor: `${backgroundColor}F0`,
             boxShadow: '-4px 0 12px rgba(0, 0, 0, 0.3)',
-            overflow: 'hidden',  // Changed from overflowY: 'auto' to prevent double scrollbars
             zIndex: 10,
             boxSizing: 'border-box',  // Include padding in width calculation
           }}>
diff --git a/tests/full-flamegraph.spec.ts b/tests/full-flamegraph.spec.ts
index 3787838..ae6dfac 100644
--- a/tests/full-flamegraph.spec.ts
+++ b/tests/full-flamegraph.spec.ts
@@ -139,6 +139,32 @@ test.describe('FullFlameGraph Component', () => {
       // May or may not show stack details
       expect(hasStack).toBeDefined()
     })
+
+    test('stack details container height is not the same as flamegraph height', async ({ page }) => {
+      const utils = new FlameGraphTestUtils(page)
+      await utils.navigateToTest({ fullFlameGraph: true })
+
+      const container = page.locator('[data-testid="full-flamegraph-container"]')
+      const canvas = container.locator('canvas').first()
+
+      const canvasBoundingBox = await canvas.boundingBox()
+
+      expect(canvasBoundingBox).not.toBeNull()
+
+      const canvasHeight = canvasBoundingBox!.height
+
+      await canvas.click({ position: { x: 200, y: 50 } })
+      await page.waitForTimeout(1000)
+
+      const stackDetailsOverlay = container.locator('.stack-details-container')
+      await expect(stackDetailsOverlay).toBeVisible()
+
+      const stackDetailsOverlayBoundingBox = await stackDetailsOverlay.boundingBox()
+      expect(stackDetailsOverlayBoundingBox).not.toBeNull()
+
+      // Ensure that the Stack Details within the FullFlameGraph is not the same height.
+      expect(stackDetailsOverlayBoundingBox!.height).not.toBe(canvasHeight)
+    })
   })
 
   test.describe('Performance', () => {