[Devesh36]

On a phone, opening Show Code in the tscircuit.com editor leaves most of the editor occupied by its file sidebar. The default 224px sidebar leaves Monaco only 151px at a 375px viewport, or 96px at 320px. Code identifiers and values wrap into fragments. The same problem occurs when the workspace is inside a narrow desktop split pane.

Observe the workspace container and collapse its sidebar below 480px, leaving room for readable code. This uses the actual component width rather than the browser width. Wide containers retain the expanded sidebar, and Show files still allows users to open it manually. Ordinary resizes within the same width range preserve the user's sidebar choice. Zero-width measurements from hidden panes are ignored, and the observer is disconnected on unmount.

Before and after

The same narrow-workspace fixture at 375px, rendered before and after the source change:

Before: the sidebar leaves 151px for Monaco	After: code uses the full 375px width

Wide-container result

Reproduction and validation

• Open examples/NarrowWorkspace.fixture.tsx in Cosmos and resize the viewport or fixture container.
• Browser checks passed at 320, 375, 768, and 1440px. Narrow workspaces use their full width for code; the 720px fixture retains a 224px sidebar and 496px code area.
• Verified manual Show/Hide files controls and preservation of a manually opened sidebar when resizing within the narrow range.
• bun test: 60 passed, 0 failed.
• GitHub CI passes: tests, compiled stylesheet freshness, type checking, and formatting. The Vercel preview deployment also passes.

The diff contains the workspace component, a small visual fixture, and the generated stylesheet required by CI. Screenshot assets are hosted separately from the PR diff.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
monaco-code-editor	Ready	Preview	Oct 14, 2026 12:43pm UTC