Fix positioning & styling of arrows

services/web/public/coffee/ide/AutoCompileOnboardingController.coffee

@@ -10,15 +10,14 @@ define [
 			$scope.placement = 'left'
 			popover.offset({
 				top: top,
-				left: left - popover.width() - 11 # Width of arrow
+				left: left - popover.width()
 			})
 		else
 			$scope.placement = 'right'
 			angular.element('.onboarding__autocompile').offset({
 				top: top,
-				left: left + recompileBtn.width() + 11 # Width of arrow
+				left: left + recompileBtn.width()
 			})
 
-
 		$scope.dismiss = () ->
 			$scope.onboarding.autoCompile = 'dismissed'

services/web/public/stylesheets/app/editor/feature-onboarding.less

@@ -106,10 +106,21 @@ a.feat-onboard-dismiss {
 
 	.arrow {
 		top: 17px !important;
+	}
+
+	&.right > .arrow {
 		left: -10px !important;
 
 		&:after {
 			border-right-color: #f7f7f7 !important;
 		}
 	}
+
+	&.left > .arrow {
+		right: -10px !important;
+
+		&:after {
+			border-left-color: #f7f7f7 !important;
+		}
+	}
 }