Fix Stack Details overlay height in FullFlameGraph

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;

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
           }}>

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', () => {