💄 Site > File tree > Add style

site/src/components/files-tree/index.vue

@@ -1,3 +1,3 @@
 <template src="./template.html"></template>
 <script src="./script.js"></script>
-<style src="./style.styl" lang="stylus"></style>
+<style src="./style.styl" lang="stylus" scoped></style>

site/src/components/files-tree/script.js

@@ -23,6 +23,11 @@ export default
         files()
         {
             return this.$store.state.files.tree
+        },
+
+        scrollbarWidth()
+        {
+            return this.$store.state.scrollbarWidth
         }
     },
 

site/src/components/files-tree/style.styl

@@ -3,6 +3,10 @@
     top 120px
     bottom 0px
     left 0
-    width 290px
     overflow-y scroll
-    background #26283B
+    background #26283B
+    color #ffffff
+
+.content
+    line-height 28px
+    font-size 14px

site/src/components/files-tree/template.html

@@ -1,6 +1,6 @@
-<div class="file-tree">
+<div class="file-tree" :style="`right: calc(100vw - 290px - ${scrollbarWidth}px);`">
     <input type="text" v-model="searchValue">
-    <files-tree-folder v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
+    <files-tree-folder class="content" v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
     <div>
          <a href="#" class="all-read" @click.prevent="onAllReadClick">Mark all as read</a>
     </div>