Merge pull request #3499 from overleaf/hb-react-file-tree-extra-space-on-root

Add a gap at the bottom of the file tree for dropping to root

GitOrigin-RevId: b17c19ba1c4fb4cc345975902e2557d0cdd5a0bd

services/web/frontend/js/features/file-tree/components/file-tree-folder-list.js

@@ -10,7 +10,8 @@ function FileTreeFolderList({
   docs,
   files,
   classes = {},
-  dropRef = null
+  dropRef = null,
+  children
 }) {
   const docsAndFiles = [...docs, ...files]
 
@@ -43,6 +44,7 @@ function FileTreeFolderList({
           />
         )
       })}
+      {children}
     </ul>
   )
 }
@@ -54,7 +56,8 @@ FileTreeFolderList.propTypes = {
   classes: PropTypes.exact({
     root: PropTypes.string
   }),
-  dropRef: PropTypes.func
+  dropRef: PropTypes.func,
+  children: PropTypes.node
 }
 
 // the collator used to sort files docs and folders in the tree. Use english as

services/web/frontend/js/features/file-tree/components/file-tree-root.js

@@ -70,7 +70,9 @@ function FileTreeRootFolder() {
         classes={{ root: 'file-tree-list' }}
         dropRef={dropRef}
         isOver={isOver}
-      />
+      >
+        <li className="bottom-buffer" />
+      </FileTreeFolderList>
     </>
   )
 }

services/web/frontend/stylesheets/app/editor/file-tree.less

@@ -96,6 +96,10 @@
       margin-left: (@line-height-computed / 2);
     }
 
+    li.bottom-buffer {
+      min-height: @line-height-computed;
+    }
+
     li {
       line-height: @file-tree-line-height;
       position: relative;