Restyle debug log

Fixup for new layout and add a close button.

// FREEBIE

background.html

@@ -280,6 +280,7 @@
     <button class='close'>&times;</button>
   </script>
   <script type='text/x-tmpl-mustache' id='debug-log'>
+    <a class='x close'>&times;</a>
     <h1> Submit Debug Log </h1>
     <form>
       <textarea rows="5"></textarea>

stylesheets/_global.scss

@@ -417,14 +417,32 @@ $avatar-size: 44px;
 .debug-log {
   position: absolute;
   width: 100%;
-  height: calc(100% - 1 * #{$header-height});
-  top: $header-height;
+  height: 100%;
+  top: 0;
   left: 0;
   padding: 1em;
   background: $grey_l;
   z-index: 1;
   overflow-y: auto;
 
+  a.x {
+    display: inline-block;
+    float: right;
+    cursor: pointer;
+
+    font-family: sans-serif;
+    color: white;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    padding: 0px;
+
+    background: #666;
+    color: #fff;
+    text-align: center;
+    font-size: 19px;
+  }
+
   textarea {
     width: 100%;
     resize: vertical;

stylesheets/manifest.css

@@ -362,13 +362,27 @@ img.emoji {
 .debug-log {
   position: absolute;
   width: 100%;
-  height: calc(100% - 1 * 36px);
-  top: 36px;
+  height: 100%;
+  top: 0;
   left: 0;
   padding: 1em;
   background: #f3f3f3;
   z-index: 1;
   overflow-y: auto; }
+  .debug-log a.x {
+    display: inline-block;
+    float: right;
+    cursor: pointer;
+    font-family: sans-serif;
+    color: white;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    padding: 0px;
+    background: #666;
+    color: #fff;
+    text-align: center;
+    font-size: 19px; }
   .debug-log textarea {
     width: 100%;
     resize: vertical; }