FE-1715: Stop the embedded playback bar showing a scrollbar on hover

[claude]

Requested by Ciaran Morinan · Slack thread

🌟 What is the purpose of this PR?

FE-1715. The playback bar in the embedded Petrinaut preview shows a vertical scrollbar while the pointer rests on one of its buttons.

Before: you move the pointer onto the Play button in an embedded preview's playback bar, and a thin vertical scrollbar appears down the inside of the bar's right edge. It stays for as long as the pointer is on the button and goes when you move away. Whether it appears at all depends on the reader's platform: macOS draws overlay scrollbars and shows nothing, while Windows and most Linux draw a classic scrollbar that takes up space and is plainly visible. The same happens on the reset and settings buttons.

After: the bar looks the same on every platform whether or not the pointer is on a button. A narrow embed still scrolls the row sideways to reach the controls at the end of it.

How: the row of controls sits in a wrapper that declares overflow-x: auto, so a narrow embed can scroll sideways. Setting overflow on one axis makes the other axis compute to auto as well, so the wrapper scrolls vertically too. ToolbarButton scales to 1.1 on hover, and a transformed child counts towards a scroll container's scrollable area even though the transform takes no layout space, so the wrapper gains about 1.6px of scrollable height for as long as the pointer is on a button. Declaring overflow-y: hidden leaves the sideways scrolling in place and stops the vertical scrollbar.

SimulationControls is shared with the editor's bottom toolbar, but the scrolling wrapper is not. The editor's toolbar has no scroll container around its row, so it never had the scrollbar and this change does not reach it.

Prior art: FE-1233 fixed the same class of problem in the bottom panel.

🔗 Related links

• FE-1715 (internal)

🔍 What does this change?

• Adds overflow-y: hidden to playbackControlsScrollStyle in the preview's playback controls.
• Adds a patch changeset for @hashintel/petrinaut.

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:

• are internal and do not require a docs change

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

The changes in this PR:

• do not affect the execution graph

⚠️ Known issues

The bar is one row of controls with nothing below it, so clipping the vertical axis removes nothing a reader could reach. The hovered button's scaled box already sat outside the wrapper on both the top and the bottom edge; the rendering is unchanged.

🛡 What tests cover this?

None. The behaviour is a computed CSS value in a Panda style object, which the unit tests do not render.

❓ How to test this?

1. Turn classic scrollbars on: macOS System Settings → Appearance → Show scroll bars → Always, or use Windows or Linux.
2. Open an embedded example on the Petrinaut site and run the Quick Simulation so the playback bar shows the scrubber.
3. Rest the pointer on the Play button. No scrollbar appears inside the bar.
4. Narrow the window until the row no longer fits, and confirm the bar still scrolls sideways to the settings button.

[vercel]

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

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 14, 2026 4:41pm UTC
petrinaut	Ready	Preview	Sep 14, 2026 4:41pm UTC
petrinaut-docs	Ready	Preview	Sep 14, 2026 4:41pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored		Sep 14, 2026 4:41pm UTC

[cursor]

PR Summary

Low Risk
Preview-only CSS in Panda styles; no auth, data, or shared editor toolbar behavior changes.

Overview
Fixes an unwanted vertical scrollbar in the embedded preview’s playback bar when hovering toolbar controls (visible on Windows/Linux with classic scrollbars).

The horizontal scroll wrapper for narrow embeds now sets overflow-y: hidden alongside overflow-x: auto, so button hover scale no longer expands the scrollable height. Sideways scrolling to reach end controls is unchanged. A patch changeset documents the @hashintel/petrinaut release note.

^{Reviewed by Cursor Bugbot for commit cf30e80. Bugbot is set up for automated code reviews on this repo. Configure here.}