[Fronted] Fixes for misaligned bubbles

WTD-1247
WTD-884
Changed CSS .l-infobubble-wrapper abs > relative;
Added display: block class for mct-container;
Tweaked bubble evaluation JS for 'goLeft' behavior;
Added constants for bubble max width and left/right margin;

platform/commonUI/general/res/css/theme-espresso.css

@@ -319,6 +319,10 @@ span {
   */ }
 
 /* line 72, ../sass/_global.scss */
+mct-container {
+  display: block; }
+
+/* line 76, ../sass/_global.scss */
 .abs, .btn-menu span.l-click-area {
   position: absolute;
   top: 0;
@@ -328,46 +332,46 @@ span {
   height: auto;
   width: auto; }
 
-/* line 82, ../sass/_global.scss */
+/* line 86, ../sass/_global.scss */
 .code, .codehilite {
   font-family: "Lucida Console", monospace;
   font-size: 0.7em;
   line-height: 150%;
   white-space: pre; }
 
-/* line 89, ../sass/_global.scss */
+/* line 93, ../sass/_global.scss */
 .codehilite {
   background-color: rgba(255, 255, 255, 0.1);
   padding: 1em; }
 
-/* line 95, ../sass/_global.scss */
+/* line 99, ../sass/_global.scss */
 .align-right {
   text-align: right; }
 
-/* line 99, ../sass/_global.scss */
+/* line 103, ../sass/_global.scss */
 .centered {
   text-align: center; }
 
-/* line 103, ../sass/_global.scss */
+/* line 107, ../sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 107, ../sass/_global.scss */
+/* line 111, ../sass/_global.scss */
 .colorKey {
   color: #0099cc; }
 
-/* line 111, ../sass/_global.scss */
+/* line 115, ../sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 115, ../sass/_global.scss */
+/* line 119, ../sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 120, ../sass/_global.scss */
+/* line 124, ../sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -3839,7 +3843,7 @@ input[type="date"] {
   -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
   box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
-  position: absolute;
+  position: relative;
   z-index: 50; }
   /* line 29, ../sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper .l-infobubble {

platform/commonUI/general/res/sass/_constants.scss

@@ -126,3 +126,7 @@ $tickLblH: 15px;
 $tickLblW: 50px;
 $tickH: $ticksH - $tickLblVMargin - $tickLblH;
 $tickW: 1px;
+
+// Bubbles
+$bubbleMinW: 100px;
+$bubbleMaxW: 300px;

platform/commonUI/general/res/sass/_global.scss

@@ -69,6 +69,10 @@ span {
 	*/
 }
 
+mct-container {
+	display: block;
+}
+
 .abs {
 	position: absolute;
 	top: 0;

platform/commonUI/general/res/sass/helpers/_bubbles.scss

@@ -24,12 +24,12 @@
 .l-infobubble-wrapper {
 	$arwSize: 5px;
 	@include box-shadow(rgba(black, 0.4) 0 1px 5px);
-	position: absolute;
+	position: relative;
 	z-index: 50;
 	.l-infobubble {
 		display: inline-block;
-		min-width: 100px;
-		max-width: 300px;
+		min-width: $bubbleMinW;
+		max-width: $bubbleMaxW;
 		padding: 5px 10px;
 		&:before {
 			content:"";

platform/commonUI/inspect/src/InfoConstants.js

@@ -28,5 +28,8 @@ define({
                 "</mct-include>" +
                 "</mct-container>",
     // Pixel offset for bubble, to align arrow position
-    BUBBLE_OFFSET: [ 0, -16 ]
+    BUBBLE_OFFSET: [ 0, -16 ],
+	// Max width and margins allowed for bubbles; defined in /platform/commonUI/general/res/sass/_constants.scss
+	BUBBLE_MARGIN_LR: 10,
+	BUBBLE_MAX_WIDTH: 300
 });

platform/commonUI/inspect/src/services/InfoService.js

@@ -39,7 +39,8 @@ define(
                 var body = $document.find('body'),
                     scope = $rootScope.$new(),
                     winDim = [$window.innerWidth, $window.innerHeight],
-                    goLeft = position[0] > (winDim[0] / 2),
+	                bubbleSpaceLR = InfoConstants.BUBBLE_MARGIN_LR + InfoConstants.BUBBLE_MAX_WIDTH,
+                    goLeft = position[0] > (winDim[0] - bubbleSpaceLR),
                     goUp = position[1] > (winDim[1] / 2),
                     bubble;