fix(editor): keep the page from scrolling with the editor (#2356)

CodeMirror's tooltip container in `body` carries the editor's theme classes,
so the themes' `height: 100%` gave it a full window of height. Scrolling to a
position the editor had already reached then moved the page itself, leaving
the title bar cut off and an empty band at the bottom.

Set the height on `.cm-editor` only, and clip the body so nothing outside
`#root` can make the page scrollable.

e2e/pageScroll.spec.ts

@@ -0,0 +1,34 @@
+import { expect, openFromTree, test } from "./fixtures";
+
+test("an open editor leaves nothing for the page itself to scroll", async ({ workbench: page }) => {
+  await openFromTree(page, "README.md");
+  const page_ = await page.evaluate(() => {
+    window.scrollBy(0, 100);
+    const root = document.documentElement;
+    return { scrollY: window.scrollY, scrollHeight: root.scrollHeight, clientHeight: root.clientHeight };
+  });
+  expect(page_.scrollY).toBe(0);
+  expect(page_.scrollHeight).toBe(page_.clientHeight);
+});
+
+test("scrolling to where the editor already is keeps the page in place", async ({ workbench: page }) => {
+  const editor = await openFromTree(page, "README.md");
+  await expect(editor.locator(".cm-content")).toBeVisible();
+  const scrollY = await page.evaluate(async () => {
+    const content = document.querySelector(".cm-content") as HTMLElement & {
+      cmTile?: { view: never };
+      cmView?: { view: never };
+    };
+    const view = (content.cmTile ?? content.cmView)!.view as {
+      constructor: { scrollIntoView(pos: number, options: { y: string }): unknown };
+      dispatch(spec: { effects: unknown }): void;
+      requestMeasure(): void;
+    };
+    for (let i = 0; i < 2; i++) {
+      view.dispatch({ effects: view.constructor.scrollIntoView(0, { y: "start" }) });
+      await new Promise((resolve) => requestAnimationFrame(() => setTimeout(resolve)));
+    }
+    return window.scrollY;
+  });
+  expect(scrollY).toBe(0);
+});

src/editor/core/cm/theme.ts

@@ -121,8 +121,9 @@ export const overviewStyles = {
 };
 
 export const openideaTheme = EditorView.theme({
+  // Not on "&": the tooltip container in `body` carries the theme classes too.
+  "&.cm-editor": { height: "100%" },
   "&": {
-    height: "100%",
     backgroundColor: "var(--bg-editor, var(--bg-island, var(--bg-app)))",
     color: "var(--fg-editor, var(--fg))",
     "--editor-line-number": "var(--fg-line-number, var(--fg-gutter))",

src/features/notebook/CellEditor.tsx

@@ -80,7 +80,7 @@ export function CellEditor({
       language.of([]),
       readonly.current.of(EditorState.readOnly.of(session.getState().frozen)),
       EditorView.lineWrapping,
-      EditorView.theme({ "&": { height: "auto" }, ".cm-scroller": { maxHeight: "640px", overflow: "auto" } }),
+      EditorView.theme({ "&.cm-editor": { height: "auto" }, ".cm-scroller": { maxHeight: "640px", overflow: "auto" } }),
       EditorView.contentAttributes.of({
         "aria-label": tx(type === "code" ? "Python cell source" : "Markdown cell source"),
       }),

src/features/vcs/cm.ts

@@ -313,8 +313,8 @@ export const viewerHighlight = HighlightStyle.define([
 export const viewerTheme = EditorView.theme(
   {
     ...overviewStyles,
+    "&.cm-editor": { height: "100%" },
     "&": {
-      height: "100%",
       backgroundColor: "var(--bg-app)",
       color: "var(--fg)",
       fontSize: "var(--openidea-editor-font-size, var(--fs-code))",

src/styles/global.css

@@ -20,6 +20,11 @@ body,
   margin: 0;
 }
 
+/* The page never scrolls: `clip` on the body leaves the viewport nothing to scroll into view. */
+html {
+  overflow: hidden;
+}
+
 body {
   background: var(--bg-frame);
   color: var(--fg);
@@ -27,7 +32,7 @@ body {
   font-size: var(--fs-ui);
   line-height: 1.4;
   -webkit-font-smoothing: antialiased;
-  overflow: hidden;
+  overflow: clip;
   -webkit-user-select: none;
   user-select: none;
   cursor: default;