Ellipcises too long filenames

2 files changed, 16 insertions, 1 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 0392733f4ca..7a0b7a89e89 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -140,6 +140,9 @@ span.extension {
 	-moz-transition: opacity 300ms;
 	-o-transition: opacity 300ms;
 	transition: opacity 300ms;
+	position: relative;
+	top:-5px;
+	left:-2px;
 }
 tr:hover span.extension {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
@@ -281,6 +284,14 @@ table td.filename .nametext {
 	text-overflow: ellipsis;
 	max-width: 800px;
 }
+
+table td.filename .nametext span:not(.extension) {
+	max-width: 300px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	position: relative;
+	display: inline-block;
+}
 table td.filename .uploadtext { font-weight:normal; margin-left:8px; }
 table td.filename form { font-size:14px; margin-left:48px; margin-right:48px; }
 
@@ -401,6 +412,8 @@ a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; }
 
 #fileList a.action[data-action="Rename"] {
 	padding:18px 14px !important;
+	position: relative;
+	top: -6px;
 }
 #fileList tr:hover a.action, #fileList a.action.permanent {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 4229988b171..7466e4f3769 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -596,7 +596,9 @@
 				basename = name;
 				extension = false;
 			}
-			var nameSpan=$('<span></span>').addClass('nametext').text(basename);
+			var nameSpan=$('<span></span>').addClass('nametext');
+			var innernameSpan = $('<span></span>').text(basename);
+			nameSpan.append(innernameSpan);
 			linkElem.append(nameSpan);
 			if (extension) {
 				nameSpan.append($('<span></span>').addClass('extension').text(extension));