Make sure the whole file list header is sticky and properly stacks to other headers

Signed-off-by: Julius Härtl <jus@bitgrid.net>

1 files changed, 14 insertions, 24 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 1c7b1183628..0d8b4824291 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -65,28 +65,24 @@
 	#emptycontent:not(.hidden) ~ & {
 		display: none;
 	}
+	// floating header
+	thead {
+		position: -webkit-sticky;
+		position: sticky;
+		@include position('sticky');
+		// header + breadcrumbs
+		top: $header-height;
+		// under breadcrumbs, over file list
+		z-index: 60;
+		display: block;
+		background-color: var(--color-main-background-translucent);
+	}
 }
 
 #filestable.hidden {
 	display: none;
 }
 
-@media only screen and (min-width: $breakpoint-mobile + 1) {
-	#filestable {
-		// floating header
-		thead {
-			position: -webkit-sticky;
-			position: sticky;
-			// header + breadcrumbs
-			top: $header-height;
-			// under breadcrumbs, over file list
-			z-index: 55;
-			display: block;
-			background-color: var(--color-main-background-translucent);
-		}
-	}
-}
-
 /* fit app list view heights */
 .app-files #app-content > .viewcontainer {
 	min-height: 0%;
@@ -289,14 +285,8 @@ table th.column-last, table td.column-last {
 	max-width: 130px;
 }
 
-/* Multiselect bar */
-table.multiselect thead {
-	@include position('sticky');
+#app-content-files thead {
 	top: 94px;
-	z-index: 55;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-	left: $navigation-width;
 }
 
 table.multiselect thead th {
@@ -309,7 +299,7 @@ table.multiselect thead th {
 }
 
 table.multiselect #headerName {
-	position: sticky;
+	position: relative;
 	width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */
 }
 table.multiselect #modified {