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({