💄 Site > File tree > Improve scroll

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

@@ -3,10 +3,11 @@
     top 120px
     bottom 0px
     left 0
-    overflow-y scroll
+    width 290px
     background #26283B
     color #ffffff
     user-select none
+    overflow hidden
 
 .search
     display block
@@ -18,6 +19,13 @@
     line-height 40px
     border-bottom 1px solid rgba(255, 255, 255, 0.2)
 
+.inner
+    position absolute
+    top 40px
+    bottom 0
+    left 0
+    overflow-y scroll
+
 .content
     padding-bottom 60px
     line-height 28px

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

@@ -1,5 +1,7 @@
-<div class="file-tree" :style="`right: calc(100vw - 290px - ${scrollbarWidth}px);`">
+<div class="file-tree">
     <input class="search" type="text" v-model="searchValue" placeholder="Search for files ...">
-    <files-tree-folder class="content" v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
+    <div class="inner" :style="`right: -${scrollbarWidth}px;`">
+        <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>

site/src/components/project/template.html

@@ -1,7 +1,4 @@
 <div>
-    {{ project.name }}
-    <a :href="downloadUrl" download>Download</a>
-
     <files-tree></files-tree>
     <file v-if="file" :content="file"></file>
     <landing v-if="!file"></landing>