From a1c32a677869ec9792e36dde8e7927f73e8ac29b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Thu, 20 Feb 2020 11:32:24 +0100
Subject: [PATCH] Ensure only one element has scroll

Apparently having multiple elements with scroll confuses the
`react-beautiful-dnd` mechanism to determine the position of the
elements. Adding `overflowY` to the app root fixes it.
---
 x-pack/plugins/infra/public/apps/start_app.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/infra/public/apps/start_app.tsx b/x-pack/plugins/infra/public/apps/start_app.tsx
index 300d97d3c45b17..66e699abd22b41 100644
--- a/x-pack/plugins/infra/public/apps/start_app.tsx
+++ b/x-pack/plugins/infra/public/apps/start_app.tsx
@@ -79,6 +79,7 @@ export async function startApp(
   // expected.
   element.style.height = '100%';
   element.style.display = 'flex';
+  element.style.overflowY = 'hidden'; // Prevent having scroll within a container having scroll. It messes up with drag-n-drop elements
   element.className += ` ${CONTAINER_CLASSNAME}`;
 
   ReactDOM.render(<App />, element);