VCode home

The layout on a tablet or desktop

Agents: claude, codex, opencode · On: desktop

Given a wide enough window the frame fills it, the whole app is scaled up, the conversation moves into a pane with a header of its own, and the file explorer stops being a drawer and stands as a column beside it.

Why you would use it

The app is built for a phone, where the explorer is a gesture and the type is sized for a screen held at arm's length. On a laptop that reads small and wastes room: you want the files always visible, tabs you can click and close from, and lines of text short enough to read back to their start. And with the room for two conversations side by side, each one needs its own tabs and its own buttons.

How to use it

Nothing to turn on. Resize the window, or open the app on a wider screen.

  1. The frame fills whatever width the window has, at every size. From 760px wide it is also scaled up 1.1 times, so the phone's type sizes read on a desktop screen.

  2. From 760px the conversation sits in a pane (.pane) with a header of its own (.pane-head), and the top of the screen is one 48px row: the usage meters on the left, then Install, the update arrow, Notify, the folder (#files-open) and the cog (#settings-open) at the right end. The version and the connection dot (#link-dot) sit once at the bottom right, in a grey bar across the foot of the window, not under each pane's composer. The phone's tab strip (#tabstrip), plus (#new-tab) and Agent and Shell chips (#send-modes) are not shown: each pane header carries its own. The two-row keypad stays in the bottom band for the focused pane while it is in Shell mode.

    A 900px window: one 48px row of meters and buttons across the top, the pane with its header under it.

  3. The pane header holds, left to right: the pane's tabs (.pane-tabs), the plus (data-act="new-tab"), then at the right end Agent and Shell for this pane (.pane-modes), Split right and Split down, Zoom pane and Close pane. With one pane the zoom and the close are not shown, and neither is the focus ring.

  4. The tabs in a pane header are a desktop tab bar: each one a rectangle the full height of the header, meeting the next one on a hairline, the tab you are in filled, edged down both sides and underlined in its colour, a close cross on it and on whichever tab the pointer is over, and a mouse wheel over the strip scrolls it sideways. The first tab starts at the pane's own edge, in every pane: the resize handle of the line on the left straddles that line rather than leaning into the pane. That tab draws no edge of its own on that side, the pane's line being it, so the ring of the pane you are in meets the tab in the pane next door across one hairline. See close-and-reopen-tabs.

    The pane header with a close cross on the tab in front and on the second tab, which the pointer is on.

  5. Click Split right or Split down in a pane header, or press Ctrl+D or Ctrl+Shift+D, to put a second pane beside or under it. Up to six across and six down. Each pane keeps its own tabs, its own mode and its own header; the focused one is the one the composer, the status bar and the explorer follow, and it wears a violet ring.

  6. From 1080px the file explorer docks as a column on the right (#explorer), 280px of the frame's own, 308px on screen. Its rows are VS Code's there — 22px tall, 16px icon and chevron columns, 8px of indent a level — rather than the phone's thumb-sized ones.

    A 1440px window: the one row across the top, the pane in the middle, the file explorer docked on the right.

  7. Click the folder button next to Notify (#files-open) to hide and show the explorer column, or click the small panel-close icon at the bottom-left of the explorer (#explorer-toggle) to hide it. Hidden, the column leaves a slim 28px rail at the frame's right edge (#explorer-rail); click anywhere on it to show the column again. The choice is remembered on this browser.

    The same 1440px window with the explorer column gone and the pane widened into it.

  8. Below 1080px the same button opens the explorer as an overlay instead, from the button or the right edge.

What you see

Options and settings

Option Default What it changes
Wide width threshold 760px Below it, the phone layout
Explorer width threshold 1080px Below it, the explorer is a drawer
Frame zoom 1.1 --zoom, applied by the zoomed class on #frame
Bottom band width 584px of the frame's own --compose-w
Explorer column width 280px of the frame's own --dock-r
Hidden explorer rail width 28px of the frame's own --dock-r under files-rail
localStorage wb.files.hidden absent '1' hides the explorer column. Absent means shown

Limits and known gaps