From 53a4829672d01414b82b05cdcd6bcabb3a90d8ec Mon Sep 17 00:00:00 2001
From: Luke Parker <10430890+Hona@users.noreply.github.com>
Date: Thu, 27 Aug 2026 17:57:04 +1000
Subject: [PATCH] fix(app): restore fullscreen settings version footer (#45419)
---
.../regression/tab-navigate-mousedown.spec.ts | 15 +++++++++++++++
packages/app/src/settings/settings.css | 16 ++++++++++++++++
packages/app/src/settings/shell.tsx | 8 ++++++++
3 files changed, 39 insertions(+)
diff --git a/packages/app/e2e/regression/tab-navigate-mousedown.spec.ts b/packages/app/e2e/regression/tab-navigate-mousedown.spec.ts
index fdd3f75478e..05e8478e131 100644
--- a/packages/app/e2e/regression/tab-navigate-mousedown.spec.ts
+++ b/packages/app/e2e/regression/tab-navigate-mousedown.spec.ts
@@ -1,6 +1,7 @@
import { expect, test, type Page, type Route } from "@playwright/test"
import { base64Encode } from "@opencode-ai/util/encode"
import { currentSession } from "../utils/mock-server"
+import pkg from "../../package.json" with { type: "json" }
const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
const sessionA = session("ses_tab_a", "Tab A session")
@@ -175,6 +176,9 @@ test("appearance experimental setting switches tab orientation", async ({ page }
const settings = page.getByTestId("settings-screen")
await expect(settings).toBeVisible()
+ const version = settings.getByRole("tablist").getByText(`v${pkg.version}`, { exact: true })
+ await expect(settings.getByRole("tablist").getByText("OpenCode Desktop", { exact: true })).toBeInViewport()
+ await expect(version).toBeInViewport()
await settings.getByRole("tab", { name: "Appearance" }).click()
await expect(settings.getByRole("heading", { name: "Experimental" })).toBeVisible()
@@ -194,6 +198,17 @@ test("appearance experimental setting switches tab orientation", async ({ page }
await page.setViewportSize({ width: 800, height: 720 })
await expect(settings.getByRole("tablist")).toHaveCSS("width", "160px")
+ await expect(version).toBeInViewport()
+
+ await page.setViewportSize({ width: 390, height: 720 })
+ await expect(version).toBeInViewport()
+ await settings.evaluate((element) => element.setAttribute("dir", "rtl"))
+ await expect(version).toBeInViewport()
+ await expect(version).toHaveCSS("direction", "ltr")
+
+ await page.setViewportSize({ width: 390, height: 360 })
+ await version.scrollIntoViewIfNeeded()
+ await expect(version).toBeInViewport()
})
test("vertical tab preference falls back to horizontal on mobile", async ({ page }) => {
diff --git a/packages/app/src/settings/settings.css b/packages/app/src/settings/settings.css
index 18bc9393195..6f19f126070 100644
--- a/packages/app/src/settings/settings.css
+++ b/packages/app/src/settings/settings.css
@@ -54,10 +54,26 @@
.settings-nav {
display: flex;
width: 200px;
+ flex-shrink: 0;
flex-direction: column;
gap: 16px;
}
+.settings-nav-footer {
+ display: flex;
+ flex-shrink: 0;
+ flex-direction: column;
+ gap: 8px;
+ margin-top: auto;
+ padding-block: 20px 4px;
+ padding-inline-start: 4px;
+ font-size: 11px;
+ font-weight: 440;
+ line-height: var(--line-height-tight);
+ color: var(--v2-text-text-faint);
+ user-select: none;
+}
+
.settings-back {
display: flex;
height: 28px;
diff --git a/packages/app/src/settings/shell.tsx b/packages/app/src/settings/shell.tsx
index d9f2326757c..c61db21363f 100644
--- a/packages/app/src/settings/shell.tsx
+++ b/packages/app/src/settings/shell.tsx
@@ -2,6 +2,7 @@ import { Component, createEffect, createMemo, createSignal, onCleanup, onMount,
import { Tabs } from "@opencode-ai/ui/tabs"
import { Icon } from "@opencode-ai/ui/icon"
import { useLanguage } from "@/runtime/i18n/language"
+import { usePlatform } from "@/runtime/platform/platform"
import { SettingsGeneral } from "./general/general"
import { SettingsAppearance } from "./appearance/appearance"
import { SettingsKeybinds } from "./keybinds/keybinds"
@@ -26,6 +27,7 @@ export const SettingsScreen: Component<{
defaultValue?: string
}> = (props) => {
const language = useLanguage()
+ const platform = usePlatform()
const dialog = useDialog()
const command = useCommand()
const surface = useSettingsSurface()
@@ -161,6 +163,12 @@ export const SettingsScreen: Component<{
+