add perfect scrollbar to logging, fix #16

assets/scss/globals.scss

@@ -1,5 +1,6 @@
 #__nuxt, #__layout, #__layout > div, #__layout > div > div {
-    height: 100%
+    height: 100%;
+    width: 100%;
 }
 
 @font-face{

layouts/default.vue

@@ -44,6 +44,7 @@ html, body {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     box-sizing: border-box;
+    width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;

pages/logging.vue

@@ -6,12 +6,12 @@
                 <b-datepicker v-model="listDate" size="sm" class="date-div" offset="-35px" />
             </b-col>
         </b-row>
-        <b-card no-body>
+        <b-card no-body class="card-container">
             <b-tabs pills card vertical>
                 <b-tab title="Playout" active @click="getLog('ffplayout')">
                     <b-container class="log-container">
                         <!-- eslint-disable-next-line -->
-                        <pre v-if="currentLog" :inner-html.prop="currentLog | formatStr" class="log-content" />
+                        <perfect-scrollbar :options="scrollOP" class="scroll-container log-content" v-if="currentLog" :inner-html.prop="currentLog | formatStr" />
                     </b-container>
                 </b-tab>
                 <b-tab title="Decoder" @click="getLog('decoder')">
@@ -63,7 +63,10 @@ export default {
         return {
             logName: 'ffplayout',
             currentLog: null,
-            listDate: this.$dayjs().format('YYYY-MM-DD')
+            listDate: this.$dayjs().format('YYYY-MM-DD'),
+            scrollOP: {
+                wheelSpeed: 5
+            }
         }
     },
 
@@ -96,18 +99,45 @@ export default {
 </script>
 
 <style>
+.ps__thumb-x {
+    display: inherit !important;
+}
+
 .col-auto {
     width: 122px;
+    height: 100%;
+}
+
+.card-container {
+    height: calc(100% - 90px);
+    width: 100%;
+}
+
+.card-container > div, .tab-content > .active {
+    height: 100%;
+    width: 100%;
 }
 
 .tab-content {
-    max-width: calc(100% - 122px);
+    width: calc(100% - 122px);
+    height: 100%;
 }
 
 .log-container {
     background: #1d2024;
-    max-width: 95%;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
     padding: 1em;
+    overflow: hidden
+}
+
+.scroll-container {
+    width: 100%;
+    height: 100%;
+    font-family: monospace;
+    font-size: 13px;
+    white-space: pre;
 }
 
 .log-content {

pages/media.vue

@@ -31,7 +31,7 @@
                 <splitpanes class="browser-row default-theme pane-row">
                     <pane min-size="20" size="24">
                         <div class="browser-div">
-                            <perfect-scrollbar>
+                            <perfect-scrollbar :options="scrollOP">
                                 <b-list-group class="folder-list">
                                     <b-list-group-item
                                         v-for="folder in folderTree.tree[1]"
@@ -67,7 +67,7 @@
                             color="#ff9c36"
                         />
                         <div class="browser-div">
-                            <perfect-scrollbar>
+                            <perfect-scrollbar :options="scrollOP">
                                 <b-list-group class="files-list">
                                     <b-list-group-item
                                         v-for="file in folderTree.tree[2]"
@@ -289,7 +289,10 @@ export default {
             overallProgress: 0,
             currentProgress: 0,
             cancelTokenSource: this.$axios.CancelToken.source(),
-            lastPath: ''
+            lastPath: '',
+            scrollOP: {
+                suppressScrollX: true
+            }
         }
     },