From 2d5a61f5b6d7facc5c1ce422e567376c5a850d7c Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Thu, 28 Sep 2017 11:32:38 +0100
Subject: [PATCH] Determine placement of popover based on width of pdf panel

---
 .../web/app/views/project/editor/editor.pug   | 21 ++++++++++---------
 .../AutoCompileOnboardingController.coffee    | 19 +++++++++++++----
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug
index 26602de1b1..ccda61229d 100644
--- a/services/web/app/views/project/editor/editor.pug
+++ b/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
diff --git a/services/web/public/coffee/ide/AutoCompileOnboardingController.coffee b/services/web/public/coffee/ide/AutoCompileOnboardingController.coffee
index 184ac05e51..3131661315 100644
--- a/services/web/public/coffee/ide/AutoCompileOnboardingController.coffee
+++ b/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'
\ No newline at end of file