From 81c6ede3d1f8150afc36eaeaa68481dbbcf62910 Mon Sep 17 00:00:00 2001
From: Jens Ulferts <j.ulferts@finn.de>
Date: Thu, 1 Dec 2016 14:29:18 +0100
Subject: [PATCH] grant timeline maximum width

---
 app/assets/stylesheets/content/_table.sass       | 16 ++++++++++++++++
 .../components/wp-table/wp-table.directive.html  |  7 +++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/content/_table.sass b/app/assets/stylesheets/content/_table.sass
index c2733aff34..ed26fcd1eb 100644
--- a/app/assets/stylesheets/content/_table.sass
+++ b/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
diff --git a/frontend/app/components/wp-table/wp-table.directive.html b/frontend/app/components/wp-table/wp-table.directive.html
index 2afe6f770e..1ef7116a44 100644
--- a/frontend/app/components/wp-table/wp-table.directive.html
+++ b/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>