From 84d21b1e769be30b5d29dd1e1fb168a8eaa6a52e Mon Sep 17 00:00:00 2001
From: Laura Jiang <39676345+laurajjiang@users.noreply.github.com>
Date: Thu, 20 Aug 2020 17:11:53 -0700
Subject: [PATCH] adjust css to pin toolbar (#11894)

---
 .../contrib/notebook/browser/cellViews/cellToolbar.css     | 1 +
 .../notebook/browser/cellViews/textCell.component.html     | 2 +-
 .../contrib/notebook/browser/cellViews/textCell.css        | 1 +
 .../workbench/contrib/notebook/browser/notebookStyles.ts   | 7 ++++++-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css b/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css
index 9ff45f1b51..a055d84f4e 100644
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css
@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 cell-toolbar-component {
+	z-index: 2;
 	border-width: 1px;
 	border-style: solid;
 	position: absolute;
diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.html b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.html
index b46dc4c0c9..8a7cf3caf9 100644
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.html
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.html
@@ -4,7 +4,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 -->
-<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column" (mouseover)="hover=true" (mouseleave)="hover=false">
+<div style="width: 100%; height: 100%; display: flex; flex-flow: column" (mouseover)="hover=true" (mouseleave)="hover=false">
 	<markdown-toolbar-component #markdownToolbar *ngIf="previewFeaturesEnabled === true && isEditMode" [cellModel]="cellModel"></markdown-toolbar-component>
 	<div class="notebook-text" [class.edit-mode]="isEditMode" [class.show-preview]="showPreview">
 		<code-component *ngIf="isEditMode" [cellModel]="cellModel" (onContentChanged)="handleContentChanged()" [model]="model" [activeCellId]="activeCellId">
diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css
index f3e05700cd..d933771778 100644
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css
@@ -19,6 +19,7 @@ text-cell-component .notebook-preview {
 	user-select: none;
 	padding-left: 8px;
 	padding-right: 8px;
+	overflow: hidden;
 }
 text-cell-component .edit-mode code-component {
 	display: block;
diff --git a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
index 786386258d..664ffff78b 100644
--- a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
+++ b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
@@ -183,7 +183,12 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 		// Markdown editor toolbar
 		const toolbarBackgroundColor = theme.getColor(toolbarBackground);
 		if (toolbarBackgroundColor) {
-			collector.addRule(`markdown-toolbar-component { background: ${toolbarBackgroundColor};}`);
+			collector.addRule(`markdown-toolbar-component {
+				background: ${toolbarBackgroundColor};
+				position: sticky;
+				top: -16px;
+				z-index: 1;
+			}`);
 		}
 		const toolbarIconColor = theme.getColor(toolbarIcon);
 		if (toolbarIconColor) {