From 27e6454aa0683b96bd4f86c504a33e070eb18532 Mon Sep 17 00:00:00 2001
From: Peter Cottle <pcottle@fb.com>
Date: Sat, 3 Sep 2022 11:19:32 -0700
Subject: [PATCH] Resolves #987 -- start goal on the right

---
 src/js/level/index.js | 4 +++-
 src/js/views/index.js | 2 +-
 src/style/main.css    | 6 +++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/js/level/index.js b/src/js/level/index.js
index 4dff1703..d4ab9bd6 100644
--- a/src/js/level/index.js
+++ b/src/js/level/index.js
@@ -223,7 +223,9 @@ var Level = Sandbox.extend({
     // repo visualization a bit to make room. This way, you could have the goal window hang out on
     // the right side of the screen and still see the repo visualization.
     this.goalVis.customEvents.on('drag', function(event, ui) {
-      if (ui.position.left > 0.5 * $(window).width()) {
+      // our left is a negative value now that we start goal windows on the
+      // right, so we have to take absolute value
+      if (Math.abs(ui.position.left) < 0.4 * $(window).width()) {
         if (!$('#goalPlaceholder').is(':visible')) {
           $('#goalPlaceholder').show();
           this.mainVis.myResize();
diff --git a/src/js/views/index.js b/src/js/views/index.js
index 7083f2b3..eef086fb 100644
--- a/src/js/views/index.js
+++ b/src/js/views/index.js
@@ -672,7 +672,7 @@ var CanvasTerminalHolder = BaseView.extend({
 
     // Set the new position/size
     this.$terminal.animate({
-      left: left + 'px',
+      right: right + 'px',
       top: top + 'px',
       height: height + 'px'
     }, this.getAnimationTime(), function () {
diff --git a/src/style/main.css b/src/style/main.css
index 1f2d72a6..b447ba7d 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -257,7 +257,7 @@ div.canvasTerminalHolder {
   height: 0;
   position: fixed;
   top: 0;
-  left: 0;
+  right: 10px;
   z-index: 3;
 }
 
@@ -335,8 +335,8 @@ div.inside  pre {
 }
 
 div.canvasTerminalHolder > div.terminal-window-holder {
-  max-width: 500px;
-  min-width: 500px;
+  max-width: 400px;
+  min-width: 400px;
   overflow: visible !important;
 }