diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index 8c23792f120..03f1626841a 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -1087,6 +1087,17 @@ a, img {
         }
     }
 
+    &.offscreen2 {
+        -webkit-transform: translate(0, -88px);
+        transform: translate(0, -88px);
+        transition: -webkit-transform 266ms cubic-bezier(0, 0.56, 0, 1);
+        transition: transform 266ms cubic-bezier(0, 0.56, 0, 1);
+
+        body:not(.has-appshell-menus) & {
+            top: 81px;
+        }
+    }
+
     input {
         font-family: @sansFontFamily;
         outline: none;
diff --git a/src/widgets/ModalBar.js b/src/widgets/ModalBar.js
index 7d131e1f088..d9ccaa4053a 100644
--- a/src/widgets/ModalBar.js
+++ b/src/widgets/ModalBar.js
@@ -183,7 +183,8 @@ define(function (require, exports, module) {
      */
     ModalBar.prototype.close = function (restoreScrollPos, animate) {
         var result = new $.Deferred(),
-            self = this;
+            self = this,
+            animateClass;
 
         if (restoreScrollPos === undefined) {
             restoreScrollPos = true;
@@ -210,7 +211,9 @@ define(function (require, exports, module) {
         }
         
         if (animate) {
-            AnimationUtils.animateUsingClass(this._$root.get(0), "offscreen")
+            // Use "offscreen2" class if ModalBar is 2 lines tall, otherwise use "offscreen"
+            animateClass = (this.height() > 50) ? "offscreen2" : "offscreen";
+            AnimationUtils.animateUsingClass(this._$root.get(0), animateClass)
                 .done(doRemove);
         } else {
             doRemove();