From b4737e818578944d83aef406430d90d47db6813a Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Mon, 13 Jul 2020 14:59:16 +0200
Subject: [PATCH] fix overflow (#70723)

---
 .../lens/public/visualization_container.scss  |  3 +++
 .../public/visualization_container.test.tsx   |  9 +++++++++
 .../lens/public/visualization_container.tsx   | 19 +++++++++++++++++--
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 x-pack/plugins/lens/public/visualization_container.scss

diff --git a/x-pack/plugins/lens/public/visualization_container.scss b/x-pack/plugins/lens/public/visualization_container.scss
new file mode 100644
index 0000000000000..e5c359112fe4b
--- /dev/null
+++ b/x-pack/plugins/lens/public/visualization_container.scss
@@ -0,0 +1,3 @@
+.lnsVisualizationContainer {
+  overflow: auto;
+}
\ No newline at end of file
diff --git a/x-pack/plugins/lens/public/visualization_container.test.tsx b/x-pack/plugins/lens/public/visualization_container.test.tsx
index b29f0a5d783f9..454399ec90121 100644
--- a/x-pack/plugins/lens/public/visualization_container.test.tsx
+++ b/x-pack/plugins/lens/public/visualization_container.test.tsx
@@ -60,4 +60,13 @@ describe('VisualizationContainer', () => {
 
     expect(reportingEl.prop('style')).toEqual({ color: 'blue' });
   });
+
+  test('combines class names with container class', () => {
+    const component = mount(
+      <VisualizationContainer className="myClass">Hello!</VisualizationContainer>
+    );
+    const reportingEl = component.find('[data-shared-item]').first();
+
+    expect(reportingEl.prop('className')).toEqual('myClass lnsVisualizationContainer');
+  });
 });
diff --git a/x-pack/plugins/lens/public/visualization_container.tsx b/x-pack/plugins/lens/public/visualization_container.tsx
index fb7a1268192a8..3ca8d5de932d7 100644
--- a/x-pack/plugins/lens/public/visualization_container.tsx
+++ b/x-pack/plugins/lens/public/visualization_container.tsx
@@ -5,6 +5,9 @@
  */
 
 import React from 'react';
+import classNames from 'classnames';
+
+import './visualization_container.scss';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   isReady?: boolean;
@@ -15,9 +18,21 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
  * This is a convenience component that wraps rendered Lens visualizations. It adds reporting
  * attributes (data-shared-item, data-render-complete, and data-title).
  */
-export function VisualizationContainer({ isReady = true, reportTitle, children, ...rest }: Props) {
+export function VisualizationContainer({
+  isReady = true,
+  reportTitle,
+  children,
+  className,
+  ...rest
+}: Props) {
   return (
-    <div data-shared-item data-render-complete={isReady} data-title={reportTitle} {...rest}>
+    <div
+      data-shared-item
+      data-render-complete={isReady}
+      className={classNames(className, 'lnsVisualizationContainer')}
+      data-title={reportTitle}
+      {...rest}
+    >
       {children}
     </div>
   );