Polish notebook margins

src/vs/workbench/contrib/notebook/browser/constants.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 // Cell sizing related
-export const CELL_MARGIN = 12;
+export const CELL_MARGIN = 20;
 export const CELL_RUN_GUTTER = 32;
 
 export const EDITOR_TOOLBAR_HEIGHT = 0;

src/vs/workbench/contrib/notebook/browser/media/notebook.css

@@ -179,8 +179,8 @@
 	display: inline-block;
 	position: absolute;
 	height: 26px;
-	right: 56px;
-	top: -16px;
+	right: 36px;
+	top: -14px; /* this lines up the bottom toolbar border with the current line when on line 01 */
 	z-index: 10;
 }
 
@@ -249,6 +249,7 @@
 .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell .run-button-container {
 	position: relative;
 	height: 22px;
+	flex-shrink: 0;
 }
 
 .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell .run-button-container .monaco-toolbar {

src/vs/workbench/contrib/notebook/browser/notebookEditor.ts

@@ -1022,7 +1022,7 @@ export const focusedCellIndicator = registerColor('notebook.focusedCellIndicator
 
 export const notebookOutputContainerColor = registerColor('notebook.outputContainerBackgroundColor', {
 	dark: new Color(new RGBA(255, 255, 255, 0.06)),
-	light: new Color(new RGBA(228, 230, 241)),
+	light: new Color(new RGBA(237, 239, 249)),
 	hc: null
 }
 	, nls.localize('notebook.outputContainerBackgroundColor', "The Color of the notebook output container background."));
@@ -1108,7 +1108,7 @@ registerThemingParticipant((theme, collector) => {
 	// }
 
 	// Cell Margin
-	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row  > div.cell { margin: 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px 0px ${CELL_MARGIN}px; }`);
+	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row  > div.cell { margin: 0px ${CELL_MARGIN}px 0px ${CELL_MARGIN}px; }`);
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row { padding-top: ${EDITOR_TOP_MARGIN}px; }`);
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .output { margin: 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px }`);
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-bottom-toolbar-container { width: calc(100% - ${CELL_MARGIN * 2 + CELL_RUN_GUTTER}px); margin: 0px ${CELL_MARGIN}px 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px }`);

src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts

@@ -120,7 +120,7 @@ export class BackLayerWebView extends Disposable {
 		super();
 		this.element = document.createElement('div');
 
-		this.element.style.width = `calc(100% - ${(CELL_MARGIN + CELL_RUN_GUTTER) * 2}px)`;
+		this.element.style.width = `calc(100% - ${CELL_MARGIN * 2 + CELL_RUN_GUTTER}px)`;
 		this.element.style.height = '1400px';
 		this.element.style.position = 'absolute';
 		this.element.style.margin = `0px 0 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px`;
@@ -170,7 +170,7 @@ ${loaderJs}
 						width: 100%;
 						padding: ${outputNodePadding}px;
 						box-sizing: border-box;
-						background-color: var(--vscode-list-inactiveSelectionBackground);
+						background-color: var(--vscode-notebook-outputContainerBackgroundColor);
 					}
 					body {
 						padding: 0px;

src/vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel.ts

@@ -86,7 +86,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
 		this._layoutInfo = {
 			fontInfo: initialNotebookLayoutInfo?.fontInfo || null,
 			editorHeight: 0,
-			editorWidth: initialNotebookLayoutInfo ? initialNotebookLayoutInfo!.width - (CELL_MARGIN + CELL_RUN_GUTTER) * 2 : 0,
+			editorWidth: initialNotebookLayoutInfo ? initialNotebookLayoutInfo!.width - (CELL_MARGIN * 2) + CELL_RUN_GUTTER : 0,
 			outputContainerOffset: 0,
 			outputTotalHeight: 0,
 			totalHeight: 0,
@@ -103,7 +103,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
 		const indicatorHeight = this.editorHeight + CELL_STATUSBAR_HEIGHT + outputTotalHeight;
 		const outputContainerOffset = EDITOR_TOOLBAR_HEIGHT + EDITOR_TOP_MARGIN + this.editorHeight + CELL_STATUSBAR_HEIGHT;
 		const bottomToolbarOffset = totalHeight - BOTTOM_CELL_TOOLBAR_HEIGHT;
-		const editorWidth = state.outerWidth !== undefined ? state.outerWidth - (CELL_MARGIN + CELL_RUN_GUTTER) * 2 : this._layoutInfo?.editorWidth;
+		const editorWidth = state.outerWidth !== undefined ? state.outerWidth - (CELL_MARGIN * 2 + CELL_RUN_GUTTER) : this._layoutInfo?.editorWidth;
 		this._layoutInfo = {
 			fontInfo: state.font || null,
 			editorHeight: this._editorHeight,

src/vs/workbench/contrib/notebook/browser/viewModel/markdownCellViewModel.ts

@@ -71,7 +71,7 @@ export class MarkdownCellViewModel extends BaseCellViewModel implements ICellVie
 	}
 
 	private computeEditorWidth(outerWidth: number) {
-		return outerWidth - CELL_MARGIN * 2 - CELL_RUN_GUTTER * 2;
+		return outerWidth - (CELL_MARGIN * 2) - CELL_RUN_GUTTER;
 	}
 
 	layoutChange(state: MarkdownCellLayoutChangeEvent) {