fix: DH-21539: Prevent browser back navigation on horizontal overscroll (#2654)

mofojed · web-flow · commit d504ec853c64 · 2026-04-09T09:48:04.000-04:00
- Tested on mac, with the Code Studio app
- Two finger scrolling the table does not trigger the Back gesture
anymore
- Also tested swiping from the edge of the trackpad, it also did not
trigger Back
diff --git a/packages/code-studio/index.html b/packages/code-studio/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" style="overscroll-behavior: none">
   <head>
     <base href="%BASE_URL%" />
     <meta name="ui-version" content="v%npm_package_version%" />
diff --git a/tests/table-scroll.spec.ts b/tests/table-scroll.spec.ts
@@ -208,3 +208,18 @@ test('stuck to bottom scroll shrinking and growing table', async ({ page }) => {
   await page.waitForTimeout(2000);
   await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
 });
+
+test('html element has overscroll-behavior-x none to prevent browser back navigation', async ({
+  page,
+}) => {
+  // On macOS, horizontal overscroll at the viewport level triggers the browser's
+  // back/forward navigation gesture. The app must set overscroll-behavior-x: none
+  // on the <html> element to prevent this when users scroll to the edge of a grid.
+  await openTable(page, 'simple_table');
+  await waitForLoadingDone(page);
+
+  const htmlOverscrollX = await page.evaluate(() =>
+    window.getComputedStyle(document.documentElement).getPropertyValue('overscroll-behavior-x')
+  );
+  expect(htmlOverscrollX).toBe('none');
+});
