Prompt Box Size Up for Claude Code

Make the Claude Code prompt box bigger — raise its height and width caps, and resize it by dragging its top edge.

Note: This is a community-developed extension and is not affiliated with, endorsed by, or supported by Anthropic. "Claude" and "Claude Code" are trademarks of Anthropic, PBC.

To do its job this extension modifies the Claude Code extension's own webview assets on disk, because VS Code offers no API for styling another extension's webview. It keeps a .orig backup of every file it touches, and Prompt Box Size Up: Restore original files puts everything back. See How it works.

Features

Claude Code caps its prompt input at 200px tall and 680px wide. This extension raises both, and adds a way to size the input by hand.

Drag handle on the top edge

A grab bar appears on the prompt box's top border.

The height you choose is remembered across reloads.

A single click focuses the handle and switches the arrow keys to resizing; the handle brightens to show it is live. Dragging deliberately does not take focus, so you can resize and carry on typing.

Tabbing to the handle is not a practical route, which is why the click does the focusing: Claude Code's own prompt-box key handler swallows Shift+Tab to cycle the permission mode and Tab to accept a suggestion.

CSS alone cannot do this: the resize property pins its grip to the bottom-right corner and grows downward, so the handle is implemented in a small script injected into the webview.

Raised caps

Survives Claude Code updates

Updating Claude Code installs into a new versioned folder, which does not carry the patch. With promptboxsizeup.autoApply on (the default), the patch is re-applied at startup and you are offered a reload.

Commands

Uninstalling

Run Prompt Box Size Up: Restore original files before you uninstall.

VS Code has no uninstall hook, so an extension that changed files outside its own folder cannot be certain of cleaning up after itself. This one makes a best effort — when it shuts down it checks whether its own folder has been removed or marked for deletion, and if so restores Claude Code — but that code is not guaranteed to run, and uninstalling without restoring first can leave the prompt box resized.

If that already happened, nothing is lost: the .orig backups are still sitting next to the patched files. Put them back by hand and reload the window.

Get-ChildItem "$env:USERPROFILE\.vscode\extensions\anthropic.claude-code-*\webview\*.orig" |
  ForEach-Object { Move-Item -LiteralPath $_.FullName -Destination ($_.FullName -replace '\.orig$','') -Force }

Reinstalling Claude Code also gives you clean files.

Settings

All settings are application scope. The patch itself is shared by every window, so it cannot vary per workspace.

How it works

VS Code has no API for injecting CSS or JS into another extension's webview, so the assets are rewritten on disk. The target is resolved through vscode.extensions, not by globbing version-stamped folder names.

Class-name hashes change on every Claude Code build, so the rules are matched with wildcards:

The input and its mention overlay must carry identical height constraints; if they diverge, the typed text and the coloured overlay drift apart.

Safeguards

• Validation runs first. If a single required rule is missing, nothing is written at all — not even a backup
• A .orig backup is kept and every replacement starts from it, so applying repeatedly is idempotent
• Writes go through a temp file and a rename. Settings are application-scoped, so a settings change wakes every open window at once; an atomic rename means a 5 MB bundle is never left half-written
• A stale backup is never trusted. An unpatched file is by definition the truth for its build, so a .orig left over from an older one is refreshed
• A patched file is never mistaken for pristine. If neither the file nor its backup is clean, the patch aborts and asks you to reinstall Claude Code, rather than baking the damage into the backup
• Setting values must be plain CSS lengths; anything that could break out of the replacement pattern or the CSS block is rejected
• The stamp covers the settings, the injected script, the rules and the styling, so any change to this extension re-applies rather than reporting "already up to date"

Why Codex and Copilot Chat are not supported

Codex and Copilot Chat render through VS Code's built-in chat UI (the vscode.chat API), which appears in the same panel as Claude Code. Their prompt box height does not come from webview CSS — it comes from a constant inside VS Code itself (ChatInputPart, 250px by default, as of VS Code 1.134):

// out/vs/workbench/workbench.desktop.main.js
u8o = 250
this.inputEditorMaxHeight = this.options.inputEditorMaxHeight
  ?? (this.options.renderStyle === "compact" ? u8o/3 : u8o)

ChatInputPart._effectiveInputEditorMaxHeight() feeds that value to _inputEditor.layout(), so overriding max-height in CSS is undone on the next layout pass, and inputEditorMaxHeight is only ever supplied by internal code — there is no setting that reaches it.

Supporting them would mean editing workbench.desktop.main.js and sessions.desktop.main.js, then rewriting their entries in product.json's checksums to avoid the "installation appears to be corrupt" banner. That is a modification of VS Code itself, and it would need an extra reload after every VS Code update, so this extension stays out of it.

The clean fix is a chat.input.maxHeight setting in VS Code.

Development

No dependencies, no build step.

extension.js      activation, commands, auto-apply
src/targets.js    the Claude Code target: asset resolution, CSS rules, selectors
src/patchkit.js   backup, replace, stamp, restore
src/injected.js   the drag handle that runs inside the webview

npm run package

The demo GIF is referenced by a relative path on purpose. The Marketplace does not render relative image links, but vsce rewrites them to absolute raw URLs at package time using the repository field — so the relative form is the one that works everywhere: locally, on GitHub, and in the packaged README. Do not "fix" it to an absolute URL. It does mean the image only resolves on the Marketplace once the repository exists and the file is pushed.

License

MIT