fix(app): restore fullscreen settings version footer (#45419)

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

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;

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<{
               </div>
             </div>
           </div>
+          <div class="settings-nav-footer">
+            <span>{language.t("app.name.desktop")}</span>
+            <span>
+              <bdi dir="ltr">v{platform.version}</bdi>
+            </span>
+          </div>
         </Tabs.List>
 
         <Tabs.Content value="general" class="settings-panel">