Improve the card details pane overlay interactions

client/components/boards/boardBody.js

@@ -119,6 +119,16 @@ BlazeComponent.extendComponent({
     var sidebar = this.componentChildren('sidebar')[0];
     if (sidebar && sidebar.isOpen())
       return 'next-sidebar';
+  },
+
+  events: function() {
+    return [{
+      // XXX The board-overlay div should probably be moved to the parent
+      // component.
+      'mouseenter .board-overlay': function() {
+        this.showOverlay.set(false);
+      }
+    }];
   }
 }).register('boardComponent');
 

client/components/boards/boardBody.styl

@@ -19,6 +19,7 @@ position()
 
     .board-overlay
       position: cover
+      top: -100px
       background: black
       opacity: 0.33
       animation: fadeIn 0.2s

client/components/cards/details.js

@@ -59,12 +59,6 @@ BlazeComponent.extendComponent({
       'click .js-add-labels': Popup.open('cardLabels'),
       'mouseenter .js-card-details': function() {
         this.componentParent().showOverlay.set(true);
-      },
-      'mouseleave .js-card-details': function(evt) {
-        // We don't want to hide the overlay if the mouse is entering a pop-over
-        var $pointedElement = $(evt.toElement || evt.relatedTarget);
-        if ($pointedElement.closest('.pop-over').length === 0)
-          this.componentParent().showOverlay.set(false);
       }
     }];
   }

client/components/lists/body.js

@@ -78,7 +78,7 @@ BlazeComponent.extendComponent({
     // Pressing Enter should submit the card
     if (evt.keyCode === 13) {
       evt.preventDefault();
-      var $form = $(evt.currentTarget).parents('form:first');
+      var $form = $(evt.currentTarget).closest('form');
       // XXX For some reason $form.submit() does not work (it's probably a bug
       // of blaze-component related to the fact that the submit event is non-
       // bubbling). This is why we click on the submit button instead -- which
@@ -93,7 +93,7 @@ BlazeComponent.extendComponent({
       var list = $('#js-list-' + this.data().listId);
       var listSelector = '.js-list:not(.js-list-composer)';
       var nextList = list[isReverse ? 'prev' : 'next'](listSelector).get(0);
-      // If there isn't no next list, loop back to the beginning.
+      // If there is no next list, loop back to the beginning.
       if (! nextList) {
         nextList = $(listSelector + (isReverse ? ':last' : ':first')).get(0);
       }