From f91db0dfd061e51a56a55dad43d249332b0ebb0a Mon Sep 17 00:00:00 2001
From: Raul Macarie <raul@macarie.me>
Date: Tue, 29 Sep 2026 09:17:45 +0200
Subject: [PATCH] fix(ui): split-pane handle overlapping iframe (#11221)

---
 .../ui/client/components/BrowserIframe.vue    |  1 +
 packages/ui/client/styles/main.css            |  5 +-
 test/browser/specs/projects-ui.test.ts        | 47 ----------
 test/browser/specs/ui.test.ts                 | 90 +++++++++++++++++++
 4 files changed, 94 insertions(+), 49 deletions(-)
 delete mode 100644 test/browser/specs/projects-ui.test.ts
 create mode 100644 test/browser/specs/ui.test.ts

diff --git a/packages/ui/client/components/BrowserIframe.vue b/packages/ui/client/components/BrowserIframe.vue
index c610189e3..8772d399a 100644
--- a/packages/ui/client/components/BrowserIframe.vue
+++ b/packages/ui/client/components/BrowserIframe.vue
@@ -118,6 +118,7 @@ const scale = computed(() =>
   container-type: size;
 
   margin-top: 0.5rem;
+  margin-inline: var(--splitpane-handle-size);
 }
 
 #tester-ui:not([data-ready]) {
diff --git a/packages/ui/client/styles/main.css b/packages/ui/client/styles/main.css
index 9c6db8f2c..0c26592ea 100644
--- a/packages/ui/client/styles/main.css
+++ b/packages/ui/client/styles/main.css
@@ -10,6 +10,7 @@ body {
   --color-text-dark: #ddd;
   --color-text: var(--color-text-light);
   --background-color: #e4e4e4;
+  --splitpane-handle-size: 5px;
 }
 
 html.dark {
@@ -128,13 +129,13 @@ html.dark {
 .splitpanes--vertical > .splitpanes__splitter:before {
   /* make vertical scroll usable */
   left: 0;
-  right: -10px;
+  right: calc(var(--splitpane-handle-size) * -1);
   height: 100%;
 }
 
 .splitpanes--horizontal > .splitpanes__splitter:before {
   top: 0;
-  bottom: -10px;
+  bottom: calc(var(--splitpane-handle-size) * -1);
   width: 100%;
 }
 
diff --git a/test/browser/specs/projects-ui.test.ts b/test/browser/specs/projects-ui.test.ts
deleted file mode 100644
index b5f764c99..000000000
--- a/test/browser/specs/projects-ui.test.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { expect, test } from 'vitest'
-import { runInlineTests } from '../../test-utils'
-import { provider } from '../settings'
-
-test.runIf(provider.name === 'playwright')(
-  'browser ui enabled in projects setup (#10993)',
-  async () => {
-    const { stderr, exitCode, testTree } = await runInlineTests(
-      {
-        'basic.test.ts': `
-        import { expect, test } from 'vitest'
-
-        test('works', () => {
-          expect(1 + 1).toBe(2)
-        })
-      `,
-      },
-      {
-        watch: false,
-        reporters: 'none',
-        projects: [
-          {
-            test: {
-              browser: {
-                enabled: true,
-                headless: true,
-                ui: true,
-                provider,
-                instances: [{ browser: 'chromium' }],
-              },
-            },
-          },
-        ],
-      },
-    )
-
-    expect(stderr).toBe('')
-    expect(exitCode).toBe(0)
-    expect(testTree()).toMatchInlineSnapshot(`
-    {
-      "basic.test.ts": {
-        "works": "passed",
-      },
-    }
-  `)
-  },
-)
diff --git a/test/browser/specs/ui.test.ts b/test/browser/specs/ui.test.ts
new file mode 100644
index 000000000..bf0cb09ec
--- /dev/null
+++ b/test/browser/specs/ui.test.ts
@@ -0,0 +1,90 @@
+import { describe, expect, test } from 'vitest'
+import { runInlineTests } from '../../test-utils'
+import { provider } from '../settings'
+
+describe.runIf(provider.name === 'playwright')('browser ui', () => {
+  test('enabled in projects setup (#10993)', async () => {
+    const { stderr, exitCode, testTree } = await runInlineTests(
+      {
+        'basic.test.ts': /* ts */ `
+          import { expect, test } from 'vitest'
+
+          test('works', () => {
+            expect(1 + 1).toBe(2)
+          })
+        `,
+      },
+      {
+        watch: false,
+        reporters: 'none',
+        projects: [
+          {
+            test: {
+              browser: {
+                enabled: true,
+                headless: true,
+                ui: true,
+                provider,
+                instances: [{ browser: 'chromium' }],
+              },
+            },
+          },
+        ],
+      },
+    )
+
+    expect(stderr).toBe('')
+    expect(exitCode).toBe(0)
+    expect(testTree()).toMatchInlineSnapshot(`
+      {
+        "basic.test.ts": {
+          "works": "passed",
+        },
+      }
+    `)
+  })
+
+  test('split-pane handle does not block iframe interactions (#11170)', async () => {
+    const { stderr, exitCode, testTree } = await runInlineTests(
+      {
+        'button.test.ts': /* ts */ `
+          import { expect, test, vi } from 'vitest'
+          import { userEvent } from 'vitest/browser'
+
+          test('clicks on button', async () => {
+            const spy = vi.fn()
+            const button = document.createElement('button')
+            button.style = 'width: 5px; height: 10px; padding: 0; border: none;'
+            button.addEventListener('click', spy)
+            document.body.appendChild(button)
+            await userEvent.click(button, { position: { x: 1, y: 1 } })
+
+            expect(spy).toHaveBeenCalledOnce()
+          })
+        `,
+      },
+      {
+        watch: true,
+        reporters: 'none',
+        browser: {
+          enabled: true,
+          headless: true,
+          ui: true,
+          provider,
+          instances: [{ browser: 'chromium' }],
+          viewport: { width: 50, height: 50 },
+        },
+      },
+    )
+
+    expect(stderr).toBe('')
+    expect(exitCode).toBe(0)
+    expect(testTree()).toMatchInlineSnapshot(`
+      {
+        "button.test.ts": {
+          "clicks on button": "passed",
+        },
+      }
+    `)
+  })
+})
-- 
2.51.2