Fix grid sizing issues (#2410)

* fix insert ordering in scrollable splitview

* fix grid sizing issues

* move dirty state

src/sql/base/browser/ui/scrollableSplitview/scrollableSplitview.ts

@@ -531,6 +531,7 @@ export class ScrollableSplitView extends HeightMap implements IDisposable {
 
 				deltaUp -= viewDelta;
 				item.size = size;
+				this.dirtyState = true;
 			}
 
 			for (let i = 0, deltaDown = delta; deltaDown !== 0 && i < downItems.length; i++) {
@@ -540,6 +541,7 @@ export class ScrollableSplitView extends HeightMap implements IDisposable {
 
 				deltaDown += viewDelta;
 				item.size = size;
+				this.dirtyState = true;
 			}
 		}
 
@@ -553,6 +555,7 @@ export class ScrollableSplitView extends HeightMap implements IDisposable {
 
 			emptyDelta -= viewDelta;
 			item.size = size;
+			this.dirtyState = true;
 		}
 
 		this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);

src/sql/parts/query/editor/gridPanel.ts

@@ -39,10 +39,19 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { IUntitledEditorService } from 'vs/workbench/services/untitled/common/untitledEditorService';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 
-const rowHeight = 29;
+const ROW_HEIGHT = 29;
-const columnHeight = 26;
+const HEADER_HEIGHT = 26;
-const minGridHeightInRows = 8;
+const MIN_GRID_HEIGHT_ROWS = 8;
-const estimatedScrollBarHeight = 10;
+const ESTIMATED_SCROLL_BAR_HEIGHT = 10;
+const BOTTOM_PADDING = 5;
+const ACTIONBAR_WIDTH = 26;
+
+// minimum height needed to show the full actionbar
+const ACTIONBAR_HEIGHT = 100;
+
+// this handles min size if rows is greater than the min grid visible rows
+const MIN_GRID_HEIGHT = (MIN_GRID_HEIGHT_ROWS * ROW_HEIGHT) + HEADER_HEIGHT + ESTIMATED_SCROLL_BAR_HEIGHT + BOTTOM_PADDING;
+
 
 export interface IGridTableState {
 	canBeMaximized: boolean;
@@ -200,6 +209,10 @@ export class GridPanel extends ViewletPanel {
 		}
 	}
 
+	public layout(size: number) {
+		this.splitView.layout(size);
+	}
+
 	private minimizeTables(): void {
 		if (this.maximizedGrid) {
 			this.maximizedGrid.state.maximized = false;
@@ -211,10 +224,6 @@ export class GridPanel extends ViewletPanel {
 }
 
 class GridTable<T> extends Disposable implements IView {
-	private static BOTTOMPADDING = 5;
-	private static ACTIONBAR_WIDTH = 26;
-	// this is the min height for grids
-	private static MIN_GRID_HEIGHT = (minGridHeightInRows * rowHeight) + columnHeight + estimatedScrollBarHeight + GridTable.BOTTOMPADDING;
 	private table: Table<T>;
 	private actionBar: ActionBar;
 	private container = document.createElement('div');
@@ -229,6 +238,9 @@ class GridTable<T> extends Disposable implements IView {
 	public id = generateUuid();
 	readonly element: HTMLElement = this.container;
 
+	// this handles if the row count is small, like 4-5 rows
+	private readonly maxSize = ((this.resultSet.rowCount) * ROW_HEIGHT) + HEADER_HEIGHT + ESTIMATED_SCROLL_BAR_HEIGHT + BOTTOM_PADDING;
+
 	constructor(
 		private runner: QueryRunner,
 		public state: GridTableState,
@@ -241,7 +253,7 @@ class GridTable<T> extends Disposable implements IView {
 		super();
 		this.container.style.width = '100%';
 		this.container.style.height = '100%';
-		this.container.style.marginBottom = GridTable.BOTTOMPADDING + 'px';
+		this.container.style.marginBottom = BOTTOM_PADDING + 'px';
 		this.container.className = 'grid-panel';
 
 		this.columns = this.resultSet.columnInfo.map((c, i) => {
@@ -277,10 +289,7 @@ class GridTable<T> extends Disposable implements IView {
 		});
 		let numberColumn = new RowNumberColumn({ numberOfRows: this.resultSet.rowCount });
 		this.columns.unshift(numberColumn.getColumnDefinition());
-		this.table = this._register(new Table(tableContainer, {
+		this.table = this._register(new Table(tableContainer, { dataProvider: new AsyncDataProvider(collection), columns: this.columns }, { rowHeight: ROW_HEIGHT, showRowNumber: true }));
-			dataProvider: new AsyncDataProvider(collection),
-			columns: this.columns
-		}, { rowHeight, showRowNumber: true }));
 		this.table.setSelectionModel(this.selectionModel);
 		this.table.registerPlugin(new MouseWheelSupport());
 		this.table.registerPlugin(new AutoColumnSize());
@@ -310,7 +319,7 @@ class GridTable<T> extends Disposable implements IView {
 		);
 
 		let actionBarContainer = document.createElement('div');
-		actionBarContainer.style.width = GridTable.ACTIONBAR_WIDTH + 'px';
+		actionBarContainer.style.width = ACTIONBAR_WIDTH + 'px';
 		actionBarContainer.style.display = 'inline-block';
 		actionBarContainer.style.height = '100%';
 		actionBarContainer.style.verticalAlign = 'top';
@@ -346,20 +355,19 @@ class GridTable<T> extends Disposable implements IView {
 		}
 		this.table.layout(
 			new Dimension(
-				getContentWidth(this.container) - GridTable.ACTIONBAR_WIDTH,
+				getContentWidth(this.container) - ACTIONBAR_WIDTH,
-				size - GridTable.BOTTOMPADDING
+				size - BOTTOM_PADDING
 			)
 		);
 	}
 
 	public get minimumSize(): number {
-		// this handles if the row count is small, like 4-5 rows
+		// clamp between ensuring we can show the actionbar, while also making sure we don't take too much space
-		let smallestRows = ((this.resultSet.rowCount) * rowHeight) + columnHeight + estimatedScrollBarHeight + GridTable.BOTTOMPADDING;
+		return Math.max(Math.min(this.maxSize, MIN_GRID_HEIGHT), ACTIONBAR_HEIGHT);
-		return Math.min(smallestRows, GridTable.MIN_GRID_HEIGHT);
 	}
 
 	public get maximumSize(): number {
-		return ((this.resultSet.rowCount) * rowHeight) + columnHeight + estimatedScrollBarHeight + GridTable.BOTTOMPADDING;
+		return Math.max(this.maxSize, ACTIONBAR_HEIGHT);
 	}
 
 	private loadData(offset: number, count: number): Thenable<T[]> {