feat: add mobile workspace fullscreen toggle

Author: pallyoung

packages/web/src/features/workspace/views/mobile/mobile-topbar.tsx

@@ -1,17 +1,21 @@
 import type { Workspace } from "@coder-studio/core";
 import { Menu, Settings2 } from "lucide-react";
 import { useTranslation } from "../../../../lib/i18n";
+import type { WorkspaceFullscreenController } from "../../actions/use-workspace-fullscreen";
+import { WorkspaceFullscreenButton } from "../../components/workspace-fullscreen-button";
 
 interface MobileTopBarProps {
   activeWorkspace: Workspace | null;
   drawerOpen: boolean;
+  fullscreenController?: WorkspaceFullscreenController;
   onOpenSettings: () => void;
   onToggleDrawer: () => void;
 }
 
 export function MobileTopBar({
   activeWorkspace,
   drawerOpen,
+  fullscreenController,
   onOpenSettings,
   onToggleDrawer,
 }: MobileTopBarProps) {
@@ -53,6 +57,12 @@ export function MobileTopBar({
         >
           <Settings2 size={18} />
         </button>
+        <WorkspaceFullscreenButton
+          controller={fullscreenController}
+          className="mobile-topbar__icon-button"
+          iconSize={18}
+          dataTestId="mobile-fullscreen-toggle"
+        />
       </div>
     </header>
   );

packages/web/src/features/workspace/views/mobile/workspace-mobile-view.tsx

@@ -1,5 +1,5 @@
 import { useAtomValue, useSetAtom } from "jotai";
-import { type CSSProperties, useEffect, useState } from "react";
+import { type CSSProperties, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { pendingFocusSessionAtom, visibleMobileSessionIdAtom } from "../../../../atoms/app-ui";
 import { useTranslation } from "../../../../lib/i18n";
@@ -10,6 +10,7 @@ import { ConfigDriftBanner } from "../../../config-drift-banner";
 import { MobileSupervisorBadge } from "../../../supervisor/views/mobile/mobile-supervisor-badge";
 import { MobileSupervisorSheet } from "../../../supervisor/views/mobile/mobile-supervisor-sheet";
 import { TerminalPanel } from "../../../terminal-panel";
+import { useWorkspaceFullscreen } from "../../actions/use-workspace-fullscreen";
 import { useWorkspaceScreenModel } from "../../actions/use-workspace-screen-model";
 import { WorkspaceLaunchModal } from "../shared/workspace-launch-modal";
 import { useMobileLayoutMode } from "./hooks/use-mobile-layout-mode";
@@ -23,6 +24,8 @@ import { MobileTopBar } from "./mobile-topbar";
 import { MobileWorkspaceDrawer } from "./mobile-workspace-drawer";
 
 export function WorkspaceMobileView() {
+  const fullscreenRootRef = useRef<HTMLDivElement>(null);
+  const fullscreenController = useWorkspaceFullscreen(fullscreenRootRef);
   const t = useTranslation();
   const navigate = useNavigate();
   const pendingFocusSessionId = useAtomValue(pendingFocusSessionAtom);
@@ -139,6 +142,7 @@ export function WorkspaceMobileView() {
 
   return (
     <div
+      ref={fullscreenRootRef}
       className={`mobile-shell mobile-shell--${layoutMode} mobile-shell--motion-${motionMode}`}
       data-testid="mobile-shell"
       data-layout-mode={layoutMode}
@@ -147,6 +151,7 @@ export function WorkspaceMobileView() {
       <MobileTopBar
         activeWorkspace={workspace}
         drawerOpen={drawerOpen}
+        fullscreenController={fullscreenController}
         onOpenSettings={() => {
           setAgentSheetOpen(false);
           navigate("/settings");

packages/web/src/shells/mobile-shell/index.test.tsx

@@ -269,6 +269,65 @@ function installVisualViewport(height: number, offsetTop = 0) {
   return visualViewport;
 }
 
+function installFullscreenApiForMobileShell() {
+  let fullscreenElement: Element | null = null;
+
+  const requestFullscreen = vi.fn().mockImplementation(function (this: HTMLElement) {
+    fullscreenElement = this;
+    document.dispatchEvent(new Event("fullscreenchange"));
+    return Promise.resolve();
+  });
+
+  const exitFullscreen = vi.fn().mockImplementation(async () => {
+    fullscreenElement = null;
+    document.dispatchEvent(new Event("fullscreenchange"));
+  });
+
+  Object.defineProperty(document, "fullscreenEnabled", {
+    configurable: true,
+    value: true,
+  });
+
+  Object.defineProperty(document, "fullscreenElement", {
+    configurable: true,
+    get: () => fullscreenElement,
+  });
+
+  Object.defineProperty(document, "exitFullscreen", {
+    configurable: true,
+    value: exitFullscreen,
+  });
+
+  Object.defineProperty(HTMLElement.prototype, "requestFullscreen", {
+    configurable: true,
+    value: requestFullscreen,
+  });
+
+  return { requestFullscreen, exitFullscreen };
+}
+
+function removeFullscreenApiForMobileShell() {
+  Object.defineProperty(document, "fullscreenEnabled", {
+    configurable: true,
+    value: false,
+  });
+
+  Object.defineProperty(document, "fullscreenElement", {
+    configurable: true,
+    get: () => null,
+  });
+
+  Object.defineProperty(document, "exitFullscreen", {
+    configurable: true,
+    value: undefined,
+  });
+
+  Object.defineProperty(HTMLElement.prototype, "requestFullscreen", {
+    configurable: true,
+    value: undefined,
+  });
+}
+
 function installMatchMediaMock(predicate: (query: string) => boolean) {
   const originalMatchMedia = window.matchMedia;
   const listeners = new Map<string, Set<(event: MediaQueryListEvent) => void>>();
@@ -704,6 +763,37 @@ describe("MobileShell Phase 2 workspace", () => {
     expect(screen.getByText("SettingsPage")).toBeInTheDocument();
   });
 
+  it("shows a fullscreen toggle to the right of settings when the browser supports fullscreen", async () => {
+    installFullscreenApiForMobileShell();
+    renderMobileShell({ initialEntry: "/workspace" });
+
+    const settingsButton = screen.getByRole("button", { name: "Open settings" });
+    const fullscreenButton = await screen.findByRole("button", { name: "Enter Fullscreen" });
+
+    expect(settingsButton.nextElementSibling).toBe(fullscreenButton);
+  });
+
+  it("hides the fullscreen toggle on mobile when the browser does not support fullscreen", async () => {
+    removeFullscreenApiForMobileShell();
+    renderMobileShell({ initialEntry: "/workspace" });
+
+    expect(screen.getByRole("button", { name: "Open settings" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Enter Fullscreen" })).toBeNull();
+  });
+
+  it("switches the mobile fullscreen button to exit mode after entering fullscreen", async () => {
+    const api = installFullscreenApiForMobileShell();
+    const user = userEvent.setup();
+    renderMobileShell({ initialEntry: "/workspace" });
+
+    await user.click(await screen.findByRole("button", { name: "Enter Fullscreen" }));
+
+    await waitFor(() => {
+      expect(api.requestFullscreen).toHaveBeenCalledTimes(1);
+      expect(screen.getByRole("button", { name: "Exit Fullscreen" })).toBeInTheDocument();
+    });
+  });
+
   it("keeps welcome route as full-page content outside the workspace scaffold", () => {
     renderMobileShell({ initialEntry: "/", withWorkspaces: false });
 

packages/web/src/styles/components.css

@@ -7706,6 +7706,9 @@ textarea.input {
 
   .mobile-topbar__actions {
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-2);
   }
 
   .mobile-shell__recovery-strip {