Make debug log as big as possible

Tweak style to make the modal reasonably wide/tall, and use flexbox
to automatically expand the textarea.

// FREEBIE

background.html

@@ -310,14 +310,16 @@
   </script>
   <script type='text/x-tmpl-mustache' id='debug-log'>
     <div class='content'>
-      <a class='x close'>&times;</a>
-      <h1>{{ title }}</h1>
-      <p> {{ debugLogExplanation }}</p>
-      <form>
-        <textarea rows='5'></textarea>
-        <input class='submit' type='submit' value='{{ submit }}' />
+      <div>
+        <a class='x close'>&times;</a>
+        <h1> {{ title }} </h1>
+        <p> {{ debugLogExplanation }}</p>
+      </div>
+      <textarea rows='5'></textarea>
+      <div class='buttons'>
+        <button class='submit'>{{ submit }}</button>
         <button class='close'>{{ cancel }}</button>
-      </form>
+      </div>
       <div class='result'>
         <a target='_blank'></a>
         <div><button class='close'>{{ close }}</button></div>

js/views/debug_log_view.js

@@ -13,7 +13,7 @@
             this.$('textarea').val(console.get());
         },
         events: {
-            'submit': 'submit',
+            'click .submit': 'submit',
             'click .close': 'close'
         },
         render_attributes: {

stylesheets/_global.scss

@@ -410,19 +410,29 @@ $avatar-size: 44px;
 }
 
 .debug-log {
-  &.modal .content {
-    max-width: 90%;
+  &.modal {
+    padding: 50px;
+
+    .content {
+      margin: 0;
+      max-width: 100%;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      textarea {
+        flex-grow: 1;
+        width: 100%;
+        resize: none;
+      }
+    }
   }
 
   ::-webkit-scrollbar-thumb {
     background: rgba(0,0,0,0.15);
   }
 
-  textarea {
-    width: 100%;
-    resize: vertical;
-  }
-
   button, input[type=submit] {
     border-radius: 4px;
     border: solid 1px #ccc;

stylesheets/manifest.css

@@ -324,13 +324,21 @@ img.emoji {
 @keyframes rotate {
   to {
     transform: rotate(360deg); } }
-.debug-log.modal .content {
-  max-width: 90%; }
+.debug-log.modal {
+  padding: 50px; }
+  .debug-log.modal .content {
+    margin: 0;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column; }
+    .debug-log.modal .content textarea {
+      flex-grow: 1;
+      width: 100%;
+      resize: none; }
 .debug-log ::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.15); }
-.debug-log textarea {
-  width: 100%;
-  resize: vertical; }
 .debug-log button, .debug-log input[type=submit] {
   border-radius: 4px;
   border: solid 1px #ccc;