Merge pull request #1498 from opf/fix/wp-table-scrolling-in-split-view

Fix horizontal table scrolling within split view

app/assets/javascripts/angular/work_packages/column-context-menu.js

@@ -36,7 +36,7 @@ angular.module('openproject.workPackages')
     controller: 'ColumnContextMenuController',
     controllerAs: 'contextMenu',
     templateUrl: '/templates/work_packages/column_context_menu.html',
-    container: '.work-packages--list'
+    container: '.work-packages--list-scroll-area'
   });
 }])
 

app/assets/stylesheets/content/_work_packages.sass

@@ -35,6 +35,10 @@
 .work-packages--list
   @extend %panel
 
+.work-packages--list-scroll-area
+  overflow-x: scroll
+  position: relative
+
 .work-packages--details
   @extend %panel
   padding: 0 1em 1em

app/assets/stylesheets/layout/_split_view.sass

@@ -23,6 +23,7 @@
   width: 100%
   clear: both
   display: table
+  table-layout: fixed
 
 .split-view %panel
   display: table-cell

public/templates/work_packages.list.html

@@ -105,8 +105,9 @@
 <back-url></back-url>
 
 
-<div class="work-packages--split-view autoscroll">
+<div class="work-packages--split-view">
   <div class="work-packages--list">
+    <div class="work-packages--list-scroll-area">
       <work-packages-table ng-if="rows && columns"
                            project-identifier="projectIdentifier"
                            columns="columns"
@@ -126,10 +127,9 @@
       <table-pagination total-entries="totalEntries"
                         update-results="updateResults()">
       </table-pagination>
-
+    </div>
     <modal-loading>
     </modal-loading>
-
   </div>
   <div class="work-packages--details" ui-view
     feature-flag="detailsView"></div>