fix: Make table header sticky

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

package.json

@@ -37,6 +37,7 @@
     "@tiptap/extension-task-list": "^2.2.2",
     "@tiptap/starter-kit": "^2.2.2",
     "@tiptap/vue-2": "^2.2.2",
+    "@vueuse/core": "^10.7.2",
     "debounce": "^1.2.1",
     "vue": "^2.7.16",
     "vue-material-design-icons": "^5.3.0",

src/App.vue

@@ -15,6 +15,7 @@ import { NcContent, NcAppContent } from '@nextcloud/vue'
 import Navigation from './modules/navigation/sections/Navigation.vue'
 import { mapState } from 'vuex'
 import Sidebar from './modules/sidebar/sections/Sidebar.vue'
+import { useResizeObserver } from '@vueuse/core'
 
 export default {
 	name: 'App',
@@ -51,6 +52,7 @@ export default {
 		await this.$store.dispatch('loadTablesFromBE')
 		await this.$store.dispatch('loadViewsSharedWithMeFromBE')
 		this.routing(this.$router.currentRoute)
+		this.observeAppContent()
 	},
 	methods: {
 		routing(currentRoute) {
@@ -84,6 +86,13 @@ export default {
 			}
 			window.document.title = newTitle
 		},
+		observeAppContent() {
+			useResizeObserver(document.getElementById('app-content-vue'), (entries) => {
+				const entry = entries[0]
+				const { width } = entry.contentRect
+				document.documentElement.style.setProperty('--app-content-width', `${width}px`)
+			})
+		},
 	},
 }
 </script>

src/modules/main/sections/Dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="table-dashboard">
 		<div class="row space-T space-B">
 			<div class="col-4 space-L">
 				<h2>
@@ -264,6 +264,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.table-dashboard {
+	display: sticky;
+	left: 0;
+}
+
 .table {
 	border-collapse: collapse;
 	width: 670px;

src/modules/main/sections/DataTable.vue

@@ -231,6 +231,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 
+	.row {
+		width: auto;
+	}
+
 	h2 {
 		display: inline-flex;
 		align-items: center;

src/modules/main/sections/ElementDescription.vue

@@ -79,6 +79,7 @@ export default {
 }
 
 .row.first-row {
+	width: var(--app-content-width, auto);
 	position: sticky;
 	left: 0;
 	top: 0;

src/modules/navigation/sections/Navigation.vue

@@ -1,8 +1,6 @@
 <template>
 	<NcAppNavigation>
 		<template #list>
-			<div v-if="tablesLoading" class="icon-loading" />
-
 			<div class="filter-box">
 				<NcTextField :value.sync="filterString"
 					:label="t('tables', 'Filter tables')"
@@ -13,6 +11,8 @@
 				</NcTextField>
 			</div>
 
+			<div v-if="tablesLoading" class="icon-loading" />
+
 			<ul v-if="!tablesLoading">
 				<NcAppNavigationCaption :name="t('tables', 'My tables')">
 					<template #actions>

src/pages/Table.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="main-table-view">
 		<MainWrapper :element="activeTable" :is-view="false" />
 		<MainModals />
 	</div>
@@ -38,3 +38,9 @@ export default {
 	},
 }
 </script>
+<style lang="scss">
+.main-table-view {
+	width: max-content;
+	min-width: var(--app-content-width, 100%);
+}
+</style>

src/pages/View.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="main-view-view">
 		<MainWrapper :element="activeView" :is-view="true" />
 		<MainModals />
 	</div>
@@ -33,3 +33,9 @@ export default {
 	},
 }
 </script>
+<style lang="scss">
+.main-view-view {
+	width: max-content;
+	min-width: var(--app-content-width, 100%);
+}
+</style>

src/shared/components/ncTable/NcTable.vue

@@ -249,8 +249,9 @@ export default {
 
 <style scoped lang="scss">
 .options.row {
+	width: var(--app-content-width, auto);
 	position: sticky;
-	top: 52px;
+	top: 60px;
 	left: 0;
 	z-index: 15;
 	background-color: var(--color-main-background-translucent);

src/shared/components/ncTable/sections/CustomTable.vue

@@ -284,12 +284,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-.container {
-	//margin: auto;
-	overflow-x: auto;
-}
-
 :deep(table) {
 	position: relative;
 	border-collapse: collapse;
@@ -325,25 +319,20 @@ export default {
 		background-color: var(--color-main-background);
 	}
 
-	thead tr {
-		// text-align: left;
-
-		th {
-			vertical-align: middle;
-			color: var(--color-text-maxcontrast);
-
-			// sticky head
-			// position: -webkit-sticky;
-			// position: sticky;
-			// top: 80px;
-			box-shadow: inset 0 -1px 0 var(--color-border); // use box-shadow instead of border to be compatible with sticky heads
-			background-color: var(--color-main-background-translucent);
-			z-index: 5;
-
-			// always fit to title
-			// min-width: max-content;
+	thead {
+		position: sticky;
+		top: 112px;
+		z-index: 6;
+
+		tr {
+			th {
+				vertical-align: middle;
+				color: var(--color-text-maxcontrast);
+				box-shadow: inset 0 -1px 0 var(--color-border); // use box-shadow instead of border to be compatible with sticky heads
+				background-color: var(--color-main-background-translucent);
+				z-index: 5;
+			}
 		}
-
 	}
 
 	tbody {