fix server/database dashboard content scroll (#10138)

* implementation-1

* updates

src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.component.ts

@@ -14,11 +14,9 @@ import { DashboardServiceInterface } from 'sql/workbench/contrib/dashboard/brows
 import { CommonServiceInterface } from 'sql/workbench/services/bootstrap/browser/commonServiceInterface.service';
 import { AngularEventType, IAngularEventingService } from 'sql/platform/angularEventing/browser/angularEventingService';
 import { DashboardWidgetWrapper } from 'sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component';
-import { ScrollableDirective } from 'sql/base/browser/ui/scrollable/scrollable.directive';
 import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 import { ConfigurationTarget, IConfigurationService } from 'vs/platform/configuration/common/configuration';
-import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 import { DASHBOARD_BORDER } from 'vs/workbench/common/theme';
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
@@ -30,7 +28,7 @@ import { PropertiesWidgetComponent } from 'sql/workbench/contrib/dashboard/brows
 	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardHomeContainer) }],
 	template: `
 		<div class="fullsize" style="display: flex; flex-direction: column">
-			<div scrollable [horizontalScroll]="${ScrollbarVisibility.Hidden}" [verticalScroll]="${ScrollbarVisibility.Auto}">
+			<div>
 				<div #propertiesContainer>
 					<dashboard-widget-wrapper #propertiesClass *ngIf="properties" [collapsable]="true" [bottomCollapse]="true" [toggleMore]="false" [_config]="properties"
 						class="properties" [style.height.px]="_propertiesClass?.collapsed ? '30' : getHeight()">
@@ -46,7 +44,6 @@ export class DashboardHomeContainer extends DashboardWidgetContainer {
 	@Input() private properties: WidgetConfig;
 	@ViewChild('propertiesClass') private _propertiesClass: DashboardWidgetWrapper;
 	@ViewChild('propertiesContainer') private _propertiesContainer: ElementRef;
-	@ViewChild(ScrollableDirective) private _scrollable: ScrollableDirective;
 
 	private height = 75; // default initial height
 
@@ -96,13 +93,6 @@ export class DashboardHomeContainer extends DashboardWidgetContainer {
 		return this.height;
 	}
 
-	public layout() {
-		super.layout();
-		if (this._scrollable) {
-			this._scrollable.layout();
-		}
-	}
-
 	private updateTheme(theme: IColorTheme): void {
 		const border = theme.getColor(DASHBOARD_BORDER);
 		if (theme.getColor(contrastBorder)) {

src/sql/workbench/contrib/dashboard/browser/contents/widgetContent.component.html

@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------------------------*/
 -->
 <div class="scroll-container" #scrollContainer>
-	<div class="scrollable" #scrollable>
+	<div #scrollable>
 		<div [ngGrid]="gridConfig" *ngIf="widgets" >
 			<dashboard-widget-wrapper *ngFor="let widget of widgets" [(ngGridItem)]="widget.gridItemConfig" [_config]="widget">
 			</dashboard-widget-wrapper>

src/sql/workbench/contrib/dashboard/browser/contents/widgetContent.component.ts

@@ -76,7 +76,7 @@ export class WidgetContent extends AngularDisposable implements AfterViewInit {
 	@Input() private widgets: WidgetConfig[];
 	@Input() private originalConfig: WidgetConfig[];
 	@Input() private context: string;
-	@Input() private scrollContent = true;
+	@Input() private scrollContent = false;
 
 	private _scrollableElement: ScrollableElement;
 
@@ -104,7 +104,7 @@ export class WidgetContent extends AngularDisposable implements AfterViewInit {
 		'auto_resize': false,       //  Automatically set col_width/row_height so that max_cols/max_rows fills the screen. Only has effect is max_cols or max_rows is set
 		'maintain_ratio': false,    //  Attempts to maintain aspect ratio based on the colWidth/rowHeight values set in the config
 		'prefer_new': false,        //  When adding new items, will use that items position ahead of existing items
-		'limit_to_screen': true,   //  When resizing the screen, with this true and auto_resize false, the grid will re-arrange to fit the screen size. Please note, at present this only works with cascade direction up.
+		'limit_to_screen': false,   //  When resizing the screen, with this true and auto_resize false, the grid will re-arrange to fit the screen size. Please note, at present this only works with cascade direction up.
 	};
 
 	private _editDispose: Array<IDisposable> = [];

src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.html

@@ -8,7 +8,7 @@
 	[actions]="panelActions">
 	<div #toolbar [style.display]="showToolbar ? 'block': 'none'" class="editor-toolbar">
 	</div>
-	<div [style.height]="getContentAreaHeight()">
+	<div [style.height]="getContentAreaHeight()" [style.overflow]="containerOverflowStyle">
 		<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize"
 			[identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions" [type]="tab.type"
 			[iconClass]="tab.iconClass">

src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts

@@ -53,7 +53,6 @@ import { DASHBOARD_BORDER } from 'vs/workbench/common/theme';
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
 import { attachTabbedPanelStyler } from 'sql/workbench/common/styler';
 
-
 const dashboardRegistry = Registry.as<IDashboardRegistry>(DashboardExtensions.DashboardContributions);
 const homeTabGroupId = 'home';
 
@@ -87,6 +86,7 @@ export abstract class DashboardPage extends AngularDisposable implements IConfig
 
 	static tabName = new RawContextKey<string>('tabName', undefined);
 	private _tabName: IContextKey<string>;
+	public containerOverflowStyle: string;
 
 	// a set of config modifiers
 	private readonly _configModifiers: Array<(item: Array<WidgetConfig>, collection: IConfigModifierCollection, context: string) => Array<WidgetConfig>> = [
@@ -540,6 +540,10 @@ export abstract class DashboardPage extends AngularDisposable implements IConfig
 			this.showToolbar = false;
 		}
 
+		// control-host container has its own scroll management
+		const newTab = this.tabs.find(t => t.id === tab.identifier);
+		this.containerOverflowStyle = newTab && this.getContentType(newTab) === 'controlhost-container' ? 'initial' : 'auto';
+
 		this._cd.detectChanges();
 	}