fix(portal): keep HAR detail panel in view when selecting lower rows (#740)

[idhanth]

Summary

Closes #740.

In the Network tab, selecting a HAR row far down the request list opened the detail panel at the top of the table, off-screen, so you had to scroll back up to see it.

Cause: DetailPanel in HarNetworkViewer.tsx sits in a flex row next to the table. It had a fixed max-h-[600px] and nothing to keep it in view, so it always rendered at the top of the row, however far down the selected request was.

Fix (one line): the panel is now self-start sticky top-12 max-h-[calc(100vh-3rem)].

• sticky top-12 keeps it in view while the page scrolls. top-12 clears the portal's 3rem sticky app header.
• self-start stops the flex row from stretching the panel to the table's full height; otherwise sticky has no effect.
• max-h-[calc(100vh-3rem)] caps it at the visible height. The panel body already scrolls on its own.
• This is the same pattern the portal sidebar uses in Layout.tsx.

I checked the conditions sticky depends on:

• /runs/:id isn't a full-bleed route, so the window is what scrolls.
• No container around the panel clips overflow (Card doesn't).
• Both places HarNetworkViewer is rendered in RunDetail.tsx are outside any inner scrolling container.

Storybook: added HarNetworkViewer.stories.tsx with a LongList story (60 HAR entries, large response bodies, data served by an MSW mock). It reproduces the issue and shows the fix. It's tagged ["ai-generated", "needs-work"] like the other component stories.

Demos

The recordings use the LongList story: scroll about two-thirds down, select a row, keep scrolling.

Before

740-before.webm

The row is selected, but the detail panel stays at the top of the table, off-screen.

After

740-after-v2.webm

The detail panel stays pinned next to the selected row while scrolling.

Testing

All runs were local on macOS arm64, with Node 22 and pnpm 10.29.1, on top of main at b2a548b9.

• pnpm install --frozen-lockfile: passes.
• pnpm test: 233 files / 2995 tests passed, 6 skipped.
• Portal type-check (tsc --noEmit, the portal's lint script): passes.
• Storybook (pnpm storybook, components/HarNetworkViewer → Long List), checked in the browser:
  • With row 47 selected and the page scrolled 2095px down, the panel stays pinned 48px from the top and fully in view. Before the fix it was off-screen.
  • The panel height stays within the viewport cap. The Response Body tab still scrolls inside its own box, and there's no horizontal page overflow.
• The before/after recordings were made with Playwright against the same story. Each run checked that the panel's sticky class was absent before the fix and present after it.

Documentation and compatibility

None needed. This is a styling fix to one portal component, with no API, CLI or data changes.

Checklist

• N/A: If Portal features changed, keep CLI capabilities in sync. (Layout-only fix; no feature change.)
• If Portal components changed, update their Storybook stories. (Added HarNetworkViewer.stories.tsx.)
• N/A: If database changes require a migration, include up() / down() and keep it CosmosDB-compatible.
• N/A: If dependencies changed, update the lockfile and regenerate NOTICE / NOTICE-REVIEW.txt with pnpm notice as needed.
• Video showing the behavior before the suggested change
• Video showing the behavior after the suggested change

🤖 Generated with Claude Code

[Cedric Vidal (cedricvidal)]

Hey idhanth, thank you so much for this PR! I've been wanting to fix this for a while! Could you please try to make it a bit nicer by making it flush on the top and have a border on the bottom?

[idhanth]

Thanks for the look, and for merging main in! Pushed a fix: added the bottom border, and the panel now sits flush under the header. The gap was coming from the story not having the app header, so I added a stand-in there to match how it renders in the portal. Updated the "after" video in the description too. Let me know if anything still looks off.

[Cedric Vidal (cedricvidal)]

LGTM, thank you for your contribution!