From eda0702c841b4d889c615743694eebf6e433d46a Mon Sep 17 00:00:00 2001
From: LukeParkerDev <10430890+Hona@users.noreply.github.com>
Date: Sat, 13 Jun 2026 10:55:30 +0200
Subject: [PATCH 1/3] fix(app): expand terminal resize gutter hitbox

---
 .../regression/terminal-resize-hitbox.spec.ts | 74 +++++++++++++++++++
 .../app/src/pages/session/terminal-panel.tsx  | 35 ++++-----
 2 files changed, 92 insertions(+), 17 deletions(-)
 create mode 100644 packages/app/e2e/regression/terminal-resize-hitbox.spec.ts

diff --git a/packages/app/e2e/regression/terminal-resize-hitbox.spec.ts b/packages/app/e2e/regression/terminal-resize-hitbox.spec.ts
new file mode 100644
index 000000000000..0b67d92c406c
--- /dev/null
+++ b/packages/app/e2e/regression/terminal-resize-hitbox.spec.ts
@@ -0,0 +1,74 @@
+import { expect, test } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectSessionTitle } from "../utils/waits"
+
+const directory = "C:/OpenCode/TerminalResizeHitbox"
+const sessionID = "ses_terminal_resize_hitbox"
+
+test("terminal resize handle fills the visible gutter", async ({ page }) => {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: "proj_terminal_resize_hitbox",
+      worktree: directory,
+      vcs: "git",
+      name: "terminal-resize-hitbox",
+      time: { created: 1700000000000, updated: 1700000000000 },
+      sandboxes: [],
+    },
+    provider: {
+      all: [{ id: "opencode", name: "OpenCode", models: {} }],
+      connected: ["opencode"],
+      default: {},
+    },
+    sessions: [
+      {
+        id: sessionID,
+        projectID: "proj_terminal_resize_hitbox",
+        directory,
+        title: "Terminal resize hitbox",
+        version: "1.0.0",
+        time: { created: 1700000000000, updated: 1700000000000 },
+      },
+    ],
+    pageMessages: () => ({ items: [] }),
+  })
+
+  await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+  await expectSessionTitle(page, "Terminal resize hitbox")
+  await page.keyboard.press("Control+Backquote")
+
+  const panel = page.locator("#terminal-panel")
+  await expect(panel).toHaveAttribute("aria-hidden", "false")
+  await panel.evaluate((element) =>
+    Promise.all(element.getAnimations().map((animation) => animation.finished.catch(() => undefined))),
+  )
+
+  const hits = await panel.evaluate((element) => {
+    const handle = element.querySelector('[data-component="resize-handle"]')
+    if (!(handle instanceof HTMLElement)) throw new Error("missing terminal resize handle")
+
+    const panelBox = element.getBoundingClientRect()
+    const handleBox = handle.getBoundingClientRect()
+    return {
+      top: handleBox.top - panelBox.top,
+      bottom: handleBox.bottom - panelBox.top,
+      pixels: Array.from({ length: 8 }, (_, offset) => offset - 7.5).map(
+        (offset) =>
+          document
+            .elementFromPoint(handleBox.left + handleBox.width / 2, panelBox.top + offset)
+            ?.getAttribute("data-component") === "resize-handle",
+      ),
+    }
+  })
+
+  expect(hits).toEqual({
+    top: -8,
+    bottom: 0,
+    pixels: [true, true, true, true, true, true, true, true],
+  })
+})
+
+function base64Encode(value: string) {
+  return btoa(value).replaceAll("+", "-").replaceAll("/", "_").replaceAll("=", "")
+}
diff --git a/packages/app/src/pages/session/terminal-panel.tsx b/packages/app/src/pages/session/terminal-panel.tsx
index 444d83d1d5a0..5e76f8ba4edc 100644
--- a/packages/app/src/pages/session/terminal-panel.tsx
+++ b/packages/app/src/pages/session/terminal-panel.tsx
@@ -198,35 +198,36 @@ export function TerminalPanel() {
       aria-label={language.t("terminal.title")}
       aria-hidden={!opened()}
       inert={!opened()}
-      class="relative w-full shrink-0 overflow-hidden bg-background-stronger"
+      class="relative w-full shrink-0 bg-background-stronger"
       classList={{
-        "border-t border-border-weak-base": opened(),
         "transition-[height] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[height] motion-reduce:transition-none":
           !size.active(),
       }}
       style={{ height: opened() ? `${pane()}px` : "0px" }}
     >
+      <div class="hidden md:block" onPointerDown={() => size.start()}>
+        <ResizeHandle
+          class="-top-1"
+          direction="vertical"
+          size={pane()}
+          min={100}
+          max={max()}
+          collapseThreshold={50}
+          onResize={(next) => {
+            size.touch()
+            layout.terminal.resize(next)
+          }}
+          onCollapse={close}
+        />
+      </div>
       <div
-        class="absolute inset-x-0 top-0 flex flex-col"
+        class="absolute inset-x-0 top-0 flex flex-col overflow-hidden"
         classList={{
+          "border-t border-border-weak-base": opened(),
           "pointer-events-none": !opened(),
         }}
         style={{ height: `${pane()}px` }}
       >
-        <div class="hidden md:block" onPointerDown={() => size.start()}>
-          <ResizeHandle
-            direction="vertical"
-            size={pane()}
-            min={100}
-            max={max()}
-            collapseThreshold={50}
-            onResize={(next) => {
-              size.touch()
-              layout.terminal.resize(next)
-            }}
-            onCollapse={close}
-          />
-        </div>
         <Show
           when={terminal.ready()}
           fallback={

From d857c86e361952766e59e64285135f55c7751b6f Mon Sep 17 00:00:00 2001
From: LukeParkerDev <10430890+Hona@users.noreply.github.com>
Date: Sat, 13 Jun 2026 11:06:09 +0200
Subject: [PATCH 2/3] test(app): remove terminal gutter regression

---
 .../regression/terminal-resize-hitbox.spec.ts | 74 -------------------
 1 file changed, 74 deletions(-)
 delete mode 100644 packages/app/e2e/regression/terminal-resize-hitbox.spec.ts

diff --git a/packages/app/e2e/regression/terminal-resize-hitbox.spec.ts b/packages/app/e2e/regression/terminal-resize-hitbox.spec.ts
deleted file mode 100644
index 0b67d92c406c..000000000000
--- a/packages/app/e2e/regression/terminal-resize-hitbox.spec.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { expect, test } from "@playwright/test"
-import { mockOpenCodeServer } from "../utils/mock-server"
-import { expectSessionTitle } from "../utils/waits"
-
-const directory = "C:/OpenCode/TerminalResizeHitbox"
-const sessionID = "ses_terminal_resize_hitbox"
-
-test("terminal resize handle fills the visible gutter", async ({ page }) => {
-  await mockOpenCodeServer(page, {
-    directory,
-    project: {
-      id: "proj_terminal_resize_hitbox",
-      worktree: directory,
-      vcs: "git",
-      name: "terminal-resize-hitbox",
-      time: { created: 1700000000000, updated: 1700000000000 },
-      sandboxes: [],
-    },
-    provider: {
-      all: [{ id: "opencode", name: "OpenCode", models: {} }],
-      connected: ["opencode"],
-      default: {},
-    },
-    sessions: [
-      {
-        id: sessionID,
-        projectID: "proj_terminal_resize_hitbox",
-        directory,
-        title: "Terminal resize hitbox",
-        version: "1.0.0",
-        time: { created: 1700000000000, updated: 1700000000000 },
-      },
-    ],
-    pageMessages: () => ({ items: [] }),
-  })
-
-  await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
-  await expectSessionTitle(page, "Terminal resize hitbox")
-  await page.keyboard.press("Control+Backquote")
-
-  const panel = page.locator("#terminal-panel")
-  await expect(panel).toHaveAttribute("aria-hidden", "false")
-  await panel.evaluate((element) =>
-    Promise.all(element.getAnimations().map((animation) => animation.finished.catch(() => undefined))),
-  )
-
-  const hits = await panel.evaluate((element) => {
-    const handle = element.querySelector('[data-component="resize-handle"]')
-    if (!(handle instanceof HTMLElement)) throw new Error("missing terminal resize handle")
-
-    const panelBox = element.getBoundingClientRect()
-    const handleBox = handle.getBoundingClientRect()
-    return {
-      top: handleBox.top - panelBox.top,
-      bottom: handleBox.bottom - panelBox.top,
-      pixels: Array.from({ length: 8 }, (_, offset) => offset - 7.5).map(
-        (offset) =>
-          document
-            .elementFromPoint(handleBox.left + handleBox.width / 2, panelBox.top + offset)
-            ?.getAttribute("data-component") === "resize-handle",
-      ),
-    }
-  })
-
-  expect(hits).toEqual({
-    top: -8,
-    bottom: 0,
-    pixels: [true, true, true, true, true, true, true, true],
-  })
-})
-
-function base64Encode(value: string) {
-  return btoa(value).replaceAll("+", "-").replaceAll("/", "_").replaceAll("=", "")
-}

From 7d3bd3d2973ffa8b8ed9ce33bc5676bbd06cb3dd Mon Sep 17 00:00:00 2001
From: LukeParkerDev <10430890+Hona@users.noreply.github.com>
Date: Sat, 13 Jun 2026 11:11:39 +0200
Subject: [PATCH 3/3] fix(app): preserve legacy terminal resize handle

---
 packages/app/src/pages/session/terminal-panel.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/pages/session/terminal-panel.tsx b/packages/app/src/pages/session/terminal-panel.tsx
index 5e76f8ba4edc..6943a9a3ec9c 100644
--- a/packages/app/src/pages/session/terminal-panel.tsx
+++ b/packages/app/src/pages/session/terminal-panel.tsx
@@ -14,6 +14,7 @@ import { Terminal } from "@/components/terminal"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
+import { useSettings } from "@/context/settings"
 import { useTerminal } from "@/context/terminal"
 import { terminalTabLabel } from "@/pages/session/terminal-label"
 import { createSizing, focusTerminalById } from "@/pages/session/helpers"
@@ -26,6 +27,7 @@ export function TerminalPanel() {
   const terminal = useTerminal()
   const language = useLanguage()
   const command = useCommand()
+  const settings = useSettings()
   const { params, workspaceKey, view } = useSessionLayout()
 
   const opened = createMemo(() => view().terminal.opened())
@@ -207,7 +209,9 @@ export function TerminalPanel() {
     >
       <div class="hidden md:block" onPointerDown={() => size.start()}>
         <ResizeHandle
-          class="-top-1"
+          classList={{
+            "-top-1": settings.general.newLayoutDesigns(),
+          }}
           direction="vertical"
           size={pane()}
           min={100}
