Refinements to power-priority widget. Works from original iPhone size on up pretty smoothly. As screens get smaller, non-essential columns get smaller. Click targets also get a bit larger.

app/less/outfit.less

@@ -159,3 +159,68 @@ table.total {
     });
   }
 }
+
+#componentPriority {
+  .tablet({
+    text.primary, text.warning, text.primary-bg {
+      font-size: 0.8em;
+    }
+
+    table tbody tr td {
+      &:nth-child(4) {
+        span {
+          display: inline;
+          padding:0;
+          margin:0;
+          font-size: 2em;
+        }
+      }
+    }
+  });
+
+  .medPhone({
+    .axis {
+      font-size: 0.8em;
+
+      g.tick:nth-child(2n) text {
+        display: none;
+      }
+    } 
+
+    table thead tr.main th {
+      font-size: 0.8em;
+
+      &:nth-child(2) {
+        display: none;
+      }
+    }
+
+    table tbody tr td {
+      &:nth-child(1) {
+        padding: 0;
+        margin: 0;
+        max-width: 0;
+        width: 0;
+        color: transparent;
+      }
+      &:nth-child(3) {
+        display: none;
+      }
+      &:nth-child(2) {
+        font-size: 0.7em;
+      }
+    }
+  });
+
+  .smallPhone({
+    table tbody tr td {
+      &:nth-child(6) {
+        padding: 0;
+        margin: 0;
+        max-width: 0;
+        width: 0;
+        color: transparent;
+      }
+    }
+  });
+}

app/views/page-outfit.html

@@ -193,7 +193,7 @@
     </div>
   </div>
 
-  <div class="group dbl">
+  <div class="group dbl" id="componentPriority">
     <table style="width:100%">
       <thead>
         <tr class="main">