From ef33ba0eb719f0258830747dbf2cd4406e5663bd Mon Sep 17 00:00:00 2001
From: Prax Lannister <prakhar.2019ca66@gmail.com>
Date: Sat, 28 Mar 2026 14:23:44 +0530
Subject: [PATCH 1/2] feat: wide mode layout setting

---
 packages/app/src/components/settings-general.tsx | 12 ++++++++++++
 packages/app/src/context/settings.tsx            |  6 ++++++
 packages/app/src/pages/session.tsx               |  2 +-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx
index ec0614729c92..26e79912d39c 100644
--- a/packages/app/src/components/settings-general.tsx
+++ b/packages/app/src/components/settings-general.tsx
@@ -366,6 +366,18 @@ export const SettingsGeneral: Component = () => {
             />
           </div>
         </SettingsRow>
+
+        <SettingsRow
+          title="Wide Mode"
+          description="Use full window width for chat instead of centered narrow layout"
+        >
+          <div data-action="settings-wide-mode">
+            <Switch
+              checked={settings.appearance.wideMode()}
+              onChange={(checked) => settings.appearance.setWideMode(checked)}
+            />
+          </div>
+        </SettingsRow>
       </SettingsList>
     </div>
   )
diff --git a/packages/app/src/context/settings.tsx b/packages/app/src/context/settings.tsx
index ae7768f71a87..68d9461e0220 100644
--- a/packages/app/src/context/settings.tsx
+++ b/packages/app/src/context/settings.tsx
@@ -32,6 +32,7 @@ export interface Settings {
   }
   appearance: {
     fontSize: number
+    wideMode: boolean
     mono: string
     sans: string
   }
@@ -98,6 +99,7 @@ const defaultSettings: Settings = {
   },
   appearance: {
     fontSize: 14,
+    wideMode: false,
     mono: "",
     sans: "",
   },
@@ -187,6 +189,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setFontSize(value: number) {
           setStore("appearance", "fontSize", value)
         },
+        wideMode: withFallback(() => store.appearance?.wideMode, defaultSettings.appearance.wideMode),
+        setWideMode(value: boolean) {
+          setStore("appearance", "wideMode", value)
+        },
         font: withFallback(() => store.appearance?.mono, defaultSettings.appearance.mono),
         setFont(value: string) {
           setStore("appearance", "mono", value.trim() ? value : "")
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index 917de35b1f20..0e060597cac0 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -401,7 +401,7 @@ export default function Page() {
     if (desktopReviewOpen()) return `${layout.session.width()}px`
     return `calc(100% - ${layout.fileTree.width()}px)`
   })
-  const centered = createMemo(() => isDesktop() && !desktopReviewOpen())
+  const centered = createMemo(() => isDesktop() && !desktopReviewOpen() && !settings.appearance.wideMode())
 
   function normalizeTab(tab: string) {
     if (!tab.startsWith("file://")) return tab

From 76939971ec86bee54e32917d265bceb7263b3b5d Mon Sep 17 00:00:00 2001
From: Prax Lannister <prakhar.2019ca66@gmail.com>
Date: Sat, 28 Mar 2026 15:17:55 +0530
Subject: [PATCH 2/2] feat: upgrade wide mode to layout control sliders +
 keyboard shortcut

- Replace boolean wideMode toggle with maxWidth slider (0=centered, 5-100%)
- Add font size slider (10-24px) in Appearance settings
- Add Cmd+Shift+W keyboard shortcut to toggle wide mode
- Slider-only UX: single control instead of toggle+slider
- CSS transition already handled by session panel
---
 .../app/src/components/settings-general.tsx   | 38 ++++++++++++++++---
 packages/app/src/context/settings.tsx         | 10 ++---
 packages/app/src/pages/session.tsx            |  2 +-
 .../pages/session/use-session-commands.tsx    | 11 ++++++
 4 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx
index 26e79912d39c..cb9b244c965d 100644
--- a/packages/app/src/components/settings-general.tsx
+++ b/packages/app/src/components/settings-general.tsx
@@ -368,14 +368,40 @@ export const SettingsGeneral: Component = () => {
         </SettingsRow>
 
         <SettingsRow
-          title="Wide Mode"
-          description="Use full window width for chat instead of centered narrow layout"
+          title="Font Size"
+          description="Base font size for code and messages"
         >
-          <div data-action="settings-wide-mode">
-            <Switch
-              checked={settings.appearance.wideMode()}
-              onChange={(checked) => settings.appearance.setWideMode(checked)}
+          <div data-action="settings-font-size" class="flex items-center gap-3 w-full sm:w-[220px]">
+            <input
+              type="range"
+              min="10"
+              max="24"
+              step="1"
+              value={settings.appearance.fontSize()}
+              onInput={(e) => settings.appearance.setFontSize(Number(e.currentTarget.value) || 14)}
+              class="flex-1 accent-color-accent h-1.5 cursor-pointer"
+              style={{ "transition": "all 200ms ease-out" }}
+            />
+            <span class="text-12-regular text-text-weak tabular-nums w-8 text-right">{settings.appearance.fontSize()}px</span>
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title="Chat Width"
+          description="0 = centered layout, drag right for wider chat"
+        >
+          <div data-action="settings-max-width" class="flex items-center gap-3 w-full sm:w-[220px]">
+            <input
+              type="range"
+              min="0"
+              max="100"
+              step="5"
+              value={settings.appearance.maxWidth()}
+              onInput={(e) => settings.appearance.setMaxWidth(Number(e.currentTarget.value) || 0)}
+              class="flex-1 accent-color-accent h-1.5 cursor-pointer"
+              style={{ "transition": "all 200ms ease-out" }}
             />
+            <span class="text-12-regular text-text-weak tabular-nums w-8 text-right">{settings.appearance.maxWidth() === 0 ? "auto" : `${settings.appearance.maxWidth()}%`}</span>
           </div>
         </SettingsRow>
       </SettingsList>
diff --git a/packages/app/src/context/settings.tsx b/packages/app/src/context/settings.tsx
index 68d9461e0220..97dbf3b8240f 100644
--- a/packages/app/src/context/settings.tsx
+++ b/packages/app/src/context/settings.tsx
@@ -32,7 +32,7 @@ export interface Settings {
   }
   appearance: {
     fontSize: number
-    wideMode: boolean
+    maxWidth: number
     mono: string
     sans: string
   }
@@ -99,7 +99,7 @@ const defaultSettings: Settings = {
   },
   appearance: {
     fontSize: 14,
-    wideMode: false,
+    maxWidth: 0,
     mono: "",
     sans: "",
   },
@@ -189,9 +189,9 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setFontSize(value: number) {
           setStore("appearance", "fontSize", value)
         },
-        wideMode: withFallback(() => store.appearance?.wideMode, defaultSettings.appearance.wideMode),
-        setWideMode(value: boolean) {
-          setStore("appearance", "wideMode", value)
+        maxWidth: withFallback(() => store.appearance?.maxWidth, defaultSettings.appearance.maxWidth),
+        setMaxWidth(value: number) {
+          setStore("appearance", "maxWidth", Math.max(0, Math.min(100, value)))
         },
         font: withFallback(() => store.appearance?.mono, defaultSettings.appearance.mono),
         setFont(value: string) {
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index 0e060597cac0..739d73a60699 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -401,7 +401,7 @@ export default function Page() {
     if (desktopReviewOpen()) return `${layout.session.width()}px`
     return `calc(100% - ${layout.fileTree.width()}px)`
   })
-  const centered = createMemo(() => isDesktop() && !desktopReviewOpen() && !settings.appearance.wideMode())
+  const centered = createMemo(() => isDesktop() && !desktopReviewOpen() && settings.appearance.maxWidth() === 0)
 
   function normalizeTab(tab: string) {
     if (!tab.startsWith("file://")) return tab
diff --git a/packages/app/src/pages/session/use-session-commands.tsx b/packages/app/src/pages/session/use-session-commands.tsx
index 1a1c290f6d25..c9830ebad076 100644
--- a/packages/app/src/pages/session/use-session-commands.tsx
+++ b/packages/app/src/pages/session/use-session-commands.tsx
@@ -9,6 +9,7 @@ import { useLocal } from "@/context/local"
 import { usePermission } from "@/context/permission"
 import { usePrompt } from "@/context/prompt"
 import { useSDK } from "@/context/sdk"
+import { useSettings } from "@/context/settings"
 import { useSync } from "@/context/sync"
 import { useTerminal } from "@/context/terminal"
 import { showToast } from "@opencode-ai/ui/toast"
@@ -44,6 +45,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
   const sync = useSync()
   const terminal = useTerminal()
   const layout = useLayout()
+  const settings = useSettings()
   const navigate = useNavigate()
   const { params, tabs, view } = useSessionLayout()
 
@@ -313,6 +315,15 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
         keybind: "mod+\\",
         onSelect: () => layout.fileTree.toggle(),
       }),
+      viewCommand({
+        id: "wide.toggle",
+        title: "Toggle Wide Mode",
+        keybind: "mod+shift+w",
+        onSelect: () => {
+          const cur = settings.appearance.maxWidth()
+          settings.appearance.setMaxWidth(cur === 0 ? 100 : 0)
+        },
+      }),
       viewCommand({
         id: "input.focus",
         title: language.t("command.input.focus"),