fix(perf): no more overflow on table of watchers

panel/app.css

@@ -339,9 +339,6 @@ li .status:empty {
   display: inline-block;
   width: 45%;
 }
-.perf pre {
-  word-break: break-all;
-}
 
 .perf .watcher-text {
   width: 55%;
@@ -363,18 +360,23 @@ li .status:empty {
 }
 
 .perf .watcher-table {
-  width: 100%;
+  width: calc(100% - 30px);
   text-align: center;
+  display: flex;
+  flex-direction: column;
 }
 
-.perf .watcher-table-head {
+.perf .watcher-table-head span {
   text-decoration: underline;
   font-size: 1.2em;
 }
 .perf .watcher-table-row {
   white-space: nowrap;
+  word-break: break-word;
+}
+.perf .watcher-table hr {
+  width: 100%;
 }
-
 /* for the canvas */
 .graph {
   background: black;

panel/perf/perf.html

@@ -24,16 +24,17 @@ <h2>Digest timings</h2>
   <div class="watcher-table">
     <div class="watcher-table-head watcher-table-row">
       <span class="watcher-text">Watcher text</span>
-      <span class="watcher-time">Watcher total time</span>
-      <span class="watcher-count">Number of Watchers</span>
-      <span class="watcher-avg">Average watcher time</span>
+      <span class="watcher-time">Total time</span>
+      <span class="watcher-count"># of Watchers</span>
+      <span class="watcher-avg">Avg. time</span>
     </div>
-    <div ng-repeat="watcher in watchTimings" class="watcher-table-row">
+    <div ng-repeat-start="watcher in watchTimings" class="watcher-table-row">
       <div class="watcher-text"><pre>{{ watcher.text }}</pre></div>
       <div class="watcher-time"><pre>{{ watcher.time | number }} ms</pre></div>
       <div class="watcher-count"><pre>{{ watcher.count }}</pre></div>
       <div class="watcher-avg"><pre>{{ watcher.time / watcher.count | number }} ms</pre></div>
     </div>
+    <hr ng-repeat-end ng-show="::!$last">
   </div>
   <hr>
   <h2>Raw data</h2>