Make issue boards sidebar full height

app/assets/stylesheets/framework/variables.scss

@@ -7,6 +7,7 @@ $gutter_inner_width: 250px;
 $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
 $default-transition-duration: .15s;
+$right-sidebar-transition-duration: .3s;
 
 /*
  * Color schema

app/assets/stylesheets/pages/boards.scss

@@ -85,6 +85,15 @@
 
 .boards-app {
   position: relative;
+
+  @media (min-width: $screen-sm-min) {
+    transition: width $right-sidebar-transition-duration;
+    width: 100%;
+
+    &.is-compact {
+      width: calc(100% - #{$gutter_width});
+    }
+  }
 }
 
 .boards-app-loading {
@@ -108,11 +117,6 @@
     height: calc(100vh - 222px);
     // scss-lint:enable DuplicateProperty
     min-height: 475px;
-    transition: width .2s;
-
-    &.is-compact {
-      width: calc(100% - 290px);
-    }
   }
 }
 
@@ -469,14 +473,6 @@
 
 .page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar,
 .page-with-new-sidebar.page-with-sidebar .issue-boards-sidebar {
-  position: absolute;
-
-  &.right-sidebar {
-    top: 0;
-    bottom: 0;
-    height: 100%;
-  }
-
   .issuable-sidebar-header {
     position: relative;
   }

app/assets/stylesheets/pages/issuable.scss

@@ -223,14 +223,14 @@
   top: $new-navbar-height;
   bottom: 0;
   right: 0;
-  transition: width .3s;
+  transition: width $right-sidebar-transition-duration;
   background: $gray-light;
   z-index: 200;
   overflow: hidden;
 
   .issuable-sidebar {
     width: calc(100% + 100px);
-    height: calc(100% - #{$new-navbar-height});
+    height: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;

app/views/shared/boards/_show.html.haml

@@ -14,11 +14,11 @@
   %script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal
   %script#js-board-promotion{ type: "text/x-template" }= render "shared/promotions/promote_issue_board"
 
-.hidden-xs.hidden-sm
+#board-app.boards-app{ "v-cloak" => true, data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
+  .hidden-xs.hidden-sm
     = render 'shared/issuable/search_bar', type: :boards, board: board
 
-#board-app.boards-app{ "v-cloak" => true, data: board_data }
-  .boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
+  .boards-list
     .boards-app-loading.text-center{ "v-if" => "loading" }
       = icon("spinner spin")
     %board{ "v-cloak" => true,