Skip to content

Commit 4019f35

Browse files
author
Miguel Solorio
committed
💪 Trim more padding from notebook cells (refs microsoft#101600)
1 parent 1d8fdca commit 4019f35

5 files changed

Lines changed: 12 additions & 12 deletions

File tree

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
export const SCROLLABLE_ELEMENT_PADDING_TOP = 20;
99

1010
// Cell sizing related
11-
export const CELL_MARGIN = 16;
11+
export const CELL_MARGIN = 8;
1212
export const CELL_RUN_GUTTER = 28;
13-
export const CODE_CELL_LEFT_MARGIN = 44;
13+
export const CODE_CELL_LEFT_MARGIN = 32;
1414

1515
export const EDITOR_TOOLBAR_HEIGHT = 0;
1616
export const BOTTOM_CELL_TOOLBAR_HEIGHT = 28;
@@ -22,5 +22,6 @@ export const CELL_BOTTOM_MARGIN = 6;
2222

2323
// Top and bottom padding inside the monaco editor in a cell, which are included in `cell.editorHeight`
2424
export const EDITOR_TOP_PADDING = 12;
25-
export const EDITOR_BOTTOM_PADDING = 12;
25+
export const EDITOR_BOTTOM_PADDING = 4;
2626

27+
export const CELL_OUTPUT_PADDING = 14;

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -716,8 +716,7 @@
716716

717717
.monaco-workbench .notebookOverlay > .cell-list-container .notebook-folding-indicator .codicon {
718718
visibility: visible;
719-
padding: 8px 4px 0;
720-
width: calc(100% - 32px);
719+
padding: 8px 0 0 10px;
721720
}
722721

723722
/** Theming */

‎src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1557,22 +1557,22 @@ registerThemingParticipant((theme, collector) => {
15571557
}
15581558

15591559
// Cell Margin
1560-
collector.addRule(`.notebookOverlay .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; }`);
1560+
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > div.cell { margin: 0px ${CELL_MARGIN * 2}px 0px ${CELL_MARGIN}px; }`);
15611561
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > div.cell.code { margin-left: ${CODE_CELL_LEFT_MARGIN}px; }`);
15621562
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row { padding-top: ${EDITOR_TOP_MARGIN}px; }`);
15631563
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .markdown-cell-row { padding-bottom: ${CELL_BOTTOM_MARGIN}px; }`);
15641564
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .markdown-cell-row .cell-bottom-toolbar-container { margin-top: ${CELL_BOTTOM_MARGIN}px; }`);
15651565
collector.addRule(`.notebookOverlay .output { margin: 0px ${CELL_MARGIN}px 0px ${CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER}px; }`);
15661566
collector.addRule(`.notebookOverlay .output { width: calc(100% - ${CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER + CELL_MARGIN}px); }`);
1567-
collector.addRule(`.notebookOverlay .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; }`);
1567+
collector.addRule(`.notebookOverlay .cell-bottom-toolbar-container { width: calc(100% - ${CELL_MARGIN * 2 + CELL_RUN_GUTTER}px); margin: 0px ${CELL_MARGIN * 2}px 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px; }`);
15681568

15691569
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > div.cell.markdown { padding-left: ${CELL_RUN_GUTTER}px; }`);
15701570
collector.addRule(`.notebookOverlay .cell .run-button-container { width: ${CELL_RUN_GUTTER}px; }`);
15711571
collector.addRule(`.notebookOverlay .cell-drag-image .cell-editor-container > div { padding: ${EDITOR_TOP_PADDING}px 16px ${EDITOR_BOTTOM_PADDING}px 16px; }`);
15721572
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-top { height: ${EDITOR_TOP_MARGIN}px; }`);
15731573
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-side { bottom: ${BOTTOM_CELL_TOOLBAR_HEIGHT}px; }`);
15741574
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator { width: ${CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER}px; }`);
1575-
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator.cell-focus-indicator-right { width: ${CELL_MARGIN}px; }`);
1575+
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator.cell-focus-indicator-right { width: ${CELL_MARGIN * 2}px; }`);
15761576
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-bottom { height: ${CELL_BOTTOM_MARGIN}px; }`);
15771577
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-shadow-container-bottom { top: ${CELL_BOTTOM_MARGIN}px; }`);
15781578
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { URI } from 'vs/base/common/uri';
1313
import * as UUID from 'vs/base/common/uuid';
1414
import { IEnvironmentService } from 'vs/platform/environment/common/environment';
1515
import { IOpenerService, matchesScheme } from 'vs/platform/opener/common/opener';
16-
import { CELL_MARGIN, CELL_RUN_GUTTER, CODE_CELL_LEFT_MARGIN } from 'vs/workbench/contrib/notebook/browser/constants';
16+
import { CELL_MARGIN, CELL_RUN_GUTTER, CODE_CELL_LEFT_MARGIN, CELL_OUTPUT_PADDING } from 'vs/workbench/contrib/notebook/browser/constants';
1717
import { INotebookEditor } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
1818
import { CodeCellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel';
1919
import { CellOutputKind, IProcessedOutput } from 'vs/workbench/contrib/notebook/common/notebookCommon';
@@ -312,7 +312,7 @@ export class BackLayerWebView extends Disposable {
312312

313313
if (!isWeb) {
314314
coreDependencies = `<script src="${loader}"></script>`;
315-
const htmlContent = this.generateContent(8, coreDependencies, baseUrl.toString());
315+
const htmlContent = this.generateContent(CELL_OUTPUT_PADDING, coreDependencies, baseUrl.toString());
316316
this.initialize(htmlContent);
317317
resolveFunc!();
318318
} else {
@@ -329,7 +329,7 @@ ${loaderJs}
329329
</script>
330330
`;
331331

332-
const htmlContent = this.generateContent(8, coreDependencies, baseUrl.toString());
332+
const htmlContent = this.generateContent(CELL_OUTPUT_PADDING, coreDependencies, baseUrl.toString());
333333
this.initialize(htmlContent);
334334
resolveFunc!();
335335
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
9292
}
9393

9494
private computeEditorWidth(outerWidth: number): number {
95-
return outerWidth - (CODE_CELL_LEFT_MARGIN + CELL_MARGIN + CELL_RUN_GUTTER);
95+
return outerWidth - (CODE_CELL_LEFT_MARGIN + (CELL_MARGIN * 2) + CELL_RUN_GUTTER);
9696
}
9797

9898
layoutChange(state: CodeCellLayoutChangeEvent) {

0 commit comments

Comments
 (0)