From 390c4394f8d2c7680538ca5eb0a75c61490ad5e3 Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Tue, 5 Oct 2021 09:47:47 -0700 Subject: [PATCH] resize the tab panel when needed (#17262) --- .../connection/browser/connectionDialogWidget.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts b/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts index df9cdff07a..a258195f71 100644 --- a/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts +++ b/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts @@ -42,6 +42,7 @@ import { ITree } from 'vs/base/parts/tree/browser/tree'; import { AsyncServerTree } from 'sql/workbench/services/objectExplorer/browser/asyncServerTree'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { ConnectionBrowseTab } from 'sql/workbench/services/connection/browser/connectionBrowseTab'; +import { ElementSizeObserver } from 'vs/editor/browser/config/elementSizeObserver'; export interface OnShowUIResponse { selectedProviderDisplayName: string; @@ -97,6 +98,15 @@ export class ConnectionDialogWidget extends Modal { private _connectionSource: ConnectionSource = 'manual'; + /** + * The available size of the panel could change when: + * 1. a connection node is selected from recent/browse tab + * 2. the connection type is changed + * 3. the auth type is changed + * We need to react to the size change and properly layout the panel content. + */ + private _panelSizeObserver: ElementSizeObserver; + constructor( private providerDisplayNameOptions: string[], private selectedProviderType: string, @@ -218,6 +228,11 @@ export class ConnectionDialogWidget extends Modal { this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme(e))); this.updateTheme(this._themeService.getColorTheme()); + this._panelSizeObserver = new ElementSizeObserver(this._panel.element, undefined, () => { + this._panel.layout(new DOM.Dimension(this._panel.element.clientWidth, this._panel.element.clientHeight)); + }); + this._register(this._panelSizeObserver); + this._panelSizeObserver.startObserving(); } /**