fix: DH-21539: Prevent browser back navigation on horizontal overscroll

mofojed · mofojed · commit 96512026149b · 2026-04-08T16:34:29.000-04:00
- Tested on mac, with both the Code Studio and the embed-widget 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/packages/embed-widget/index.html b/packages/embed-widget/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');
+});
