diff --git a/module/doc/css/tablecontents.css b/module/doc/css/tablecontents.css
index 31f33b0d60..e5b0394075 100644
--- a/module/doc/css/tablecontents.css
+++ b/module/doc/css/tablecontents.css
@@ -7,6 +7,7 @@
 .w-full {width: 100%;}
 .overflow-x-auto {overflow-x: auto;}
 .overflow-auto {overflow: auto;}
+.overflow-hidden {overflow: hidden;}
 #mainContent {padding-top: 0; padding-bottom: 0; height: calc(100vh - 125px);}
 #mainContent #createDropdown {display: inline-block;}
 #mainContent #createDropdown ul {position: absolute;}
@@ -57,10 +58,12 @@ li.drag-shadow ul {display: none!important;}
 /* css for tree */
 .file-tree { padding: 10px;}
 .file-tree  a {height: 30px;}
+.file-tree  a.icon-show {padding-right: 10px;}
 .flex-between {display: flex; align-items: center; justify-content: space-between;}
 .flex-center {display: flex; align-items: center; justify-content: center;}
 .tree li>.list-toggle {top: 4px;}
 .input-tree {width: 120px;}
+.tree-icon {position: absolute; right: 0;}
 
 /* css for sidebar */
 .sidebar-toggle {flex: 0 0 16px;}
diff --git a/module/doc/js/tablecontents.js b/module/doc/js/tablecontents.js
index 90d5c309ac..9bc5333077 100644
--- a/module/doc/js/tablecontents.js
+++ b/module/doc/js/tablecontents.js
@@ -25,9 +25,9 @@ $(function()
         {
             var libClass = ['lib', 'annex', 'api', 'execution'].indexOf(item.type) !== -1 ? 'lib' : '';
             var hasChild = item.children ? !!item.children.length : false;
-            var $item = '<a href="###" data-has-children="' + hasChild + '" title="' + item.name + '" data-id="' + item.id + '" class="' + libClass + '" data-type="' + item.type + '">';
-            $item += '<div class="text h-full w-full flex-between">' + item.name;
-            $item += '<i class="icon icon-drop icon-ellipsis-v float-r hidden" data-isCatalogue="' + (item.type ? false : true) + '"></i>';
+            var $item = '<a href="###" style="position: relative" data-has-children="' + hasChild + '" title="' + item.name + '" data-id="' + item.id + '" class="' + libClass + '" data-type="' + item.type + '">';
+            $item += '<div class="text h-full w-full flex-between overflow-hidden">' + item.name;
+            $item += '<i class="icon icon-drop icon-ellipsis-v hidden tree-icon" data-isCatalogue="' + (item.type ? false : true) + '"></i>';
             $item += '</div>';
             $item += '</a>';
             $li.append($item);
@@ -39,14 +39,18 @@ $(function()
 
     $('#fileTree').on('mousemove', 'a', function()
     {
-        if($(this).data('type') == 'annex') return;
+        var $this = $(this);
+        if($this.data('type') == 'annex') return;
         var libClass = '.libDorpdown';
-        if(!$(this).hasClass('lib')) libClass = '.moduleDorpdown';
+        if(!$this.hasClass('lib')) libClass = '.moduleDorpdown';
         if($(libClass).find('li').length == 0) return false;
-        $(this).find('.icon').removeClass('hidden');
+        $this.find('.icon').removeClass('hidden');
+        $this.addClass('icon-show');
     }).on('mouseout', 'a', function()
     {
-        $(this).find('.icon').addClass('hidden');
+        var $this = $(this);
+        $this.find('.icon').addClass('hidden');
+        $this.removeClass('icon-show');
     }).on('click', 'a', function(e)
     {
         var isLib    = $(this).hasClass('lib');
diff --git a/module/doc/view/tablecontents.html.php b/module/doc/view/tablecontents.html.php
index 40fcc35c96..844dcd6027 100644
--- a/module/doc/view/tablecontents.html.php
+++ b/module/doc/view/tablecontents.html.php
@@ -144,9 +144,9 @@
 </div>
 <div class="hidden" data-id="aTreeModal">
   <a href="###" data-has-children="false" title="%name%" data-id="%id%">
-    <div class="text h-full w-full flex-between">
+    <div class="text h-full w-full overflow-hidden" style="position: relative;">
       %name%
-      <i class="icon icon-drop icon-ellipsis-v float-r hidden" data-iscatalogue="true"></i>
+      <i class="icon icon-drop icon-ellipsis-v hidden file-drop-icon" data-iscatalogue="true"></i>
     </div>
   </a>
 </div>