diff --git a/package-lock.json b/package-lock.json
index fdba77839..106c56caa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,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",
@@ -3226,94 +3227,6 @@
         "npm": "^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/@nextcloud/dialogs/node_modules/@types/web-bluetooth": {
-      "version": "0.0.20",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
-      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
-    },
-    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/core": {
-      "version": "10.7.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.2.tgz",
-      "integrity": "sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "10.7.2",
-        "@vueuse/shared": "10.7.2",
-        "vue-demi": ">=0.14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/metadata": {
-      "version": "10.7.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.2.tgz",
-      "integrity": "sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/shared": {
-      "version": "10.7.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.2.tgz",
-      "integrity": "sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==",
-      "dependencies": {
-        "vue-demi": ">=0.14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@nextcloud/dialogs/node_modules/buffer": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@@ -5413,9 +5326,9 @@
       "integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g=="
     },
     "node_modules/@types/web-bluetooth": {
-      "version": "0.0.17",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
-      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
     "node_modules/@types/ws": {
       "version": "8.5.5",
@@ -5884,6 +5797,33 @@
         "vue-demi": ">=0.14.5"
       }
     },
+    "node_modules/@vueuse/components/node_modules/@types/web-bluetooth": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
+      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
+    },
+    "node_modules/@vueuse/components/node_modules/@vueuse/core": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.3.0.tgz",
+      "integrity": "sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.17",
+        "@vueuse/metadata": "10.3.0",
+        "@vueuse/shared": "10.3.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/components/node_modules/@vueuse/metadata": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.3.0.tgz",
+      "integrity": "sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@vueuse/components/node_modules/vue-demi": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
@@ -5910,23 +5850,34 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.3.0.tgz",
-      "integrity": "sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==",
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.2.tgz",
+      "integrity": "sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==",
       "dependencies": {
-        "@types/web-bluetooth": "^0.0.17",
-        "@vueuse/metadata": "10.3.0",
-        "@vueuse/shared": "10.3.0",
-        "vue-demi": ">=0.14.5"
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.7.2",
+        "@vueuse/shared": "10.7.2",
+        "vue-demi": ">=0.14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.2.tgz",
+      "integrity": "sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==",
+      "dependencies": {
+        "vue-demi": ">=0.14.6"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
-      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -5949,9 +5900,9 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.3.0.tgz",
-      "integrity": "sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==",
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.2.tgz",
+      "integrity": "sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
diff --git a/package.json b/package.json
index 97dcb6b8d..ed6e08910 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index 40b2fe25e..383b2b884 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/modules/main/sections/Dashboard.vue b/src/modules/main/sections/Dashboard.vue
index 8ac08c765..12024ea1b 100644
--- a/src/modules/main/sections/Dashboard.vue
+++ b/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;
diff --git a/src/modules/main/sections/DataTable.vue b/src/modules/main/sections/DataTable.vue
index 79b9b6ac0..8b901ff7a 100644
--- a/src/modules/main/sections/DataTable.vue
+++ b/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;
diff --git a/src/modules/main/sections/ElementDescription.vue b/src/modules/main/sections/ElementDescription.vue
index ca70d1272..9aaa44d7a 100644
--- a/src/modules/main/sections/ElementDescription.vue
+++ b/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;
diff --git a/src/modules/navigation/sections/Navigation.vue b/src/modules/navigation/sections/Navigation.vue
index f6309ff13..ebb62720d 100644
--- a/src/modules/navigation/sections/Navigation.vue
+++ b/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>
diff --git a/src/pages/Table.vue b/src/pages/Table.vue
index ce8febe90..70a7069c7 100644
--- a/src/pages/Table.vue
+++ b/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>
diff --git a/src/pages/View.vue b/src/pages/View.vue
index fc4ee8827..535b4932a 100644
--- a/src/pages/View.vue
+++ b/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>
diff --git a/src/shared/components/ncTable/NcTable.vue b/src/shared/components/ncTable/NcTable.vue
index 973821815..b3e557d0a 100644
--- a/src/shared/components/ncTable/NcTable.vue
+++ b/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);
diff --git a/src/shared/components/ncTable/sections/CustomTable.vue b/src/shared/components/ncTable/sections/CustomTable.vue
index a36cbefaf..3f6396c51 100644
--- a/src/shared/components/ncTable/sections/CustomTable.vue
+++ b/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 {
diff --git a/src/views/ContentReferenceWidget.vue b/src/views/ContentReferenceWidget.vue
index 25637a41b..6c8284687 100644
--- a/src/views/ContentReferenceWidget.vue
+++ b/src/views/ContentReferenceWidget.vue
@@ -20,7 +20,7 @@
   -->
 
 <template>
-	<div v-if="richObject">
+	<div v-if="richObject" class="tables-content-widget">
 		<h2>{{ richObject.emoji }}&nbsp;{{ richObject.title }}</h2>
 		<div class="nc-table">
 			<NcTable
@@ -43,6 +43,7 @@
 
 <script>
 import NcTable from '../shared/components/ncTable/NcTable.vue'
+import { useResizeObserver } from '@vueuse/core'
 
 export default {
 
@@ -65,27 +66,47 @@ export default {
 		},
 	},
 
-	computed: {
+	mounted() {
+		useResizeObserver(this.$el, (entries) => {
+			const entry = entries[0]
+			const { width } = entry.contentRect
+			this.$el.style.setProperty('--widget-content-width', `${width}px`)
+		})
 	},
 }
 </script>
 <style lang="scss" scoped>
 
-	div {
-		width: 100%;
-	}
+	.tables-content-widget {
+		max-height: 50vh;
+		overflow: scroll;
 
-	h2 {
-		padding-left: calc(var(--default-grid-baseline) * 3);
-		padding-top: calc(var(--default-grid-baseline) * 3);
-	}
+		h2 {
+			position: sticky;
+			top: 0;
+			left: 0;
+			width: calc(var(--widget-content-width, 100%) - 24px);
+			height: 36px;
+			z-index: 1;
+			background-color: var(--color-main-background);
+			margin: 0 !important;
+			padding: calc(var(--default-grid-baseline) * 3);
+		}
 
-	.nc-table {
-		margin-left: calc(var(--default-grid-baseline) * 2);
-	}
+		.nc-table {
+			margin-left: calc(var(--default-grid-baseline) * 2);
+			width: max-content;
+			margin-top: -1px;
+		}
+
+		& :deep(.options.row) {
+			width: calc(var(--widget-content-width, 100%) - 12px);
+		}
+
+		& :deep(thead) {
+			top: 104px;
+		}
 
-	.nc-table :deep(.container) {
-		max-height: 50vh;
 	}
 
 </style>