Skip to content

Conversation

@tharani-2006
Copy link
Contributor

Fixes #284046

Adds a temporary overlay to the integrated terminal that displays
the current terminal dimensions (columns × rows) while resizing.

  • Appears only during active resize
  • Updates live with terminal size
  • Automatically hides after resizing stops
  • Theme-aware and accessible

@tharani-2006
Copy link
Contributor Author

@microsoft-github-policy-service agree

Copy link
Member

@Tyriar Tyriar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work, looks fantastic 👏


this._terminalService.setContainers(parentElement, this._terminalContainer);

this._register(this._terminalService.onDidChangeInstanceDimensions(instance => this._handleInstanceDimensionsChanged(instance)));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something I noticed is this shows up when not explicitly dragging it, such as when it's resized on window launch. Could we restrict this to show only when manually resizing somehow?

@tharani-2006
Copy link
Contributor Author

Hi @Tyriar,

Thanks for the feedback and suggestions!

I’ll update the PR to:

-Restrict the overlay to show only during manual resizing.

-Change the overlay text format to ${instance.cols} x ${instance.rows}.

I’ll push the changes shortly.

@tharani-2006
Copy link
Contributor Author

Hi @Tyriar,

I’ve updated the PR to restrict the overlay so it only appears during manual resizing, and I’ve updated the text format to ${cols} x ${rows} as suggested.

Please let me know if this looks good or if you’d like any further adjustments. Thanks!

Comment on lines 233 to 242
private _ensureResizeOverlay(): HTMLElement {
if (!this._resizeOverlay) {
this._resizeOverlay = $('.terminal-resize-overlay');
this._resizeOverlay.setAttribute('role', 'status');
this._resizeOverlay.setAttribute('aria-live', 'polite');
this._parentElement.append(this._resizeOverlay);
this._register(toDisposable(() => this._resizeOverlay?.remove()));
}
return this._resizeOverlay;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Playing around with this more, it should probably actually live in TerminalInstance since this falls over right now when there are multiple terminals or tabs are shown:

Image

It's also fine that it shows for all split terminals at once, not just the active one. But we do want to make sure that the window startup and terminal start up problem is handled. Moving it into TerminalInstance should make it a lot easier to accomplish this as it knows when it was just launched, it knows the first resize event, etc.

@tharani-2006
Copy link
Contributor Author

Hi @Tyriar,

I’ve moved the overlay logic to TerminalInstance as suggested.

  • Each terminal instance now manages its own overlay.
  • Works with multiple terminals, split terminals, and startup events.
  • Only shows during manual resizing.
  • Accessibility attributes (role="status", aria-live="polite") are preserved.
  • Proper disposal and timeout handling implemented.

I’ve incorporated all requested changes and accept them. The PR is ready for your review.

Copy link
Member

@Tyriar Tyriar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @tharani-2006 👏

I made a few tweaks that were easier to do on my end than explain.

@Tyriar Tyriar enabled auto-merge December 19, 2025 20:10
@Tyriar Tyriar merged commit 096a817 into microsoft:main Dec 19, 2025
17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add overlay that shows terminal dimensions during resize

3 participants