QualityCell uses badges

UI/Cells/QualityCell.js

@@ -6,7 +6,7 @@ define(
         return TemplatedCell.extend({
 
             className: 'quality-cell',
-            template : 'Cells/QualityTemplate'
+            template : 'Cells/QualityCellTemplate'
 
         });
     });

UI/Cells/QualityCellTemplate.html

@@ -0,0 +1,5 @@
+{{#if proper}}
+    <span class="badge badge-info" title="PROPER">{{quality.name}}</span>
+{{else}}
+    <span class="badge badge-inverse">{{quality.name}}</span>
+{{/if}}

UI/Cells/QualityTemplate.html

@@ -1,5 +0,0 @@
-{{quality.name}}
-
-{{#if proper}}
-    [PROPER]
-{{/if}}

UI/Cells/cells.less

@@ -17,10 +17,6 @@
   cursor: default;
 }
 
-.quality-cell {
-  width : 130px;
-}
-
 .history-event-type-cell {
   width : 10px;
 }
@@ -44,8 +40,9 @@
   }
 }
 
-td.episode-status-cell {
+td.episode-status-cell, td.quality-cell {
   text-align: center;
+  width: 80px;
 
   .badge {
     font-size: 9px;