Merge pull request #2210 from plotly/note-wrap

word breaking in notifier

Author: alexcjohnson

build/plotcss.js

@@ -50,7 +50,7 @@ var rules = {
     "X .select-outline-2": "stroke:black;stroke-dasharray:2px 2px;",
     Y: "font-family:'Open Sans';position:fixed;top:50px;right:20px;z-index:10000;font-size:10pt;max-width:180px;",
     "Y p": "margin:0;",
-    "Y .notifier-note": "min-width:180px;max-width:250px;border:1px solid #fff;z-index:3000;margin:0;background-color:#8c97af;background-color:rgba(140,151,175,0.9);color:#fff;padding:10px;",
+    "Y .notifier-note": "min-width:180px;max-width:250px;border:1px solid #fff;z-index:3000;margin:0;background-color:#8c97af;background-color:rgba(140,151,175,0.9);color:#fff;padding:10px;overflow-wrap:break-word;word-wrap:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;",
     "Y .notifier-close": "color:#fff;opacity:0.8;float:right;padding:0 5px;background:none;border:none;font-size:20px;font-weight:bold;line-height:20px;",
     "Y .notifier-close:hover": "color:#444;text-decoration:none;cursor:pointer;"
 };

src/css/_notifier.scss

@@ -22,6 +22,13 @@
         background-color: rgba(140, 151, 175, 0.9);
         color: $color-bg-light;
         padding: 10px;
+
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+
+        -ms-hyphens: auto;
+        -webkit-hyphens: auto;
+        hyphens: auto;
     }
 
     .notifier-close {