Determine placement of popover based on width of pdf panel

services/web/app/views/project/editor/editor.pug

@@ -95,16 +95,17 @@ div.full-size(
 )
 	include ./pdf
 
-.popover.right.onboarding__autocompile(
+div(
 	ng-controller="AutoCompileOnboardingController"
 	ng-if="onboarding.autoCompile == 'show'"
 )
-	.arrow
-	.popover-inner
-		h3.popover-title Auto Compile
-		.popover-content
-			p Try out the new auto compile setting!
-			img(src="/img/onboarding/autocompile/setting-dropdown.png" width="100%")
-			p When enabled, your project will be compiled after you finish your sentence.
-			button.btn.btn-default.btn-block(ng-click="dismiss()")
-				| Got it
+	.onboarding__autocompile.popover(ng-class="placement")
+		.arrow
+		.popover-inner
+			h3.popover-title Auto Compile
+			.popover-content
+				p Try out the new auto compile setting!
+				img(src="/img/onboarding/autocompile/setting-dropdown.png" width="100%")
+				p When enabled, your project will be compiled after you finish your sentence.
+				button.btn.btn-default.btn-block(ng-click="dismiss()")
+					| Got it

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

@@ -3,11 +3,22 @@ define [
 ], (App) ->
 	App.controller "AutoCompileOnboardingController", ($scope) ->
 		recompileBtn = angular.element('#recompile')
+		popover = angular.element('.onboarding__autocompile')
 		{ top, left } = recompileBtn.offset()
-		angular.element('.onboarding__autocompile').offset({
-			top: top,
-			left: left + recompileBtn.width() + 11 # Width of arrow
-		})
+
+		if $scope.ui.pdfWidth < 475
+			$scope.placement = 'left'
+			popover.offset({
+				top: top,
+				left: left - popover.width() - 11 # Width of arrow
+			})
+		else
+			$scope.placement = 'right'
+			angular.element('.onboarding__autocompile').offset({
+				top: top,
+				left: left + recompileBtn.width() + 11 # Width of arrow
+			})
+
 
 		$scope.dismiss = () ->
 			$scope.onboarding.autoCompile = 'dismissed'