FE-1548: Rework the optimization and sweep drawer views

[kube]

🌟 What is the purpose of this PR?

Reorganizes the experiment and optimization result drawers so the graphs come before the event lists: the summary, the navigator, and the surface hold still at the top of the drawer, and only the step/metric lists scroll, each in its own container. Stacked on #9421.

🔗 Related links

• FE-1548 (internal)
• Base PR: FE-1547: Isolate the contour and sweep components with dedicated stories #9421

🔍 What does this change?

• The optimization drawer's section order is now Summary → Best parameters → Surface → Steps (the surface previously sat below the steps).
• The experiment drawer's section order is now Summary → Parameters → Surface → Metrics (the surface previously sat below the metric charts).
• Both drawer bodies are flex columns that no longer scroll as a whole: the sections above the list are fixed, and the steps table / metric grid scrolls in its own container filling the remaining height.
• The steps table's header row stays pinned while the list scrolls (the sticky element is the header's rowgroup — a sticky row can only move within its own rowgroup, which is exactly as tall as the row).
• Fixes the surface control row's clipped labels: the ds Select's root insists on min-width: min-content, which overflowed its 170px box over the neighbouring "Y"/"Metric" labels.
• Updates the experiments and optimization user-guide pages for the new section order and scroll behaviour.

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• modifies an npm-publishable library and I have added a changeset file(s)

📜 Does this require a change to the docs?

The changes in this PR:

• require changes to docs which are made as part of this PR

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

• do not affect the execution graph

🛡 What tests cover this?

• The existing petrinaut unit suite passes; the layout change itself is visual and was verified in Storybook (list scrolls in isolation, drawer body holds still, table header pinned — checked by DOM probes and screenshots).

❓ How to test this?

1. Run yarn workspace @hashintel/petrinaut dev.
2. Open "Simulate / SimulateView / Parameter sweep" and click the sweep row: the summary, sliders, and surface stay put; only the metric charts scroll.
3. Open "Simulate / SimulateView / Run Supply Chain optimization", create a study over two parameters, and open its row: the surface sits above the steps, the steps list scrolls in place, and its header row stays pinned.

📹 Demo

(screenshots to be attached — files handed over alongside this PR)

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview	Aug 29, 2026 2:52am
petrinaut	Ready	Preview	Aug 29, 2026 2:52am
petrinaut-docs	Ready	Preview	Aug 29, 2026 2:52am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
hashdotdesign-tokens	Ignored	Preview	Aug 29, 2026 2:52am