[ui] Move debug button to corner

Author: g3force

ui/src/components/Debug.vue

@@ -1,11 +1,11 @@
 <template>
-    <div>
-        <b-btn v-b-toggle.collapse1 variant="primary">Debug Info</b-btn>
+    <div class="debug">
         <b-collapse id="collapse1" class="mt-2">
             <b-card>
                 <pre class="card-text" style="text-align: left">{{ latestMessage }}</pre>
             </b-card>
         </b-collapse>
+        <b-btn v-b-toggle.collapse1 variant="primary">Debug Info</b-btn>
     </div>
 </template>
 
@@ -21,5 +21,17 @@
 </script>
 
 <style scoped>
+    .debug {
+        position: absolute;
+        bottom: 0;
+    }
 
+    #collapse1 {
+        overflow-y: scroll;
+        max-height: 500px;
+    }
+
+    button {
+        margin: 0.1em;
+    }
 </style>