From 31817c5494de7ecd54cd33fa8b2acb17136a0ed3 Mon Sep 17 00:00:00 2001
From: Chris LaFreniere <40371649+chlafreniere@users.noreply.github.com>
Date: Wed, 28 Oct 2020 15:40:46 -0700
Subject: [PATCH] Fix plotly responsiveness (#13119)

---
 .../notebook/browser/outputs/plotlyOutput.component.ts   | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/sql/workbench/contrib/notebook/browser/outputs/plotlyOutput.component.ts b/src/sql/workbench/contrib/notebook/browser/outputs/plotlyOutput.component.ts
index 4263b28cb6..526a324def 100644
--- a/src/sql/workbench/contrib/notebook/browser/outputs/plotlyOutput.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/outputs/plotlyOutput.component.ts
@@ -82,6 +82,7 @@ export class PlotlyOutputComponent extends AngularDisposable implements IMimeCom
 			PlotlyOutputComponent.Plotly = import('plotly.js-dist-min');
 		}
 		this._plotDiv = this.output.nativeElement;
+		this._plotDiv.style.maxWidth = '700px';
 		this.renderPlotly();
 		this._initialized = true;
 	}
@@ -103,13 +104,9 @@ export class PlotlyOutputComponent extends AngularDisposable implements IMimeCom
 		this.errorText = undefined;
 		const figure = this.getFigure(true);
 		if (figure) {
-			figure.layout = figure.layout || {};
-			if (!figure.layout.width && !figure.layout.autosize) {
-				// Workaround: to avoid filling up the entire cell, use plotly's default
-				figure.layout.width = Math.min(700, this._plotDiv.clientWidth);
-			}
+			let config = { responsive: true };
 			PlotlyOutputComponent.Plotly.then(plotly => {
-				return plotly.newPlot(this._plotDiv, figure.data, figure.layout);
+				return plotly.newPlot(this._plotDiv, figure.data, figure.layout, config);
 			}).catch(e => this.displayError(e));
 		}
 		this._rendered = true;