Always display context column arrow on one line

A more robust solution that uses CSS tables rather than floats (as in
previous commit 9ce2fc9e).

Bug # 8277

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

app/assets/stylesheets/content/_work_packages_table.sass

@@ -79,6 +79,19 @@ table.workpackages-table
   p:hover
     background: #fff598
 
+  .sort-header
+    width:   100%
+    clear:   both
+    display: table
+
+    & > a,
+    & > span
+      display: table-cell
+
+    & > span
+      width: 1em
+      text-align: right
+
 div.active-column
   position: absolute
   top: 10px

public/templates/work_packages/work_packages_table.html

@@ -29,9 +29,7 @@
               target="columnContextMenu"
               process-event="adaptVerticalPosition"
               trigger-on-event="click">
-          <span style="float: right">
-            <icon-wrapper icon-name="pulldown-arrow1" title="{{I18n.t('js.label_open_menu')}}"></icon-wrapper>
-          </span>
+          <icon-wrapper icon-name="pulldown-arrow1" title="{{I18n.t('js.label_open_menu')}}"></icon-wrapper>
         </span>
       </th>
     </tr>