From 93d262e2c871caf08e6d2a13c619349cc2cbafdc Mon Sep 17 00:00:00 2001
From: Aiden Cline <aidenpcline@gmail.com>
Date: Mon, 22 Dec 2025 14:45:14 -0600
Subject: [PATCH] darken background if sidebar open for small screen

---
 .../src/cli/cmd/tui/routes/session/index.tsx   | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
index 325d84656..4b3b1e456 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
@@ -22,6 +22,7 @@ import {
   ScrollBoxRenderable,
   addDefaultParsers,
   MacOSScrollAccel,
+  RGBA,
   type ScrollAcceleration,
 } from "@opentui/core"
 import { Prompt, type PromptRef } from "@tui/component/prompt"
@@ -1024,8 +1025,21 @@ export function Session() {
           <Sidebar sessionID={route.sessionID} />
         </Show>
         <Show when={sidebarOverlay()}>
-          <box position="absolute" right={0} top={0} height={dimensions().height} zIndex={100}>
-            <Sidebar sessionID={route.sessionID} />
+          <box
+            position="absolute"
+            left={0}
+            top={0}
+            width={dimensions().width}
+            height={dimensions().height}
+            backgroundColor={RGBA.fromInts(0, 0, 0, 150)}
+            zIndex={100}
+            flexDirection="row"
+            justifyContent="flex-end"
+            onMouseUp={() => setSidebar("hide")}
+          >
+            <box onMouseUp={(e) => e.stopPropagation()}>
+              <Sidebar sessionID={route.sessionID} />
+            </box>
           </box>
         </Show>
       </box>