Add horizontal resize support for quick input widget

[ipanasenko]

Summary

• Adds draggable resize handles on the left and right edges of the quick input widget, allowing users to horizontally resize the command palette / quick pick
• The widget stays centered while resizing — both edges expand/contract symmetrically
• The custom width is persisted in application storage and restored across sessions

Fixes #85374

Screen.Recording.2026-02-22.at.12.10.02.AM.mov

Test plan

• Open the command palette (Cmd+P or Cmd+Shift+P) and verify resize handles appear on the left and right edges
• Drag the right edge to widen/narrow the widget — it should stay centered
• Drag the left edge to widen/narrow the widget — it should stay centered
• Close and reopen the command palette — the custom width should be restored
• Resize after dragging the widget to a custom position — verify it stays centered at that position
• Verify the widget respects minimum width (300px) and maximum width (900px / container bounds)

[Copilot]

Pull request overview

Adds horizontal resize support to the quick input widget (command palette / quick pick), including persistence of custom width via stored view state.

Changes:

• Persist and restore a custom quick input width via workbench.quickInput.viewState.
• Add a QuickInputResizeController that provides left/right resize handles, drag resizing, and double-click reset.
• Add CSS for the resize handle hit targets.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
src/vs/platform/quickinput/browser/quickInputController.ts	Introduces persisted width in view state, adds resize controller + layout updates, and implements mouse-driven resize behavior.
src/vs/platform/quickinput/browser/media/quickInput.css	Styles/positions the new resize handle elements on the widget edges.

[Copilot]

The custom-width clamping can produce a width that exceeds the available container width when the window is narrow. Right now Math.max(MIN_WIDTH, Math.min(customWidth, this.dimension!.width - 20)) will force MIN_WIDTH even if this.dimension!.width - 20 is smaller (e.g. small windows), pushing the widget off-screen. Consider clamping to a computed maxAllowed = Math.min(QuickInputResizeController.MAX_WIDTH, this.dimension!.width - 20) and then applying Math.min/Math.max in an order that never exceeds maxAllowed (and also caps stored values to MAX_WIDTH).

Suggested change

	// Use custom width if set, but clamp to valid range
	const width = customWidth !== undefined
	? Math.max(QuickInputResizeController.MIN_WIDTH, Math.min(customWidth, this.dimension!.width - 20))
	: defaultWidth;
	// Compute the maximum width allowed by both the controller and the current container
	const rawMaxAllowed = Math.min(QuickInputResizeController.MAX_WIDTH, this.dimension!.width - 20);
	const maxAllowed = Math.max(rawMaxAllowed, 0);
	const effectiveMinWidth = Math.min(QuickInputResizeController.MIN_WIDTH, maxAllowed);
	let width: number;
	if (customWidth !== undefined) {
	// Cap stored custom width to MAX_WIDTH, then clamp between effectiveMinWidth and maxAllowed
	const clampedCustom = Math.min(customWidth, QuickInputResizeController.MAX_WIDTH);
	width = Math.min(Math.max(clampedCustom, effectiveMinWidth), maxAllowed);
	} else {
	// Clamp default width to the same bounds
	width = Math.min(Math.max(defaultWidth, effectiveMinWidth), maxAllowed);
	}

[ipanasenko]

I think it looks fine with narrow window

Screen.Recording.2026-02-22.at.12.23.32.AM.mov

[vs-code-engineering]

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

@TylerLeonhardt

Matched files:

• src/vs/platform/quickinput/browser/media/quickInput.css
• src/vs/platform/quickinput/browser/quickInputController.ts