diff --git a/module/doc/css/showfiles.ui.css b/module/doc/css/showfiles.ui.css
index 6daa80c894..cc4cc72c82 100644
--- a/module/doc/css/showfiles.ui.css
+++ b/module/doc/css/showfiles.ui.css
@@ -3,3 +3,4 @@
 .actions-menu .searchBox .input-control-suffix {padding-right: 0;}
 .actions-menu .btn-group .switchBtn {padding: 6px 10px;}
 #table-doc-showfiles [data-type='title'] .dtable-cell-html img {max-height: 36px;}
+#table-doc-showfiles [data-type='title'] .file-name {vertical-align: text-bottom;}
diff --git a/module/doc/js/showfiles.ui.js b/module/doc/js/showfiles.ui.js
index 50d2d5e90b..f8d79dbd6e 100644
--- a/module/doc/js/showfiles.ui.js
+++ b/module/doc/js/showfiles.ui.js
@@ -12,9 +12,11 @@ window.renderCell = function(result, {col, row})
 {
     if(col.name == 'title')
     {
-        let titleHtml = '';
+        let titleHtml  = '';
+        let titleClass = '';
         if(imageExtensionList.includes(row.data.extension))
         {
+            titleClass = 'file-name';
             titleHtml += `<div style='display: inline-block'><img width='16' src='${row.data.webPath}' data-extension='${row.data.extension}' data-id='${row.data.id}' data-width='${row.data.imageWidth}'/></div>`;
         }
         else
@@ -22,7 +24,7 @@ window.renderCell = function(result, {col, row})
             titleHtml += row.data.fileIcon;
         }
 
-        titleHtml += `<span class='ml-1'>${row.data.fileName}</span>`;
+        titleHtml += `<span class='ml-1 ${titleClass}'>${row.data.fileName}</span>`;
 
         result[0] = {html: titleHtml};
         return result;