Improve article header consistency

app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -119,6 +119,9 @@ table {
     td:first-child {
       text-align: left;
     }
+    small {
+      color: inherit; // keep it readable instead of gray
+    }
   }
   th.numeric, td.numeric {
     text-align: right;

app/views/shared/articles_by/_article_single.html.haml

@@ -1,8 +1,10 @@
 %tbody{id: "oa_#{order_article.id}"}
   - if not defined?(heading) or heading
     %tr.list-heading
-      %th.name{:colspan => "4"}>
-        = order_article.article.name + ' '
+      %th{:colspan => "4"}>
+        %h4.name.pull-left
+          = order_article.article.name
+          %small
             = "(#{order_article.article.unit}, #{number_to_currency order_article.price.fc_price}"
             - pkg_info = pkg_helper(order_article.price)
             = ", #{pkg_info}".html_safe unless pkg_info.blank?

app/views/shared/articles_by/_articles.html.haml

@@ -1,4 +1,4 @@
-%table.table.table-hover.list#articles_by_articles
+%table.table.table-condensed.table-hover.list#articles_by_articles
   %thead.list-heading
     %tr
       %th{:style => 'width:70%'}= Ordergroup.model_name.human

app/views/shared/articles_by/_groups.html.haml

@@ -1,4 +1,4 @@
-%table.table.table-hover.list#articles_by_groups
+%table.table.table-condensed.table-hover.list#articles_by_groups
   %thead.list-heading
     %tr
       %th{:style => "width:40%"}= heading_helper Article, :name