grant timeline maximum width

app/assets/stylesheets/content/_table.sass

@@ -164,6 +164,22 @@ table.generic-table
         min-width: 50px
         width: 50px
 
+      // In the interactive table the behaviour is like this:
+      // * if there is more space available than is required to render
+      //   all columns, the container width is set to 100%.
+      //   Then, td.-max will take up all space available and it will cause all other
+      //   elements to shrink to their minimum value. td-max will grow even beyond
+      //   what is specified as max-width.
+      // * if the contents requires more space than the container width permits,
+      //   then the container width is set to the width calculated by summing up
+      //   all the column widths. For td.-max, the max-width will be taken to be
+      //   the column width because of the combination of max-width and width: 100%.
+      // as a result, td.-max will aways have at least a width of max-width, but it can
+      // become even wider.
+      &.-max
+        width: 100%
+        max-width: 600px
+
       &.info
         a
           text-decoration: none

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

@@ -40,9 +40,9 @@
                           query="query"
                           ng-class="column.name == 'id' && '-short' ">
           </th>
-          
+
           <th ng-show="wpTimelineContainer.visible">
-            <div class="wp-timeline-header-container generic-table--sort-header-outer" style="width: 500px;">
+            <div class="wp-timeline-header-container generic-table--sort-header-outer">
               <span class="wp-timeline--scroll-btn -left icon-arrow-left3"></span>
               <span class="wp-timeline--scroll-btn -right icon-arrow-right7"></span>
               <div class="wp-timeline--scroll-wrapper">
@@ -178,10 +178,9 @@
               ng-class="::{ '-short': column.name == 'id' }">
           </td>
 
-          <td class="wp-timeline-cell"
+          <td class="wp-timeline-cell -max"
               style="
                 display: none;
-                width: 500px;
                 position: relative;
                 ">
           </td>