Fixes the delete icon not appearing on certain resolutions.

Fixes #7539

Also fixes overlap of text on mobile devices by resorting to just icons on lower resolutions.

Signed-off-by: Abijeet <abijeetpatro@gmail.com>

2 files changed, 15 insertions, 1 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 8e81bf84b4f..dce5008ad19 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -542,6 +542,10 @@ a.action > img {
 	vertical-align: text-bottom;
 	margin-bottom: -1px;
 }
+/* hide the delete icon in name column normal resolutions */
+table th#headerName .selectedActions .delete-selected {
+	display: none;
+}
 
 #fileList td a {
 	a.action {
diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss
index 10fa29e7a38..5653d5841bc 100644
--- a/apps/files/css/mobile.scss
+++ b/apps/files/css/mobile.scss
@@ -12,7 +12,6 @@
 	min-width: initial !important;
 }
 
-/* hide size and date columns */
 table th#headerSize,
 table td.filesize,
 table th#headerDate,
@@ -52,6 +51,11 @@ table td.filename .nametext .innernametext {
 	max-width: calc(100% - 175px) !important;
 }
 
+/* show the delete icon in name column in lower resolutions */
+table th#headerName .selectedActions .delete-selected {
+	display: inline;
+}
+
 /* proper notification area for multi line messages */
 #notification-container {
 	display: flex;
@@ -75,3 +79,9 @@ table.dragshadow {
 }
 
 }
+@media only screen and (max-width: 480px)  {
+	/* Only show icons */
+	table th .selectedActions a span:not(.icon) {
+		display: none;
+	}
+}