From 57cb05adabae838ec4bf692f0026daa495b7fab5 Mon Sep 17 00:00:00 2001
From: Aiden Cline <aidenpcline@gmail.com>
Date: Mon, 22 Dec 2025 10:58:35 -0600
Subject: [PATCH] fix: margin

---
 packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx | 2 +-
 packages/opencode/src/cli/cmd/tui/small.md                   | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 packages/opencode/src/cli/cmd/tui/small.md

diff --git a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
index ad91b085f0..180597c25a 100644
--- a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
@@ -999,7 +999,7 @@ export function Prompt(props: PromptProps) {
               </box>
             </Match>
           </Switch>
-          <box gap={2} flexDirection="row">
+          <box gap={2} flexDirection="row" marginLeft="auto">
             <Switch>
               <Match when={store.mode === "normal"}>
                 <Show when={wide()}>
diff --git a/packages/opencode/src/cli/cmd/tui/small.md b/packages/opencode/src/cli/cmd/tui/small.md
new file mode 100644
index 0000000000..460908da2f
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/small.md
@@ -0,0 +1,5 @@
+# Small Screen Responsiveness
+
+The TUI uses two dimension checks for responsiveness: `wide` (width > 120) controls sidebar visibility and the "tab switch agent" hint, while `tall` (height > 40) controls the footer and whether agent/model info appears inside the input box or on the hints row. When not tall, the agent/model info moves to the bottom hints row and shares space with the loading spinner (they are mutually exclusive - loader shows when busy, agent/model shows when idle).
+
+Files edited: `routes/session/index.tsx` defines `wide`, `tall`, and `sidebarVisible` memos and conditionally renders the Header, Footer, and Sidebar. `routes/session/header.tsx` was simplified to remove the share section entirely. `component/prompt/index.tsx` has its own `wide` and `tall` memos and handles the responsive input box layout - hiding agent/model from inside the box when not tall, showing it on the hints row instead, and hiding "tab switch agent" when not wide.