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

Author: praxstack

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>

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) {

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

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"),