Adds a bigger width to the performance bar modal box and breaks the content

app/assets/javascripts/performance_bar/components/detailed_metric.vue

@@ -64,6 +64,7 @@ export default {
           <td
             v-for="key in keys"
             :key="key"
+            class="break-all"
           >
             {{ item[key] }}
           </td>

app/assets/stylesheets/framework/common.scss

@@ -446,6 +446,11 @@ img.emoji {
   opacity: .5;
 }
 
+.break-all {
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
 /** COMMON CLASSES **/
 .prepend-top-0 { margin-top: 0; }
 .prepend-top-5 { margin-top: 5px; }

app/assets/stylesheets/performance_bar.scss

@@ -108,9 +108,15 @@
     }
   }
 
-  .performance-bar-modal .modal-footer {
+  .performance-bar-modal {
+    .modal-footer {
       display: none;
     }
+
+    .modal-dialog {
+      width: 860px;
+    }
+  }
 }
 
 #modal-peek-pg-queries-content {