improve ellipsis of filename for different screen sizes

2 files changed, 22 insertions, 19 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 02b2c26ecf3..330c5c1bc46 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -292,40 +292,46 @@ table td.filename .nametext .innernametext {
 
 @media only screen and (min-width: 1366px) {
 	table td.filename .nametext .innernametext {
-		max-width: 650px;
+		max-width: 760px;
+	}
+
+	table tr:hover td.filename .nametext .innernametext {
+		max-width: 480px;
 	}
 }
 
 @media only screen and (min-width: 1200px) and (max-width: 1366px) {
 	table td.filename .nametext .innernametext {
-		max-width: 450px;
+		max-width: 600px;
 	}
-}
 
-@media only screen and (min-width: 1000px) and (max-width: 1200px) {
-	table td.filename .nametext .innernametext {
-		max-width: 270px;
+	table tr:hover td.filename .nametext .innernametext {
+		max-width: 320px;
 	}
 }
 
-@media only screen and (min-width: 900px) and (max-width: 1000px) {
+@media only screen and (min-width: 1000px) and (max-width: 1200px) {
 	table td.filename .nametext .innernametext {
-		max-width: 210px;
+		max-width: 400px;
 	}
-}
 
-@media only screen and (min-width: 768px) and (max-width: 900px) {
-	table td.filename .nametext span:not(.extension) {
-		max-width: 200px;
+	table tr:hover td.filename .nametext .innernametext {
+		max-width: 120px;
 	}
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (min-width: 768px) and (max-width: 1000px) {
 	table td.filename .nametext .innernametext {
-		max-width: 400px;
+		max-width: 320px;
+	}
+
+	table tr:hover td.filename .nametext .innernametext {
+		max-width: 40px;
 	}
 }
 
+/* for smaller resolutions - see mobile.css */
+
 table td.filename .uploadtext { font-weight:normal; margin-left:8px; }
 table td.filename form { font-size:14px; margin-left:48px; margin-right:48px; }
 
diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css
index 3ad7d634838..5e7d3875536 100644
--- a/apps/files/css/mobile.css
+++ b/apps/files/css/mobile.css
@@ -50,11 +50,8 @@ table td.filename .nametext {
 }
 
 /* ellipsis on file names */
-.nametext {
-	width: 60%;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+table td.filename .nametext .innernametext {
+	max-width: 75%;
 }
 
 /* proper notification area for multi line messages */