Keep horizontal scrollbar visible in responsive (#1409)

abcampo-iry · web-flow · commit 27ca34818aaa · 2026-03-31T14:31:34.000+02:00
Closes: RaspberryPiFoundation/digital-editor-issues#1196 The intent of this PR is being able to show a responsive overflow bar when we are in responsive. To achieve this it's been: - Added overlayscrollbars and overlayscrollbars-react container that handles this logic (MIT License 13kb gziped) - Added custom css to cover the exact usecase to reserve some space and make the scrollbar visibile on responsive https://github.com/user-attachments/assets/dcf9f392-61f8-494a-b4ff-aea1534c0296
diff --git a/package.json b/package.json
@@ -50,6 +50,8 @@
     "mime-types": "^2.1.35",
     "node-html-parser": "^6.1.5",
     "oidc-client": "^1.11.5",
+    "overlayscrollbars": "^2.14.0",
+    "overlayscrollbars-react": "^0.5.6",
     "plotly.js": "^3.3.1",
     "prismjs": "^1.29.0",
     "prompts": "2.4.0",
diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss
@@ -4,4 +4,5 @@
 @use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css";
 @use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css";
 @use "../../../node_modules/react-toastify/dist/ReactToastify.css";
+@use "../../../node_modules/overlayscrollbars/styles/overlayscrollbars.css";
 @use "../../../node_modules/plotly.js/dist/plotly.css" as plotlyStyle;
diff --git a/src/assets/stylesheets/Project.scss b/src/assets/stylesheets/Project.scss
@@ -1,5 +1,6 @@
 @use "./rpf_design_system/spacing" as *;
 @use "./rpf_design_system/colours" as *;
+@use "./ScratchContainer";
 
 .proj {
   display: flex;
@@ -130,7 +131,8 @@
   }
 }
 
-.--light {
+.--light,
+#wc.--light {
   .proj-runner-container,
   .proj-editor-container,
   .sidebar {
@@ -146,7 +148,8 @@
   }
 }
 
-.--dark {
+.--dark,
+#wc.--dark {
   .proj-runner-container,
   .proj-editor-container,
   .sidebar {
diff --git a/src/assets/stylesheets/ScratchContainer.scss b/src/assets/stylesheets/ScratchContainer.scss
@@ -0,0 +1,59 @@
+@use "./rpf_design_system/colours" as *;
+
+.proj-container {
+  .scratch-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+
+  .scratch-container__viewport {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    min-inline-size: 0;
+    --scratch-scrollbar-size: 12px;
+    --scratch-scrollbar-gap: 4px;
+  }
+
+  .scratch-container__viewport > [data-overlayscrollbars-contents],
+  .scratch-container__viewport [data-overlayscrollbars-viewport] {
+    block-size: 100%;
+  }
+
+  .scratch-container__viewport:has(> .os-scrollbar-horizontal.os-scrollbar-visible)
+    > [data-overlayscrollbars-contents] {
+    padding-block-end: calc(
+      var(--scratch-scrollbar-size) + var(--scratch-scrollbar-gap)
+    ) !important;
+  }
+
+  .scratch-container__iframe {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    min-block-size: 0;
+  }
+
+  .scratch-container__viewport:has(> .os-scrollbar-horizontal.os-scrollbar-visible)
+    .scratch-container__iframe {
+    block-size: calc(
+      100% - var(--scratch-scrollbar-size) - var(--scratch-scrollbar-gap)
+    );
+  }
+
+  .os-theme-scratch {
+    --os-size: var(--scratch-scrollbar-size);
+    --os-padding-perpendicular: 0;
+    --os-padding-axis: 0;
+    --os-track-border-radius: 999px;
+    --os-handle-border-radius: 999px;
+    --os-track-bg: #{$rpf-grey-200};
+    --os-track-bg-hover: #{$rpf-grey-200};
+    --os-track-bg-active: #{$rpf-grey-200};
+    --os-handle-bg: #{$rpf-grey-500};
+    --os-handle-bg-hover: #{$rpf-grey-500};
+    --os-handle-bg-active: #{$rpf-grey-500};
+  }
+}
diff --git a/src/components/Editor/Project/ScratchContainer.jsx b/src/components/Editor/Project/ScratchContainer.jsx
@@ -1,12 +1,29 @@
 import React, { useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { ClickScrollPlugin, OverlayScrollbars } from "overlayscrollbars";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { applyScratchProjectIdentifierUpdate } from "../../../redux/EditorSlice";
 import {
   subscribeToScratchProjectIdentifierUpdates,
   postMessageToScratchIframe,
   getScratchAllowedOrigin,
 } from "../../../utils/scratchIframe";
 
+const SCRATCH_MIN_WIDTH = 1024;
+const SCRATCH_SCROLLBAR_OPTIONS = {
+  overflow: {
+    x: "scroll",
+    y: "hidden",
+  },
+  scrollbars: {
+    theme: "os-theme-scratch",
+    visibility: "auto",
+    clickScroll: "instant",
+  },
+};
+
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
 export default function ScratchContainer() {
   const dispatch = useDispatch();
   const projectIdentifier = useSelector(
@@ -87,15 +104,24 @@ export default function ScratchContainer() {
   }/scratch.html?${queryParams.toString()}`;
 
   return (
-    <iframe
-      src={iframeSrcUrl}
-      title={"Scratch"}
-      style={{
-        width: "100%",
-        height: "100%",
-        border: 0,
-        display: "block",
-      }}
-    />
+    <div className="scratch-container" data-testid="scratch-container">
+      <OverlayScrollbarsComponent
+        className="scratch-container__viewport"
+        data-testid="scratch-container-viewport"
+        options={SCRATCH_SCROLLBAR_OPTIONS}
+      >
+        <iframe
+          className="scratch-container__iframe"
+          src={iframeSrcUrl}
+          title={"Scratch"}
+          style={{
+            width: "100%",
+            minWidth: `${SCRATCH_MIN_WIDTH}px`,
+            border: 0,
+            display: "block",
+          }}
+        />
+      </OverlayScrollbarsComponent>
+    </div>
   );
 }
diff --git a/src/components/Editor/Project/ScratchContainer.test.js b/src/components/Editor/Project/ScratchContainer.test.js
@@ -2,7 +2,6 @@ import { render, screen } from "@testing-library/react";
 import React, { act } from "react";
 import { Provider } from "react-redux";
 import { configureStore } from "@reduxjs/toolkit";
-import ScratchContainer from "./ScratchContainer";
 import EditorReducer from "../../../redux/EditorSlice";
 import * as scratchIframeUtils from "../../../utils/scratchIframe";
 
@@ -11,6 +10,34 @@ jest.mock("../../../utils/scratchIframe", () => ({
   postMessageToScratchIframe: jest.fn(),
 }));
 
+const renderMockOverlayScrollbarsComponent = ({
+  children,
+  className,
+  "data-testid": dataTestId,
+}) => (
+  <div className={className} data-testid={dataTestId}>
+    {children}
+  </div>
+);
+
+const mockOverlayScrollbarsComponent = jest.fn(
+  renderMockOverlayScrollbarsComponent,
+);
+const mockPlugin = jest.fn();
+
+jest.mock("overlayscrollbars-react", () => ({
+  OverlayScrollbarsComponent: (props) => mockOverlayScrollbarsComponent(props),
+}));
+
+jest.mock("overlayscrollbars", () => ({
+  ClickScrollPlugin: { name: "ClickScrollPlugin" },
+  OverlayScrollbars: {
+    plugin: (...args) => mockPlugin(...args),
+  },
+}));
+
+const ScratchContainer = require("./ScratchContainer").default;
+
 describe("ScratchContainer", () => {
   const defaultEditorState = {
     project: {
@@ -32,13 +59,20 @@ describe("ScratchContainer", () => {
       },
     });
 
-  const renderScratchContainer = (store) =>
+  const renderScratchContainer = (store = buildStore()) => {
     render(
       <Provider store={store}>
         <ScratchContainer />
       </Provider>,
     );
 
+    return {
+      iframe: screen.getByTitle("Scratch"),
+      store,
+      viewport: screen.getByTestId("scratch-container-viewport"),
+    };
+  };
+
   const dispatchMessage = (data, origin = "https://example.com") => {
     window.dispatchEvent(
       new MessageEvent("message", {
@@ -77,6 +111,9 @@ describe("ScratchContainer", () => {
     originalAssetsUrl = process.env.ASSETS_URL;
     process.env.ASSETS_URL = "https://example.com";
     localStorage.clear();
+    mockOverlayScrollbarsComponent.mockImplementation(
+      renderMockOverlayScrollbarsComponent,
+    );
   });
 
   afterEach(() => {
@@ -85,23 +122,47 @@ describe("ScratchContainer", () => {
   });
 
   test("renders iframe with src built from project_id and api_url", () => {
-    const store = buildStore();
-    renderScratchContainer(store);
+    const { iframe, viewport } = renderScratchContainer();
 
-    const iframe = screen.getByTitle("Scratch");
+    expect(screen.getByTestId("scratch-container")).toHaveClass(
+      "scratch-container",
+    );
+    expect(viewport).toHaveClass("scratch-container__viewport");
     expect(iframe).toBeInTheDocument();
+    expect(iframe).toHaveStyle({
+      minWidth: "1024px",
+    });
 
     const url = new URL(iframe.getAttribute("src"));
     expect(url.pathname).toBe("/scratch.html");
     expect(url.searchParams.get("project_id")).toBe("project-123");
     expect(url.searchParams.get("api_url")).toBe("https://api.example.com/v1");
   });
 
-  test("updates the parent project identifier without reloading the iframe project_id", async () => {
-    const store = buildStore();
-    renderScratchContainer(store);
+  test("configures OverlayScrollbars for an overflow-aware horizontal Scratch scrollbar", () => {
+    renderScratchContainer();
 
-    await act(async () => {
+    expect(mockOverlayScrollbarsComponent).toHaveBeenCalled();
+
+    const props = mockOverlayScrollbarsComponent.mock.calls[0][0];
+
+    expect(props.options).toEqual({
+      overflow: {
+        x: "scroll",
+        y: "hidden",
+      },
+      scrollbars: {
+        theme: "os-theme-scratch",
+        visibility: "auto",
+        clickScroll: "instant",
+      },
+    });
+  });
+
+  test("updates the parent project identifier without reloading the iframe project_id", () => {
+    const { store } = renderScratchContainer();
+
+    act(() => {
       dispatchMessage({
         type: "scratch-gui-project-id-updated",
         projectId: "project-456",
@@ -121,8 +182,8 @@ describe("ScratchContainer", () => {
     const store = buildStore({
       authReducer: (state = { user: { access_token: "token-123" } }) => state,
     });
-    renderScratchContainer(store);
 
+    renderScratchContainer(store);
     dispatchScratchGuiReady({ nonce: "nonce-abc" });
 
     expectScratchSetTokenCall({
@@ -160,8 +221,8 @@ describe("ScratchContainer", () => {
     const store = buildStore({
       authReducer: (state = { user: { access_token: "token-123" } }) => state,
     });
-    renderScratchContainer(store);
 
+    renderScratchContainer(store);
     dispatchScratchGuiReady({ nonce: "nonce-1" });
     dispatchScratchGuiReady({ nonce: "nonce-1" });
     dispatchScratchGuiReady({ nonce: "nonce-2" });
@@ -192,6 +253,7 @@ describe("ScratchContainer", () => {
             user: { access_token: action.payload },
           };
         }
+
         return state;
       },
     });
diff --git a/yarn.lock b/yarn.lock
@@ -4276,6 +4276,8 @@ __metadata:
     node-html-parser: "npm:^6.1.5"
     oidc-client: "npm:^1.11.5"
     optimize-css-assets-webpack-plugin: "npm:5.0.4"
+    overlayscrollbars: "npm:^2.14.0"
+    overlayscrollbars-react: "npm:^0.5.6"
     path-browserify: "npm:^1.0.1"
     plotly.js: "npm:^3.3.1"
     pnp-webpack-plugin: "npm:1.6.4"
@@ -18065,6 +18067,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"overlayscrollbars-react@npm:^0.5.6":
+  version: 0.5.6
+  resolution: "overlayscrollbars-react@npm:0.5.6"
+  peerDependencies:
+    overlayscrollbars: ^2.0.0
+    react: ">=16.8.0"
+  checksum: 10/473f5af860feab4b5418f9adc8e356fb201e9de61286443ff64002b9c997bc19bf17cf60e314c502c14ca41fa213c12f18111e6fe913be86ad68a15c32e66789
+  languageName: node
+  linkType: hard
+
+"overlayscrollbars@npm:^2.14.0":
+  version: 2.14.0
+  resolution: "overlayscrollbars@npm:2.14.0"
+  checksum: 10/6e0b91554d98bfefc876a4dde9cf09db537d86f88afa069b520910fa5727ae9ac60f595b5e85cc1d13e6da4e9b41b377e3a19185a726aea53a8fe3c1c19e1ea0
+  languageName: node
+  linkType: hard
+
 "p-limit@npm:^2.0.0, p-limit@npm:^2.2.0":
   version: 2.3.0
   resolution: "p-limit@npm:2.3.0"

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`@use "./rpf_design_system/spacing" as *;`
`2`	`2`	`@use "./rpf_design_system/colours" as *;`
	`3`	`+@use "./ScratchContainer";`
`3`	`4`
`4`	`5`	`.proj {`
`5`	`6`	`display: flex;`
`@@ -130,7 +131,8 @@`
`130`	`131`	`}`
`131`	`132`	`}`
`132`	`133`
`133`		`-.--light {`
	`134`	`+.--light,`
	`135`	`+#wc.--light {`
`134`	`136`	`.proj-runner-container,`
`135`	`137`	`.proj-editor-container,`
`136`	`138`	`.sidebar {`
`@@ -146,7 +148,8 @@`
`146`	`148`	`}`
`147`	`149`	`}`
`148`	`150`
`149`		`-.--dark {`
	`151`	`+.--dark,`
	`152`	`+#wc.--dark {`
`150`	`153`	`.proj-runner-container,`
`151`	`154`	`.proj-editor-container,`
`152`	`155`	`.sidebar {`