From cf30e80133665fd4a90eab8be0d2c85751d177d6 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 14 Sep 2026 16:30:08 +0000 Subject: [PATCH] Stop the embedded playback bar scrolling vertically on hover The preview's playback controls sit in a wrapper that declares `overflow-x: auto` so a narrow embed can scroll the row sideways. Setting overflow on one axis makes the other compute to `auto` too, and a toolbar button's hover scale counts towards the scrollable area, so the bar showed a vertical scrollbar while the pointer rested on one. --- .changeset/embed-playback-bar-hover-scrollbar.md | 5 +++++ .../src/ui/preview/preview-quick-simulation-controls.tsx | 6 ++++++ 2 files changed, 11 insertions(+) create mode 100644 .changeset/embed-playback-bar-hover-scrollbar.md diff --git a/.changeset/embed-playback-bar-hover-scrollbar.md b/.changeset/embed-playback-bar-hover-scrollbar.md new file mode 100644 index 00000000000..c9b61c880cd --- /dev/null +++ b/.changeset/embed-playback-bar-hover-scrollbar.md @@ -0,0 +1,5 @@ +--- +"@hashintel/petrinaut": patch +--- + +The embedded preview's playback bar scrolls only sideways, so resting the pointer on one of its controls no longer shows a vertical scrollbar inside the bar. diff --git a/libs/@hashintel/petrinaut/src/ui/preview/preview-quick-simulation-controls.tsx b/libs/@hashintel/petrinaut/src/ui/preview/preview-quick-simulation-controls.tsx index 88026c19b7d..37801818d24 100644 --- a/libs/@hashintel/petrinaut/src/ui/preview/preview-quick-simulation-controls.tsx +++ b/libs/@hashintel/petrinaut/src/ui/preview/preview-quick-simulation-controls.tsx @@ -58,7 +58,13 @@ const playbackPositionStyle = css({ const playbackControlsScrollStyle = css({ width: "full", minWidth: "0", + // A narrow embed scrolls the row sideways to reach the controls at its end. + // Setting overflow on one axis makes the other axis scroll as well unless it + // is set too, and a toolbar button's hover scale counts towards the + // scrollable area though it takes no layout space: a pointer resting on a + // button would otherwise show a vertical scrollbar. overflowX: "auto", + overflowY: "hidden", }); const playbackControlsRowStyle = css({