Lay out work package view using CSS flexible boxes

This resolves various issues with scrolling, creating 2-3 main
scrollable areas: the main menu, work packages list and, when open,
the details pane.

User Story # 14811

Signed-off-by: Alex Coles <alex@alexbcoles.com>

app/assets/stylesheets/content/_work_packages.sass

@@ -29,21 +29,48 @@
 @import content/forms
 @import layout/split_view
 
+// HACK: workaround to ensure correct height applied to child elements
+#content > div[ui-view],
+#work-packages-index
+  height: 100%
+
+.work-packages--page-container
+  +display(flex)
+  +flex-direction(column)
+  height: 100%
+
+  > .toolbar-container
+    // not flex-item
+
+  > .work-packages--filters-optional-container
+    // not flex-item
+    height: auto
+
+  > .work-packages--split-view
+    +flex-shrink(2)
+    +flex-basis(100%)
+
 .work-packages--split-view
-  @extend .split-view
+  +display(flex)
+  width: 100%
 
 .work-packages--list
-  @extend %panel
-
-.work-packages--list-scroll-area
+  +flex-basis(100%)
   overflow: auto
-  position: relative
-  height: 1000px
 
 .work-packages--details
-  @extend %panel
   padding: 0 1em 1em
   border-left: 4px solid #eee
+  overflow: auto
+
+  @media only screen and (max-width: 1280px)
+    display: none
+  // li[feature-flag=detailsView]
+  //   display: none
+  @media only screen and (min-width: 1281px)
+    width: 480px
+  @media only screen and (min-width: 1440px)
+    width: 580px
 
 div
   .report-category-actions

app/assets/stylesheets/layout/_base.sass

@@ -88,8 +88,13 @@ h4, .wiki h3
     overflow: hidden
 
   #content
-    position: absolute
-    height:   100%
+    position:   absolute
+    box-sizing: border-box
+    width:      calc(100% - #{$main_menu_width})
+    height:     calc(100% - 40px)
+
+    &.hidden-navigation
+      width:    calc(100% - #{$main_menu_folded_width})
 
 #content
   @include default-transition

app/assets/stylesheets/layout/_split_view.sass

@@ -299,15 +299,3 @@ i
   textarea
     width: 100%
     resize: none
-
-@media only screen and (max-width: 1280px)
-  .split-view .work-packages--details, .work-packages--split-view .work-packages--details
-    display: none
-  li[feature-flag=detailsView]
-    display: none
-@media only screen and (min-width: 1281px)
-  .split-view .work-packages--details, .work-packages--split-view .work-packages--details
-    width: 480px
-@media only screen and (min-width: 1440px)
-  .split-view .work-packages--details, .work-packages--split-view .work-packages--details
-    width: 580px

public/templates/work_packages.html

@@ -1,5 +1,5 @@
 <div id="work-packages-index">
 
-  <div ui-view></div>
+  <div ui-view class="work-packages--page-container"></div>
 
 </div>

public/templates/work_packages.list.html

@@ -86,7 +86,7 @@
   </ul>
 </div>
 
-<div ng-show="showFiltersOptions">
+<div class="work-packages--filters-optional-container" ng-show="showFiltersOptions">
   <div query-form id="query_form_content" class="hide-when-print">
     <query-filters></query-filters>
   </div>