Ensure floating view will not scroll top after route change (#19394) (#23920)

* Ensure floating view will not scroll top after route change (#19394)

* Fix format

* Add changeset

.changeset/curly-baboons-confess.md

@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Ensure floating view will not scroll top after route change

app/src/modules/activity/index.ts

@@ -17,6 +17,9 @@ export default defineModule({
 				{
 					name: 'activity-item',
 					path: ':primaryKey',
+					meta: {
+						isFloatingView: true,
+					},
 					components: {
 						detail: ActivityItem,
 					},

app/src/modules/files/index.ts

@@ -16,6 +16,9 @@ export default defineModule({
 				{
 					path: '+',
 					name: 'add-file',
+					meta: {
+						isFloatingView: true,
+					},
 					components: {
 						addNew: AddNew,
 					},

app/src/modules/insights/index.ts

@@ -29,6 +29,9 @@ export default defineModule({
 					name: 'panel-detail',
 					path: ':panelKey',
 					props: true,
+					meta: {
+						isFloatingView: true,
+					},
 					components: {
 						detail: InsightsPanelConfiguration,
 					},

app/src/modules/settings/index.ts

@@ -69,6 +69,9 @@ export default defineModule({
 						{
 							path: '+',
 							name: 'settings-add-new',
+							meta: {
+								isFloatingView: true,
+							},
 							components: {
 								add: NewCollection,
 							},
@@ -106,6 +109,9 @@ export default defineModule({
 						{
 							path: ':field',
 							name: 'settings-fields-field',
+							meta: {
+								isFloatingView: true,
+							},
 							components: {
 								field: FieldDetail,
 							},
@@ -126,6 +132,9 @@ export default defineModule({
 						{
 							path: '+',
 							name: 'settings-add-new-policy',
+							meta: {
+								isFloatingView: true,
+							},
 							components: {
 								add: NewPolicy,
 							},
@@ -155,6 +164,9 @@ export default defineModule({
 							components: {
 								add: NewRole,
 							},
+							meta: {
+								isFloatingView: true,
+							},
 						},
 					],
 				},
@@ -234,6 +246,9 @@ export default defineModule({
 						{
 							name: 'settings-flows-operation',
 							path: ':operationId',
+							meta: {
+								isFloatingView: true,
+							},
 							component: FlowOperationDetail,
 							props: true,
 						},

app/src/views/private/private-view.vue

@@ -230,8 +230,11 @@ const appearance = computed(() => {
 
 provide('main-element', contentEl);
 
-router.afterEach(() => {
-	contentEl.value?.scrollTo({ top: 0 });
+router.afterEach((to, from) => {
+	if (!to.meta.isFloatingView && !from.meta.isFloatingView) {
+		contentEl.value?.scrollTo({ top: 0 });
+	}
+
 	fullScreen.value = false;
 });