🐛 Site > File tree > Prevent name wrapping

lib/project.js

@@ -261,6 +261,7 @@ class ClassName extends AnotherClass
         this.files.createVersion('./test/icons/test.c', 'Test icon')
         this.files.createVersion('./test/icons/test.h', 'Test icon')
         this.files.createVersion('./test/icons/test.pwet', 'Test icon')
+        this.files.createVersion('./test/and that\'s a very long file with a very long name so I can test how scrolling works', 'Test icon')
 
         // Adding file versions
         let counting = 0

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

@@ -1,8 +1,10 @@
 .name
     display block
+    white-space nowrap
 
     .text
         padding-left 12px
+        padding-right 6px
 
         .letter
             opacity 0.6
@@ -17,7 +19,7 @@
         top -1px
         padding-left 3px
         padding-right 3px
-        margin-left 4px
+        margin-left 0px
         border-radius: 6px;
         color #fff
         font-size 8px

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

@@ -1,11 +1,13 @@
 .name
     display block
+    white-space nowrap
 
     .icon
         opacity 0.6
 
     .text
         padding-left 12px
+        padding-right 6px
 
         .letter
             opacity 0.6