Add scroll-wrapper with pointer events hidden to allow actions on header

app/assets/stylesheets/content/_table.sass

@@ -32,12 +32,6 @@
   to
     opacity: 0
 
-$generic-table--font-size: 0.875rem
-$generic-table--header-font-size: 0.875rem
-
-$generic-table--header-height: 45px
-$generic-table--footer-height: 34px
-
 $input-elements: input, 'input.form--text-field', select, 'select.form--select', '.form--field-affix', 'a.button'
 
 .generic-table--container

app/assets/stylesheets/content/work_packages/timelines/_timelines.sass

@@ -4,8 +4,20 @@
   border: 1px solid #EAEAEA
 
 
-table.generic-table
-  .generic-table--sort-header-outer.wp-timeline--header
-    padding: 0
-    margin-left: -2px
-    border-left: 2px solid $primary-color-dark
+#wp-timeline-header-container
+  padding: 0
+  margin-left: -2px
+  height: $generic-table--header-height
+
+.wp-timeline--scroll-wrapper
+  border-left: 2px solid $primary-color-dark
+
+  // The scroll wrapper is resized to span the entire table.
+  // Without this, scroll is caught by the header.
+  pointer-events: none
+  position: relative
+
+  // Overflow must be hidden since the width of the column is fixed.
+  // Since height is explicitly set, this is effectively
+  // overflow-x: hidden / overflow-y: visible
+  overflow: hidden

app/assets/stylesheets/open_project_global/_variables.sass

@@ -219,3 +219,9 @@ $table-row-border-color:                        #E7E7E7 !default
 $table-row-highlighting-color:                  #e4f7fb !default
 $table-header-border-color:                     #D7D7D7 !default
 $table-header-shadow-color:                     #DDDDDD !default
+
+$generic-table--font-size: 0.875rem
+$generic-table--header-font-size: 0.875rem
+
+$generic-table--header-height: 45px
+$generic-table--footer-height: 34px

frontend/app/components/wp-table/wp-table.directive.html

@@ -41,10 +41,12 @@
                           ng-class="column.name == 'id' && '-short' ">
           </th>
           
-          <th style="pointer-events: none" ng-show="wpTimelineContainer.visible">
-            <div class="generic-table--sort-header-outer" style="width: 500px;">
-              <span class="generic-table--sort-header wp-timeline-header" style="position: relative; overflow: hidden">
-              </span>
+          <th ng-show="wpTimelineContainer.visible">
+            <div id="wp-timeline-header-container" class="generic-table--sort-header-outer" style="width: 500px;">
+              <div class="wp-timeline--scroll-wrapper">
+                <span class="generic-table--sort-header wp-timeline-header">
+                </span>
+              </div>
             </div>
           </th>
         </tr>