From d225b4535ac4ad36255edb2d7a1e0bc7c917d3ec Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Wed, 10 Oct 2018 14:22:26 -0400
Subject: [PATCH] prevent vertical modebar from overflowing

---
 build/plotcss.js      | 2 +-
 src/css/_modebar.scss | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/build/plotcss.js b/build/plotcss.js
index 669cf65d480..f844d546558 100644
--- a/build/plotcss.js
+++ b/build/plotcss.js
@@ -37,7 +37,7 @@ var rules = {
     "X .modebar-group": "float:left;display:inline-block;box-sizing:border-box;margin-left:8px;position:relative;vertical-align:middle;white-space:nowrap;",
     "X .modebar-btn": "position:relative;font-size:16px;padding:3px 4px;height:22px;cursor:pointer;line-height:normal;box-sizing:border-box;",
     "X .modebar-btn svg": "position:relative;top:2px;",
-    "X .modebar.vertical": "top:-1px;",
+    "X .modebar.vertical": "top:-1px;display:flex;flex-direction:column;flex-wrap:wrap;height:100%;align-content:flex-end;",
     "X .modebar.vertical .modebar-group": "display:block;float:none;margin-left:0px;margin-bottom:8px;",
     "X .modebar.vertical .modebar-group .modebar-btn": "display:block;text-align:center;",
     "X [data-title]:before,X [data-title]:after": "position:absolute;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:none;opacity:0;z-index:1001;pointer-events:none;top:110%;right:50%;",
diff --git a/src/css/_modebar.scss b/src/css/_modebar.scss
index a7e128bb573..14c8107587d 100644
--- a/src/css/_modebar.scss
+++ b/src/css/_modebar.scss
@@ -46,6 +46,11 @@
 
 .modebar.vertical {
     top: -1px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    height: 100%;
+    align-content: flex-end;
     .modebar-group {
         display: block;
         float: none;